From cd22073de851542d769356d9eb411051bd7db554 Mon Sep 17 00:00:00 2001 From: heiherilala Date: Thu, 15 Jun 2023 10:22:51 +0300 Subject: [PATCH 1/4] feat: time diff --- src/pages/axampde.js | 0 src/pages/index.tsx | 45 +++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 src/pages/axampde.js diff --git a/src/pages/axampde.js b/src/pages/axampde.js new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/index.tsx b/src/pages/index.tsx index cae8afc..b630c41 100644 --- 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 = async () => { + const serverTimesDate = new Date(); + const serverTimes = serverTimesDate.getTime() + return { + props: { + serverData: serverTimes, + }, + }; +}; + + +const Home: React.FC = ({serverData}) => { + //let serverTimes:number = serverData; -export default function Home() { + const [timeDifference, setTimeDifference] = useState(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 ( <> @@ -29,13 +66,13 @@ export default function Home() { {/* Display here the server time (DD-MM-AAAA HH:mm)*/}

Server time:{" "} - {/* Replace with the value */} + {" " + serverData!=null ? formatTimeDifference(serverData):" " }

{/* Display here the time difference between the server side and the client side */}

Time diff:{" "} - {/* Replace with the value */} + {" " + timeDifference == null ?" c'est null ": formatTimeDifference(timeDifference??0)}

@@ -46,3 +83,5 @@ export default function Home() { ); } + +export default Home; \ No newline at end of file From cdc8a60f5ae79ce6ab903e76df35d424f5f09863 Mon Sep 17 00:00:00 2001 From: heiherilala Date: Thu, 15 Jun 2023 11:51:59 +0300 Subject: [PATCH 2/4] feat: zusted --- src/store/useTaskManager.ts | 44 +++++++++++++++++++++++++++++++++---- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/src/store/useTaskManager.ts b/src/store/useTaskManager.ts index 9b5c715..ba088c5 100644 --- 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((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 -} \ No newline at end of file +export default useTaskManager; + + +/* +//use: +import useStore from '@/zustand/useChannel'; +export default function SideBar() { + const { idChannel, idUser, setIdChannel, setIdUser } = useStore(); + return <> + } +*/ \ No newline at end of file From 993fe089e76b261eda129bc3ce90ea8f56f58665 Mon Sep 17 00:00:00 2001 From: heiherilala Date: Thu, 15 Jun 2023 11:52:32 +0300 Subject: [PATCH 3/4] feat: hooks --- src/hooks/useLocalStorage.ts | 30 +++++++++++++++++++++++++----- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts index fefb06f..d4314c9 100644 --- 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 -} \ No newline at end of file +type LocalStorageValue = string | null; + +const useLocalStorage = ( + key: LocalStorageKey, + initialValue: LocalStorageValue +): [LocalStorageValue, (value: LocalStorageValue) => void] => { + const [value, setValue] = useState(() => { + 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; From 3ba119c620a5da608e4088b384dddc2ef4e420ea Mon Sep 17 00:00:00 2001 From: heiherilala Date: Thu, 15 Jun 2023 11:53:03 +0300 Subject: [PATCH 4/4] feat: tasks --- src/pages/tasks.tsx | 42 +++++++++++++++++------------------------- 1 file changed, 17 insertions(+), 25 deletions(-) diff --git a/src/pages/tasks.tsx b/src/pages/tasks.tsx index f392f95..9bf0c0f 100644 --- 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) => { - // 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 (

Task Manager

- + setTitleValue(e.target.value)}/>
    - {/* - {filteredTasks.map((task) => ( + {filteredTasks.map((task:Task) => (
  • - handleUpdateTask(task.id, { title: e.target.value }) + handleUpdateTask(task.id, {...task, title: e.target.value }) } />
    • ))} - */}
);