Sitraka003 · heiherilala · Jun 15, 2023 · Jun 15, 2023 · Jun 15, 2023 · Jun 15, 2023
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
@@ -1,7 +1,27 @@
-const useLocalStorage = () => {
+import { useState, useEffect } from 'react';
 
-}
+type LocalStorageKey = string;
 
-export {
-  useLocalStorage
-}
+type LocalStorageValue = string | null;
+
+const useLocalStorage = (
+  key: LocalStorageKey,
+  initialValue: LocalStorageValue
+): [LocalStorageValue, (value: LocalStorageValue) => void] => {
+  const [value, setValue] = useState<LocalStorageValue>(() => {
+    const storedValue = localStorage.getItem(key);
+    return storedValue !== null ? storedValue : initialValue;
+  });
+
+  useEffect(() => {
+    if (value !== null) {
+      localStorage.setItem(key, value);
+    } else {
+      localStorage.removeItem(key);
+    }
+  }, [key, value]);
+
+  return [value, setValue];
+};
+
+export default useLocalStorage;
diff --git a/src/pages/axampde.js b/src/pages/axampde.js
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,7 @@
+import { GetServerSideProps } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 
 /**
   Calculates the time difference between the server time and client time.
@@ -9,12 +11,47 @@ import { useRouter } from "next/router";
 */
 const calculateTimeDifference = (server: Date, client: Date) => {};
 
