feature/deseng674: Removed random number generator for unique React k…

…eys.
bcgov · Aug 15, 2024 · a363bf6 · a363bf6
1 parent 5b2d98c
commit a363bf6
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 21 deletions.
diff --git a/met-web/src/components/engagement/admin/view/AuthoringTab.tsx b/met-web/src/components/engagement/admin/view/AuthoringTab.tsx
@@ -8,7 +8,6 @@ import { MetLabel, MetHeader3 } from 'components/common';
 import { SystemMessage } from 'components/common/Layout/SystemMessage';
 import { When } from 'react-if';
 import { Grid, Link } from '@mui/material';
-import { generateUniqueKey } from 'utils';
 import { colors } from 'styles/Theme';
 
 const StatusCircle = (props: StatusCircleProps) => {
@@ -74,17 +73,29 @@ export const AuthoringTab = () => {
     const optionalSectionTitles = ['View Results', 'Subscribe', 'More Engagements'];
     const feedbackTitles = ['Survey', '3rd Party Feedback Method Link'];
     const defaultAuthoringValue: AuthoringValue = {
+        id: 0,
         title: '',
         link: '#',
         required: false,
         completed: false,
     };
-    const getAuthoringValues = (defaultValues: AuthoringValue, titles: string[], required: boolean): AuthoringValue[] =>
-        titles.map((title) => ({ ...defaultValues, title: title, required: required }));
+    const getAuthoringValues = (
+        defaultValues: AuthoringValue,
+        titles: string[],
+        required: boolean,
+        idOffset = 0,
+    ): AuthoringValue[] => {
+        return titles.map((title, index) => ({
+            ...defaultValues,
+            title: title,
+            required: required,
+            id: index + idOffset,
+        }));
+    };
     const mandatorySectionValues = getAuthoringValues(defaultAuthoringValue, mandatorySectionTitles, true);
-    const optionalSectionValues = getAuthoringValues(defaultAuthoringValue, optionalSectionTitles, false);
+    const optionalSectionValues = getAuthoringValues(defaultAuthoringValue, optionalSectionTitles, false, 100);
     const defaultSectionValues = [...mandatorySectionValues, ...optionalSectionValues];
-    const defaultFeedbackMethods = getAuthoringValues(defaultAuthoringValue, feedbackTitles, true);
+    const defaultFeedbackMethods = getAuthoringValues(defaultAuthoringValue, feedbackTitles, true, 1000);
 
     // Set useStates. When data is imported, it will be set with setSectionValues and setFeedbackMethods.
     const [sectionValues, setSectionValues] = useState(defaultSectionValues);
@@ -167,13 +178,13 @@ export const AuthoringTab = () => {
                 <Grid item xs={12} md={6}>
                     <MetLabel sx={metLabelStyles}>Required Sections</MetLabel>
                     {sectionValues.map(
-                        (section) => section.required && <AuthoringButton key={generateUniqueKey()} item={section} />,
+                        (section) => section.required && <AuthoringButton key={section.id} item={section} />,
                     )}
                 </Grid>
                 <Grid item xs={12} md={6}>
                     <MetLabel sx={metLabelStyles}>Optional Sections</MetLabel>
                     {sectionValues.map(
-                        (section) => !section.required && <AuthoringButton key={generateUniqueKey()} item={section} />,
+                        (section) => !section.required && <AuthoringButton key={section.id} item={section} />,
                     )}
                 </Grid>
             </Grid>
@@ -188,7 +199,7 @@ export const AuthoringTab = () => {
                 <MetLabel sx={metLabelStyles}>Feedback Methods</MetLabel>
                 <Grid item xs={12} sx={{ width: '100%' }}>
                     {feedbackMethods.map((method) => (
-                        <AuthoringButton item={method} key={generateUniqueKey()} />
+                        <AuthoringButton item={method} key={method.id} />
                     ))}
                 </Grid>
             </Grid>

diff --git a/met-web/src/components/engagement/admin/view/types.tsx b/met-web/src/components/engagement/admin/view/types.tsx
@@ -1,4 +1,5 @@
 export interface AuthoringValue {
+    id: number;
     title: string;
     link: string;
     required: boolean;

diff --git a/met-web/src/components/layout/SideNav/SideNav.tsx b/met-web/src/components/layout/SideNav/SideNav.tsx
@@ -27,7 +27,6 @@ import { BodyText } from 'components/common/Typography';
 import { USER_ROLES } from 'services/userService/constants';
 import UserService from 'services/userService';
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
-import { generateUniqueKey } from 'utils';
 
 export const routeItemStyle = {
     padding: 0,
@@ -61,14 +60,14 @@ const DrawerBox = ({ isMediumScreenOrLarger, setOpen }: DrawerBoxProps) => {
         return !route.authenticated || route.allowedRoles.some((role) => permissions.includes(role));
     });
 
-    const renderListItem = (route: Route, itemType: string) => {
+    const renderListItem = (route: Route, itemType: string, key: number) => {
         return (
             <>
                 <When condition={'Tenant Admin' === route.name}>
                     <Divider sx={{ backgroundColor: Palette.primary.light, height: '0.2rem' }} />
                 </When>
                 <ListItem
-                    key={generateUniqueKey()}
+                    key={key}
                     sx={{
                         ...routeItemStyle,
                         backgroundColor: 'selected' === itemType ? colors.surface.blue[10] : Palette.background.default,
@@ -140,8 +139,8 @@ const DrawerBox = ({ isMediumScreenOrLarger, setOpen }: DrawerBoxProps) => {
             }}
         >
             <List sx={{ pt: { xs: 4, md: 0 }, pb: '0' }}>
-                {allowedRoutes.map((route) =>
-                    renderListItem(route, currentBaseRoute === route.base ? 'selected' : 'other'),
+                {allowedRoutes.map((route, index) =>
+                    renderListItem(route, currentBaseRoute === route.base ? 'selected' : 'other', index),
                 )}
             </List>
         </Box>

diff --git a/met-web/src/utils/index.ts b/met-web/src/utils/index.ts
@@ -81,11 +81,3 @@ export const isDarkColor = (color: string, sensitivity = 0.5) => {
     const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
     return luminance < sensitivity;
 };
-
-export const generateUniqueKey = () => {
-    const randomSingleDigit = Math.random() * 10;
-    const randomDoubleDigit = Math.random() * 100;
-    const randomTripleDigit = Math.random() * 1000;
-    const now = Date.now();
-    return now + randomTripleDigit + randomDoubleDigit + randomSingleDigit;
-};