perf: implemeting jotai finished

Zafkiel45 · Aug 15, 2024 · 83f3fec · 83f3fec
1 parent ebe54ff
commit 83f3fec
Show file tree

Hide file tree

Showing 13 changed files with 107 additions and 86 deletions.
diff --git a/todo-list/src/app/(atoms)/(global)/global-atoms.tsx b/todo-list/src/app/(atoms)/(global)/global-atoms.tsx
@@ -0,0 +1,6 @@
+'use client';
+import { atom } from "jotai";
+
+type toggleSideBarAtom = 'left-0' | 'left-[-100%]';
+
+export const globalToggleSidebarAtoms = atom<toggleSideBarAtom>('left-0')
diff --git a/todo-list/src/app/(atoms)/(input)/input-atoms.tsx b/todo-list/src/app/(atoms)/(input)/input-atoms.tsx
@@ -0,0 +1,14 @@
+'use client';
+import { atom } from "jotai";
+
+interface warnModalStateTypes {
+    display: 'hidden' | 'flex';
+    blur?: boolean;
+}
+
+export const inputTaskNameAtom = atom<string>('');
+export const inputBlurModalAtom = atom<boolean>(false);
+export const switchModeButtonAtom = atom<string>('');
+export const warnModalStateAtom = atom<warnModalStateTypes>({
+    display: 'hidden',
+});
diff --git a/todo-list/src/app/components/input.tsx → todo-list/src/app/(components)/input.tsx b/todo-list/src/app/components/input.tsx → todo-list/src/app/(components)/input.tsx
@@ -1,42 +1,36 @@
 'use client';
-import { useContext, useState, KeyboardEvent } from "react";
-import { todoContext } from "./context";
-import { SwitchModeButton } from "./(input_estruture)/switch_button";
-import { HowToUse } from "./(input_estruture)/howToUse";
-import { InputNameTask } from "./(input_estruture)/inputNameTask";
-import { AddButton } from "./(input_estruture)/addButton";
-import { DeleteButton } from "./(input_estruture)/deleteButton";
-import { Modal } from "./(input_estruture)/Modal";
-import { useIndexedDB } from "./(database)/useOpenDB";
-import { UpdateDB } from "./utility/updateDB";
-import { HeaderInput } from "./(input_estruture)/header";
-
-import { useSetAtom } from "jotai";
+import { useContext, KeyboardEvent } from "react";
+import { todoContext } from "../components/context";
+import { SwitchModeButton } from "../components/(input_estruture)/switch_button";
+import { HowToUse } from "../components/(input_estruture)/howToUse";
+import { InputNameTask } from "../components/(input_estruture)/inputNameTask";
+import { AddButton } from "../components/(input_estruture)/addButton";
+import { DeleteButton } from "../components/(input_estruture)/deleteButton";
+import { Modal } from "../components/(input_estruture)/Modal";
+import { useIndexedDB } from "../components/(database)/useOpenDB";
+import { UpdateDB } from "../components/utility/updateDB";
+import { HeaderInput } from "../components/(input_estruture)/header";
+// hooks
+import { useAtom, useSetAtom, useAtomValue } from "jotai";
+// atoms
 import { tasksStateAtom } from "../(atoms)/(tasks)/tasks-atoms";
-
-export interface controler {
-  visible: string;
-  blur?: boolean;
-}
+import { inputTaskNameAtom } from "../(atoms)/(input)/input-atoms";
+import { tasksDescriptionStateAtom } from "../(atoms)/(modal)/modal-atoms";
+import { warnModalStateAtom } from "../(atoms)/(input)/input-atoms";
+import { inputBlurModalAtom } from "../(atoms)/(input)/input-atoms";
 
 export const InputTask = () => {
-
   // only update:
   const setTasksState = useSetAtom(tasksStateAtom);
+  // update and read 
+  const [inputTaskNameState, setInputTaskNameState] = useAtom(inputTaskNameAtom);
+  const [warnModalState, setWarnModalState] = useAtom(warnModalStateAtom);
+  const [inputBlurModalState, setInputBlurModalState] = useAtom(inputBlurModalAtom);
+  // only read:
+  const tasksDescriptionState = useAtomValue(tasksDescriptionStateAtom);
+
+  const { toggleSideBarFunction } = useContext(todoContext);
 
-  const [displayControl, setDisplayControl] = useState<controler>({
-    visible: "hidden",
-  });
-  const {
-    setBlur,
-    blur,
-    name,
-    setName,
-    descrebe,
-    toggleSideBarFunction,
-  } = useContext(todoContext);
-
-  // ===========================================================================
   useIndexedDB("tasks", "database");
   const addElementInDB = async () => {
     const currentDataBase: IDBOpenDBRequest = indexedDB.open("database");
@@ -51,37 +45,37 @@ export const InputTask = () => {
         window.alert("mesmo nome!");
       };
 
-      if (name === "" || name.trim() === "" || name.length >= 20) {
+      if (inputTaskNameState === "" || inputTaskNameState.trim() === "" || inputTaskNameState.length >= 20) {
         window.alert("Erro!");
-        setName("");
+        setInputTaskNameState("");
         database.abort();
         return;
       }
 
       objectStorage.add({
-        title: name,
-        description: descrebe,
+        title: inputTaskNameState,
+        description: tasksDescriptionState,
         type: '',
         color: '',
       });
 
-      UpdateDB(setTasksState, setName);
+      UpdateDB(setTasksState, setInputTaskNameState);
       toggleSideBarFunction();
     };
 
     currentDataBase.onerror = () => {
       console.log("ops, algo deu errado!");
     };
   };
-  // ===========================================================================
+
   const keyPressEvent = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === "Enter") {
       addElementInDB();
       toggleSideBarFunction();
       event.currentTarget.blur();
     }
   };
