pr suggestions

beyondessential · Nov 12, 2024 · e25ccc8 · e25ccc8
1 parent 8d4fa8e
commit e25ccc8
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 29 deletions.
diff --git a/packages/datatrak-web/src/components/Icons/ArrowLeftIcon.tsx b/packages/datatrak-web/src/components/Icons/ArrowLeftIcon.tsx
@@ -5,7 +5,7 @@
 import React from 'react';
 import { SvgIcon, SvgIconProps } from '@material-ui/core';
 
-export const ArrowLeftIcon = (props: SvgIconProps) => {
+export const ArrowLeftIcon = ({ htmlColor = 'currentColor', ...props }: SvgIconProps) => {
   return (
     <SvgIcon
       width="20"
@@ -17,7 +17,7 @@ export const ArrowLeftIcon = (props: SvgIconProps) => {
     >
       <path
         d="M4.28954 9.99976C4.28954 9.68727 4.41516 9.38789 4.63954 9.16727L13.5883 0.343591C14.0545 -0.114531 14.8095 -0.114531 15.2752 0.343592C15.7408 0.802963 15.7408 1.54983 15.2752 2.00733L7.16891 9.99977L15.2758 17.991C15.7414 18.4509 15.7414 19.1966 15.2758 19.6559C14.8102 20.1147 14.0552 20.1147 13.5889 19.6559L4.63891 10.8323C4.41516 10.6104 4.28954 10.311 4.28954 9.99976Z"
-        fill="currentColor"
+        fill={htmlColor}
       />
     </SvgIcon>
   );

diff --git a/packages/datatrak-web/src/components/Icons/ShareIcon.tsx b/packages/datatrak-web/src/components/Icons/ShareIcon.tsx
@@ -5,7 +5,7 @@
 import React from 'react';
 import { SvgIcon, SvgIconProps } from '@material-ui/core';
 
-export const ShareIcon = (props: SvgIconProps) => {
+export const ShareIcon = ({ htmlColor = 'currentColor', ...props }: SvgIconProps) => {
   return (
     <SvgIcon
       {...props}
@@ -19,7 +19,7 @@ export const ShareIcon = (props: SvgIconProps) => {
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M22.5 16.0312C22.966 16.0312 23.3437 16.409 23.3437 16.875L23.3437 20.25C23.3437 21.9586 21.9586 23.3437 20.25 23.3437L6.75 23.3437C5.04137 23.3437 3.65625 21.9586 3.65625 20.25L3.65625 16.875C3.65625 16.409 4.03401 16.0312 4.5 16.0312C4.96599 16.0312 5.34375 16.409 5.34375 16.875L5.34375 20.25C5.34375 21.0267 5.97335 21.6562 6.75 21.6562L20.25 21.6562C21.0266 21.6562 21.6562 21.0267 21.6562 20.25L21.6562 16.875C21.6562 16.409 22.034 16.0312 22.5 16.0312ZM18.5966 9.59662C18.2671 9.92613 17.7329 9.92613 17.4034 9.59662L14.3438 6.53699L14.3437 18C14.3437 18.466 13.966 18.8437 13.5 18.8437C13.034 18.8437 12.6562 18.466 12.6562 18L12.6562 6.53699L9.59662 9.59662C9.26712 9.92613 8.73288 9.92613 8.40338 9.59662C8.07387 9.26712 8.07387 8.73288 8.40338 8.40338L12.9034 3.90338C13.0616 3.74514 13.2762 3.65625 13.5 3.65625C13.7238 3.65625 13.9384 3.74514 14.0966 3.90338L18.5966 8.40338C18.9261 8.73288 18.9261 9.26712 18.5966 9.59662Z"
-        fill="currentColor"
+        fill={htmlColor}
       />
     </SvgIcon>
   );

diff --git a/packages/datatrak-web/src/features/Survey/Components/CopySurveyUrlButton.tsx b/packages/datatrak-web/src/features/Survey/Components/CopySurveyUrlButton.tsx
@@ -8,8 +8,9 @@ import IconButton from '@material-ui/core/IconButton';
 import { useParams, generatePath } from 'react-router-dom';
 import { Tooltip } from '@tupaia/ui-components';
 import styled from 'styled-components';
+import { OptionsObject } from 'notistack';
 import { CopyIcon } from '../../../components';
-import { infoToast, useIsMobile } from '../../../utils';
+import { infoToast } from '../../../utils';
 import { ROUTES } from '../../../constants';
 
 const StyledTooltip = styled(Tooltip)`
@@ -30,9 +31,8 @@ const Button = styled(IconButton)`
   }
 `;
 
-export const useCopySurveyUrl = () => {
+export const useCopySurveyUrl = ({ toastOptions = {} }: { toastOptions: OptionsObject }) => {
   const params = useParams();
-  const isMobile = useIsMobile();
   const path = generatePath(ROUTES.SURVEY, params);
   const link = `${window.location.origin}${path}`;
 
@@ -41,17 +41,9 @@ export const useCopySurveyUrl = () => {
       navigator.clipboard.writeText(link);
       infoToast('Page URL copied to clipboard', {
         persist: false,
-        anchorOrigin: isMobile
-          ? {
-              horizontal: 'center',
-              vertical: 'bottom',
-            }
-          : {
-              vertical: 'top',
-              horizontal: 'right',
-            },
         TransitionProps: { appear: true },
         hideCloseButton: true,
+        ...toastOptions,
       });
     } catch (err) {
       console.warn('Failed to copy page url: ', err);
@@ -60,7 +52,14 @@ export const useCopySurveyUrl = () => {
 };
 
 export const CopySurveyUrlButton = () => {
-  const copyPageUrl = useCopySurveyUrl();
+  const copyPageUrl = useCopySurveyUrl({
+    toastOptions: {
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'right',
+      },
+    },
+  });
   return (
     <StyledTooltip
       title={

diff --git a/packages/datatrak-web/src/features/Survey/Components/MobileSurveyHeader.tsx b/packages/datatrak-web/src/features/Survey/Components/MobileSurveyHeader.tsx
@@ -7,7 +7,7 @@ import { useOutletContext, useParams } from 'react-router-dom';
 import { TopProgressBar } from '../../../components';
 import { useSurveyForm } from '../SurveyContext';
 import { StickyMobileHeader } from '../../../layout';
-import { SurveyDisplayName } from './SurveyDispalyName';
+import { SurveyDisplayName } from './SurveyDisplayName';
 
 type SurveyLayoutContextT = {
   isLoading: boolean;

diff --git a/packages/datatrak-web/src/features/Survey/Components/MobileSurveyMenu.tsx b/packages/datatrak-web/src/features/Survey/Components/MobileSurveyMenu.tsx
@@ -7,10 +7,10 @@ import React from 'react';
 import styled from 'styled-components';
 import { KeyboardArrowRight, FormatListBulleted } from '@material-ui/icons';
 import { IconButton as MuiIconButton } from '@material-ui/core';
+import { generatePath, useParams } from 'react-router-dom';
 import { useSurveyForm } from '../SurveyContext';
 import { Button as UIButton, CopyIcon, ShareIcon } from '../../../components';
 import { useCopySurveyUrl } from './CopySurveyUrlButton';
-import { generatePath, useParams } from 'react-router-dom';
 import { ROUTES } from '../../../constants';
 import { useSurvey } from '../../../api';
 
@@ -62,7 +62,14 @@ const useShare = () => {
 
 export const MobileSurveyMenu = () => {
   const { toggleSideMenu, isLast, isReviewScreen, isResubmitReviewScreen } = useSurveyForm();
-  const copyPageUrl = useCopySurveyUrl();
+  const copyPageUrl = useCopySurveyUrl({
+    toastOptions: {
+      anchorOrigin: {
+        horizontal: 'center',
+        vertical: 'bottom',
+      },
+    },
+  });
   const share = useShare();
 
   const getNextButtonText = () => {

diff --git a/...s/Survey/Components/SurveyDispalyName.tsx → ...s/Survey/Components/SurveyDisplayName.tsx b/...s/Survey/Components/SurveyDispalyName.tsx → ...s/Survey/Components/SurveyDisplayName.tsx
@@ -2,10 +2,10 @@
  * Tupaia
  *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-import { useParams } from 'react-router-dom';
-import { useEntityByCode, useSurvey } from '../../../api';
 import React from 'react';
+import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
+import { useEntityByCode, useSurvey } from '../../../api';
 
 const CountryName = styled.span`
   padding-left: 0.3rem;
@@ -19,7 +19,7 @@ export const SurveyDisplayName = () => {
   const { data: survey } = useSurvey(surveyCode);
   const { data: country } = useEntityByCode(countryCode!);
 
-  if (!survey?.name) return <></>;
+  if (!survey?.name) return null;
 
   const surveyName =
     survey.name.length > maxSurveyNameLength

diff --git a/packages/datatrak-web/src/features/Survey/Components/SurveySideMenu/SurveySideMenu.tsx b/packages/datatrak-web/src/features/Survey/Components/SurveySideMenu/SurveySideMenu.tsx
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { To, Link as RouterLink } from 'react-router-dom';
 import { useFormContext } from 'react-hook-form';
 import { Drawer as BaseDrawer, ListItem, List, ButtonProps } from '@material-ui/core';
@@ -13,7 +13,7 @@ import { useSurveyRouting } from '../../useSurveyRouting';
 import { SideMenuButton } from './SideMenuButton';
 import { useSurveyForm } from '../../SurveyContext';
 import { StickyMobileHeader, MobileHeaderWrapper } from '../../../../layout';
-import { SurveyDisplayName } from '../SurveyDispalyName';
+import { SurveyDisplayName } from '../SurveyDisplayName';
 
 export const SIDE_MENU_WIDTH = '20rem';
 
@@ -91,7 +91,11 @@ const SurveyMenuItem = styled(ListItem).attrs({
 
   ${({ theme }) => theme.breakpoints.down('md')} {
     border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
-    ${({ $active }) => $active && `background-color: #f4f9ff;`}
+    ${({ $active }) =>
+      $active &&
+      css`
+        background-color: #f4f9ff;
+      `}
     &:hover {
       background-color: initial;
     }

diff --git a/packages/datatrak-web/src/theme/theme.ts b/packages/datatrak-web/src/theme/theme.ts
@@ -24,7 +24,7 @@ export const theme = createMuiTheme({
     text: {
       primary: '#2E2F33', // dark text color
       secondary: '#898989', // light grey text color
-      hint: '#B8B8B8', // light grey text color
+      hint: '#B8B8B8',
     },
     success: {
       main: '#25D366',

diff --git a/packages/datatrak-web/src/utils/toast.ts b/packages/datatrak-web/src/utils/toast.ts
@@ -19,9 +19,12 @@ export const errorToast = (message: string) => {
   });
 };
 
-type Options = OptionsObject & { Icon?: OptionsObject['Icon']; hideCloseButton?: boolean };
+interface ToastOptions extends OptionsObject {
+  Icon?: OptionsObject['Icon'];
+  hideCloseButton?: boolean;
+}
 
-export const infoToast = (message: string, options?: Options) => {
+export const infoToast = (message: string, options?: ToastOptions) => {
   enqueueSnackbar(message, {
     variant: 'info',
     autoHideDuration: 2000,