Fix: Improve styles and date error handlers

loweffort-alt · Sep 6, 2023 · 54aabfa · 54aabfa
1 parent cafeef1
commit 54aabfa
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 25 deletions.
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -16,7 +16,7 @@ function App() {
     <AuthProvider>
       <TaskProvider>
         <BrowserRouter>
-          <main className="container mx-auto px-10">
+          <main className="container mx-auto px-5 sm:px-10">
             <Navbar />
             <Routes>
               {/*Public Paths*/}

diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
@@ -5,24 +5,28 @@ function Navbar() {
   const { isAuthenticated, logout, user } = useAuth();
 
   return (
-    <nav className="bg-zinc-700 my-3 flex justify-between py-5 px-10 rounded-lg">
-      <Link to="/">
+    <nav className="container bg-zinc-700 my-3 flex justify-between py-5 px-5 sm:px-10 rounded-lg items-center">
+      <Link to={isAuthenticated ? "/tasks" : "/"}>
         <h1 className="text-2xl font-bold">Task Manager</h1>
+        {isAuthenticated ? <h3> Welcome {user.username} </h3> : ""}
       </Link>
-      <ul className="flex gap-x-10">
+      <ul className="grid grid-cols-1 sm:grid-cols-2 gap-5">
         {isAuthenticated ? (
           <>
-            <li>Welcome {user.username}</li>
             <li>
               <Link
                 to="/new-task"
-                className="bg-indigo-500 px-4 py-1 rounded-sm"
+                className="bg-indigo-500 hover:bg-indigo-700 px-2 py-1 sm:px-4 rounded-sm"
               >
                 Add Task
               </Link>
             </li>
             <li>
-              <Link to="/" onClick={() => logout()}>
+              <Link
+                to="/"
+                onClick={() => logout()}
+                className="bg-red-700 hover:bg-red-800 px-2 py-1 sm:px-4 rounded-sm"
+              >
                 Logout
               </Link>
             </li>

diff --git a/client/src/components/TaskCard.jsx b/client/src/components/TaskCard.jsx
@@ -1,12 +1,16 @@
 import { useNavigate } from "react-router-dom";
 import { useTask } from "../context/TaskContext";
 
+import days from "dayjs";
+import utc from "dayjs/plugin/utc";
+days.extend(utc);
+
 const TaskCard = ({ task }) => {
   const { deleteTask } = useTask();
   const navigate = useNavigate();
 
   return (
-    <li className="bg-zinc-800 max-w-md w-full p-5 my-5 rounded-md">
+    <div className="bg-zinc-800 max-w-md w-full p-5 my-5 rounded-md">
       <header className="flex justify-between">
         <h1 className="text-xl font-bold">{task.title}</h1>
         <div className="flex gap-4">
@@ -27,13 +31,13 @@ const TaskCard = ({ task }) => {
       <p className="text-slate-300">{task.description}</p>
       <div className="flex justify-between">
         <p className="text-xs text-slate-50">
-          {new Date(task.date).toLocaleDateString()}
+          {days(task.date).utc().format("DD/MM/YYYY")}
         </p>
         <p className="text-xs text-slate-50">
-          {new Date(task.date).toLocaleTimeString()}
+          {days(task.date).utc().local().format("HH:mm")}
         </p>
       </div>
-    </li>
+    </div>
   );
 };
 

diff --git a/client/src/pages/AllTaskPage.jsx b/client/src/pages/AllTaskPage.jsx
@@ -9,13 +9,13 @@ const TaskFormPage = () => {
     getTasks();
   }, []);
 
+  if (tasks.length === 0) return <h1> No Tasks </h1>;
+
   return (
-    <div className="flex h-[calc(100vh-100px)] items-center justify-center">
-      <ul>
-        {tasks.map((e) => (
-          <TaskCard task={e} key={e._id} />
-        ))}
-      </ul>
+    <div className="grid grid-cols-1 lg:grid-cols-3 sm:grid-cols-2 gap-2">
+      {tasks.map((e) => (
+        <TaskCard task={e} key={e._id} />
+      ))}
     </div>
   );
 };

diff --git a/client/src/pages/TaskFormPage.jsx b/client/src/pages/TaskFormPage.jsx
@@ -3,6 +3,11 @@ import { useTask } from "../context/TaskContext";
 import { useNavigate, useParams } from "react-router-dom";
 import { useEffect } from "react";
 
+// Formateo date a uno válido por mi backend
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+dayjs.extend(utc);
+
 const TaskFormPage = () => {
   const { register, handleSubmit, setValue } = useForm();
   const { createTask, getTasks, getSingleTask, editTask } = useTask();
@@ -16,17 +21,22 @@ const TaskFormPage = () => {
         const res = await getSingleTask(params.id);
         setValue("title", res.title);
         setValue("description", res.description);
+        setValue("date", dayjs(res.date).utc().format("YYYY-MM-DD"));
       }
     }
 
     loadTask();
   }, []);
 
   const onSubmit = handleSubmit((data) => {
+    const dataValid = {
+      ...data,
+      date: data.date ? dayjs.utc(data.date).format() : dayjs.utc().format(),
+    };
     if (params.id) {
-      editTask(params.id, data);
+      editTask(params.id, dataValid);
     } else {
-      createTask(data);
+      createTask(dataValid);
     }
     getTasks();
     navigate("/tasks");
@@ -37,25 +47,31 @@ const TaskFormPage = () => {
       <div className="bg-zinc-800 max-w-md w-full p-10 rounded-md text-center">
         <h1 className="text-2xl font-bold text-center mb-4">Create new task</h1>
         <form action="" onSubmit={() => onSubmit()}>
-          <div className="flex-col gap-3">
+          <div className="flex flex-col text-left">
+            <label htmlFor="title">Title</label>
             <input
               type="text"
               placeholder="Title"
               {...register("title")}
               autoFocus
-              className="w-full bg-zinc-700 text-white px-4 py-2 rounded-md"
+              className="w-full bg-zinc-700 text-white px-4 py-2 mb-4 mt-2 rounded-md"
             />
+            <label htmlFor="description">Description</label>
             <textarea
-              id=""
-              name=""
               placeholder="Description"
               {...register("description")}
-              className="w-full bg-zinc-700 text-white px-4 py-2 mt-2 rounded-md"
+              className="w-full bg-zinc-700 text-white px-4 py-2 mb-4 mt-2 rounded-md"
               rows="3"
             ></textarea>
+            <label htmlFor="date">Date</label>
+            <input
+              type="date"
+              {...register("date")}
+              className="w-full bg-zinc-700 text-white px-4 py-2 mb-4 mt-2 rounded-md"
+            />
             <button
               type="submit"
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+              className="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 mt-5 rounded"
             >
               Post
             </button>