Merge branch 'develop'

frontend/package.json

@@ -15,11 +15,13 @@
     "axios": "^0.19.2",
     "date-fns": "^2.10.0",
     "react": "^16.13.0",
+    "react-code-input": "^3.9.0",
     "react-dom": "^16.13.0",
     "react-hook-form": "^5.0.3",
     "react-mobile-picker-scroll": "^0.2.14",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0"
+    "react-scripts": "3.4.0",
+    "uniqid": "^5.2.0"
   },
   "scripts": {
     "precommit": "NODE_ENV=production lint-staged",

frontend/src/common/Components/Button/index.js

@@ -1,17 +1,47 @@
 import React from 'react';
 import { withStyles } from '@material-ui/styles';
 import MuiButton from '@material-ui/core/Button';
+import Box from '@material-ui/core/Box';
 
-const Button = withStyles(() => ({
+const ButtonSuccess = withStyles(() => ({
   contained: {
-    backgroundColor: '#007E3A',
+    minWidth: '100%',
+    backgroundColor: '#397F3A',
+    textTransform: 'none',
     color: '#fff'
   }
 }))(MuiButton);
 
-export default ({ children, ...rest }) => (
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  <Button variant="contained" {...rest}>
-    {children}
-  </Button>
+const ButtonSecondary = withStyles(theme => ({
+  contained: {
+    minWidth: '100%',
+    backgroundColor: theme.palette.secondary,
+    color: '#000'
+  },
+  root: {
+    minWidth: '100%',
+    textTransform: 'none',
+  }
+}))(MuiButton);
+
+const ButtonPrimmary = withStyles(() => ({
+  contained: {
+    minWidth: '100%',
+    textTransform: 'none',
+    backgroundColor: '#fff',
+    color: '#000'
+  }
+}))(MuiButton);
+
+export default ({ children, color, width, ...rest }) => (
+  <Box width={width}>
+    {
+      {
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        success: <ButtonSuccess {...rest}>{children}</ButtonSuccess>,
+        secondary: <ButtonSecondary {...rest}>{children}</ButtonSecondary>,
+        primmary: <ButtonPrimmary {...rest}>{children}</ButtonPrimmary>
+      }[color]
+    }
+  </Box>
 );

frontend/src/common/Components/DatePicker/index.js

@@ -1,46 +1,47 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import DateFnsUtils from '@date-io/date-fns';
 import { DatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
-import { TextField, Input } from '@material-ui/core';
-import ErrorMsg from '../ErrorMsg/';
+import Input from '../Input/Input';
 
 export default ({
-  label = 'Date symptomps first apeared',
-  placeholder = 'Date symptomps first apeared',
-  required = true,
+  label,
+  placeholder,
+  required,
   register,
   errors,
+  setValue,
+  unregister,
   name
 }) => {
-  const [selectedDate, handleDateChange] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   const [open, setOpen] = useState(false);
   const handleOpen = event => {
     event.preventDefault();
     setOpen(true);
   };
+  useEffect(() => {
+    register({ name }, { required });
+    return () => unregister(name); // unregister input after component unmount
+  }, [register]);
 
-  const renderInput = props => (
-    <>
-      <TextField
-        name={name}
-        label={label}
-        placeholder={placeholder}
-        value={props.value}
-        inputRef={register({ required })}
-        onClick={event => handleOpen(event)}
-        onTouchEnd={event => handleOpen(event)}
-        onKeyUp={() => handleOpen()}
-        variant="outlined"
-        style={{ width: '100%' }}
-        autoComplete="off"
-        InputProps={{
-          readOnly: true
-        }}
-      />
-      <ErrorMsg>
-        {errors && errors.date_of_onset && 'This field is required'}
-      </ErrorMsg>
-    </>
+  const handleDateChange = date => {
+    setSelectedDate(date);
+    setValue(name, date);
+  };
+  const renderInput = ({ value }) => (
+    <Input
+      name={name}
+      label={label}
+      placeholder={placeholder}
+      value={value}
+      onClick={event => handleOpen(event)}
+      onTouchEnd={event => handleOpen(event)}
+      onKeyUp={() => handleOpen()}
+      variant="outlined"
+      autoComplete="off"
+      readOnly
+      errors={errors}
+    />
   );
 
   return (

frontend/src/common/Components/Dialog/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import MuiDialogTitle from '@material-ui/core/DialogTitle';
 import MuiDialogContent from '@material-ui/core/DialogContent';
-import { Dialog, Box, Slide, Typography } from '@material-ui/core';
+import { Dialog, Slide, Grid, Typography } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 
@@ -24,23 +24,44 @@ const styles = theme => ({
   }
 });
 
-const Transition = React.forwardRef(function Transition(props, ref) {
+export const Transition = React.forwardRef(function Transition(props, ref) {
   // eslint-disable-next-line react/jsx-props-no-spreading
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
 const DialogTitle = withStyles(styles)(props => {
-  const { children, classes, onClose, ...other } = props;
+  const { title, classes, onClose, align, handleClose, handleSave, ...other } = props;
   return (
     <MuiDialogTitle
       disableTypography
       className={classes.root}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...other}
     >
-      <Box mr={2} ml={2}>
-        <Typography variant="h5">{children}</Typography>
-      </Box>
+      <Grid
+        container
+        direction='row'
+        alignItems='center'
+        alignContent='center'
+        spacing={2}
+
+      >
+        <Grid item>
+          {handleClose && (
+            <IconButton
+              edge="start"
+              color="inherit"
+              onClick={handleClose}
+              aria-label="close"
+            >
+              <CloseIcon />
+            </IconButton>)}
+        </Grid>
+        <Grid item>
+          <Typography align="center" variant="h5">{title}</Typography>
+        </Grid>
+      </Grid>
+
     </MuiDialogTitle>
   );
 });
@@ -52,29 +73,17 @@ const DialogContent = withStyles(theme => ({
   }
 }))(MuiDialogContent);
 
-export default ({ title, children, open, openAction, handleClose }) => {
+export default ({ title, children, open, openAction, fullScreen, handleClose, alignTitle }) => {
   return (
     <>
       {openAction}
       <Dialog
-        fullScreen
+        fullScreen={fullScreen}
         open={open}
         onClose={handleClose}
         TransitionComponent={Transition}
       >
-        <DialogTitle onClose={() => handleClose()}>
-          {handleClose && (
-            <IconButton
-              edge="start"
-              color="inherit"
-              onClick={handleClose}
-              aria-label="close"
-            >
-              <CloseIcon />
-            </IconButton>
-          )}
-          {title}
-        </DialogTitle>
+        {title && <DialogTitle title={title} onClose={() => handleClose()} handleClose={handleClose} align={alignTitle} />}
         <DialogContent>{children}</DialogContent>
       </Dialog>
     </>

frontend/src/common/Components/ErrorMsg/index.js

@@ -1,8 +1,22 @@
 import React from 'react';
 import { Box } from '@material-ui/core';
+import { ErrorMessage } from 'react-hook-form';
+import { makeStyles } from '@material-ui/core/styles';
 
-export default ({ children }) => (
-  <Box m={1}>
-    <span style={{ color: 'red' }}>{children}</span>
-  </Box>
-);
+const useStyles = makeStyles({
+  root: {
+    color: '#bf1650'
+  }
+});
+
+export default ({ name, errors }) => {
+  const classes = useStyles();
+
+  return (
+    <Box m={1}>
+      <ErrorMessage name={name} errors={errors}>
+        {({ message }) => <p className={classes.root}>{message}</p>}
+      </ErrorMessage>{' '}
+    </Box>
+  );
+};

frontend/src/common/Components/Input/Input.js

@@ -1,23 +1,47 @@
 import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
 import { Box, TextField } from '@material-ui/core';
+import ErrorMessage from '../ErrorMsg';
+import useWindowDimensions from '../../../core/hooks/useWindowDimensions';
 
-export default ({ label, name, endAdornment, ...props }) => {
+const styles = {
+  input: {
+    minWidth: '100%',
+    backgroundColor: 'transparent'
+  }
+};
+
+const CustomizedInputs = ({
+  classes,
+  inputRef,
+  label,
+  name,
+  errors,
+  endAdornment,
+  readOnly,
+  ...props
+}) => {
+  const { width } = useWindowDimensions();
   return (
-    <Box m={1}>
+    <Box p={1} width={width - 32}>
       <TextField
         label={label}
         readOnly
-        variant="outlined"
         style={{ width: '100%' }}
         autoComplete="off"
         name={name}
+        inputRef={inputRef}
         InputProps={{
           // eslint-disable-next-line react/destructuring-assignment
           ...props.InputProps,
-          endAdornment: endAdornment
+          readOnly,
+          className: classes.input,
+          endAdornment
         }}
         {...props}
       />
+      <ErrorMessage name={name} errors={errors} />
     </Box>
   );
 };
+export default withStyles(styles)(CustomizedInputs);

frontend/src/common/Components/Input/Select.js

@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react';
+import MenuItem from '@material-ui/core/MenuItem';
+import uniqid from 'uniqid';
+import Input from './Input';
+
+export default ({
+  options,
+  label,
+  name,
+  required,
+  register,
+  unregister,
+  setValue,
+  errors
+}) => {
+  const [gender, setGender] = React.useState('');
+
+  const handleChange = event => {
+    setGender(event.target.value);
+    setValue(name, event.target.value);
+  };
+  useEffect(() => {
+    register({ name }, { required });
+    return () => unregister(name); // unregister input after component unmount
+  }, [register]);
+
+  return (
+    <Input
+      errors={errors}
+      variant="outlined"
+      id="select"
+      onChange={handleChange}
+      label={label}
+      value={gender}
+      name={name}
+      select
+    >
+      {options &&
+        options.map(item => (
+          <MenuItem key={uniqid()} value={item.value}>
+            {item.name}
+          </MenuItem>
+        ))}
+    </Input>
+  );
+};