Merge pull request #350 from nowcommunity/fix-boolean-issues-with-radio-selectors

radio selector buttons now always have default values

backend/src/api-tests/locality/data.ts

@@ -88,7 +88,7 @@ export const newLocalityBasis = {
   hominin_skeletal_remains: false,
   bipedal_footprints: null, // radioselector on frontend is not set
   stone_tool_technology: '0', // radioselector on frontend is set to no
-  stone_tool_cut_marks_on_bones: '1', // radioselector on frontend is set to yes
+  stone_tool_cut_marks_on_bones: 'true', // radioselector on frontend is set to yes
   technological_mode_1: null,
   technological_mode_2: null,
   technological_mode_3: null,

backend/src/services/write/writeOperations/utils.ts

@@ -46,7 +46,8 @@ export const makeListRemoved = (list: Editable<Record<string, unknown>>[]) => {
 
 export const fixRadioSelection = (value: unknown) => {
   if (typeof value === 'string') {
-    return value === '1' ? true : false
+    return value === 'true' ? true : false
   }
+  if (typeof value === 'boolean') return value
   return false
 }

frontend/src/components/DetailView/Context/DetailContext.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-refresh/only-export-components */
 import { ReactNode, createContext, useState, JSX, useEffect, Context, useContext } from 'react'
-import { DropdownOption } from '../common/editingComponents'
+import { DropdownOption, DropdownOptionValue } from '../common/editingComponents'
 import { cloneDeep } from 'lodash-es'
 import { ValidationObject } from '@/validators/validator'
 import { EditDataType } from '@/backendTypes'
@@ -62,7 +62,12 @@ export type DetailContextType<T> = {
     name: string,
     disabled?: boolean
   ) => JSX.Element
-  radioSelection: (field: keyof EditDataType<T>, options: Array<DropdownOption | string>, name: string) => JSX.Element
+  radioSelection: (
+    field: keyof EditDataType<T>,
+    options: Array<DropdownOption | string>,
+    name: string,
+    defaultValue?: DropdownOptionValue
+  ) => JSX.Element
   validator: (editData: EditDataType<T>, field: keyof EditDataType<T>) => ValidationObject
 }
 

frontend/src/components/DetailView/DetailView.tsx

@@ -3,7 +3,13 @@ import { Box, Button, Paper, Stack, Tab, Tabs, useTheme } from '@mui/material'
 import EditIcon from '@mui/icons-material/Edit'
 import { useEffect, useState, JSX } from 'react'
 import { DetailContextProvider, ModeOptions, ModeType, makeEditData, modeOptionToMode } from './Context/DetailContext'
-import { DropdownOption, DropdownSelector, EditableTextField, RadioSelector } from './common/editingComponents'
+import {
+  DropdownOption,
+  DropdownOptionValue,
+  DropdownSelector,
+  EditableTextField,
+  RadioSelector,
+} from './common/editingComponents'
 import { DetailBrowser } from './DetailBrowser'
 import { StagingView } from './StagingView'
 import { ReturnButton, WriteButton } from './components'
@@ -89,9 +95,12 @@ export const DetailView = <T extends object>({
     if (deleteFunction) void deleteFunction()
   }
 
-  const radioSelection = (field: keyof EditDataType<T>, options: Array<DropdownOption | string>, name: string) => (
-    <RadioSelector field={field} options={options} name={name} />
-  )
+  const radioSelection = (
+    field: keyof EditDataType<T>,
+    options: Array<DropdownOption | string>,
+    name: string,
+    defaultValue?: DropdownOptionValue
+  ) => <RadioSelector field={field} options={options} name={name} defaultValue={defaultValue} />
 
   const bigTextField = (field: keyof EditDataType<T>) => <EditableTextField<T> field={field} type="text" big />
 

frontend/src/components/DetailView/common/editingComponents.tsx

@@ -33,7 +33,7 @@ const setDropdownOptionValue = (
   if (value && asNumber) {
     setValue(parseInt(value))
   } else if (value === 'true' || value === 'false') {
-    setValue(value === 'true')
+    setValue(String(value === 'true'))
   } else {
     setValue(value ?? '')
   }
@@ -59,7 +59,7 @@ export const DropdownSelector = <T extends object>({
         labelId={`${name}-multiselect-label`}
         label={name}
         id={`${name}-multiselect`}
-        value={editData[field] as string}
+        value={(editData[field] as string) || ''}
         onChange={(event: SelectChangeEvent) => {
           const setValue = (value: number | string | boolean) => setEditData({ ...editData, [field]: value })
           const asNumber = typeof options[0] === 'number'
@@ -126,12 +126,20 @@ export const RadioSelector = <T extends object>({
   options,
   name,
   field,
+  defaultValue,
 }: {
   options: Array<DropdownOption | DropdownOptionValue>
   name: string
   field: keyof EditDataType<T>
+  defaultValue?: DropdownOptionValue
 }) => {
   const { setEditData, editData } = useDetailContext<T>()
+  if (defaultValue === undefined) {
+    defaultValue = getValue(options[0])
+  }
+  if (editData[field] === null) {
+    setEditData({ ...editData, [field]: getValue(options[0]) })
+  }
   const editingComponent = (
     <FormControl>
       <RadioGroup
@@ -156,7 +164,6 @@ export const RadioSelector = <T extends object>({
       </RadioGroup>
     </FormControl>
   )
-
   return <MultiSelector<T> {...{ editingComponent, field, options }} />
 }
 

frontend/src/components/Locality/Tabs/ArchaeologyTab.tsx

@@ -49,8 +49,8 @@ export const ArchaeologyTab = () => {
       radioSelection(
         'stone_tool_cut_marks_on_bones',
         [
-          { value: '0', display: 'No' },
-          { value: '1', display: 'Yes' },
+          { value: 'false', display: 'No' },
+          { value: 'true', display: 'Yes' },
         ],
         'cut-marks'
       ),
@@ -60,8 +60,8 @@ export const ArchaeologyTab = () => {
       radioSelection(
         'bipedal_footprints',
         [
-          { value: '0', display: 'No' },
-          { value: '1', display: 'Yes' },
+          { value: 'false', display: 'No' },
+          { value: 'true', display: 'Yes' },
         ],
         'bipedal-footprints'
       ),
@@ -71,8 +71,8 @@ export const ArchaeologyTab = () => {
       radioSelection(
         'stone_tool_technology',
         [
-          { value: '0', display: 'No' },
-          { value: '1', display: 'Yes' },
+          { value: 'false', display: 'No' },
+          { value: 'true', display: 'Yes' },
         ],
         'stone-tool-technology'
       ),