redirect to respective pages if token is not found

sridhar02 · Jun 2, 2020 · f88942b · f88942b
1 parent a26f05d
commit f88942b
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 28 deletions.
diff --git a/src/components/createStory.js b/src/components/createStory.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useHistory, Redirect } from "react-router-dom";
 
 import Axios from "axios";
 import {
@@ -14,6 +14,7 @@ import {
   Divider,
 } from "@material-ui/core";
 import NativeSelect from "@material-ui/core/NativeSelect";
+import Alert from "@material-ui/lab/Alert";
 
 import Navbar from "./navbar";
 
@@ -46,43 +47,58 @@ export default function CreateStory() {
 
   const [summary, setSummary] = useState("");
   const [description, setDescription] = useState("");
-  const [type, setType] = useState("");
+  const [type, setType] = useState("enhancement");
   const [complexity, setcomplexity] = useState("");
   const [estimatedHrs, setEstimatedHrs] = useState("");
   const [cost, setCost] = useState("");
+  const [showError, setShowError] = useState(false);
+  const [isLoggedIn] = useState(() => {
+    if (
+      localStorage.getItem("token") &&
+      localStorage.getItem("token").length !== 0
+    ) {
+      return true;
+    }
+    return false;
+  });
 
   const createStory = async (event) => {
     event.preventDefault();
     const token = localStorage.getItem("token");
     console.log(token);
-    try {
-      const response = await Axios({
-        method: "post",
-        url: `http://localhost:3000/api/v1/stories`,
-        data: {
-          summary,
-          description,
-          type,
-          complexity,
-          //   estimatedHrs,
-          //   cost,
-        },
-        headers: {
-          Authorization: token,
-        },
-      });
-      console.log(response);
-      if (response.status === 201) {
-        console.log(response.data);
-        history.push("/stories");
+    if (summary.length === 0 || description.length === 0) {
+      setShowError(true);
+    } else {
+      try {
+        const response = await Axios({
+          method: "post",
+          url: `http://localhost:3000/api/v1/stories`,
+          data: {
+            summary,
+            description,
+            type,
+            complexity,
+            //   estimatedHrs,
+            //   cost,
+          },
+          headers: {
+            Authorization: token,
+          },
+        });
+        console.log(response);
+        if (response.status === 201) {
+          console.log(response.data);
+          history.push("/stories");
+        }
+      } catch (error) {
+        console.log(error);
       }
-    } catch (error) {
-      console.log(error);
     }
   };
 
   return (
     <div className={classes.container}>
+      {isLoggedIn === false && <Redirect to="/" />}
       <Navbar />
       <Divider />
       <Typography variant="h4" className={classes.text}>
@@ -106,6 +122,11 @@ export default function CreateStory() {
             onChange={(event) => setDescription(event.target.value)}
             placeholder="Minimum 3 rows"
           />
+          {showError && (
+            <Alert severity="error">
+              Please enter the summary and description!
+            </Alert>
+          )}
           <InputLabel className={classes.spacing} id="demo-simple-select-label">
             Type
           </InputLabel>

diff --git a/src/components/login.js b/src/components/login.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useHistory, Redirect } from "react-router-dom";
 
 import Axios from "axios";
 import Checkbox from "@material-ui/core/Checkbox";
@@ -30,6 +30,15 @@ function Login() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [isAdmin, setAdmin] = useState(false);
+  const [isLoggedIn] = useState(() => {
+    if (
+      localStorage.getItem("token") &&
+      localStorage.getItem("token").length !== 0
+    ) {
+      return true;
+    }
+    return false;
+  });
 
   const handleSubmit = async (event) => {
     event.preventDefault();
@@ -57,6 +66,7 @@ function Login() {
 
   return (
     <div className={classes.container}>
+      {isLoggedIn && <Redirect to="/stories" />}
       <h1>Login to StoryBook</h1>
       <form onSubmit={handleSubmit}>
         <div className={classes.form}>

diff --git a/src/components/navbar.js b/src/components/navbar.js
@@ -28,6 +28,7 @@ export default function Navbar() {
 
   const handleSignout = () => {
     localStorage.removeItem("token");
+    localStorage.removeItem("role");
     history.push("/");
   };
 

diff --git a/src/components/stories.js b/src/components/stories.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Axios from "axios";
-import { useHistory } from "react-router-dom";
+import { useHistory, Redirect } from "react-router-dom";
 
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
@@ -10,6 +10,8 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import Paper from "@material-ui/core/Paper";
 import { Typography, Divider, makeStyles, Button } from "@material-ui/core";
+import ImportExportIcon from "@material-ui/icons/ImportExport";
+import NativeSelect from "@material-ui/core/NativeSelect";
 
 import Navbar from "./navbar";
 
@@ -38,23 +40,51 @@ const useStoriesStyles = makeStyles((theme) => ({
   },
 }));
 
+const Id = "id";
+const Complexity = " Complexity";
+
 function UserTable({ stories, role }) {
   const history = useHistory();
   const classes = useStoriesStyles();
+  const [type, setType] = useState("");
+  const [complexity, setComplexity] = useState("");
 
   const openStory = (story) => {
     history.push(`/story/${story.id}`);
   };
 
+  const filterdArray = stories && stories.map((array) => array.type === type);
+
+  // console.log(filterdArray);
+
   return (
     <TableContainer component={Paper}>
       <Table>
         <TableHead>
           <TableRow>
-            <TableCell className={classes.tableHeadCell}>Id</TableCell>
+            <TableCell className={classes.tableHeadCell}>
+              Id
+              <Button>
+                <ImportExportIcon />{" "}
+              </Button>
+            </TableCell>
             <TableCell className={classes.tableHeadCell}>Summary</TableCell>
             <TableCell className={classes.tableHeadCell}>Description</TableCell>
-            <TableCell className={classes.tableHeadCell}>Type</TableCell>
+            <TableCell className={classes.tableHeadCell}>
+              Type
+              <div>
+                <NativeSelect
+                  id="select"
+                  value={type}
+                  onChange={(event) => setType(event.target.value)}
+                >
+                  <option value="">All</option>
+                  <option value={"enhancement"}>enhancement</option>
+                  <option value={"bugfix"}>bugfix</option>
+                  <option value={"development"}>development</option>
+                </NativeSelect>
+              </div>
+            </TableCell>
             <TableCell className={classes.tableHeadCell}>Complexity</TableCell>
             <TableCell className={classes.tableHeadCell}>
               Estimated Hours
@@ -123,6 +153,15 @@ function UserStories({ stories, role }) {
 export default function Stories() {
   const [role, setRole] = useState("");
   const [stories, setStories] = useState("");
+  const [isLoggedIn] = useState(() => {
+    if (
+      localStorage.getItem("token") &&
+      localStorage.getItem("token").length !== 0
+    ) {
+      return true;
+    }
+    return false;
+  });
 
   const fetchStories = async () => {
     const userToken = localStorage.getItem("token");
@@ -149,6 +188,7 @@ export default function Stories() {
 
   return (
     <>
+      {isLoggedIn === false && <Redirect to="/" />}
       <Navbar />
       <Divider />
       {role === "Admin" ? (

diff --git a/src/components/story.js b/src/components/story.js
@@ -34,6 +34,7 @@ const useStoryStyles = makeStyles((theme) => ({
 }));
 
 export default function Story() {
+  const status = React.createContext("pending");
   let { id } = useParams();
   const classes = useStoryStyles();
   const [story, setStory] = useState("");
@@ -57,6 +58,8 @@ export default function Story() {
     }
   };
 
+  const rejectedStory = () => {};
+
   useEffect(() => {
     fetchStory();
     setRole(localStorage.getItem("role"));
@@ -113,6 +116,7 @@ export default function Story() {
               color="secondary"
               variant="contained"
               className={classes.cancelButton}
+              onClick={() => rejectedStory()}
             >
               Rejected
             </Button>