feat: added autocomplete for language codes (#117)

fix: added requested changes
openfoodfacts · Nov 15, 2022 · 7d8863a · 7d8863a
1 parent c19d270
commit 7d8863a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 36 deletions.
diff --git a/taxonomy-editor-frontend/src/pages/allentries/index.jsx b/taxonomy-editor-frontend/src/pages/allentries/index.jsx
@@ -1,4 +1,4 @@
-import { Typography, Snackbar, Alert, Box, TextField, Stack, Button, IconButton, FormControl, InputLabel } from "@mui/material";
+import { Typography, Snackbar, Alert, Box, TextField, Stack, Button, IconButton, FormControl, InputLabel, Autocomplete } from "@mui/material";
 import useFetch from "../../components/useFetch";
 import { Link, useParams } from "react-router-dom";
 import { useState, useEffect } from "react";
@@ -30,7 +30,7 @@ const Entry = ({setDisplayedPages}) => {
     const [nodeType, setNodeType] = useState('entry'); // Used for storing node type
     const [newLanguageCode, setNewLanguageCode] = useState(null); // Used for storing new Language Code
     const [newNode, setnewNode] = useState(null); // Used for storing canonical tag
-    const [isValidLanguageCode, setIsValidLanguageCode] = useState(false); // Used for validating a new LC
+    const isValidLanguageCode = ISO6391.validate(newLanguageCode) // Used for validating a new LC
     const [openAddDialog, setOpenAddDialog] = useState(false);
     const [openSuccessSnackbar, setOpenSuccessSnackbar] = useState(false);
 
@@ -181,16 +181,14 @@ const Entry = ({setDisplayedPages}) => {
                 </Stack>
                 <Stack direction="row" alignItems="center" sx={{m: 2}}>
                     <Typography>Main Language</Typography>
-                    <TextField
-                        onChange={(e) => { 
-                            setNewLanguageCode(e.target.value);
-                            setIsValidLanguageCode(ISO6391.validate(e.target.value));
+                    <Autocomplete
+                        options={ISO6391.getAllNames()}
+                        onChange={(e,language) => {
+                            if (!language) language = '';
+                            setNewLanguageCode(ISO6391.getCode(language));
                         }}
-                        label="Language Code"
-                        error={!isValidLanguageCode}
+                        renderInput={(params) => <TextField error={!isValidLanguageCode} {...params} label="Languages" />}
                         sx={{width : 150, ml: 5}}
-                        size="small"
-                        variant="outlined"
                     />
                 </Stack>
                 {

diff --git a/taxonomy-editor-frontend/src/pages/editentry/ListTranslations.jsx b/taxonomy-editor-frontend/src/pages/editentry/ListTranslations.jsx
@@ -1,4 +1,4 @@
-import { Typography, TextField, Stack, Button, IconButton, Box } from "@mui/material";
+import { Typography, TextField, Stack, Button, IconButton, Box, Autocomplete } from "@mui/material";
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
@@ -322,22 +322,22 @@ const ListTranslations = ({ nodeObject, setNodeObject }) => {
                 <DialogContentText>
                     Enter the two letter language code for the language to be added.
                 </DialogContentText>
-                <TextField
-                    autoFocus
-                    margin="dense"
-                    onKeyPress={(e) => { (e.keyCode === ENTER_KEYCODE) && isValidLanguageCode && handleAddTranslation(newLanguageCode, e) }} 
-                    onChange={(e) => { 
-                        setNewLanguageCode(e.target.value);
-                        const validateBool = ISO6391.validate(e.target.value);
-                        const ifDuplicateBool = renderedTranslations.some(el => (el.languageCode === e.target.value)) || 
-                                                nodeObject.main_language === e.target.value
-                        if (validateBool && !ifDuplicateBool) {setisValidLanguageCode(true)}
+                <Autocomplete
+                    sx={{mt: 2}}
+                    options={ISO6391.getAllNames()}
+                    onChange={(e,language) => {
+                        if (!language) language = '';
+                        setNewLanguageCode(ISO6391.getCode(language));
+                        const isValidLanguage = ISO6391.validate(ISO6391.getCode(language))
+                        const isDuplicateLanguage = renderedTranslations.some(el => (el.languageCode === ISO6391.getCode(language))) || 
+                                                nodeObject.main_language === ISO6391.getCode(language)
+                        if (isValidLanguage && !isDuplicateLanguage) {setisValidLanguageCode(true)}
                         else {setisValidLanguageCode(false)}
                     }}
-                    helperText={!isValidLanguageCode ? "Enter a correct language code!" : ""}
-                    error={!isValidLanguageCode}
-                    fullWidth
-                    variant="standard"
+                    renderInput={(params) => 
+                        <TextField
+                            error={!isValidLanguageCode} {...params} label="Languages" 
+                        />}
                 />
                 </DialogContent>
                 <DialogActions>

diff --git a/taxonomy-editor-frontend/src/pages/search/SearchResults.jsx b/taxonomy-editor-frontend/src/pages/search/SearchResults.jsx
@@ -1,4 +1,4 @@
-import { Typography, Snackbar, Alert, Box, TextField, Grid, Stack, Button, IconButton, Paper, FormControl, InputLabel } from "@mui/material";
+import { Typography, Snackbar, Alert, Box, TextField, Grid, Stack, Button, IconButton, Paper, FormControl, InputLabel, Autocomplete } from "@mui/material";
 import useFetch from "../../components/useFetch";
 import { Link } from "react-router-dom";
 import { useState } from "react";
@@ -26,9 +26,9 @@ const SearchResults = ({query, taxonomyName, branchName}) => {
     const { data: nodeIds, isPending, isError, isSuccess, errorMessage } = useFetch(`${baseUrl}search?query=${encodeURI(query)}`);
 
     const [nodeType, setNodeType] = useState('entry'); // Used for storing node type
-    const [newLanguageCode, setNewLanguageCode] = useState(null); // Used for storing new Language Code
+    const [newLanguageCode, setNewLanguageCode] = useState(''); // Used for storing new Language Code
+    const isValidLanguageCode = ISO6391.validate(newLanguageCode) // Used for validating a new LC
     const [newNode, setnewNode] = useState(null); // Used for storing canonical tag
-    const [isValidLanguageCode, setIsValidLanguageCode] = useState(false); // Used for validating a new LC
     const [openAddDialog, setOpenAddDialog] = useState(false);
     const [openSuccessSnackbar, setOpenSuccessSnackbar] = useState(false);
 
@@ -164,16 +164,14 @@ const SearchResults = ({query, taxonomyName, branchName}) => {
                     </Stack>
                     <Stack direction="row" alignItems="center" sx={{m: 2}}>
                         <Typography>Main Language</Typography>
-                        <TextField
-                            onChange={(e) => { 
-                                setNewLanguageCode(e.target.value);
-                                setIsValidLanguageCode(ISO6391.validate(e.target.value));
+                        <Autocomplete
+                            options={ISO6391.getAllNames()}
+                            onChange={(e,language) => {
+                                if (!language) language = '';
+                                setNewLanguageCode(ISO6391.getCode(language));
                             }}
-                            label="Language Code"
-                            error={!isValidLanguageCode}
+                            renderInput={(params) => <TextField error={!isValidLanguageCode} {...params} label="Languages" />}
                             sx={{width : 150, ml: 5}}
-                            size="small"
-                            variant="outlined"
                         />
                     </Stack>
                     {