i think i started learning backend

Author: ForLoopCodes

package-lock.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

package.json

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
 * {
   font-family: Poppins;
   transition: 0.3s ease;

public/css/theme.css

@@ -6,90 +6,20 @@ import Tally from "./bases/Tally";
 import Expenses from "./bases/Expenses";
 import Mood from "./bases/Mood";
 
-function Main() {
-  const [moods] = React.useState([
-    { id: 1, mood: "IDK", date: "01-01-2020" },
-    { id: 2, mood: "Sed Lyf", date: "02-01-2020" },
-  ]);
-  const [expenses] = React.useState([
-    {
-      id: 1,
-      name: "Rent",
-      amount: 1000,
-      category: "monthly",
-      date: "01-01-2020",
-    },
-    {
-      id: 2,
-      name: "Milk",
-      amount: 100,
-      category: "daily",
-      date: "01-02-2020",
-    },
-    {
-      id: 3,
-      name: "Lambo",
-      amount: 10,
-      category: "daily",
-      date: "01-01-2020",
-    },
-    {
-      id: 4,
-      name: "Bread",
-      amount: 10000,
-      category: "daily",
-      date: "01-02-2020",
-    },
-  ]);
-  const [tallies] = React.useState([
-    { id: 1, category: "home", val: 1, name: "Tally 1" },
-    { id: 2, category: "other", val: 5, name: "Tally 2" },
-    { id: 3, category: "work", val: 10, name: "Tally 3" },
-  ]);
-  const [tasks] = React.useState([
-    {
-      id: 1,
-      category: "work",
-      name: "Open the Fridge.",
-      done: false,
-      subTasks: [
-        { id: 1, name: "Touch the door.", done: false },
-        { id: 2, name: "Hold it.", done: false },
-      ],
-    },
-    {
-      id: 2,
-      category: "work",
-      name: "Pick some food.",
-      done: false,
-      subTasks: [
-        { id: 1, name: "Touch the door.", done: false },
-        { id: 2, name: "Hold it.", done: false },
-      ],
-    },
-    {
-      id: 3,
-      category: "home",
-      name: "Eat it.",
-      done: false,
-      subTasks: [],
-    },
-  ]);
+export default function Main() {
   return (
     <div className="main">
-      <Mood moods={moods} />
+      <Mood />
       <hr />
-      <Expenses expenses={expenses} />
+      <Expenses />
       <hr />
       <Timer h={0} m={30} s={0} />
       <hr />
-      <Tally tallies={tallies} />
+      <Tally />
       <hr />
-      <Tasks tasks={tasks} />
+      <Tasks />
       <hr />
       <LeaveScreen />
     </div>
   );
 }
-
-export default Main;

src/components/Main.jsx

@@ -1,9 +1,20 @@
-import React from "react";
+import React, { useEffect } from "react";
+const axios = require("axios");
 
-export default function Expenses(props) {
+export default function Expenses() {
   const [symbol, setSymbol] = React.useState("$");
-  const [expenses, setExpenses] = React.useState(props.expenses);
+  const [expenses, setExpenses] = React.useState([]);
   const [dates, setDates] = React.useState(["01-01-2020", "01-02-2020"]);
+  useEffect(() => {
+    axios
+      .get("http://localhost:3001/expenses")
+      .then((response) => {
+        setExpenses(response.data);
+      })
+      .catch((err) => {
+        console.log("error");
+      });
+  }, []);
   const addExpense = (e) => {
     if (
       e.key === "Enter" &&

src/components/bases/Expenses.jsx

@@ -1,8 +1,19 @@
-import React from "react";
+import React, { useEffect } from "react";
+import axios from "axios";
 
-export default function Mood(props) {
-  const [moods, setMoods] = React.useState(props.moods);
+export default function Mood() {
+  const [moods, setMoods] = React.useState([]);
   const [dates, setDates] = React.useState(["01-01-2020", "02-01-2020"]);
+  useEffect(() => {
+    axios
+      .get("http://localhost:3001/moods")
+      .then((response) => {
+        setMoods(response.data);
+      })
+      .catch((err) => {
+        console.log("error");
+      });
+  }, []);
   const returnMoodOfDate = (date) => {
     return moods.filter((mood) => mood.date === date);
   };

src/components/bases/Mood.jsx

@@ -1,8 +1,19 @@
-import React from "react";
+import React, { useEffect } from "react";
+import axios from "axios";
 
-export default function Tally(props) {
-  const [tallies, setTallies] = React.useState(props.tallies);
+export default function Tally() {
+  const [tallies, setTallies] = React.useState([]);
   const [categories, setCategories] = React.useState(["other", "work", "home"]);
+  useEffect(() => {
+    axios
+      .get("http://localhost:3001/tallies")
+      .then((response) => {
+        setTallies(response.data);
+      })
+      .catch((err) => {
+        console.log("error");
+      });
+  }, []);
   const minusCount = (id) => {
     setTallies(
       tallies.map((tally) => {

src/components/bases/Tally.jsx

@@ -1,7 +1,18 @@
-import React from "react";
+import React, { useEffect } from "react";
+const axios = require("axios");
 
-export default function Tasks(props) {
-  const [tasks, setTasks] = React.useState(props.tasks);
+export default function Tasks() {
+  const [tasks, setTasks] = React.useState([]);
+  useEffect(() => {
+    axios
+      .get("http://localhost:3001/tasks")
+      .then((response) => {
+        setTasks(response.data);
+      })
+      .catch((err) => {
+        console.log("error");
+      });
+  }, []);
   const [categories, setCategories] = React.useState(["other", "work", "home"]);
   const addTask = (e) => {
     if (e.key === "Enter" && e.target.value !== "") {

src/components/bases/Tasks.jsx

@@ -92,6 +92,15 @@ export default function Timer(props) {
                   saveS.toString().padStart(2, "0"),
                 ...history,
               ]);
+              isFocus
+                ? setTotalTimeFocused(
+                    totalTimeFocused +
+                      (new Date().getTime() - startTime.getTime()) / 60000
+                  )
+                : setTotalTimeBreak(
+                    totalTimeBreak +
+                      (new Date().getTime() - startTime.getTime()) / 60000
+                  );
             } else {
               setH(h - 1);
               setM(59);
@@ -107,7 +116,20 @@ export default function Timer(props) {
       }, 1000);
       return () => clearInterval(interval);
     }
-  }, [started, h, m, s, saveH, saveM, saveS, history]);
+  }, [
+    started,
+    h,
+    m,
+    s,
+    saveH,
+    saveM,
+    saveS,
+    isFocus,
+    startTime,
+    history,
+    totalTimeBreak,
+    totalTimeFocused,
+  ]);
   if (h < 0) {
     setH(0);
     setM(0);