Merge pull request #1 from injas427/issue#9

Issue#9
ohcnetwork · Mar 22, 2020 · 932c221 · 932c221
2 parents 10207fe + 41c5b10
commit 932c221
Show file tree

Hide file tree

Showing 33 changed files with 1,648 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -6,8 +6,14 @@
     "type": "git",
     "url": "[email protected]:coronasafe/care_fe.git"
   },
-  "main": "index.tsx",
+  "main": "./src/index.tsx",
+  "keywords": [
+    "Cops"
+  ],
+  "author": "Coronsafe Care Contributors",
+  "license": "MIT",
   "dependencies": {
+    "@babel/core": "7.6.0",
     "@date-io/date-fns": "^1.3.11",
     "@material-ui/core": "^4.5.0",
     "@material-ui/icons": "^4.4.1",
@@ -16,31 +22,33 @@
     "@material-ui/types": "^4.1.1",
     "@svgr/webpack": "4.3.2",
     "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
+    "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
     "@types/draft-js": "^0.10.37",
     "@types/draftjs-to-html": "^0.8.0",
     "@types/hookrouter": "^2.2.1",
     "@types/html-to-draftjs": "^1.4.0",
     "@types/jest": "^24.9.1",
-    "@types/jquery": "^3.3.33",
-    "@types/node": "^12.12.30",
-    "@types/react": "^16.9.25",
+    "@types/jquery": "^3.3.31",
+    "@types/lodash": "^4.14.149",
+    "@types/node": "^12.12.26",
+    "@types/react": "^16.9.19",
     "@types/react-csv": "^1.1.1",
     "@types/react-dom": "^16.9.5",
     "@types/react-redux": "^7.1.2",
     "@types/react-select": "3.0.8",
     "@types/react-slick": "^0.23.4",
     "@typescript-eslint/eslint-plugin": "^2.2.0",
     "@typescript-eslint/parser": "^2.2.0",
-    "acorn": "^7.1.1",
-    "axios": "^0.19.2",
+    "axios": "^0.19.0",
+    "babel-eslint": "10.0.3",
     "babel-jest": "^24.9.0",
+    "babel-loader": "8.0.6",
     "babel-plugin-named-asset-import": "^0.3.4",
     "babel-preset-react-app": "^9.0.2",
     "camelcase": "^5.2.0",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
-    "css-loader": "^3.2.0",
+    "css-loader": "2.1.1",
     "date-fns": "^2.1.0",
     "dotenv": "6.2.0",
     "dotenv-expand": "5.1.0",
@@ -58,6 +66,7 @@
     "jest-environment-jsdom-fourteen": "0.1.0",
     "jest-resolve": "24.9.0",
     "jest-watch-typeahead": "0.4.0",
+    "lodash": "^4.17.15",
     "mini-css-extract-plugin": "0.8.0",
     "moment": "^2.24.0",
     "node-sass": "^4.13.1",
@@ -68,15 +77,15 @@
     "postcss-normalize": "7.0.1",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "4.0.1",
-    "react": "^16.13.1",
+    "react": "^16.12.0",
     "react-app-polyfill": "^1.0.3",
     "react-csv": "^1.1.2",
     "react-dev-utils": "^9.0.4",
-    "react-dom": "^16.13.1",
+    "react-dom": "^16.12.0",
     "react-draft-wysiwyg": "^1.13.2",
     "react-redux": "^7.1.1",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1",
+    "react-scripts": "3.3.1",
     "react-select": "^3.0.8",
     "react-slick": "^0.25.2",
     "redux": "^4.0.4",
@@ -88,14 +97,12 @@
     "semver": "6.3.0",
     "terser-webpack-plugin": "1.4.1",
     "ts-pnp": "1.1.4",
-    "typescript": "^3.8.3",
+    "typescript": "^3.7.5",
     "url-loader": "2.1.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "webpack-dev-server --open",
+    "build": "./node_modules/.bin/webpack --mode=production"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -114,18 +121,26 @@
   },
   "devDependencies": {
     "@types/mocha": "^5.2.7",
+    "css-loader": "^3.2.0",
     "eslint": "^6.4.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-react-app": "^5.0.2",
     "eslint-loader": "3.0.0",
     "eslint-plugin-flowtype": "3.13.0",
-    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-import": "2.18.2",
     "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react": "7.14.3",
     "eslint-plugin-react-hooks": "^1.6.1",
     "redux-devtools-extension": "^2.13.8",
     "source-map-loader": "^0.2.4",
-    "ts-loader": "^6.2.0"
+    "ts-loader": "^6.2.0",
+    "webpack": "^4.41.1",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-middleware": "^3.7.1",
+    "webpack-dev-server": "3.10.1",
+    "webpack-hot-middleware": "^2.25.0",
+    "webpack-manifest-plugin": "2.0.4",
+    "workbox-webpack-plugin": "4.3.1"
   },
   "jest": {
     "roots": [

diff --git a/src/App.scss b/src/App.scss
@@ -0,0 +1,134 @@
+.header-section {
+  .appBar {
+    z-index: 1201;
+  }
+  .toolbar {
+    padding-top: 72px;
+  }
+  .menuButton {
+    @media only screen and (min-width: 601px) {
+      display: none;
+    }
+  }
+}
+
+.Mui-selected {
+  .MuiSvgIcon-root {
+    color: #0085ad !important;
+  }
+  .MuiListItemText-root{
+    color: #0085ad !important;
+  }
+}
+
+.main-content {
+  margin-top: 64px;
+  border-bottom: solid 100px #f1f1f1;
+  background: #f1f1f1;
+  @media only screen and (min-width: 601px) {
+    margin-left: 240px;
+  }
+  min-height: 100vh;
+}
+#root {
+  height: 100vh;
+}
+.app-footer {
+  width: 100%;
+  background: #ffffff no-repeat;
+  background-size: 100% 100%;
+  height: 40px;
+  position: fixed;
+  bottom: 0px;
+  min-height: 40px;
+  z-index: 10000;
+  img {
+    vertical-align: middle;
+    position: absolute;
+    right: 0px;
+    height: 80px;
+    bottom: -1px;
+  }
+  .copy-right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    color: black;
+  }
+}
+
+.appBar {
+  background-color: #f1f1f1 !important;
+}
+
+.vertical-align {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.add-item-card {
+  background: #ffffff;
+  border: dashed 1px #333;
+  cursor: pointer;
+  min-height: 120px;
+  line-height: 120px;
+}
+.stats-cards {
+  .stats-card-item {
+    padding: 10px;
+    margin: 16px;
+  }
+}
+
+@media only screen and (max-width: 601px) {
+  .createBtn {
+    position: relative !important;
+    right: 20px;
+    top: 0px;
+  }
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.description-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 5px 0px;
+}
+
+.wrap-text {
+  white-space: pre-wrap;
+}
+
+.no-wrap-text {
+  white-space: nowrap;
+}
+
+.non-clickable {
+  cursor: not-allowed;
+}
+
+.pagination {
+  margin: auto;
+  .current-page {
+    color: white;
+    background-color: #3f51b5;
+  }
+  .page-no {
+    color: black;
+    background-color: white;
+  }
+}
+.error-text {
+  font-size: 14px;
+  color: red;
+}
+
+.textMarginCenter {
+  text-align: center;
+  padding-top: 5px;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,31 +1,35 @@
 import React, { useEffect, useState } from 'react';
+import SessionRouter from './Router/SessionRouter';
+import AppRouter from './Router/AppRouter';
 import { useDispatch, useSelector } from 'react-redux';
 import { getCurrentUser } from './Redux/actions';
-import AppRouter from "./Router/AppRouter";
-import SessionRouter from "./Router/SessionRouter";
+import { CircularProgress } from '@material-ui/core';
+import './App.scss';
 
 const App: React.FC = () => {
   const dispatch: any = useDispatch();
   const state: any = useSelector(state => state);
   const { currentUser } = state;
+  console.log("currentUser", currentUser)
   const [user, setUser] = useState(null);
+  console.log("user", user)
   useEffect(() => {
     dispatch(getCurrentUser()).then((resp: any) => {
-      const res = resp && resp.data;
-      if (res && res.success && res.data) {
-        setUser(res.data);
+      const res = resp ;
+      if (res && res.statusCode === 200) {
+        setUser(res);
       }
     });
   }, [dispatch]);
 
   if (!currentUser || currentUser.isFetching) {
     return (
-        <div>
-
+        <div className="textMarginCenter">
+          <CircularProgress />
         </div>
     );
   }
-  if (user) {
+  if (currentUser && currentUser.data) {
     return <AppRouter/>;
   } else {
     return <SessionRouter/>;

diff --git a/src/Components/Auth/Login.tsx b/src/Components/Auth/Login.tsx
@@ -1,10 +1,11 @@
 import {useDispatch} from "react-redux";
 import React, {useState} from "react";
 import {postLogin} from "../../Redux/actions";
-import { navigate} from 'hookrouter';
+import { A, navigate} from 'hookrouter';
 import {makeStyles} from "@material-ui/styles";
 import {Button, Card, CardActions, CardContent, CardHeader, Grid} from '@material-ui/core';
 import {TextInputField} from '../Common/HelperInputFields';
+import { get } from 'lodash';
 
 const useStyles = makeStyles(theme => ({
     formTop: {
@@ -68,15 +69,16 @@ export const Login = () => {
         const valid = validateData();
         if (valid) {
             dispatch(postLogin(valid)).then((resp: any) => {
-                const res = resp && resp.data;
-                if (res && res.statusCode && res.statusCode === 401) {
+                const res = get(resp, 'data', null);
+                const statusCode = get(resp, 'status', '');
+                if (res && statusCode === 401) {
                     const err = {
                         password: 'Username or Password incorrect',
                     };
                     setErrors(err);
-                } else if (res.success) {
-                    localStorage.setItem('care_access_token', res.access_token);
-                    navigate('/dashboard');
+                } else if (res && statusCode === 200) {
+                    localStorage.setItem('care_access_token', res.access);
+                    navigate('/privatedashboard');
                     window.location.reload();
                 }
             });
@@ -116,7 +118,7 @@ export const Login = () => {
                             </CardContent>
 
                             <CardActions className="padding16">
-
+                                <A href="/forgot-password">Forgot password ?</A>
                                 <Button
                                     color="primary"
                                     variant="contained"
@@ -127,6 +129,9 @@ export const Login = () => {
                                 </Button>
                             </CardActions>
                         </form>
+                        <CardContent className="alignCenter">
+                            You don't have an account? <A href="/register">Register</A>
+                        </CardContent>
                     </Card>
                 </Grid>
             </Grid>

diff --git a/src/Components/Common/AlertDialog.tsx b/src/Components/Common/AlertDialog.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core';
+
+const AlertDialog = (props: any) => {
+    const { title, message, handleClose } = props;
+    return (
+        <Dialog
+            open={true}
+        >
+            <DialogTitle id="alert-dialog-title">{title || ''}</DialogTitle>
+            <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    {message}
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose} color="primary">
+                    OK
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default AlertDialog;