Dev posts from backend to frontend

client/src/component/SaveTime.js

@@ -16,25 +16,31 @@ const style = {
 };
 
 const SaveTime = (props) => {
-  const { time, open, toggleModal } = props;
+  const { time, open, toggleModal, setFetchTimes } = props;
   const [input, setInput] = useState("");
 
   const handleChange = (e) => {
     setInput(() => e.target.value);
   };
 
-  const handelSave = (e) => {
+  const handelSave = async (e) => {
     e.preventDefault();
 
-    const timeNote = {
-      note: input,
-      time: time / 10,
-      savedAt: new Date(),
-    };
-    console.log(timeNote);
-    console.log("SAVE DATA TO DATABASE");
-    setInput("");
+    //formating time as a string so it matches db
+    const timeString = `${("0" + Math.floor((time / 60000) % 60)).slice(-2)}:${(
+      "0" + Math.floor((time / 1000) % 60)
+    ).slice(-2)}:${("0" + ((time / 10) % 100)).slice(-2)}`;
+
+    await fetch("http://localhost:5000/api/stopwatch/", {
+      method: "POST",
+      body: JSON.stringify({ note: input, time: timeString }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
     toggleModal(false);
+    setFetchTimes(true);
   };
 
   return (

client/src/component/Stopwatch.js

@@ -11,6 +11,7 @@ const Stopwatch = () => {
   const [isActive, setIsActive] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
+  const [fetchTimes, setFetchTimes] = useState(true);
   const countRef = useRef(null);
 
   const handleStart = () => {
@@ -64,9 +65,14 @@ const Stopwatch = () => {
         <SaveAltIcon onClick={() => toggleModal(true)} />
       </Button>
 
-      <SaveTime time={time} open={modalOpen} toggleModal={toggleModal} />
+      <SaveTime
+        setFetchTimes={setFetchTimes}
+        time={time}
+        open={modalOpen}
+        toggleModal={toggleModal}
+      />
 
-      <TimePosts />
+      <TimePosts fetchTimes={fetchTimes} setFetchTimes={setFetchTimes} />
     </div>
   );
 };

client/src/component/Time.js

@@ -1,13 +1,15 @@
 const Time = (props) => {
   return (
     <h1>
-      <span className="hour">
+      <span className="min">
         {("0" + Math.floor((props.time / 60000) % 60)).slice(-2)}:
       </span>
-      <span className="min">
+      <span className="sec">
         {("0" + Math.floor((props.time / 1000) % 60)).slice(-2)}:
       </span>
-      <span className="sec">{("0" + ((props.time / 10) % 100)).slice(-2)}</span>
+      <span className="milsec">
+        {("0" + ((props.time / 10) % 100)).slice(-2)}
+      </span>
     </h1>
   );
 };

client/src/component/posts/Post.js

@@ -1,12 +1,24 @@
 import { Card, Stack } from "@mui/material";
 
-const Post = ({ post }) => {
+const Post = ({ post, setPosts }) => {
+  const handleDelete = async () => {
+    await fetch("http://localhost:5000/api/stopwatch/" + post.id, {
+      method: "DELETE",
+    });
+
+    fetch("http://localhost:5000/api/stopwatch")
+      .then((res) => res.json())
+      .then((data) => setPosts(data));
+  };
+
   return (
     <Stack margin={2}>
       <Card variant="outlined">
         <h2>{post.note}</h2>
         <p>{post.time}</p>
-        <p>{post.savedAt.toISOString()}</p>
+        <p>{post.savedAt}</p>
+
+        <button onClick={handleDelete}>remove</button>
       </Card>
     </Stack>
   );

client/src/component/posts/TimePosts.js

@@ -1,25 +1,33 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Post from "./Post";
 
-const TimePosts = () => {
-  const timePosts = [
-    {
-      note: "Run 3k",
-      time: "00:30:00",
-      savedAt: new Date(),
-    },
-  ];
-  const [posts, setPosts] = useState(timePosts);
+const TimePosts = ({ fetchTimes, setFetchTimes }) => {
+  const [posts, setPosts] = useState([]);
+
+  useEffect(() => {
+    if (fetchTimes) {
+      const fetchData = async () => {
+        const data = await fetch("http://localhost:5000/api/stopwatch/", {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        return data.json();
+      };
+      fetchData().then((res) => {
+        setPosts(res);
+        setFetchTimes(false);
+      });
+    }
+  }, [fetchTimes, setFetchTimes]);
 
   return (
     <div>
       {posts.map((post, index) => (
         <div key={index}>
-          <Post post={post} />
+          <Post post={post} setPosts={setPosts} />
         </div>
       ))}
-
-      {console.log(timePosts)}
     </div>
   );
 };

server/routes/timeRoutes.js

@@ -1,36 +1,39 @@
-import express from 'express';
-import { PrismaClient } from '@prisma/client'        
-const prisma = new PrismaClient()
-
+import express from "express";
+import { PrismaClient } from "@prisma/client";
+const prisma = new PrismaClient();
 
 const route = express.Router();
 
 route.get("/", async (req, res) => {
-
-    const savedtimes = await prisma.posts.findMany({
-        select: {
-            id: true,
-            note:true,
-            time: true,
-            savedAt: true
-        }
-    })
-
-    res.json(savedtimes)
-
-})
+  const savedtimes = await prisma.posts.findMany({
+    select: {
+      id: true,
+      note: true,
+      time: true,
+      savedAt: true,
+    },
+  });
+
+  res.json(savedtimes);
+});
 
 route.post("/", async (req, res) => {
-    const savedtime = await prisma.posts.create({
-        data: {
-            id: req.body.id,
-            note:req.body.note,
-            time: req.body.time,
-
-        }
-    })
-    res.json(savedtime)
-
-})
-
-export default route;
+  const savedtime = await prisma.posts.create({
+    data: {
+      note: req.body.note,
+      time: req.body.time,
+    },
+  });
+  res.json(savedtime);
+});
+
+route.delete("/:id", async (req, res) => {
+  await prisma.posts.delete({
+    where: {
+      id: parseInt(req.params.id),
+    },
+  });
+  res.sendStatus(204);
+});
+
+export default route;