+interface TimeProps {
+  serverData: number;
+}
+
+export const getServerSideProps: GetServerSideProps<TimeProps> = async () => {
+  const serverTimesDate = new Date();
+ const serverTimes = serverTimesDate.getTime()
+  return {
+    props: {
+      serverData: serverTimes,
+    },
+  };
+};
+
+
+const Home: React.FC<TimeProps> = ({serverData}) => {
+  //let serverTimes:number = serverData;
 
-export default function Home() {
+  const [timeDifference, setTimeDifference] = useState<number|null>(null);
   const router = useRouter();
   const moveToTaskManager = () => {
     router.push("/tasks");
   }
+  useEffect(()=>{
+    const currentTime = new Date();
+    const currentTimeNumber = currentTime.getTime()
+    if (typeof serverData == "number") {
+      setTimeDifference(Math.abs(serverData-currentTimeNumber))
+    }
+  },[serverData])
+
+  const formatTimeDifference = (difference:number) => {
+    // Convertir la différence en jours, heures, minutes et secondes
+    const seconds = Math.floor(difference / 1000) % 60;
+    const minutes = Math.floor(difference / (1000 * 60)) % 60;
+    const hours = Math.floor(difference / (1000 * 60 * 60)) % 24;
+    const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+
+    return ` ${days} jours, ${hours} heures, ${minutes} minutes, ${seconds} secondes`;
+  };
+
   return (
     <>
       <Head>
@@ -29,13 +66,13 @@ export default function Home() {
           {/* Display here the server time (DD-MM-AAAA HH:mm)*/}
           <p>
             Server time:{" "}
-            <span className="serverTime">{/* Replace with the value */}</span>
+            <span className="serverTime">{" " + serverData!=null ? formatTimeDifference(serverData):" " }</span>
           </p>
 
           {/* Display here the time difference between the server side and the client side */}
           <p>
             Time diff:{" "}
-            <span className="serverTime">{/* Replace with the value */}</span>
+            <span className="serverTime">{" " +  timeDifference == null ?" c'est null ": formatTimeDifference(timeDifference??0)}</span>
           </p>
         </div>
 
@@ -46,3 +83,5 @@ export default function Home() {
     </>
   );
 }
+
+export default Home;
diff --git a/src/pages/tasks.tsx b/src/pages/tasks.tsx
@@ -1,74 +1,66 @@
-import React, { ChangeEvent, useRef } from 'react';
+import useTaskManager from '@/store/useTaskManager';
+import React, { ChangeEvent, useRef, useState } from 'react';
 
-interface Task {
+export interface Task {
   id: number,
   title: string,
   completed: boolean,
 }
 
 const TaskManager = () => {
-  // const createTaskRef = ...:
-  // const {
-  //   tasks,
-  //   searchTask,
-  //   addTask,
-  //   updateTask,
-  //   deleteTask,
-  //   setSearchTask,
-  // } = useTaskManager();
+  const {tasks, searchTask, addTask , setSearchTask, deleteTask, updateTask} = useTaskManager();
+  const [titleValue, setTitleValue] = useState('')
+  //const createTaskRef = ...:
 
   const handleAddTask = () => {
-    const title = ""; // Replace with the value in the createTaskRef 
+    const title = titleValue; // Replace with the value in the createTaskRef 
     const newTask = {
       id: Date.now(),
       title,
       completed: false,
     };
-    // addTask(newTask);
+    addTask(newTask);
   };
 
   const handleUpdateTask = (taskId: number, updatedTask: Task) => {
-    // updateTask(taskId, updatedTask);
+    updateTask(taskId, updatedTask);
   };
 
   const handleDeleteTask = (taskId: number) => {
-    // deleteTask(taskId);
+    deleteTask(taskId);
   };
 
   const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
-    // setSearchTask(e.target.value);
+    setSearchTask(e.target.value);
   };
 
   // See! I already give you everything!
-  // const filteredTasks = tasks.filter((task) =>
-  //   task.title.toLowerCase().includes(searchTask.toLowerCase())
-  // );
-
+  const filteredTasks = tasks.filter((task) =>
+    task.title.toLowerCase().includes(searchTask.toLowerCase())
+  );
   return (
     <div>
       <h1>Task Manager</h1>
 
-      <input type="text" /*ref={}*//>
+      <input type="text" value={titleValue} onChange={(e)=>setTitleValue(e.target.value)}/>
 
       <button onClick={handleAddTask}>Add Task</button>
 
       <input type="text" onChange={handleSearch} placeholder="Search Task" />
 
       <ul>
-        {/* 
-        {filteredTasks.map((task) => (
+        {filteredTasks.map((task:Task) => (
           <li key={task.id}>
             <input
               type="text"
               value={task.title}
               onChange={(e) =>
-                handleUpdateTask(task.id, { title: e.target.value })
+                handleUpdateTask(task.id, {...task, title: e.target.value })
               }
             />
             <button onClick={() => handleDeleteTask(task.id)}>Delete</button>
           </li>
         ))}
-        */}
       </ul>
     </div>
   );

diff --git a/src/store/useTaskManager.ts b/src/store/useTaskManager.ts
@@ -1,7 +1,43 @@
-const useTaskManager = () => {
+import { Task } from '@/pages/tasks';
+import { create } from 'zustand';
 
+const useTaskManager = create<DateState>((set, get) => ({
+  tasks: [],
+  addTask: (newTache: Task) =>
+    set((state) => ({ ...state, tasks: [...state.tasks,newTache]})),
+  idUser: null,
+  searchTask: "",
+  setSearchTask: (newSearchTache: string)=>
+  set((state) => ({ ...state, searchTask: newSearchTache})),
+  deleteTask: (idTask: number) =>{
+    let tastsNow = get().tasks;
+    const index = tastsNow.findIndex(item => item.id === idTask);
+    tastsNow.splice(index, 1)
+  set((state) => ({ ...state, tasks: tastsNow}))},
+  updateTask: (taskId: number, updatedTask:Task) =>{
+    let tastsNow = get().tasks;
+    const index = tastsNow.findIndex(item => item.id === taskId);
+    tastsNow[index] = updatedTask
+  set((state) => ({ ...state, tasks: tastsNow}))},
+}))
+
+export type DateState = {
+  tasks: Task[];
+  addTask: (newTache: Task) => void;
+  searchTask: string;
+  setSearchTask: (newSearchTache: string) => void;
+  deleteTask: (idTask: number) => void;
+  updateTask: (taskId: number, updatedTask:Task)=>void
 }
 
-export {
-  useTaskManager
-}
+export default useTaskManager;
+
+
+/*
+//use:
+import useStore from '@/zustand/useChannel';
+export default function SideBar() {
+  const { idChannel, idUser, setIdChannel, setIdUser } = useStore();
+  return <></>
+  }
+*/