diff --git a/package-lock.json b/package-lock.json index 72d5c68..f6f6758 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "typescript": "5.1.3", + "uuid": "^9.0.0", "zustand": "^4.3.8" } }, @@ -3429,6 +3430,14 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/uuid": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", @@ -5843,6 +5852,11 @@ "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", "requires": {} }, + "uuid": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==" + }, "watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/package.json b/package.json index 8544017..7e7b720 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "typescript": "5.1.3", + "uuid": "^9.0.0", "zustand": "^4.3.8" } } diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts index fefb06f..167f6b0 100644 --- a/src/hooks/useLocalStorage.ts +++ b/src/hooks/useLocalStorage.ts @@ -1,5 +1,10 @@ -const useLocalStorage = () => { - +const useLocalStorage = (item:any|null,localName="localeTask") => { + if (item) { + localStorage.setItem(localName,item) + }else{ + return localStorage.getItem(localName) + } + } export { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index cae8afc..aac769a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,8 @@ +import { formatDate, timeDifference } from "@/utils"; +import { GetServerSideProps, InferGetServerSidePropsType } 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. @@ -10,11 +13,21 @@ import { useRouter } from "next/router"; const calculateTimeDifference = (server: Date, client: Date) => {}; -export default function Home() { +export default function Home({ + time, +}: InferGetServerSidePropsType) { const router = useRouter(); const moveToTaskManager = () => { router.push("/tasks"); } + const [clientTime,setClientTime] = useState(new Date (Date().toString())) + const [serverTime,setServerTime] = useState(new Date(time.servertime)) + const[diff,setDiff] = useState("") + useEffect(() => { + setClientTime(new Date (Date().toString())) + setDiff(timeDifference(clientTime,serverTime)) + }, []) + return ( <> @@ -27,15 +40,16 @@ export default function Home() {

The easiest exam you will ever find

{/* Display here the server time (DD-MM-AAAA HH:mm)*/} + {}

- Server time:{" "} + Server time: {formatDate(serverTime) } {/* Replace with the value */}

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

Time diff:{" "} - {/* Replace with the value */} + {diff}

@@ -46,3 +60,15 @@ export default function Home() { ); } + + +type ServerTime = { + servertime: string +} + +export const getServerSideProps: GetServerSideProps<{ + time: ServerTime +}> = async () => { + const time = { servertime: Date().toString() } + return { props: { time } } +} \ No newline at end of file diff --git a/src/store/useTaskManager.ts b/src/store/useTaskManager.ts index 9b5c715..213cf21 100644 --- a/src/store/useTaskManager.ts +++ b/src/store/useTaskManager.ts @@ -1,7 +1,65 @@ -const useTaskManager = () => { +import create, { SetState } from 'zustand'; +interface Task { + id: string; + title: string; + completed: boolean; +} + +interface TaskManagerState { + tasks: Task[]; + searchTask: Task[]; + addTask: (newTask: Task) => void; + updateTask: (taskId: string, updatedTask: Partial) => void; + deleteTask: (taskId: string) => void; + setSearchTask: (searchText: string) => void; +} + + +import create, { SetState } from 'zustand'; +interface Task { + id: string; + title: string; + completed: boolean; } +interface TaskManagerState { + tasks: Task[]; + searchTask: Task[]; + addTask: (newTask: Task) => void; + updateTask: (taskId: string, updatedTask: Partial) => void; + deleteTask: (taskId: string) => void; + setSearchTask: (searchText: string) => void; +} + +const useTaskManager = create((set: SetState) => ({ + tasks: [], + searchTask: [], + addTask: (newTask) => { + set((state) => ({ + tasks: [...state.tasks, newTask], + })); + }, + updateTask: (taskId, updatedTask) => { + set((state) => ({ + tasks: state.tasks.map((task) => + task.id === taskId ? { ...task, ...updatedTask } : task + ), + })); + }, + deleteTask: (taskId) => { + set((state) => ({ + tasks: state.tasks.filter((task) => task.id !== taskId), + })); + }, + setSearchTask: (searchText) => { + set((state) => ({ + searchTask: state.tasks.filter((task) => task.title.includes(searchText)), + })); + }, +})); + + export { useTaskManager } \ No newline at end of file diff --git a/src/utils/index.ts b/src/utils/index.ts index 5dbf6c2..d0bf0a3 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -10,3 +10,40 @@ const wait = (milliseconds: number) => { }; export { wait }; + +//calcul la difference en 02 dates, puis la formate +export function timeDifference(date1:Date, date2:Date) { + // Convertir les dates en millisecondes + var diff = Math.abs(date1.getTime() - date2.getTime()); + + // Calculer les valeurs de temps + var seconds = Math.floor(diff / 1000); + var minutes = Math.floor(seconds / 60); + var hours = Math.floor(minutes / 60); + var days = Math.floor(hours / 24); + + // Formater la différence + var formattedDiff = `${days} jours, ${hours % 24} heures, ${minutes % 60} minutes et ${seconds % 60} secondes`; + + return formattedDiff; +} + +var date1 = new Date('2023-06-13T12:00:00'); + +//formate une date +export function formatDate(date:Date) { + var day = date.getDate(); + var month = date.getMonth() + 1; // Les mois commencent à 0, donc on ajoute 1 + var year = date.getFullYear(); + var hours = date.getHours(); + var minutes = date.getMinutes(); + + // Ajouter un zéro initial si nécessaire + const dayF = (day < 10) ? '0' + day : day; + const monthF = (month < 10) ? '0' + month : month; + const hoursF = (hours < 10) ? '0' + hours : hours; + const minutesF = (minutes < 10) ? '0' + minutes : minutes; + + var formattedDate = dayF + ':' + monthF + ':' + year + ' ' + hoursF + ':' + minutesF; + return formattedDate; +}