-  // ===========================================================================
+
   const removeAllElements = (): void => {
     const openDatabase: IDBOpenDBRequest = indexedDB.open("database");
 
@@ -103,16 +97,16 @@ export const InputTask = () => {
       };
 
       setTasksState(() => []);
-      setBlur(() => false);
-      setDisplayControl({ ...displayControl, visible: "hidden", blur: false });
+      setInputBlurModalState(() => false);
+      setWarnModalState({ ...warnModalState, display: "hidden", blur: false });
     };
   };
-  // ===========================================================================
+
   const controlElementsDisplay = () => {
-    setDisplayControl({ ...displayControl, visible: "flex" });
-    setBlur(() => true);
+    setWarnModalState({ ...warnModalState, display: "flex" });
+    setInputBlurModalState(() => true);
   };
-  // ===========================================================================
+
   return (
     <>
       <div
@@ -121,7 +115,7 @@ export const InputTask = () => {
         pt-3 
         w-full 
         transition-all 
-        ${blur ? "blur-sm" : null} 
+        ${inputBlurModalState ? "blur-sm" : null} 
         h-full
         overflow-auto
         mobileMini:pb-8
@@ -147,9 +141,6 @@ export const InputTask = () => {
         <HowToUse />
       </div>
       <Modal
-        Blur={setBlur}
-        dispatch={setDisplayControl}
-        objectComplete={displayControl}
         removeAllElements={removeAllElements}
       />
     </>

diff --git a/todo-list/src/app/components/task.tsx → todo-list/src/app/(components)/task.tsx b/todo-list/src/app/components/task.tsx → todo-list/src/app/(components)/task.tsx
@@ -1,6 +1,6 @@
 'use client';
-import { SearchTask } from "./(tasks_estruture)/search";
-import { FilterTasks } from "./(tasks_estruture)/filter";
+import { SearchTask } from "../components/(tasks_estruture)/search";
+import { FilterTasks } from "../components/(tasks_estruture)/filter";
 // hooks
 import { useMemo } from "react";
 import { useAtom } from "jotai";

diff --git a/todo-list/src/app/components/(input_estruture)/Modal.tsx b/todo-list/src/app/components/(input_estruture)/Modal.tsx
@@ -1,28 +1,29 @@
-// removeAllElements, objectComplete, dispacth, setBlur
-
-import { Dispatch, SetStateAction } from "react";
-import { controler } from "../input";
+'use client'
 import CloseButton from '../utility/svg_components/x'
+// hooks
+import { useAtom, useSetAtom } from 'jotai';
+// atoms 
+import { warnModalStateAtom } from '@/app/(atoms)/(input)/input-atoms';
+import { inputBlurModalAtom } from '@/app/(atoms)/(input)/input-atoms';
 
 interface TypeOfProps {
-  Blur: Dispatch<SetStateAction<boolean>>;
-  dispatch: Dispatch<SetStateAction<controler>>;
-  objectComplete: controler;
   removeAllElements: () => void;
 }
 
 export const Modal = ({
-  Blur,
-  dispatch,
-  objectComplete,
   removeAllElements,
 }: TypeOfProps) => {
+
+  const [warnModalState, setWarnModalState]= useAtom(warnModalStateAtom);
+  // only update
+  const setInputBlurModalState = useSetAtom(inputBlurModalAtom);
+
   return (
     <div
       className={`
         fixed
         top-0 
-        ${objectComplete.visible} 
+        ${warnModalState.display} 
       text-black 
         dark:text-white 
         gap-4 items-center 
@@ -64,8 +65,8 @@ export const Modal = ({
           AVISO!
         </h1>
         <div onClick={() => {
-            dispatch({ ...objectComplete, visible: "hidden" });
-            Blur(() => false);
+            setWarnModalState({ ...warnModalState, display: "hidden" });
+            setInputBlurModalState(false);
         }}>
           <CloseButton height="h-[22px] w-[22px]" />
         </div>

diff --git a/todo-list/src/app/components/(input_estruture)/buttonClose.tsx b/todo-list/src/app/components/(input_estruture)/buttonClose.tsx
@@ -6,7 +6,6 @@ export const CloseButton = (
 
     }:{
       toggleSideBarFunction: () => void,
-
     }) => {
 
       return (

diff --git a/todo-list/src/app/components/(input_estruture)/closeButton.tsx b/todo-list/src/app/components/(input_estruture)/closeButton.tsx
@@ -1,7 +1,6 @@
 export const CloseButton = (
   { 
     toggleSideBarFunction,
-
   }:{toggleSideBarFunction: () => void}) => {
     return (
         <div

diff --git a/todo-list/src/app/components/(input_estruture)/inputNameTask.tsx b/todo-list/src/app/components/(input_estruture)/inputNameTask.tsx
@@ -1,21 +1,24 @@
 'use client'
-import { todoContext } from "../context"
-import { useContext } from "react"
+// hooks
+import { useAtom } from "jotai"
+// atoms 
+import { inputTaskNameAtom } from "@/app/(atoms)/(input)/input-atoms"
 
 interface TypeOfProps {
     keyEvent: (e:any) => void;
 }
 
 export const InputNameTask = ({keyEvent}:TypeOfProps) => {
-    const { setName, name } = useContext(todoContext);
+
+    const [inputTaskNameState, setInputTaskNameState] = useAtom(inputTaskNameAtom);
 
     return (
         <div className="flex justify-center w-full items-center">
             <input
                 type="text"
-                value={name}
+                value={inputTaskNameState}
                 onKeyDown={keyEvent}
-                onChange={(e) => setName(e.target.value)}
+                onChange={(e) => setInputTaskNameState(e.target.value)}
                 placeholder="Digite um nome..."
                 aria-label="inserir o nome da tarefa"
                 className={`

diff --git a/todo-list/src/app/components/(input_estruture)/switch_button.tsx b/todo-list/src/app/components/(input_estruture)/switch_button.tsx
@@ -3,21 +3,25 @@ import {useEffect, useState} from "react";
 import MoonSvg from '../utility/svg_components/moon';
 import SunSvg from '../utility/svg_components/sun';
 
+import { useAtom } from "jotai";
+// atoms
+import { switchModeButtonAtom } from "@/app/(atoms)/(input)/input-atoms";
+
 export const SwitchModeButton = () => {
 
-  const [currentState, setCurrentState] = useState('')
+  const [switchModeButtonState, setSwitchModeButtonState] = useAtom(switchModeButtonAtom);
 
   useEffect(() => {
       try {
           if(window.matchMedia('(prefers-color-scheme: dark)').matches) {
               document.documentElement.classList.remove('light');
               localStorage.ThemeStorage = 'dark'
-              setCurrentState('dark')
+              setSwitchModeButtonState('dark')
               document.documentElement.classList.add(localStorage.ThemeStorage);
           } else {
               document.documentElement.classList.remove('dark');
               localStorage.ThemeStorage= 'light'
-              setCurrentState('light')
+              setSwitchModeButtonState('light')
               document.documentElement.classList.add(localStorage.ThemeStorage);
           }
 
@@ -33,11 +37,11 @@ export const SwitchModeButton = () => {
 
           if(newCurrentMode === 'dark') {
               document.documentElement.classList.remove('light');
-              setCurrentState('dark')
+              setSwitchModeButtonState('dark')
               document.documentElement.classList.add(localStorage.ThemeStorage);
           } else {
               document.documentElement.classList.remove('dark');
-              setCurrentState('light')
+              setSwitchModeButtonState('light')
               document.documentElement.classList.add(localStorage.ThemeStorage);
           }
 
@@ -67,7 +71,7 @@ export const SwitchModeButton = () => {
           shadow-sm 
           w-4/5`}>
           {
-            currentState === 'dark' ? 
+            switchModeButtonState === 'dark' ? 
               <MoonSvg/> 
               : 
               <SunSvg/>

diff --git a/todo-list/src/app/components/(main_estruture)/mainContainerInputs.tsx b/todo-list/src/app/components/(main_estruture)/mainContainerInputs.tsx
@@ -1,4 +1,4 @@
-import { InputTask } from "../input"
+import { InputTask } from "../../(components)/input"
 export const MainContainerInputs = ({toggleSideBar}:{toggleSideBar:string}) => {
     return (
         <div className={`

diff --git a/todo-list/src/app/components/(main_estruture)/mainContainerTasks.tsx b/todo-list/src/app/components/(main_estruture)/mainContainerTasks.tsx
@@ -1,4 +1,4 @@
-import { Tasks } from "../task"
+import { Tasks } from "@/app/(components)/task"
 import { ButtonsOfTasks } from "../(tasks_estruture)/buttons"
 
 export const MainContainerTasks = ({blur}:{blur:boolean}) => {

diff --git a/todo-list/src/app/components/(modal_estruture)/inputRename.tsx b/todo-list/src/app/components/(modal_estruture)/inputRename.tsx
@@ -1,6 +1,4 @@
 "use client";
-import { todoContext } from "../context";
-import { useContext } from "react";
 import RenameSVG from "../utility/svg_components/rename";
 // hooks
 import { useAtom } from "jotai";
@@ -12,7 +10,6 @@ interface TypeOfProps {
 }
 
 export const InputRename = ({ renameKey, addRename }: TypeOfProps) => {
-  const { rename, setRename } = useContext(todoContext);
 
   const [renameState, setRenameState] = useAtom(renameStateAtom);