#2 add autocomplete field for tags

xchem · Mar 10, 2020 · a2d95c0 · a2d95c0
1 parent bfb0f9b
commit a2d95c0
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 32 deletions.
diff --git a/js/components/projects/projectModal/index.js b/js/components/projects/projectModal/index.js
@@ -1,14 +1,16 @@
 import React, { memo } from 'react';
 import Modal from '../../common/Modal';
 import { useDispatch, useSelector } from 'react-redux';
-import { setProjectModalOpen } from '../redux/actions';
-import { makeStyles, RadioGroup, Radio, Grid, Typography, Chip, MenuItem, Button } from '@material-ui/core';
+import { resetProjectState, setProjectModalOpen } from '../redux/actions';
+import { makeStyles, RadioGroup, Radio, Grid, Typography, MenuItem } from '@material-ui/core';
 import { Title, Description, Label, Link } from '@material-ui/icons';
+import { Autocomplete } from '@material-ui/lab';
 import { DJANGO_CONTEXT } from '../../../utils/djangoContext';
 import { InputFieldAvatar } from './inputFieldAvatar';
 import { ProjectCreationType } from '../redux/constants';
 import { Formik, Form } from 'formik';
 import { TextField, Select } from 'formik-material-ui';
+import { Button } from '../../common/Inputs/Button';
 
 const useStyles = makeStyles(theme => ({
   body: {
@@ -39,22 +41,21 @@ export const ProjectModal = memo(({}) => {
     setValue(event.target.value);
   };
 
-  const handleCloseModal = () => dispatch(setProjectModalOpen(false));
-
-  const [chipData, setChipData] = React.useState(['Custom tag']);
-
-  const handleDelete = chipToDelete => () => {
-    setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key));
+  const handleCloseModal = () => {
+    dispatch(resetProjectState());
+    dispatch(setProjectModalOpen(false));
   };
 
+  const [selectedTags, setSelectedTags] = React.useState([]);
+
   return (
     <Modal open={isProjectModalOpen} onClose={handleCloseModal}>
       <Typography variant="h3">Create project</Typography>
       <Formik
         initialValues={{
           title: '',
           description: '',
-          target: undefined,
+          target: '',
           tags: []
         }}
         validate={values => {
@@ -124,32 +125,46 @@ export const ProjectModal = memo(({}) => {
                 <InputFieldAvatar
                   icon={<Label />}
                   field={
-                    <TextField
-                      className={classes.input}
-                      name="tags"
-                      label="Tags"
-                      onKeyPress={e => {
-                        if (e.key === 'Enter') {
-                          e.preventDefault();
-                          setChipData([...chipData, e.target.value]);
-                        }
+                    <Autocomplete
+                      multiple
+                      freeSolo
+                      id="tags-standard"
+                      options={selectedTags}
+                      getOptionLabel={option => option}
+                      onChange={(e, data) => {
+                        setSelectedTags(data);
                       }}
+                      renderInput={params => (
+                        <TextField
+                          {...params}
+                          className={classes.input}
+                          name="tags"
+                          label="Tags"
+                          fullWidth
+                          onKeyPress={e => {
+                            if (e.key === 'Enter') {
+                              setSelectedTags([...selectedTags, e.target.value]);
+                            }
+                          }}
+                        />
+                      )}
                     />
                   }
                 />
               </Grid>
+            </Grid>
+            <Grid container justify="flex-end" direction="row">
+              <Grid item>
+                <Button color="secondary" disabled={isSubmitting} onClick={handleCloseModal}>
+                  Cancel
+                </Button>
+              </Grid>
               <Grid item>
-                <InputFieldAvatar
-                  icon={<Link style={{ opacity: 0 }} />}
-                  field={chipData.map((data, index) => (
-                    <Chip key={index} label={data} onDelete={handleDelete(data)} />
-                  ))}
-                />
+                <Button color="primary" disabled={isSubmitting} onClick={submitForm}>
+                  Create
+                </Button>
               </Grid>
             </Grid>
-            <Button variant="contained" color="primary" disabled={isSubmitting} onClick={submitForm}>
-              Submit
-            </Button>
           </Form>
         )}
       </Formik>

diff --git a/js/components/projects/redux/actions.js b/js/components/projects/redux/actions.js
@@ -10,7 +10,7 @@ export const setCurrentProjectProperty = (key, value) => ({
 });
 
 export const resetProjectState = () => ({
-  type: constants.RESET_PROJECT_STATE
+  type: constants.RESET_CURRENT_PROJECT_STATE
 });
 
 export const setProjectModalOpen = isOpen => ({

diff --git a/js/components/projects/redux/constants.js b/js/components/projects/redux/constants.js
@@ -3,7 +3,7 @@ const prefix = 'PROJECTS_';
 export const constants = {
   SET_CURRENT_PROJECT: prefix + 'SET_CURRENT_PROJECT',
   SET_CURRENT_PROJECT_PROPERTY: prefix + 'SET_CURRENT_PROJECT_PROPERTY',
-  RESET_PROJECT_STATE: prefix + 'RESET_PROJECT_STATE',
+  RESET_CURRENT_PROJECT_STATE: prefix + 'RESET_CURRENT_PROJECT_STATE',
   SET_PROJECT_MODAL_OPEN: prefix + 'SET_PROJECT_MODAL_OPEN'
 };
 

diff --git a/js/components/projects/redux/reducer.js b/js/components/projects/redux/reducer.js
@@ -24,9 +24,9 @@ export const projectReducers = (state = INITIAL_STATE, action = {}) => {
 
       return Object.assign({}, state, { currentProject: currProject });
 
-    case constants.RESET_PROJECT_STATE:
-      const initState = JSON.parse(JSON.stringify(INITIAL_STATE));
-      return Object.assign({}, state, initState);
+    case constants.RESET_CURRENT_PROJECT_STATE:
+      const currProj = JSON.parse(JSON.stringify(INITIAL_STATE.currentProject));
+      return Object.assign({}, state, { currProject: currProj });
 
     case constants.SET_PROJECT_MODAL_OPEN:
       return Object.assign({}, state, { isProjectModalOpen: action.payload });