[SingleAnswerButtons] Re-factor and fix selected/un-selected display …

…bug.
BIDMCDigitalPsychiatry · Nov 28, 2024 · c5171cd · c5171cd
1 parent 9d85180
commit c5171cd
Showing 1 changed file with 35 additions and 14 deletions.
diff --git a/src/components/pwa/SingleAnswerButtons.tsx b/src/components/pwa/SingleAnswerButtons.tsx
@@ -3,6 +3,29 @@ import { Box, Button, Grid, Typography } from '@mui/material';
 import { isEmpty } from '../../helpers';
 import * as Icons from '@mui/icons-material';
 
+const UnselectedButton = ({ label, handleClick }) => {
+  return (
+    <Button variant='contained' onClick={handleClick} size='large' fullWidth sx={{ fontSize: 24, minHeight: 64 }}>
+      {label}
+    </Button>
+  );
+};
+
+const SelectedButton = ({ label, handleClick }) => {
+  return (
+    <Button
+      startIcon={<Icons.Check />}
+      variant='contained'
+      onClick={handleClick}
+      size='large'
+      fullWidth
+      sx={{ backgroundColor: 'primary.dark', fontSize: 24, minHeight: 64 }}
+    >
+      {label}
+    </Button>
+  );
+};
+
 const SingleAnswerButtons = ({ value, onChange, onNext, options = [] }) => {
   const handleClick = React.useCallback(
     value => () => {
@@ -18,20 +41,18 @@ const SingleAnswerButtons = ({ value, onChange, onNext, options = [] }) => {
         <Typography variant='caption'>Select an option to continue:</Typography>
       </Box>
       <Grid container spacing={2}>
-        {options.map((o, idx) => (
-          <Grid item xs={12} key={idx}>
-            <Button
-              startIcon={value === o ? <Icons.Check /> : undefined}
-              variant='contained'
-              onClick={handleClick(o)}
-              size='large'
-              fullWidth
-              sx={{ backgroundColor: value === o ? 'primary.dark' : undefined, fontSize: 24, minHeight: 64 }}
-            >
-              {!isEmpty(o?.label) ? o.label : o}
-            </Button>
-          </Grid>
-        ))}
+        {options.map((o, idx) => {
+          const label = !isEmpty(o?.label) ? o.label : o;
+          return (
+            <Grid item xs={12} key={`${label}-${idx}`}>
+              {value === o ? (
+                <SelectedButton label={!isEmpty(o?.label) ? o.label : o} handleClick={handleClick(o)} />
+              ) : (
+                <UnselectedButton label={label} handleClick={handleClick(o)} />
+              )}
+            </Grid>
+          );
+        })}
       </Grid>
     </>
   );