Merge todo app to codes branch

.babelrc

@@ -0,0 +1,4 @@
+{  
+	"presets": [    "@babel/env",    "@babel/react"  ],  
+	"plugins": [    "@babel/plugin-proposal-class-properties"  ]
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+/dist

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "system-test",
+  "version": "1.0.0",
+  "description": "Sureify - Front end system test",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "babel-node ./node_modules/webpack-dev-server/bin/webpack-dev-server --open"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jay2452/system-test.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/jay2452/system-test/issues"
+  },
+  "homepage": "https://github.com/jay2452/system-test#readme",
+  "devDependencies": {
+    "@babel/core": "7.6.4",
+    "@babel/node": "7.6.3",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/preset-env": "7.6.3",
+    "@babel/preset-react": "7.6.3",
+    "babel-loader": "8.0.6",
+    "css-loader": "3.2.0",
+    "file-loader": "^4.2.0",
+    "html-webpack-plugin": "3.2.0",
+    "node-sass": "^4.14.1",
+    "path": "0.12.7",
+    "sass-loader": "8.0.0",
+    "style-loader": "1.0.0",
+    "webpack": "4.41.2",
+    "webpack-cli": "3.3.9",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.9.3",
+    "@material-ui/icons": "^4.9.1",
+    "material-table": "^1.64.0",
+    "react": "16.11.0",
+    "react-dom": "16.11.0",
+    "react-redux": "7.1.1",
+    "redux": "4.0.4",
+    "redux-thunk": "2.3.0"
+  }
+}

src/App.jsx

@@ -0,0 +1,70 @@
+import React, { useReducer } from'react';
+import AddTaskButton from './Components/AddTaskButton';
+import TodoForm from './Components/TodoForm';
+import TodoTabs from './Containers/TodoTabs';
+import Alert from './Components/Alert';
+import { useSelector, useDispatch } from 'react-redux';
+import InputSearchBox from './Components/InputSearchBox';
+
+import * as todoActionCreators from './store/actionCreators/todoActions';
+import CustomBackdrop from './Components/Backdrop';
+import { Typography } from '@material-ui/core';
+
+const App = props => {
+    // const [isFormOpen, setIsFormOpen] = React.useState(false);
+    const {isFormOpen, data, isDataLoaded} = useSelector(state => state.todos);
+    const dispatch = useDispatch();
+
+    // const [isEditMode, setIsEditMode] = React.useState(true);
+    const toggleOpenForm = () => dispatch(todoActionCreators.openTodoForm(null, true));
+
+    const handleSearch = value =>  dispatch(todoActionCreators.searchTodoItems(value));
+
+    React.useEffect(() => {
+        if(isDataLoaded === false){
+            dispatch(todoActionCreators.getAllTodos())
+        }
+    }, []);
+
+    if(isDataLoaded === false) return <CustomBackdrop />;
+    return (
+        <div>
+            {/* render tabs */}
+            <div style={{
+                display: "flex",
+                justifyContent: "space-between"
+            }}>
+                <InputSearchBox handleSearch={handleSearch}/>
+                <div style={{
+                    fontSize: '1.6rem',
+                    color: "#03a9f4",
+                    fontWeight: "500",
+                    lineHeight: '10px',
+                    padding: '10px'
+                }}>                        
+                        <div>
+                            My Tasks
+                        </div>
+
+                        <sub style={{
+                            color: "grey",
+                            fontSize: '0.9rem',
+                        }}>
+                            Better to do, than to say
+                        </sub>
+                </div>
+            </div>
+            <TodoTabs />
+            <AddTaskButton handleOpenForm={toggleOpenForm} />
+            <TodoForm 
+                handleClose={toggleOpenForm}
+                isFormOpen={isFormOpen}
+                // isEditMode={isEditMode}
+            />
+            <Alert />
+            <CustomBackdrop />
+        </div>
+    )
+};
+
+export default App;

src/Components/AddTaskButton/index.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { makeStyles } from '@material-ui/core/styles';
+import Fab from '@material-ui/core/Fab';
+import AddIcon from '@material-ui/icons/Add';
+
+const useStyles = makeStyles(theme => ({
+    addtaskButton: {
+        position: 'absolute',
+        bottom: 10,
+        right: 10
+    }
+}));
+
+const AddTaskButton = props => {
+
+    const classes = useStyles();
+
+    return (
+        <div className={classes.addtaskButton}>
+            <Fab onClick={props.handleOpenForm} size="large" color="primary" aria-label="add" className={classes.margin}>
+                <AddIcon />
+            </Fab>
+        </div>
+    );
+};
+
+export default AddTaskButton;

