minor adjustments to backend

frontend/src/components/LeftSide.tsx

@@ -7,18 +7,37 @@ import {
   TableCell,
   TableHead,
   Table,
+  Button,
 } from "@mui/material";
 
-const LeftSide = ({ reset, setReset }) => {
-  // next prev and sort
-  const [users, setUsers] = useState();
-  const [params, setParams] = useState({ offset: 0, sortby: "f_name" });
-  // reset button
-  // const [reset, setReset] = useState(true);
+interface User {
+  date: string;
+  f_name: string;
+  l_name: string;
+  mail: string;
+  name: string;
+  time: number;
+  user: number;
+}
 
-  // date
-  const [date, setDate] = useState({ from: "2021-01-01", to: "2028-01-01" });
-  const [dateToSubmit, setDateToSubmit] = useState({
+const LeftSide = ({
+  reset,
+  setReset,
+}: {
+  reset: boolean;
+  setReset: Function;
+}) => {
+  // next prev and sort buttons
+  const [users, setUsers] = useState<User[]>();
+  const [params, setParams] = useState({
+    offset: 0,
+    sortby: "f_name",
+    from: "2000-01-01",
+    to: "2028-01-01",
+    order: true,
+  });
+  // date buttons
+  const [date, setDate] = useState({
     from: "2021-01-01",
     to: "2028-01-01",
   });
@@ -28,7 +47,7 @@ const LeftSide = ({ reset, setReset }) => {
       const resp = await api.get("/getall", {
         params,
       });
-      setUsers(resp.data);
+      if (resp.data.length) setUsers(resp.data);
     }
     async function resetData() {
       await api.get("/reset");
@@ -39,15 +58,14 @@ const LeftSide = ({ reset, setReset }) => {
     }
 
     fetchData();
-  }, [reset, params, dateToSubmit]);
+  }, [reset, params]);
 
-  const viewProjectHours = (user) => {
+  const viewProjectHours = (userid: number) => {
     async function fetchHours() {
       const resp = await api.get("/getuser", {
-        params: { userid: user },
+        params: { userid },
       });
-      // const entriesArray = Object.entries(resp.data);
-      const entriesArray = Object.entries(resp.data.Fields);
+      const entriesArray = Object.entries(resp.data);
       alert(entriesArray);
     }
     fetchHours();
@@ -56,7 +74,7 @@ const LeftSide = ({ reset, setReset }) => {
   if (!users) return <></>;
   return (
     <Grid container spacing={2}>
-      <Grid size={5}>
+      <Grid size={12}>
         <label htmlFor="date">From: </label>
         <input
           type="date"
@@ -70,31 +88,15 @@ const LeftSide = ({ reset, setReset }) => {
           type="date"
           id="to"
           name="to"
-          value={date.to}
+          value={params.to}
           onChange={(event) => setDate({ ...date, to: event.target.value })}
         />
-        <button onClick={() => setDateToSubmit(date)}>Submit Date</button>
-      </Grid>
-      <Grid size={3}>
-        <span>Select a sort:</span>
-        <select
-          value={params.sortby}
-          onChange={(event) =>
-            setParams((prevParams) => {
-              return { ...prevParams, sortby: event.target.value };
-            })
-          }
+        <button
+          onClick={() => setParams({ ...params, from: date.from, to: date.to })}
         >
-          <option value="">--Select--</option>
-          <option value="f_name">First name</option>
-          <option value="l_name">Last Name</option>
-          <option value="mail">Email</option>
-          <option value="date">Date</option>
-          <option value="time">Time</option>
-        </select>
+          Submit Date
+        </button>
       </Grid>
-      <Grid size={4}></Grid>
-      <Grid size={4}></Grid>
       <Grid size={4}>
         <button
           onClick={() => {
@@ -106,6 +108,9 @@ const LeftSide = ({ reset, setReset }) => {
         >
           Prev users
         </button>
+      </Grid>
+      <Grid size={4}></Grid>
+      <Grid size={4}>
         <button
           onClick={() =>
             setParams((prevParams) => {
@@ -119,12 +124,73 @@ const LeftSide = ({ reset, setReset }) => {
       <Table>
         <TableHead>
           <TableRow>
-            <TableCell>First Name</TableCell>
-            <TableCell>Last Name</TableCell>
-            <TableCell>Email</TableCell>
-            <TableCell>Project name</TableCell>
-            <TableCell>Date</TableCell>
-            <TableCell>Hours</TableCell>
+            <TableCell>
+              <Button
+                onClick={() =>
+                  setParams({
+                    ...params,
+                    sortby: "f_name",
+                    order: !params.order,
+                  })
+                }
+              >
+                First Name
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button
+                onClick={() =>
+                  setParams({
+                    ...params,
+                    sortby: "l_name",
+                    order: !params.order,
+                  })
+                }
+              >
+                Last Name
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button
+                onClick={() =>
+                  setParams({ ...params, sortby: "mail", order: !params.order })
+                }
+              >
+                Email
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button
+                onClick={() =>
+                  setParams({
+                    ...params,
+                    sortby: "project",
+                    order: !params.order,
+                  })
+                }
+              >
+                Project
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button
+                onClick={() =>
+                  setParams({ ...params, sortby: "date", order: !params.order })
+                }
+              >
+                Date
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button
+                onClick={() =>
+                  setParams({ ...params, sortby: "time", order: !params.order })
+                }
+              >
+                Hours
+              </Button>
+            </TableCell>
+            <TableCell />
           </TableRow>
         </TableHead>
         <TableBody>
@@ -139,13 +205,15 @@ const LeftSide = ({ reset, setReset }) => {
                 <TableCell>{post.time} </TableCell>
                 <TableCell>
                   <button onClick={() => viewProjectHours(post.user)}>
-                    View Project Hours
+                    Hours
                   </button>
                 </TableCell>
               </TableRow>
             ))
           ) : (
-            <div>No posts found...</div>
+            <TableRow>
+              <TableCell>No data found...</TableCell>
+            </TableRow>
           )}
         </TableBody>
       </Table>