admin status update using local storage

src/components/stories.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import Axios from "axios";
 import { useHistory, Redirect } from "react-router-dom";
 
+import Chip from "@material-ui/core/Chip";
 import Table from "@material-ui/core/Table";
 import Paper from "@material-ui/core/Paper";
 import TableRow from "@material-ui/core/TableRow";
@@ -34,24 +35,45 @@ const useStoriesStyles = makeStyles((theme) => ({
     fontSize: "18px",
   },
   status: {
-    backgroundColor: "#333",
+    backgroundColor: "red",
     color: "white",
     borderRadius: "10px",
   },
+  pendingChip: {
+    backgroundColor: "black",
+    color: "#fff",
+    fontWeight: "500",
+  },
+  acceptedChip: {
+    backgroundColor: "#28a745",
+    color: "#fff",
+    fontWeight: "500",
+  },
 }));
 
-function UserTable({ stories, role, sortById, sortByComplexity }) {
-  const history = useHistory();
+function StatusButton({ id }) {
   const classes = useStoriesStyles();
-  const [type, setType] = useState("All");
   const [rejected] = useState(() => {
-    return localStorage.getItem("rejected") || "";
+    return JSON.parse(localStorage.getItem("rejected")) || [];
   });
-
   const [accepted] = useState(() => {
-    return localStorage.getItem("accepted") || "";
+    return JSON.parse(localStorage.getItem("accepted")) || [];
   });
 
+  console.log({ id, accepted, rejected });
+  if (accepted.includes(id)) {
+    return <Chip label="Accepted" className={classes.acceptedChip} />;
+  } else if (rejected.includes(id)) {
+    return <Chip label="Rejected" color="secondary" />;
+  }
+  return <Chip label="Pending" className={classes.pendingChip} />;
+}
+
+function UserTable({ stories, role, sortById, sortByComplexity }) {
+  const history = useHistory();
+  const classes = useStoriesStyles();
+  const [type, setType] = useState("All");
+
   const openStory = (story) => {
     history.push(`/story/${story.id}`);
   };
@@ -122,11 +144,7 @@ function UserTable({ stories, role, sortById, sortByComplexity }) {
                 <TableCell>{story.cost}</TableCell>
                 {role === "Admin" && (
                   <TableCell>
-                    <Button className={classes.status}>
-                      {rejected.length !== 0 && rejected === story.id
-                        ? "Rejected"
-                        : "Pending"}
-                    </Button>
+                    <StatusButton id={story.id} />
                   </TableCell>
                 )}
               </TableRow>

src/components/story.js

@@ -31,12 +31,16 @@ const useStoryStyles = makeStyles((theme) => ({
 }));
 
 function useLocalStorageState(key, defaultValue = "") {
-  const [state, setState] = React.useState(
-    () => window.localStorage.getItem(key) || defaultValue
-  );
+  const [state, setState] = React.useState(() => {
+    let rejected = window.localStorage.getItem(key);
+    if (rejected !== null || undefined) {
+      return JSON.parse(window.localStorage.getItem(key)) || defaultValue;
+    }
+    return defaultValue;
+  });
 
   React.useEffect(() => {
-    window.localStorage.setItem(key, state);
+    window.localStorage.setItem(key, JSON.stringify(state));
   }, [key, state]);
 
   return [state, setState];
@@ -82,14 +86,12 @@ export default function Story() {
 
   const rejectedStory = (id) => {
     setRejected(rejected.concat(id));
-    history.push("/stories");
-    console.log(rejected.concat(id));
+    setTimeout(() => history.push("/stories"), 100);
   };
 
   const AcceptedStory = (id) => {
-    let newArray = [...accepted, id];
-    setAccepted(newArray);
-    history.push("/stories");
+    setAccepted(accepted.concat(id));
+    setTimeout(() => history.push("/stories"), 100);
   };
 
   useEffect(() => {
@@ -148,15 +150,15 @@ export default function Story() {
               color="secondary"
               variant="contained"
               className={classes.cancelButton}
-              onClick={() => rejectedStory(id)}
+              onClick={() => rejectedStory(story.id)}
             >
               Rejected
             </Button>
             <Button
               color="primary"
               variant="contained"
               className={classes.saveButton}
-              onClick={() => AcceptedStory(id)}
+              onClick={() => AcceptedStory(story.id)}
             >
               Accepted
             </Button>