diff --git a/todo-list/src/app/(atoms)/(global)/global-atoms.tsx b/todo-list/src/app/(atoms)/(global)/global-atoms.tsx new file mode 100644 index 0000000..1faea7f --- /dev/null +++ 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('left-0') \ No newline at end of file diff --git a/todo-list/src/app/(atoms)/(input)/input-atoms.tsx b/todo-list/src/app/(atoms)/(input)/input-atoms.tsx new file mode 100644 index 0000000..b2c98a6 --- /dev/null +++ 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(''); +export const inputBlurModalAtom = atom(false); +export const switchModeButtonAtom = atom(''); +export const warnModalStateAtom = atom({ + display: 'hidden', +}); \ No newline at end of file diff --git a/todo-list/src/app/components/input.tsx b/todo-list/src/app/(components)/input.tsx similarity index 57% rename from todo-list/src/app/components/input.tsx rename to todo-list/src/app/(components)/input.tsx index eaf15a1..bf3e904 100644 --- a/todo-list/src/app/components/input.tsx +++ b/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({ - visible: "hidden", - }); - const { - setBlur, - blur, - name, - setName, - descrebe, - toggleSideBarFunction, - } = useContext(todoContext); - - // =========================================================================== useIndexedDB("tasks", "database"); const addElementInDB = async () => { const currentDataBase: IDBOpenDBRequest = indexedDB.open("database"); @@ -51,21 +45,21 @@ 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(); }; @@ -73,7 +67,7 @@ export const InputTask = () => { console.log("ops, algo deu errado!"); }; }; - // =========================================================================== + const keyPressEvent = (event: KeyboardEvent) => { if (event.key === "Enter") { addElementInDB(); @@ -81,7 +75,7 @@ export const InputTask = () => { 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 ( <>
{ 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 = () => {
diff --git a/todo-list/src/app/components/task.tsx b/todo-list/src/app/(components)/task.tsx similarity index 96% rename from todo-list/src/app/components/task.tsx rename to todo-list/src/app/(components)/task.tsx index ca4e7a1..31f100c 100644 --- a/todo-list/src/app/components/task.tsx +++ b/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 index 3d7aa22..3277fa0 100644 --- 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>; - dispatch: Dispatch>; - objectComplete: controler; removeAllElements: () => void; } export const Modal = ({ - Blur, - dispatch, - objectComplete, removeAllElements, }: TypeOfProps) => { + + const [warnModalState, setWarnModalState]= useAtom(warnModalStateAtom); + // only update + const setInputBlurModalState = useSetAtom(inputBlurModalAtom); + return (
{ - dispatch({ ...objectComplete, visible: "hidden" }); - Blur(() => false); + setWarnModalState({ ...warnModalState, display: "hidden" }); + setInputBlurModalState(false); }}>
diff --git a/todo-list/src/app/components/(input_estruture)/buttonClose.tsx b/todo-list/src/app/components/(input_estruture)/buttonClose.tsx index 1d61bc8..0f4723f 100644 --- 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 index e93ae31..7d98af2 100644 --- 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 (
void; } export const InputNameTask = ({keyEvent}:TypeOfProps) => { - const { setName, name } = useContext(todoContext); + + const [inputTaskNameState, setInputTaskNameState] = useAtom(inputTaskNameAtom); return (
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 index 0b54605..986022f 100644 --- 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' ? : diff --git a/todo-list/src/app/components/(main_estruture)/mainContainerInputs.tsx b/todo-list/src/app/components/(main_estruture)/mainContainerInputs.tsx index f4570f9..4170bee 100644 --- 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 (
{ diff --git a/todo-list/src/app/components/(modal_estruture)/inputRename.tsx b/todo-list/src/app/components/(modal_estruture)/inputRename.tsx index 3ae85d0..e499320 100644 --- 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); diff --git a/todo-list/src/app/todo-list.tsx b/todo-list/src/app/todo-list.tsx index f35bf2c..90d5da9 100644 --- a/todo-list/src/app/todo-list.tsx +++ b/todo-list/src/app/todo-list.tsx @@ -8,6 +8,10 @@ import { AllElements } from "./components/utility/fatherMode"; import { CloseTasksButton } from "./components/(main_estruture)/closeTasksButton"; import { MainContainerInputs } from "./components/(main_estruture)/mainContainerInputs"; import { MainContainerTasks } from "./components/(main_estruture)/mainContainerTasks"; +// hooks +import { useAtom } from "jotai"; +// atoms +import { globalToggleSidebarAtoms } from "./(atoms)/(global)/global-atoms"; export const TodoListMainComponent = () => { @@ -20,20 +24,23 @@ export const TodoListMainComponent = () => { const [currentTag, setCurrentTag] = useState(''); const [descrebe, setDescrebe] = useState(''); const [indexed, setIndexed] = useState(null); - const [toggleSideBar, setToggleSideBar] = useState('left-0'); const [activeSearch, setActiveSearch] = useState(false); const [activeFilter, setActiveFilter] = useState(false); const [visibility, setVisibility] = useState(false); const [ElementDescription, setElementDescription] = useState('') + + const [globalToggleSidebarState, setGlobalToggleSidebarState] = useAtom(globalToggleSidebarAtoms); + const [sideBar, setSideBar] = useState({ position:'right-[-200%]', display: 'hidden', }); + const toggleSideBarFunction = ():void => { - setToggleSideBar('left-[-100%]') + setGlobalToggleSidebarState('left-[-100%]') } const toggleSideBarFunctionReverse = ():void => { - setToggleSideBar('left-0') + setGlobalToggleSidebarState('left-0') } return ( @@ -62,7 +69,7 @@ export const TodoListMainComponent = () => { }}>
- +