8842627401

Committed 26 Apr 2024 03:20AM UTC coverage: 39.836% (-0.4%) from 40.225%

Build # 8842627401

Build Type

push

github

Committed by

web-flow

Commit Message

Ah.more translations (#350)

* legend translations

* working: need to do add sites forms

* more translations

* locations message

* upload image tweaks

Run Details

232 of 876 branches covered (26.48%)

Branch coverage included in aggregate %.

3 of 23 new or added lines in 13 files covered. (13.04%)

16 existing lines in 6 files now uncovered.

1079 of 2415 relevant lines covered (44.68%)

11.21 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

19.57

/src/components/mapComponents/mapPageComponents/siteLegend/index.tsx

import React, { useState } from 'react';
import { ReactNode } from 'react';
import styled from 'styled-components';
import { Button, Checkbox, CheckboxOptionType, Typography } from 'antd';
import {
  WHITE,
  LIGHT_GREY,
  BLACK,
  LIGHT_GREEN,
  MID_GREEN,
} from '../../../../utils/colors';
import { MapViews, SiteOption } from '../../ducks/types';
import { FullWidthSpace, InlineImage, Flex } from '../../../themedComponents';
import { CheckboxValueType } from 'antd/es/checkbox/Group';
import SlideDown from '../../../slideDown';
import MapLegend from '../../mapLegend';
import { LinkButton } from '../../../linkButton';
import {
  ALL_SITES_VISIBLE_STATUS,
  ALL_SITES_VISIBLE_OWNER,
  DESKTOP_SLIDE_HEIGHT,
  SITE_OPTIONS_OWNER,
  MOBILE_SLIDE_HEIGHT,
} from '../../constants';
import { site } from '../../../../constants';
import { useSelector } from 'react-redux';
import { isLoggedIn } from '../../../../auth/ducks/selectors';
import LandingContent from '../../../landingContent';
import { useTranslation } from 'react-i18next';
import { n } from '../../../../utils/stringFormat';
import { Routes } from '../../../../App';
import { C4CState } from '../../../../store';
import { TFunction } from 'i18next';

// mobile is a transient prop that isn't passed to the DOM - passes tsc now
const LegendContainer = styled.div<{ $mobile: boolean }>`
  min-width: ${(props) => (props.$mobile ? '100%' : '300px')};
  width: 15vw;
  position: absolute;
  z-index: 2;
  bottom: 0;
  background: ${WHITE};
`;

const StyledCheckbox = styled(Checkbox.Group)<{ $mobile: boolean }>`
  background: ${WHITE};
  ${(props) => props.$mobile && 'display: flex; flex-wrap: wrap; gap: 20px;'}
`;

const ToggleTextButton = styled(Button)`
  padding: 0px;
`;

const LoginButton = styled(LinkButton)`
  width: 120px;
  height: 50px;
  background: ${WHITE};
  border-color: ${LIGHT_GREY};
  color: ${BLACK};
`;

const SignUpButton = styled(LinkButton)`
  width: 120px;
  height: 50px;
  background-color: ${LIGHT_GREEN};
  border-color: ${LIGHT_GREEN};
`;

const MobileTitle = styled(Typography.Paragraph)`
  color: ${MID_GREEN};
  font-size: 25px;
  font-weight: bold;
  line-height: 30px;
`;

const MobileParagraph = styled(Typography.Paragraph)`
  font-size: 15px;
`;

const treeSpan = (
  treeIcon: string,
  translationKey: string,
  t: TFunction,
): ReactNode => {
  return (
    <FullWidthSpace direction={'horizontal'} size={'small'}>
      <InlineImage src={treeIcon} preview={false} />
      <Typography.Text>
        {t(`mapLegend.statusOptions.${translationKey}`)}
      </Typography.Text>
    </FullWidthSpace>
  );
};

interface SiteLegendProps {
  readonly onCheck: (values: CheckboxValueType[]) => void;
  readonly siteOptions: SiteOption[];
  readonly mobile: boolean;
}

const SiteLegend: React.FC<SiteLegendProps> = ({
  onCheck,
  siteOptions,
  mobile,
}) => {
  const { t } = useTranslation(n(site, ['landing', 'maps', 'forms']), {
    nsMode: 'fallback',
  });

  const [statusOptions, setStatusOptions] = useState<CheckboxValueType[]>(
    ALL_SITES_VISIBLE_STATUS,
  );
  const [ownerOptions, setOwnerOptions] = useState<CheckboxValueType[]>(
    ALL_SITES_VISIBLE_OWNER,
  );
  const [showOwnerOptions, setShowOwnerOptions] = useState<boolean>(false);

  const statusCheckboxOptions: CheckboxOptionType[] = siteOptions.map(
    (option) => {
      return {
        label: treeSpan(option.image, option.translationKey, t),
        value: option.value,
      };
    },
  );

  const ownerCheckboxOptions: CheckboxOptionType[] = SITE_OPTIONS_OWNER.map(
    (option) => {
      return {
        label: t(`mapLegend.ownerOptions.${option.translationKey}`),
        value: option.value,
      };
    },
  );

  const icons: string[] = siteOptions.map((option) => option.image);

  const toggleShowOwnerOptions = () => setShowOwnerOptions(!showOwnerOptions);

  const loggedIn: boolean = useSelector((state: C4CState) =>
    isLoggedIn(state.authenticationState.tokens),
  );

  return (
    <LegendContainer $mobile={mobile}>
      <SlideDown
        // default open if on desktop, else closed on mobile
        defaultOpen={!mobile}
        slideHeight={mobile ? DESKTOP_SLIDE_HEIGHT : MOBILE_SLIDE_HEIGHT}
      >
        <Flex
          gap="5px"
          flexDirection="column"
          alignItems="start"
          width={mobile ? '90%' : '100%'}
          margin="auto"
        >
          {mobile && (
            <>
              <MobileTitle>{t('sidebar.title')}</MobileTitle>
              <MobileParagraph>
                <LandingContent />
              </MobileParagraph>
            </>
          )}
          <MapLegend view={MapViews.TREES} icons={icons} />
          <Typography.Text strong>{t('mapLegend.statusShow')}</Typography.Text>
          <StyledCheckbox
            $mobile={mobile}
            options={statusCheckboxOptions}
            value={statusOptions}
            onChange={(values: CheckboxValueType[]) => {
              setStatusOptions(values);
              onCheck([...ownerOptions, ...values]);
            }}
          />
          <ToggleTextButton type={'link'} onClick={toggleShowOwnerOptions}>
            {showOwnerOptions
              ? t('mapLegend.toggleHideOwner')
              : t('mapLegend.toggleShowOwner')}
          </ToggleTextButton>
          {showOwnerOptions && (
            <>
              <Typography.Text strong>
                {t('mapLegend.ownerShow')}
              </Typography.Text>
              <StyledCheckbox
                $mobile={mobile}
                options={ownerCheckboxOptions}
                value={ownerOptions}
                onChange={(values: CheckboxValueType[]) => {
                  setOwnerOptions(values);
                  onCheck([...statusOptions, ...values]);
                }}
              />
            </>
          )}
          {mobile && !loggedIn && (
            <Flex margin="15px 0px" justifyContent="center">
              <div>
                <LoginButton
                  type="primary"
                  htmlType="submit"
                  size="large"
                  to={Routes.LOGIN}
                >
                  {t('log_in')}
                </LoginButton>
              </div>
              <div>
                <SignUpButton
                  type="primary"
                  htmlType="submit"
                  size="large"
                  to={Routes.SIGNUP}
                >
                  {t('sign_up')}
                </SignUpButton>
              </div>
            </Flex>
          )}
        </Flex>
      </SlideDown>
    </LegendContainer>
  );
};

export default SiteLegend;

1	import React, { useState } from 'react';
2	import { ReactNode } from 'react';
3	import styled from 'styled-components';
4	import { Button, Checkbox, CheckboxOptionType, Typography } from 'antd';
5	import {
6	WHITE,
7	LIGHT_GREY,
8	BLACK,
9	LIGHT_GREEN,
10	MID_GREEN,
11	} from '../../../../utils/colors';
12	import { MapViews, SiteOption } from '../../ducks/types';
13	import { FullWidthSpace, InlineImage, Flex } from '../../../themedComponents';
14	import { CheckboxValueType } from 'antd/es/checkbox/Group';
15	import SlideDown from '../../../slideDown';
16	import MapLegend from '../../mapLegend';
17	import { LinkButton } from '../../../linkButton';
18	import {
19	ALL_SITES_VISIBLE_STATUS,
20	ALL_SITES_VISIBLE_OWNER,
21	DESKTOP_SLIDE_HEIGHT,
22	SITE_OPTIONS_OWNER,
23	MOBILE_SLIDE_HEIGHT,
24	} from '../../constants';
25	import { site } from '../../../../constants';
26	import { useSelector } from 'react-redux';
27	import { isLoggedIn } from '../../../../auth/ducks/selectors';
28	import LandingContent from '../../../landingContent';
29	import { useTranslation } from 'react-i18next';
30	import { n } from '../../../../utils/stringFormat';
31	import { Routes } from '../../../../App';
32	import { C4CState } from '../../../../store';
33	import { TFunction } from 'i18next';
34
35	// mobile is a transient prop that isn't passed to the DOM - passes tsc now
36	const LegendContainer = styled.div<{ $mobile: boolean }>`	12✔
37	min-width: ${(props) => (props.$mobile ? '100%' : '300px')};	×
38	width: 15vw;
39	position: absolute;
40	z-index: 2;
41	bottom: 0;
42	background: ${WHITE};
43	`;
44
45	const StyledCheckbox = styled(Checkbox.Group)<{ $mobile: boolean }>`	12✔
46	background: ${WHITE};
47	${(props) => props.$mobile && 'display: flex; flex-wrap: wrap; gap: 20px;'}	×
48	`;
49
50	const ToggleTextButton = styled(Button)`	12✔
51	padding: 0px;
52	`;
53
54	const LoginButton = styled(LinkButton)`	12✔
55	width: 120px;
56	height: 50px;
57	background: ${WHITE};
58	border-color: ${LIGHT_GREY};
59	color: ${BLACK};
60	`;
61
62	const SignUpButton = styled(LinkButton)`	12✔
63	width: 120px;
64	height: 50px;
65	background-color: ${LIGHT_GREEN};
66	border-color: ${LIGHT_GREEN};
67	`;
68
69	const MobileTitle = styled(Typography.Paragraph)`	12✔
70	color: ${MID_GREEN};
71	font-size: 25px;
72	font-weight: bold;
73	line-height: 30px;
74	`;
75
76	const MobileParagraph = styled(Typography.Paragraph)`	12✔
77	font-size: 15px;
78	`;
79
80	const treeSpan = (	12✔
81	treeIcon: string,
82	translationKey: string,
83	t: TFunction,
84	): ReactNode => {
UNCOV 85	return (	×
86	<FullWidthSpace direction={'horizontal'} size={'small'}>
87	<InlineImage src={treeIcon} preview={false} />
88	<Typography.Text>
89	{t(`mapLegend.statusOptions.${translationKey}`)}
90	</Typography.Text>
91	</FullWidthSpace>
92	);
93	};
94
95	interface SiteLegendProps {
96	readonly onCheck: (values: CheckboxValueType[]) => void;
97	readonly siteOptions: SiteOption[];
98	readonly mobile: boolean;
99	}
100
101	const SiteLegend: React.FC<SiteLegendProps> = ({	12✔
102	onCheck,
103	siteOptions,
104	mobile,
105	}) => {
NEW 106	const { t } = useTranslation(n(site, ['landing', 'maps', 'forms']), {	×
107	nsMode: 'fallback',
108	});
109
110	const [statusOptions, setStatusOptions] = useState<CheckboxValueType[]>(	×
111	ALL_SITES_VISIBLE_STATUS,
112	);
113	const [ownerOptions, setOwnerOptions] = useState<CheckboxValueType[]>(	×
114	ALL_SITES_VISIBLE_OWNER,
115	);
116	const [showOwnerOptions, setShowOwnerOptions] = useState<boolean>(false);	×
117
NEW 118	const statusCheckboxOptions: CheckboxOptionType[] = siteOptions.map(	×
119	(option) => {
NEW 120	return {	×
121	label: treeSpan(option.image, option.translationKey, t),
122	value: option.value,
123	};
124	},
125	);
126
NEW 127	const ownerCheckboxOptions: CheckboxOptionType[] = SITE_OPTIONS_OWNER.map(	×
128	(option) => {
NEW 129	return {	×
130	label: t(`mapLegend.ownerOptions.${option.translationKey}`),
131	value: option.value,
132	};
133	},
134	);
135
136	const icons: string[] = siteOptions.map((option) => option.image);	×
137
138	const toggleShowOwnerOptions = () => setShowOwnerOptions(!showOwnerOptions);	×
139
140	const loggedIn: boolean = useSelector((state: C4CState) =>	×
141	isLoggedIn(state.authenticationState.tokens),	×
142	);
143
144	return (	×
145	<LegendContainer $mobile={mobile}>
146	<SlideDown
147	// default open if on desktop, else closed on mobile
148	defaultOpen={!mobile}
149	slideHeight={mobile ? DESKTOP_SLIDE_HEIGHT : MOBILE_SLIDE_HEIGHT}	×
150	>
151	<Flex
152	gap="5px"
153	flexDirection="column"
154	alignItems="start"
155	width={mobile ? '90%' : '100%'}	×
156	margin="auto"
157	>
158	{mobile && (	×
159	<>
160	<MobileTitle>{t('sidebar.title')}</MobileTitle>
161	<MobileParagraph>
162	<LandingContent />
163	</MobileParagraph>
164	</>
165	)}
166	<MapLegend view={MapViews.TREES} icons={icons} />
167	<Typography.Text strong>{t('mapLegend.statusShow')}</Typography.Text>
168	<StyledCheckbox
169	$mobile={mobile}
170	options={statusCheckboxOptions}
171	value={statusOptions}
172	onChange={(values: CheckboxValueType[]) => {
173	setStatusOptions(values);	×
174	onCheck([...ownerOptions, ...values]);	×
175	}}
176	/>
177	<ToggleTextButton type={'link'} onClick={toggleShowOwnerOptions}>
178	{showOwnerOptions	×
179	? t('mapLegend.toggleHideOwner')
180	: t('mapLegend.toggleShowOwner')}
181	</ToggleTextButton>
182	{showOwnerOptions && (	×
183	<>
184	<Typography.Text strong>
185	{t('mapLegend.ownerShow')}
186	</Typography.Text>
187	<StyledCheckbox
188	$mobile={mobile}
189	options={ownerCheckboxOptions}
190	value={ownerOptions}
191	onChange={(values: CheckboxValueType[]) => {
192	setOwnerOptions(values);	×
193	onCheck([...statusOptions, ...values]);	×
194	}}
195	/>
196	</>
197	)}
198	{mobile && !loggedIn && (	×
199	<Flex margin="15px 0px" justifyContent="center">
200	<div>
201	<LoginButton
202	type="primary"
203	htmlType="submit"
204	size="large"
205	to={Routes.LOGIN}
206	>
207	{t('log_in')}
208	</LoginButton>
209	</div>
210	<div>
211	<SignUpButton
212	type="primary"
213	htmlType="submit"
214	size="large"
215	to={Routes.SIGNUP}
216	>
217	{t('sign_up')}
218	</SignUpButton>
219	</div>
220	</Flex>
221	)}
222	</Flex>
223	</SlideDown>
224	</LegendContainer>
225	);
226	};
227
228	export default SiteLegend;

Code-4-Community / speak-for-the-trees-frontend / 8842627401

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous