timelog/frontend/src/components/LeftSide.tsx

import { useEffect, useState } from "react";
import api from "../utils/api";
import Grid from "@mui/material/Grid2";
import {
  TableRow,
  TableBody,
  TableCell,
  TableHead,
  Table,
  Button,
} from "@mui/material";

interface User {
  date: string;
  f_name: string;
  l_name: string;
  mail: string;
  name: string;
  time: number;
  user: number;
}

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",
  });

  useEffect(() => {
    async function fetchData() {
      const resp = await api.get("/getall", { params });
      if (resp.data.length) setUsers(resp.data);
    }
    async function resetData() {
      await api.get("/reset");
    }
    if (!reset) {
      setReset(true);
      resetData();
    }

    fetchData();
  }, [reset, params]);

  const viewProjectHours = (userid: number) => {
    async function fetchHours() {
      const resp = await api.get("/getuser", { params: { userid } });
      const entriesArray = Object.entries(resp.data);
      alert(entriesArray);
    }
    fetchHours();
  };

  if (!users) return <></>;
  return (
    <Grid container spacing={2}>
      <Grid size={12}>
        <label htmlFor="date">From: </label>
        <input
          type="date"
          id="from"
          name="from"
          value={date.from}
          onChange={(event) => setDate({ ...date, from: event.target.value })}
        />
        <label htmlFor="date">To: </label>
        <input
          type="date"
          id="to"
          name="to"
          value={params.to}
          onChange={(event) => setDate({ ...date, to: event.target.value })}
        />
        <button
          onClick={() => setParams({ ...params, from: date.from, to: date.to })}
        >
          Submit Date
        </button>
      </Grid>
      <Grid size={4}>
        <button
          onClick={() => {
            if (!params.offset) return;
            setParams((prevParams) => {
              return { ...prevParams, offset: prevParams.offset - 10 };
            });
          }}
        >
          Prev users
        </button>
      </Grid>
      <Grid size={4}></Grid>
      <Grid size={4}>
        <button
          onClick={() =>
            setParams((prevParams) => {
              return { ...prevParams, offset: prevParams.offset + 10 };
            })
          }
        >
          Next users
        </button>
      </Grid>
      <Table>
        <TableHead>
          <TableRow>
            <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>
          {users.length > 0 && Array.isArray(users) ? (
            users.map((post, idx) => (
              <TableRow key={idx}>
                <TableCell>{post.f_name} </TableCell>
                <TableCell>{post.l_name} </TableCell>
                <TableCell>{post.mail} </TableCell>
                <TableCell>{post.name} </TableCell>
                <TableCell>{post.date.slice(0, 10)} </TableCell>
                <TableCell>{post.time} </TableCell>
                <TableCell>
                  <button onClick={() => viewProjectHours(post.user)}>
                    Hours
                  </button>
                </TableCell>
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell>No data found...</TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
      <Grid size={5}></Grid>
      <Grid size={6}>
        <button onClick={() => setReset(!reset)}>RESET</button>
      </Grid>
    </Grid>
  );
};

export default LeftSide;