diff --git a/client/src/App.tsx b/client/src/App.tsx index 64899ed5..d46702b1 100644 --- a/client/src/App.tsx +++ b/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() { } - /> + > + } + /> + } + /> + ); diff --git a/client/src/components/Admin/Tweet.jsx b/client/src/components/Admin/Tweet.jsx index e8098ac0..cb7f2354 100644 --- a/client/src/components/Admin/Tweet.jsx +++ b/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 } }} > - {isVerified ? ( - - ) : ( - - )} + { + (action = "modify" ? ( + + ) : ( + <> + {isVerified ? ( + + ) : ( + + )} + + )) + } - {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 ( - {`${ + {`${ row[`${datum}`] }`} ); else return ( - + { diff --git a/client/src/components/Admin/TweetCollectionAdminPanel.jsx b/client/src/components/Admin/TweetCollectionAdminPanel.jsx index 5c9cfa24..c4789126 100644 --- a/client/src/components/Admin/TweetCollectionAdminPanel.jsx +++ b/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 ( -
+
Minority @@ -139,7 +106,12 @@ const TweetCollectionAdminPanel = () => { {dataList.map((row, index) => ( - + ))} diff --git a/client/src/components/Admin/index.jsx b/client/src/components/Admin/index.jsx index 27804c88..a4e14b3f 100644 --- a/client/src/components/Admin/index.jsx +++ b/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 (
); }; diff --git a/client/src/constants.js b/client/src/constants.js index bcb9429c..8fc78141 100644 --- a/client/src/constants.js +++ b/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 };