rewrote the whole code to FC

Author: CliffJr

package-lock.json

@@ -30,9 +30,11 @@
     "react-bootstrap": "0.32.4",
     "react-bootstrap-carousel": "^4.0.6",
     "react-chartist": "0.13.3",
+    "react-datepicker": "^3.1.3",
     "react-datetime": "^2.16.3",
     "react-dom": "16.8.6",
     "react-google-maps": "9.4.5",
+    "react-hooks-helper": "^1.6.0",
     "react-image-gallery": "^1.0.7",
     "react-image-viewer-zoom": "^1.0.36",
     "react-image-zoom": "^1.3.1",

package.json

@@ -11,14 +11,14 @@ import "./assets/css/demo.css";
 import "./assets/css/pe-icon-7-stroke.css";
 
 import AdminLayout from "layouts/Admin.jsx";
-import Login from "./views/LoginContainer.jsx";
+//import Login from "./views/LoginContainer.jsx";
 
 ReactDOM.render(
   <BrowserRouter>
     <Switch>
-    <Route exact path="/login">
+    {/* <Route exact path="/login">
   <Login />
-</Route>
+</Route> */}
       <Route path="/admin" render={props => <AdminLayout {...props} />} />
       <Redirect from="/" to="/admin/notifications" />
     </Switch>

src/index.js

@@ -6,15 +6,15 @@ import Help from "views/Help.jsx";
 import PatientRef from "views/PatientRef.jsx";
 import Notifications from "views/Notifications.jsx";
 import PatientRecords from "views/PatientRecords";
-import Login from "./views/LoginContainer"
+//import Login from "./views/LoginContainer"
 
 const dashboardRoutes = [
-  {
-    path: "/login",
-    name: "login",
-    component: Login,
-    layout: "/user"
-  },
+  // {
+  //   path: "/login",
+  //   name: "login",
+  //   component: Login,
+  //   layout: "/user"
+  // },
   {
     path: "/notifications",
     name: "Dashboard",

src/routes.js

@@ -1,3 +1,4 @@
+
 import React from "react";
 import { Row, Col, FormGroup, ControlLabel } from 'react-bootstrap';
 import { Card } from "components/Card/Card.jsx";
@@ -6,6 +7,7 @@ import IM2783RE from "../assets/img/IM2783RE.JPG";
 
 const ImageDisplay = (props) => {
   const propss = { width: 600, height: 500, zoomWidth: 750, img: IM2783RE };
+
   return (
     <Row>
       <Col md={12}>

src/views/ImageDisplay.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+const ItemPatientForm = ({ label, children, type = "text", ...otherProps}) =>(
+    <div>
+        {
+            type === "text" ? (
+                <>
+                    <label>{label}</label>
+                    <input type={type} {...otherProps} />
+                </>
+            ) : (
+                <>
+                    <label/>
+                    <input type={type} {...otherProps} />
+                    {label}
+                </>
+            )
+        }    
+    </div>
+);
+
+export default ItemPatientForm;

src/views/ItemPatientForm.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
 import "../assets/css/Login.css";
 
-export default function Login() {
+const Login = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
@@ -40,4 +40,4 @@ export default function Login() {
       </form>
     </div>
   );
-}
+}

src/views/LoginContainer.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import {useForm, useStep } from "react-hooks-helper";
+
+import StepOne from "./stepOne";
+import StepTwo from "./stepTwo";
+import StepThree from "./stepThree";
+import ReviewNewPatientDetails from "./ReviewNewPatientDetails";
+import SubmitPatientForm from "./submitPatientForm";
+
+
+const steps = [
+    {id: "stepOne"},
+    {id: "stepTwo"},
+    {id: "stepThree"},
+    {id: "reviewNewPatientDetails"},
+    {id: "submitPatientForm"}
+];
+
+const defaultData = {
+    firstnamePatient: "",
+    lastnamePatient: "",
+    ncdNumberPatient: "",
+    dfidStudyNumberPatient: "",
+    optionsGender: "",
+    optionTypeDiabetes: "",
+    dobPatient: "",
+  };
+
+const MultiStepForm = () => {
+    
+    const [formData, setForm] = useForm(defaultData);
+    const {step, navigation } = useStep({initialStep: 0, steps });
+    const { id } = step;
+
+    const props = {formData, setForm, navigation};
+
+    switch (id) {
+        case "stepOne":
+            return <StepOne {...props}/>;
+        case "stepTwo":
+            return <StepTwo {...props}/>;
+        case "stepThree":
+            return <StepThree {...props}/>;
+        case "reviewNewPatientDetails":
+            return <ReviewNewPatientDetails {...props}/>;
+        case "submitPatientForm":
+            return <SubmitPatientForm {...props}/>;
+        default:
+            return null;
+    }
+};
+
+export default MultiStepForm;

src/views/MultiStepForm.js

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { Grid, Row, Col, Table } from "react-bootstrap";
 import Card from "components/Card/Card.jsx";
 import Button from "components/CustomButton/CustomButton.jsx";                                                        

src/views/NewPatientsList.jsx

@@ -1,11 +1,9 @@
-
+//To be reviewed after other components have been reviewed.
 import React, { Component } from "react";
 import ChartistGraph from "react-chartist";
 import { Grid, Row, Col } from "react-bootstrap";
-
 import { Card } from "components/Card/Card.jsx";
 import { StatsCard } from "components/StatsCard/StatsCard.jsx";
-
 import {
   dataPie,
   legendPie,
@@ -26,6 +24,7 @@ class Notifications extends Component {
     }
     return legend;
   }
+
   render() {
     return (
       <div className="content">