Switch admin language select to radio buttons

UniversityOfHelsinkiCS · Mar 27, 2023 · 3b151a6 · 3b151a6
1 parent a701b2d
commit 3b151a6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 29 deletions.
diff --git a/src/client/components/Admin/EditResults/EditResults.tsx b/src/client/components/Admin/EditResults/EditResults.tsx
@@ -92,7 +92,7 @@ const EditResults = () => {
     setQuestionId(event.target.value)
   }
 
-  const [selectedLanguage, setSelectedLanguage] = useState<keyof Locales>('fi')
+  const [selectedLanguage, setSelectedLanguage] = useState<keyof Locales>('en')
   const handleLanguageChange = (event: SelectChangeEvent) => {
     setSelectedLanguage(event.target.value as keyof Locales)
   }
@@ -116,6 +116,10 @@ const EditResults = () => {
   return (
     <Box my={5} mx={10}>
       <Box mb={3} display="flex">
+        <LanguageSelect
+          selectedLanguage={selectedLanguage}
+          handleChange={handleLanguageChange}
+        />
         <DimensionSelect
           dimensionId={dimensionId}
           dimensions={dimensions}
@@ -126,10 +130,6 @@ const EditResults = () => {
           questions={survey.Questions}
           handleChange={handleQuestionChange}
         />
-        <LanguageSelect
-          selectedLanguage={selectedLanguage}
-          handleChange={handleLanguageChange}
-        />
       </Box>
       <Box flexWrap="wrap">
         {filteredResults.map((result) => (

diff --git a/src/client/components/Admin/EditResults/Select.tsx b/src/client/components/Admin/EditResults/Select.tsx
@@ -6,6 +6,10 @@ import {
   Select,
   SelectChangeEvent,
   MenuItem,
+  FormLabel,
+  RadioGroup,
+  FormControlLabel,
+  Radio,
 } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 
@@ -24,29 +28,21 @@ const allSelection: InfoType = {
 
 const languages = [
   {
-    id: 'fi',
+    id: 'en',
     label: {
-      fi: 'suomi',
-      sv: 'Finska',
-      en: 'Finnish',
+      fi: 'englanti',
+      sv: 'engelska',
+      en: 'English',
     },
   },
   {
     id: 'sv',
     label: {
       fi: 'ruotsi',
-      sv: 'Svenska',
+      sv: 'svenska',
       en: 'Swedish',
     },
   },
-  {
-    id: 'en',
-    label: {
-      fi: 'englanti',
-      sv: 'Engelska',
-      en: 'English',
-    },
-  },
 ]
 
 const sortDimensions = (dimensions: InfoType[], language: keyof Locales) => {
@@ -155,20 +151,20 @@ export const LanguageSelect = ({
   const language = i18n.language as keyof Locales
 
   return (
-    <Box width={300}>
+    <Box width={150}>
       <FormControl fullWidth>
-        <InputLabel>{t('admin:selectLanguage')}</InputLabel>
-        <Select
-          label={t('admin:selectLanguage')}
-          value={selectedLanguage}
-          onChange={handleChange}
-        >
+        <FormLabel>{t('admin:selectLanguage')}</FormLabel>
+        <RadioGroup defaultValue="en" onChange={handleChange}>
           {languages.map(({ id, label }) => (
-            <MenuItem key={id} value={id}>
-              {label[language]}
-            </MenuItem>
+            <FormControlLabel
+              key={id}
+              value={id}
+              control={<Radio />}
+              label={label[language]}
+              checked={selectedLanguage === id}
+            />
           ))}
-        </Select>
+        </RadioGroup>
       </FormControl>
     </Box>
   )