left to add restart button, view user button, fix the UI and fix the way dates are generated in the db

2024-11-20 22:52:11 +02:00
commit 06f91a264d
988 changed files with 576669 additions and 0 deletions
@@ -0,0 +1,113 @@
+import { useEffect, useState } from "react";
+import api from "../utils/api";
+
+const LeftSide = () => {
+  const [users, setUsers] = useState();
+  const [params, setParams] = useState({ offset: 0, sortby: "f_name" });
+
+  // date
+  const [date, setDate] = useState({ from: "2021-01-01", to: "2028-01-01" });
+  const [dateToSubmit, setDateToSubmit] = useState({});
+
+  useEffect(() => {
+    async function fetchData() {
+      const resp = await api.get("/getall", {
+        params,
+      });
+      setUsers(resp.data);
+    }
+    fetchData();
+  }, [params, dateToSubmit]);
+
+  const handleButtonClick = () => {
+    // When the button is clicked, update the dateToShow state and trigger a re-render
+    console.log(dateToSubmit);
+    setDateToSubmit(date);
+  };
+
+  if (!users) return <></>;
+  return (
+    <div>
+      <div>
+        <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={date.to}
+          onChange={(event) => setDate({ ...date, to: event.target.value })}
+        />
+        <button onClick={handleButtonClick}>Submit Date</button>
+      </div>
+      <div>
+        <h4>Select a sort:</h4>
+        <select
+          value={params.sortby}
+          onChange={(event) =>
+            setParams((prevParams) => {
+              return { ...prevParams, sortby: event.target.value };
+            })
+          }
+        >
+          <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>
+      </div>
+      <button
+        onClick={() =>
+          setParams((prevParams) => {
+            return { ...prevParams, offset: prevParams.offset + 10 };
+          })
+        }
+      >
+        Next users
+      </button>
+      <button
+        onClick={() =>
+          setParams((prevParams) => {
+            return { ...prevParams, offset: prevParams.offset - 10 };
+          })
+        }
+      >
+        Prev users
+      </button>
+      <button
+        onClick={() =>
+          setParams((prevParams) => {
+            return { ...prevParams, to: "2028-12-12", from: "2028-01-01" };
+          })
+        }
+      >
+        Filter by date
+      </button>
+      {users.length > 0 && Array.isArray(users) ? (
+        users.map((post, idx) => (
+          <div key={idx}>
+            <span>{post.f_name} </span>
+            <span>{post.l_name} </span>
+            <span>{post.mail} </span>
+            <span>{post.name} </span>
+            <span>{post.date} </span>
+            <span>{post.time} </span>
+          </div>
+        ))
+      ) : (
+        <div>No posts found...</div>
+      )}
+    </div>
+  );
+};
+
+export default LeftSide;