client

mnnkhndlwl · Aug 4, 2023 · d82d2d3 · d82d2d3
1 parent 455fe5e
commit d82d2d3
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 62 deletions.
diff --git a/client/index.html b/client/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/vite.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Task Manager</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/public/vite.png b/client/public/vite.png
diff --git a/client/public/vite.svg b/client/public/vite.svg
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -1,27 +1,25 @@
-import './App.css';
+import "./App.css";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Login from './pages/Login';
+import Login from "./pages/Login";
 import Home from "./pages/Home";
 import { useSelector } from "react-redux";
-import Signin from './pages/Signin';
+import Signin from "./pages/Signin";
 
 function App() {
-
   const { currentUser } = useSelector((state) => state.user);
 
   return (
     <>
-       <BrowserRouter>
+      <BrowserRouter>
         <Routes>
           <Route path="/">
             <Route index element={currentUser ? <Home /> : <Login />} />
             <Route path="signin" element={<Signin />} />
           </Route>
         </Routes>
-
       </BrowserRouter>
     </>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
@@ -1,22 +1,19 @@
-import * as React from 'react';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
+import * as React from "react";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
 import { logout } from "../redux/userSlice";
 import { useDispatch } from "react-redux";
-import { useSelector } from 'react-redux';
 
 export default function Navbar() {
-
   const dispatch = useDispatch();
-  const { currentUser } = useSelector((state) => state.user);
 
   const handleLogout = async (e) => {
     e.preventDefault();
-      dispatch(logout());
-      localStorage.clear(); 
+    dispatch(logout());
+    localStorage.clear();
   };
 
   return (
@@ -27,9 +24,11 @@ export default function Navbar() {
             Task manager
           </Typography>
 
-          <Button color="inherit" onClick={handleLogout}>Logout</Button>
+          <Button color="inherit" onClick={handleLogout}>
+            Logout
+          </Button>
         </Toolbar>
       </AppBar>
     </Box>
   );
-}
+}
diff --git a/client/src/components/TaskCard.jsx b/client/src/components/TaskCard.jsx
@@ -12,24 +12,39 @@ import { userRequest } from "../utils/config";
 import Modal from "@mui/material/Modal";
 import TextField from "@mui/material/TextField";
 import Box from "@mui/material/Box";
+import { useState } from "react";
 import { useFormik } from "formik";
 import Button from "@mui/material/Button";
+import LinearProgress from "@mui/material/LinearProgress";
 
 const TaskCard = ({ title, desc, isCompleted, index, fetchOrders, id }) => {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
+  const [loading, setLoading] = useState(false);
 
   const handleChanged = async (event) => {
-    await userRequest.patch(`/api/task/update/${id}`, {
-      isCompleted: event.target.checked,
-    });
-    fetchOrders();
+    setLoading(true);
+    try {
+      await userRequest.patch(`/api/task/update/${id}`, {
+        isCompleted: event.target.checked,
+      });
+      fetchOrders();
+      setLoading(false);
+    } catch (error) {
+      setLoading(false);
+    }
   };
 
   const handleDelete = async () => {
-    await userRequest.delete(`/api/task/delete/${id}`);
-    fetchOrders();
+    try {
+      setLoading(true);
+      await userRequest.delete(`/api/task/delete/${id}`);
+      fetchOrders();
+      setLoading(false);
+    } catch (error) {
+      setLoading(false);
+    }
   };
 
   const style = {
@@ -51,19 +66,22 @@ const TaskCard = ({ title, desc, isCompleted, index, fetchOrders, id }) => {
     },
     onSubmit: async ({ title, desc }) => {
       try {
+        setLoading(true);
         const res = await userRequest.patch(`/api/task/update/${id}`, {
           title: title,
           desc: desc,
         });
         fetchOrders();
+        setLoading(false);
       } catch (error) {
-        console.log(error);
+        setLoading(false);
       }
     },
   });
 
   return (
     <>
+      {loading ? <LinearProgress /> : <></>}
       <Grid item key={index} xs={12} sm={8} md={4}>
         <Card
           sx={{

diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
@@ -1,5 +1,6 @@
 import Navbar from "../components/Navbar";
 import * as React from "react";
+import { useState } from "react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Modal from "@mui/material/Modal";
@@ -11,7 +12,8 @@ import Typography from "@mui/material/Typography";
 import TextField from "@mui/material/TextField";
 import Grid from "@mui/material/Grid";
 import TaskCard from "../components/TaskCard";
-import Container from '@mui/material/Container';
+import Container from "@mui/material/Container";
+import LinearProgress from "@mui/material/LinearProgress";
 
 const style = {
   position: "absolute",
@@ -28,7 +30,7 @@ const style = {
 const stylecards = {
   position: "absolute",
   top: "25%",
-  m:5,
+  m: 5,
   flexGrow: 1,
 };
 
@@ -45,10 +47,13 @@ function Home() {
   const handleClose = () => setOpen(false);
   const [error, setError] = React.useState("");
   const [tasks, setTasks] = React.useState([]);
+  const [loading, setLoading] = useState(false);
 
   const fetchOrders = async () => {
+    setLoading(true);
     const res = await userRequest.get(`/api/task/get`);
     setTasks(res.data);
+    setLoading(false);
   };
 
   React.useEffect(() => {
@@ -60,11 +65,13 @@ function Home() {
     validationSchema: TaskSchema,
     onSubmit: async ({ title, desc }) => {
       try {
+        setLoading(true);
         const res = await userRequest.post("/api/task/add", {
           title,
           desc,
         });
         fetchOrders();
+        setLoading(false);
       } catch (error) {
         setError(error.response["data"]["message"]);
       }
@@ -74,6 +81,7 @@ function Home() {
   return (
     <>
       <Navbar />
+      {loading ? <LinearProgress /> : <></>}
       <Button
         sx={buttonstyle}
         variant="contained"
@@ -134,23 +142,22 @@ function Home() {
             <Typography sx={{ color: "red" }}>{error}</Typography>
           </Box>
         </Box>
-
       </Modal>
-      <Container sx={{ py: 8,my: 5 }} maxWidth="md">
-          {/* End hero unit */}
-          <Grid container spacing={4}>
+      <Container sx={{ py: 8, my: 5 }} maxWidth="md">
+        {/* End hero unit */}
+        <Grid container spacing={4}>
           {tasks.map((task, index) => (
             <TaskCard
               title={task.title}
               id={task._id}
-              index={index}
+              key={task._id}
               desc={task.desc}
               isCompleted={task.isCompleted}
               fetchOrders={fetchOrders}
             />
           ))}
         </Grid>
-        </Container>
+      </Container>
     </>
   );
 }

diff --git a/client/src/pages/Login.jsx b/client/src/pages/Login.jsx
@@ -4,8 +4,6 @@ import Avatar from "@mui/material/Avatar";
 import Button from "@mui/material/Button";
 import CssBaseline from "@mui/material/CssBaseline";
 import TextField from "@mui/material/TextField";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Checkbox from "@mui/material/Checkbox";
 import { Link } from "react-router-dom";
 import Paper from "@mui/material/Paper";
 import Box from "@mui/material/Box";
@@ -16,9 +14,9 @@ import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { useFormik } from "formik";
 import { LoginInitialValues, LoginSchema } from "../schemas/loginSchema";
 import { useDispatch } from "react-redux";
-import {publicRequest} from "../utils/config";
+import { publicRequest } from "../utils/config";
 import { loginFailure, loginStart, loginSuccess } from "../redux/userSlice";
-
+import LinearProgress from "@mui/material/LinearProgress";
 
 function Copyright(props) {
   return (
@@ -43,6 +41,7 @@ function Copyright(props) {
 const defaultTheme = createTheme();
 
 function Login() {
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const dispatch = useDispatch();
 
@@ -51,12 +50,14 @@ function Login() {
     validationSchema: LoginSchema,
     onSubmit: async ({ name, password }) => {
       dispatch(loginStart());
+      setLoading(true);
       try {
         const res = await publicRequest.post("/api/users/login", {
           name,
           password,
         });
         dispatch(loginSuccess(res.data));
+        setLoading(false);
       } catch (error) {
         setError(error.response["data"]["message"]);
         dispatch(loginFailure());
@@ -66,6 +67,7 @@ function Login() {
 
   return (
     <ThemeProvider theme={defaultTheme}>
+      {loading ? <LinearProgress /> : <></>}
       <Grid container component="main" sx={{ height: "100vh" }}>
         <CssBaseline />
         <Grid
@@ -118,9 +120,7 @@ function Login() {
                 value={values.name}
                 error={touched.name && errors.name !== undefined}
                 helperText={
-                  touched.name && errors.name !== undefined
-                    ? errors.name
-                    : ""
+                  touched.name && errors.name !== undefined ? errors.name : ""
                 }
               />
               <TextField
@@ -149,15 +149,13 @@ function Login() {
               </Button>
               <Typography sx={{ color: "red" }}>{error}</Typography>
               <Grid container>
-              <Grid item xs>
+                <Grid item xs>
                   <Link href="#" variant="body2">
                     Forgot password?
                   </Link>
                 </Grid>
                 <Grid item xs>
-                  <Link to="/signin">
-                    {"Don't have an account? Sign Up"}
-                  </Link>
+                  <Link to="/signin">{"Don't have an account? Sign Up"}</Link>
                 </Grid>
               </Grid>
               <Copyright sx={{ mt: 5 }} />