Add BVSelect und fix review select

Berlin-Vegan · Oct 14, 2024 · def82e7 · def82e7
1 parent 178e4a0
commit def82e7
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 55 deletions.
diff --git a/frontend/src/components/LocationFormBase/booleanAttributesFormPart.tsx b/frontend/src/components/LocationFormBase/booleanAttributesFormPart.tsx
@@ -4,20 +4,54 @@ import MenuItem from '@mui/material/MenuItem';
 import { Field } from 'formik';
 import { map } from 'ramda';
 
-import FormControlNoYesUnknown from './fields/FormControlNoYesUnknown';
 import { buildLabel } from './utils';
+import BVSelect from '@components/LocationFormBase/fields/BVSelect';
+import { styled } from '@mui/material/styles';
+import { TextField } from 'formik-mui';
+
+interface IMappingDict {
+  [id: string]: boolean | null;
+}
+
+const UNKNOWN = 'unknown';
+
+const mappingDict: IMappingDict = {
+  yes: true,
+  no: false,
+  [UNKNOWN]: null,
+};
+
+export const stringToBoolean = (value: string | unknown): boolean | null => {
+  if (typeof value == 'string') {
+    return Object.prototype.hasOwnProperty.call(mappingDict, value) ? mappingDict[value] : null;
+  }
+  return null;
+};
+
+export const booleanToString = (value: boolean | null | unknown): string => {
+  if (typeof value !== 'boolean') {
+    return UNKNOWN;
+  }
+  for (const key in mappingDict) {
+    if (mappingDict[key] === value) return key;
+  }
+  return UNKNOWN;
+};
 
 const yesNoUnknownInputs = (attr: string) => (
   <Grid container item direction="column" md={3} key={attr}>
     <Field
-      component={FormControlNoYesUnknown}
+      component={BVSelect}
       name={`attributes.${attr}`}
       label={buildLabel(attr)}
       variant="standard"
+      inputLabel={{ sx: { textTransform: 'capitalize' } }}
       inputProps={{
         name: `attributes.${attr}`,
         id: `attributes.${attr}-select`,
       }}
+      readValue={booleanToString}
+      setValue={stringToBoolean}
     >
       <MenuItem value="yes">Yes</MenuItem>
       <MenuItem value="no">No</MenuItem>

diff --git a/...rmBase/fields/FormControlNoYesUnknown.tsx → ...ents/LocationFormBase/fields/BVSelect.tsx b/...rmBase/fields/FormControlNoYesUnknown.tsx → ...ents/LocationFormBase/fields/BVSelect.tsx
@@ -1,50 +1,33 @@
 import React from 'react';
 
-import { FormHelperText } from '@mui/material';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
-import MuiSelect, { SelectProps as MuiSelectProps } from '@mui/material/Select';
+import MuiSelect from '@mui/material/Select';
+import { FormHelperText } from '@mui/material';
+import { SelectProps as MuiSelectProps } from '@mui/material/Select';
 
 import { getIn } from 'formik';
 import { SelectProps } from 'formik-mui';
 
-interface IMappingDict {
-  [id: string]: boolean | null;
+export interface BVSelectProps extends SelectProps {
+  readValue: (value: unknown) => unknown;
+  setValue: (value: unknown) => unknown;
 }
 
-const UNKNOWN = 'unknown';
-
-const mappingDict: IMappingDict = {
-  yes: true,
-  no: false,
-  [UNKNOWN]: null,
-};
-
-export const stringToBoolean = (value: string): boolean | null =>
-  Object.prototype.hasOwnProperty.call(mappingDict, value) ? mappingDict[value] : null;
-
-export const booleanToString = (value: boolean | null | unknown): string => {
-  if (typeof value !== 'boolean') {
-    return UNKNOWN;
-  }
-  for (const key in mappingDict) {
-    if (mappingDict[key] === value) return key;
-  }
-  return UNKNOWN;
-};
-
 // modified copy of https://github.com/stackworx/formik-mui/blob/main/packages/formik-mui/src/Select.tsx#L18
-const BVfieldToSelect = ({
-  disabled,
-  field: { onBlur: _onBlur, onChange: fieldOnChange, ...field },
-  form: { isSubmitting, touched, errors, setFieldTouched, setFieldValue },
-  onClose,
-  ...props
-}: Omit<
-  SelectProps,
-  'formControl' | 'formHelperText' | 'inputLabel'
+const BVFieldToSelect = (
+  {
+    readValue,
+    setValue,
+    disabled,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    field: { onBlur: _onBlur, onChange: fieldOnChange, ...field },
+    form: { isSubmitting, touched, errors, setFieldTouched, setFieldValue },
+    onClose,
+    ...props
+  }: Omit<BVSelectProps, 'formControl' | 'formHelperText' | 'inputLabel'>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
->): MuiSelectProps & { formError: any } => {
+): MuiSelectProps & { formError: any } => {
   const fieldError = getIn(errors, field.name);
   const showError = getIn(touched, field.name) && !!fieldError;
 
@@ -69,43 +52,34 @@ const BVfieldToSelect = ({
         if (dataset && dataset.value) {
           // out-of-sync issue since November 2019: https://github.com/formium/formik/issues/2059#issuecomment-890613538
           // without the await, formik validates with the former value
-          await setFieldValue(field.name, stringToBoolean(dataset.value), false);
+          await setFieldValue(field.name, setValue(dataset.value), false);
         }
         setFieldTouched(field.name, true, true);
       }),
     ...field,
-    value: booleanToString(field.value),
+    value: readValue(field.value),
     ...props,
   };
 };
 
-const FormControlNoYesUnknown = ({
-  formControl,
-  inputLabel,
-  formHelperText,
-  ...selectProps
-}: SelectProps) => {
-  const { error, formError, disabled, ...selectFieldProps } = BVfieldToSelect(selectProps);
+const BVSelect = ({ formControl, inputLabel, formHelperText, ...selectProps }: BVSelectProps) => {
+  const { error, formError, disabled, ...selectFieldProps } = BVFieldToSelect(selectProps);
   const { children: formHelperTextChildren, ...formHelperTextProps } = formHelperText || {};
   const shouldDisplayFormHelperText = error || formHelperTextChildren;
 
   return (
     <FormControl disabled={disabled} error={error} {...formControl}>
-      <InputLabel
-        id={selectFieldProps.labelId}
-        {...inputLabel}
-        sx={{ textTransform: 'capitalize' }}
-      >
+      <InputLabel id={selectFieldProps.labelId} {...inputLabel}>
         {selectFieldProps.label}
       </InputLabel>
       <MuiSelect {...selectFieldProps} />
       {shouldDisplayFormHelperText && (
         <FormHelperText {...formHelperTextProps}>
-          {' '}
           {error ? formError : formHelperTextChildren}
         </FormHelperText>
       )}
     </FormControl>
   );
 };
-export default FormControlNoYesUnknown;
+
+export default BVSelect;
diff --git a/frontend/src/components/LocationFormBase/fields/ReviewFormControl.tsx b/frontend/src/components/LocationFormBase/fields/ReviewFormControl.tsx
@@ -14,6 +14,7 @@ import { authorizedFetch } from '@/utils/fetch';
 import { buildReviewListUrl } from '@/utils/utils';
 
 import { styles } from './styles';
+import BVSelect from '@components/LocationFormBase/fields/BVSelect';
 
 const reviewItem = (reviewId: number, url: string) => (
   <MenuItem value={reviewId} key={reviewId}>
@@ -25,17 +26,35 @@ type ReviewFieldType = {
   reviews: Review[];
 };
 
+const stringToReviewValue = (value: string | unknown) => {
+  if (value === '') return null;
+
+  if (typeof value == 'string') {
+    return parseInt(value);
+  }
+  return null;
+};
+
+const reviewValueToString = (value: number | null | unknown) => {
+  if (typeof value !== 'number') {
+    return '';
+  }
+  return value.toString();
+};
+
 const ReviewField = ({ reviews }: ReviewFieldType) => (
   <FormControl fullWidth={true}>
     <Field
-      component={Select}
+      component={BVSelect}
       name="review"
       label="Review"
       variant="standard"
       inputProps={{
         id: 'review-select',
         name: 'review',
       }}
+      readValue={reviewValueToString}
+      setValue={stringToReviewValue}
     >
       <MenuItem value="" key="">
         -------

diff --git a/frontend/src/components/LocationFormBase/positiveIntegerAttributesFormPart.tsx b/frontend/src/components/LocationFormBase/positiveIntegerAttributesFormPart.tsx
@@ -5,11 +5,16 @@ import { TextField } from 'formik-mui';
 import { map } from 'ramda';
 
 import { buildLabel } from './utils';
+import { styled } from '@mui/material/styles';
+
+const CapitalizeTextField = styled(TextField)({
+  '& label': { textTransform: 'capitalize' },
+});
 
 const positiveIntegerInput = (attr: string) => (
   <Grid container item direction="column" md={3} key={attr}>
     <Field
-      component={TextField}
+      component={CapitalizeTextField}
       type="number"
       label={buildLabel(attr)}
       name={`attributes.${attr}`}