minor adjustments to backend

frontend/src/App.tsx

@@ -8,7 +8,7 @@ function App() {
   const [reset, setReset] = useState(true);
   return (
     <Grid container spacing={2}>
-      <Grid size={6}>
+      <Grid size={{ lg: 12, xl: 6 }}>
         <LeftSide reset={reset} setReset={setReset} />
       </Grid>
       <Grid size={6}>

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>

frontend/src/components/RightSide.tsx

@@ -2,12 +2,9 @@ import { useEffect, useState } from "react";
 import api from "../utils/api";
 import { Chart } from "react-google-charts";
 
-const RightSide = (reset) => {
+const RightSide = ({ reset }: { reset: boolean }) => {
   // graph date
-  const [topten, setTopten] = useState({
-    from: "2000-01-01",
-    to: "2100-01-01",
-  });
+  const [chartData, setChartData] = useState<String[][]>();
   // date input field
   const [date, setDate] = useState({ from: "2000-01-01", to: "2100-01-01" });
   const [dateToSubmit, setDateToSubmit] = useState({
@@ -15,7 +12,7 @@ const RightSide = (reset) => {
     to: "2100-01-01",
   });
   // radio button
-  const [selectedOption, setSelectedOption] = useState("project");
+  const [filter, setFilter] = useState("project");
 
   useEffect(() => {
     async function fetchData() {
@@ -23,26 +20,26 @@ const RightSide = (reset) => {
         params: {
           from: dateToSubmit.from,
           to: dateToSubmit.to,
-          filterBy: selectedOption,
+          filterBy: filter,
         },
       });
       resp.data.unshift(["User", "Hours"]);
       // turn the data into form suitable to charts
-      if (selectedOption === "project")
+      if (filter === "project")
         for (let idx = 1; idx < resp.data.length; idx++) {
           resp.data[idx] = [resp.data[idx].name, resp.data[idx].total_time];
         }
-      else if (selectedOption === "user")
+      else if (filter === "user")
         for (let idx = 1; idx < resp.data.length; idx++) {
           resp.data[idx] = [
             resp.data[idx].f_name + " " + resp.data[idx].l_name,
             resp.data[idx].total_time,
           ];
         }
-      setTopten(resp.data);
+      setChartData(resp.data);
     }
     fetchData();
-  }, [dateToSubmit, selectedOption, reset]);
+  }, [dateToSubmit, filter, reset]);
 
   // Chart options
   const options = {
@@ -53,11 +50,11 @@ const RightSide = (reset) => {
       minValue: 0,
     },
     vAxis: {
-      title: selectedOption,
+      title: filter,
     },
   };
 
-  if (!topten) <></>;
+  if (!chartData) <></>;
 
   return (
     <div style={{ flex: 1 }}>
@@ -85,8 +82,8 @@ const RightSide = (reset) => {
           <input
             type="radio"
             value="user"
-            checked={selectedOption === "user"}
-            onChange={(event) => setSelectedOption(event.target.value)}
+            checked={filter === "user"}
+            onChange={(event) => setFilter(event.target.value)}
           />
           User
         </label>
@@ -94,19 +91,23 @@ const RightSide = (reset) => {
           <input
             type="radio"
             value="project"
-            checked={selectedOption === "project"}
-            onChange={(event) => setSelectedOption(event.target.value)}
+            checked={filter === "project"}
+            onChange={(event) => setFilter(event.target.value)}
           />
           Project
         </label>
       </>
-      <Chart
-        chartType="BarChart"
-        width="100%"
-        height="400px"
-        data={topten}
-        options={options}
-      ></Chart>
+      {chartData !== undefined && chartData.length < 2 ? (
+        <div>No data</div>
+      ) : (
+        <Chart
+          chartType="BarChart"
+          width="100%"
+          height="400px"
+          data={chartData}
+          options={options}
+        ></Chart>
+      )}
     </div>
   );
 };