src/Components/Alert/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import { useSelector } from 'react-redux';
+
+export default function Alert(props) {
+
+    const { isAlertOpen, yesAction, noAction, alertTitle, alertMessage } = useSelector(state => state.ui);
+
+    return (
+        <div>
+            <Dialog
+                open={isAlertOpen}
+                onClose={noAction}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogTitle id="alert-dialog-title">{alertTitle}</DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                        {alertMessage}
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={noAction} color="primary">
+                        No
+                    </Button>
+                    <Button onClick={yesAction} color="primary" autoFocus>
+                        Yes
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </div>
+    );
+}

src/Components/Backdrop/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import Backdrop from '@material-ui/core/Backdrop';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles } from '@material-ui/core/styles';
+import { useDispatch, useSelector } from 'react-redux';
+import { toggleBackdrop } from '../../store/actionCreators/todoActions';
+
+const useStyles = makeStyles((theme) => ({
+  backdrop: {
+    zIndex: theme.zIndex.drawer + 1,
+    color: '#fff',
+  },
+}));
+
+const CustomBackdrop = props => {
+    const classes = useStyles();
+    // const dispatch = useDispatch();
+    const { isBackdropOpen } = useSelector(state => state.ui);
+    return (
+        <Backdrop className={classes.backdrop} open={isBackdropOpen} >
+            <CircularProgress color="inherit" />
+        </Backdrop>
+    )
+};
+
+export default CustomBackdrop;

src/Components/Dropdown/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import InputLabel from '@material-ui/core/InputLabel';
+
+const Dropdown = props => {
+
+    const { data, valueColumn, displayColumn, handleChange, isDisabled, selectedValue, displayLabel } = props;
+
+    return (
+        <FormControl>
+            <InputLabel id="todoform-dropdown-select-label">{displayLabel}</InputLabel>
+            <Select
+                labelId="todoform-dropdown-select-label"
+                id="todoform-dropdown-select"
+                value={selectedValue}
+                disabled={isDisabled}
+                onChange={handleChange}
+            >
+                {
+                    data.map((item, i) => (
+                        <MenuItem key={`${valueColumn}-item-data-${i}`} value={item[valueColumn]}>
+                            {item[displayColumn]}
+                        </MenuItem>
+                    ))
+                }
+            </Select>
+        </FormControl>
+    )
+};
+
+export default Dropdown;

src/Components/InputSearchBox/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import clsx from 'clsx';
+import TextField from '@material-ui/core/TextField';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import { makeStyles } from '@material-ui/core/styles';
+import SearchIcon from '@material-ui/icons/Search';
+import debounce from '../../utils/debounce';
+
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  margin: {
+    margin: theme.spacing(1),
+  },
+  withoutLabel: {
+    marginTop: theme.spacing(3),
+  },
+  textField: {
+    width: '25ch',
+  },
+}));
+
+(function () {
+  const keysPressed = {};
+  document.addEventListener('keydown', (event) => {
+    keysPressed[event.key] = true;
+    if (keysPressed['Control'] && keysPressed['Shift'] && event.key == 'F') {
+      const node = document.getElementById('global-searchbox');
+      if (node) {
+        node.focus();
+      }
+    }
+  });
+
+  document.addEventListener('keyup', (event) => {
+    delete keysPressed[event.key];
+  });
+})();
+
+const InputSearchBox = props => {
+  const classes = useStyles();
+  const debouncedSearch = debounce(value => props.handleSearch(value), 200)
+  return (
+    <TextField
+      // label="Global Search"
+      id="global-searchbox"
+      placeholder="Search (Ctrl + Shift + F)"
+      className={clsx(classes.margin, classes.textField)}
+      InputProps={{
+        startAdornment: <InputAdornment position="start"><SearchIcon /></InputAdornment>,
+      }}
+      onChange={({ target: { value } }) => debouncedSearch(value)}
+    />
+  )
+};
+export default InputSearchBox;