Front end

client/src/App.tsx

@@ -1,5 +1,6 @@
 import { Route, Routes } from 'react-router';
 import Admin from './components/Admin';
+import TweetCollectionAdminPanel from './components/Admin/TweetCollectionAdminPanel';
 import AuthProvider from './components/AuthProvider';
 import EndUser from './components/EndUser';
 import Login from './components/Login';
@@ -18,7 +19,16 @@ function App() {
                 <Admin />
               </RequireAuth>
             }
-          />
+          >
+            <Route
+          path="modify"
+          element={<TweetCollectionAdminPanel action="modify" />}
+        />
+        <Route
+          index
+          element={<TweetCollectionAdminPanel action="verify" />}
+        />
+            </Route>
    </Routes>
     </AuthProvider>
   );

client/src/components/Admin/Tweet.jsx

@@ -1,16 +1,32 @@
 import { Button, Checkbox, TableCell, TableRow } from "@mui/material";
 import axios from "axios";
 import { useEffect, useState } from "react";
+import { columns } from "../../constants";
 
-const Tweet = ({ row }) => {
+const Tweet = ({ row, verified, action }) => {
   const [changedColumn, setChangedColumn] = useState({ ...row });
-  const [isVerified, setIsVerified] = useState(
-    "verified_at" in Object.keys(row)
-  );
+  const [isVerified, setIsVerified] = useState(verified);
   useEffect(() => {
     setChangedColumn({ ...row });
-    setIsVerified("verified_at" in Object.keys(row));
-  }, [row]);
+    setIsVerified(verified);
+  }, [row, verified]);
+  const modifySubmit = () => {
+    let toSubmit = {};
+    for (const prop in row) {
+      toSubmit[prop] = changedColumn[prop];
+    }
+    let accessToken = sessionStorage.getItem("accessToken");
+    axios
+      .patch(`/tweets/${row.id}`, toSubmit, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      })
+      .then((data) => data.data)
+      .then((data) => {
+        setIsVerified(true);
+      });
+  };
   const verifySubmit = () => {
     let toSubmit = {};
     for (const prop in row) {
@@ -19,7 +35,6 @@ const Tweet = ({ row }) => {
       }
     }
     let accessToken = sessionStorage.getItem("accessToken");
-    console.log(accessToken);
     axios
       .patch(`/tweets/pseudo/${row.id}`, toSubmit, {
         headers: {
@@ -43,31 +58,43 @@ const Tweet = ({ row }) => {
       sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
     >
       <TableCell align="right">
-        {isVerified ? (
-          <Button color="success" onClick={verifySubmit}>
-            {"Verified"}
-          </Button>
-        ) : (
-          <Button variant="contained" onClick={verifySubmit}>
-            {"Verify"}
-          </Button>
-        )}
+        {
+          (action = "modify" ? (
+            <Button variant="contained" onClick={modifySubmit}>
+              {"Modify"}
+            </Button>
+          ) : (
+            <>
+              {isVerified ? (
+                <Button
+                  color="warning"
+                  // variant="contained"
+                  onClick={verifySubmit}
+                >
+                  {"Verified"}
+                </Button>
+              ) : (
+                <Button variant="contained" onClick={verifySubmit}>
+                  {"Verify"}
+                </Button>
+              )}
+            </>
+          ))
+        }
       </TableCell>
-      {Object.keys(row)
-        .filter(
-          (datum) =>
-            datum !== "created_at" && datum !== "username" && datum !== "id"
-        )
-        .map((datum) => {
+      {columns
+        .map((column) => column.field)
+        .filter((datum) => datum !== "verify")
+        .map((datum, index) => {
           if (datum === "text")
             return (
-              <TableCell sx={{ fontSize: "1rem" }} align="left">{`${
+              <TableCell key={index} sx={{ fontSize: "1rem" }} align="left">{`${
                 row[`${datum}`]
               }`}</TableCell>
             );
           else
             return (
-              <TableCell align="right">
+              <TableCell key={index} align="right">
                 <Checkbox
                   checked={changedColumn[`${datum}`]}
                   onChange={(event) => {

client/src/components/Admin/TweetCollectionAdminPanel.jsx

@@ -14,66 +14,33 @@ import {
 } from "@mui/material";
 import axios from "axios";
 import { useEffect, useState } from "react";
+import { columns } from "../../constants";
 import Tweet from "./Tweet";
 // const buttonRef = React.createRef();
 
-const TweetCollectionAdminPanel = () => {
+const TweetCollectionAdminPanel = ({ action }) => {
   const [dataList, setDataList] = useState([]);
   const [offset, setOffset] = useState(0);
   const [minority, setMinority] = useState(true);
   const [offsetTemp, setOffsetTemp] = useState(offset);
   const [reload, setReload] = useState(true);
-  const columns = [
-    { field: "verify", headerName: "Verify" },
-    {
-      field: "text",
-      headerName: "text",
-    },
-    {
-      field: "covid_stats",
-      headerName: "covid \n stats",
-    },
-    {
-      field: "vaccination",
-      headerName: "vaccination",
-    },
-    {
-      field: "covid_politics",
-      headerName: "covid \n politics",
-    },
-    {
-      field: "humour",
-      headerName: "humour",
-    },
-    {
-      field: "lockdown",
-      headerName: "lockdown",
-    },
-    {
-      field: "civic_views",
-      headerName: "civic \n views",
-    },
-    {
-      field: "life_during_pandemic",
-      headerName: "life during \npandemic",
-    },
-    {
-      field: "covid_waves_and_variants",
-      headerName: "covid waves \n and \n variants",
-    },
-  ];
+
   useEffect(() => {
     axios
-      .get(`/tweets/pseudo/?offset=${offset}&limit=10&minority=${minority}`)
+      .get(
+        `/tweets/${
+          action === "verify" ? `pseudo/` : ""
+        }?offset=${offset}&limit=10&minority=${minority}`
+      )
       .then((data) => data.data)
       .then((data) => {
         console.log(data);
         setDataList(data);
       });
-  }, [offset, minority, reload]);
+  }, [offset, minority, reload, action]);
 
   return (
-    <div className=" mt-10 w-11/12 mx-auto h-96">
+    <div className=" mt-10 w-11/12 mx-auto ">
       <div className="w-3/12 flex justify-between items-end mb-3">
         <div>
           <InputLabel id="minority">Minority</InputLabel>
@@ -139,7 +106,12 @@ const TweetCollectionAdminPanel = () => {
           </TableHead>
           <TableBody>
             {dataList.map((row, index) => (
-              <Tweet key={index} row={{ ...row }} />
+              <Tweet
+                key={index}
+                row={{ ...row }}
+                action={action}
+                verified={!!row["verified_at"]}
+              />
             ))}
           </TableBody>
         </Table>

client/src/components/Admin/index.jsx

@@ -1,11 +1,12 @@
+import { Outlet } from "react-router";
 import Nav from "../Nav";
-import TweetCollectionAdminPanel from "./TweetCollectionAdminPanel";
 
 const Admin = () => {
   return (
     <div>
       <Nav />
-      <TweetCollectionAdminPanel />
+      {/* <TweetCollectionAdminPanel action="verify" /> */}
+      <Outlet />
     </div>
   );
 };

client/src/constants.js

@@ -1,3 +1,41 @@
 const baseAddress = "http://localhost:8000";
-
-export { baseAddress };
+const columns = [
+  { field: "verify", headerName: "Verify" },
+  {
+    field: "text",
+    headerName: "text",
+  },
+  {
+    field: "covid_stats",
+    headerName: "covid \n stats",
+  },
+  {
+    field: "vaccination",
+    headerName: "vaccination",
+  },
+  {
+    field: "covid_politics",
+    headerName: "covid \n politics",
+  },
+  {
+    field: "humour",
+    headerName: "humour",
+  },
+  {
+    field: "lockdown",
+    headerName: "lockdown",
+  },
+  {
+    field: "civic_views",
+    headerName: "civic \n views",
+  },
+  {
+    field: "life_during_pandemic",
+    headerName: "life during \npandemic",
+  },
+  {
+    field: "covid_waves_and_variants",
+    headerName: "covid waves \n and \n variants",
+  },
+];
+export { baseAddress,columns };