{text}
16 |
17 |
18 |
21 |
22 |
19 | {children}
20 |
21 | {menuOpen && !mediaQueries.xl && (
22 |
26 | )}
27 |
28 | );
29 | };
30 |
31 | export default LayoutMenus;
32 |
--------------------------------------------------------------------------------
/src/components/TasksSection/TaskItem/BtnMarkAsImportant.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useAppDispatch } from "../../../store/hooks";
3 | import { tasksActions } from "../../../store/Tasks.store";
4 | import { ReactComponent as StarLine } from "../../../assets/star-line.svg";
5 |
6 | const BtnMarkAsImportant: React.FC<{
7 | taskId: string;
8 | taskImportant: boolean;
9 | }> = ({ taskId, taskImportant }) => {
10 | const dispatch = useAppDispatch();
11 |
12 | const markAsImportantHandler = () => {
13 | dispatch(tasksActions.markAsImportant(taskId));
14 | };
15 |
16 | return (
17 |
28 | );
29 | };
30 |
31 | export default React.memo(BtnMarkAsImportant);
32 |
--------------------------------------------------------------------------------
/src/components/AccountSection/DeleteTasks.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useAppDispatch } from "../../store/hooks";
3 | import { tasksActions } from "../../store/Tasks.store";
4 | import ModalConfirm from "../Utilities/ModalConfirm";
5 |
6 | const DeleteTasks: React.FC = () => {
7 | const dispatch = useAppDispatch();
8 |
9 | const [showModal, setIsModalShown] = useState
19 |
28 |
29 | );
30 | };
31 |
32 | export default ActionsTaskItem;
33 |
--------------------------------------------------------------------------------
/src/components/Routes/TaskOnly.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { useNavigate, useParams } from "react-router-dom";
3 | import { Task } from "../../interfaces";
4 | import { useAppSelector } from "../../store/hooks";
5 | import useDescriptionTitle from "../hooks/useDescriptionTitle";
6 | import LayoutRoutes from "../Utilities/LayoutRoutes";
7 |
8 | const TaskOnly: React.FC = () => {
9 | const params = useParams();
10 | const navigate = useNavigate();
11 |
12 | const tasks = useAppSelector((store) => store.tasks.tasks);
13 |
14 | const [matchedTask, setMatchedTask] = useState
14 |
27 |
31 | );
32 | };
33 |
34 | export default Directories;
35 |
--------------------------------------------------------------------------------
/src/components/TasksSection/TaskItem/BtnDeleteTask.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useAppDispatch } from "../../../store/hooks";
3 | import { tasksActions } from "../../../store/Tasks.store";
4 | import ModalConfirm from "../../Utilities/ModalConfirm";
5 | import { ReactComponent as Trash } from "../../../assets/trash.svg";
6 |
7 | const BtnDeleteTask: React.FC<{ taskId: string }> = ({ taskId }) => {
8 | const [showModal, setIsModalShown] = useState
28 |
30 |
14 |
35 | );
36 | };
37 |
38 | export default InfosTask;
39 |
--------------------------------------------------------------------------------
/src/components/hooks/useVisibility.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | const useVisibility = (elements: HTMLElement[], fnClose?: () => void) => {
4 | const [elementIsVisible, setElementIsVisible] = useState
19 |
20 | {task.title}
21 |
22 |
23 | 29 | {task.description} 30 |
31 | 34 |27 | To-do list 28 |
29 |
27 | {modal.modalCreateTaskOpen && (
28 |
39 | );
40 | };
41 |
42 | export default App;
43 |
--------------------------------------------------------------------------------
/src/components/hooks/useScreenMedia.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | interface Query {
4 | [key: string]: boolean;
5 | }
6 |
7 | const useScreenMedia = () => {
8 | const [mediaQueries, setMediaQueries] = useState
21 |
22 |
29 |
32 |
33 | );
34 | };
35 |
36 | const modalElement = document.getElementById("modal")! as HTMLElement;
37 |
38 | const Modal: React.FC<{
39 | children: React.ReactNode;
40 | onClose: () => void;
41 | title: string;
42 | }> = ({ children, onClose, title }) => {
43 | return ReactDOM.createPortal(
44 | {title}
30 | {children} 31 |
21 |
24 |
27 |
45 |
46 | );
47 | };
48 |
49 | export default ButtonsSort;
50 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | -
45 | {directories.map((dir: string) => (
46 |
32 | {tasksTitle} 33 |
34 |-
47 | {sortedTasks.map((task) => (
48 |
- 51 | 63 | 64 |
59 |
60 | To-do list
61 |
62 |
63 |
64 |
65 |
76 |
32 |
33 | Tasks today {todayTasksDone.length}/
34 | {todaysTasks.length}
35 |
36 |
40 | )}
41 | {tasks.length !== 0 && (
42 |
37 |
38 |
39 |
43 |
44 | All tasks {allTasksDone.length}/{tasks.length}
45 |
46 |
50 | )}
51 |
52 | {todaysTasks.length === 0 && (
53 |
54 | No tasks today
55 |
56 | )}
57 |
58 | {todaysTasks.length > 0 && (
59 |
47 |
48 |
49 |
60 | Today's tasks
61 |
74 | )}
75 |
76 | );
77 | };
78 |
79 | export default React.memo(TasksDone);
80 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | .inputStyles {
6 | @apply bg-slate-100 text-slate-600 dark:text-slate-200 rounded-lg p-3 outline-transparent border-2 border-transparent hover:border-violet-600 focus:border-violet-600 focus:outline-none transition dark:bg-slate-800;
7 | }
8 |
9 | .btn {
10 | @apply bg-violet-600 hover:bg-violet-700 py-3 px-6 text-slate-50 rounded-lg w-auto transition dark:bg-violet-800 dark:hover:bg-violet-900;
11 | }
12 |
13 | .btn:active {
14 | @apply scale-95;
15 | }
16 |
17 | @layer components {
18 | .tasksList > li:first-of-type article {
19 | @apply bg-violet-600 text-slate-100 dark:bg-violet-800;
20 | }
21 | .tasksList > li:first-of-type article .description {
22 | @apply text-violet-300;
23 | }
24 | .tasksList > li:first-of-type article > div {
25 | @apply border-violet-500 dark:border-violet-700;
26 | }
27 | .listView1 article {
28 | @apply h-40;
29 | }
30 | .listView2 article {
31 | @apply h-64;
32 | }
33 | .children-styles {
34 | @apply text-slate-400;
35 | }
36 | .children-styles button {
37 | @apply p-1;
38 | }
39 | .children-styles svg {
40 | @apply w-6 h-6;
41 | }
42 | .inputStyles::placeholder {
43 | @apply text-slate-400 dark:text-slate-400;
44 | }
45 | .stylesInputsField input,
46 | .stylesInputsField textarea,
47 | .stylesInputsField select {
48 | @apply inputStyles mt-1;
49 | }
50 | .stylesInputsField label {
51 | @apply mb-4 text-slate-600 dark:text-slate-500;
52 | }
53 | .barProgress {
54 | @apply bg-slate-200 w-full h-2 rounded-full overflow-hidden dark:bg-slate-700/[.3];
55 | }
56 | .barProgress > div {
57 | @apply bg-violet-600 h-full;
58 | }
59 | .itemDirectory > .buttonsDir {
60 | @apply xl:opacity-0 transition opacity-100;
61 | }
62 | .itemDirectory:hover > .buttonsDir {
63 | @apply opacity-100;
64 | }
65 | }
66 |
67 | /* clears the 'X' from Internet Explorer */
68 | input[type="search"]::-ms-clear {
69 | display: none;
70 | width: 0;
71 | height: 0;
72 | }
73 | input[type="search"]::-ms-reveal {
74 | display: none;
75 | width: 0;
76 | height: 0;
77 | }
78 |
79 | /* clears the 'X' from Chrome */
80 | input[type="search"]::-webkit-search-decoration,
81 | input[type="search"]::-webkit-search-cancel-button,
82 | input[type="search"]::-webkit-search-results-button,
83 | input[type="search"]::-webkit-search-results-decoration {
84 | display: none;
85 | }
86 |
87 | ::-webkit-scrollbar {
88 | @apply w-2;
89 | }
90 |
91 | /* Track */
92 | ::-webkit-scrollbar-track {
93 | @apply bg-slate-200 dark:bg-slate-800;
94 | }
95 |
96 | /* Handle */
97 | ::-webkit-scrollbar-thumb {
98 | @apply bg-slate-300 dark:bg-slate-700 rounded-md border border-red-400;
99 | }
100 |
101 | /* Handle on hover */
102 | ::-webkit-scrollbar-thumb:hover {
103 | @apply bg-slate-400 dark:bg-slate-600;
104 | }
105 |
--------------------------------------------------------------------------------
/src/components/TasksSection/Notification.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react";
2 | import useVisibility from "../hooks/useVisibility";
3 | import { ReactComponent as IconBell } from "../../assets/bell.svg";
4 | import useTodayTasks from "../hooks/useTodayTasks";
5 | import useCompletedTasks from "../hooks/useCompletedTasks";
6 | import { Link } from "react-router-dom";
7 |
8 | const classHasNotification =
9 | "after:content-[''] after:w-2 after:h-2 after:bg-rose-500 block after:rounded-full after:absolute after:bottom-3/4 after:left-3/4";
10 |
11 | const Notification: React.FC = () => {
12 | const refBtnNotification = useRef-
62 | {todaysTasksToShow.map((task) => (
63 |
- 64 | {task.title} 65 | 66 | ))} 67 |
31 |
39 | {notificationIsVisible && (
40 |
73 | );
74 | };
75 |
76 | export default React.memo(Notification);
77 |
--------------------------------------------------------------------------------
/src/components/Menu/Directories/ItemDirectory.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { NavLink, useLocation } from "react-router-dom";
3 | import { useAppDispatch } from "../../../store/hooks";
4 | import { tasksActions } from "../../../store/Tasks.store";
5 | import { ReactComponent as Trash } from "../../../assets/trash.svg";
6 | import { ReactComponent as Edit } from "../../../assets/edit.svg";
7 | import ModalConfirm from "../../Utilities/ModalConfirm";
8 | import ModalDirectory from "../../Utilities/ModalDirectory";
9 |
10 | const ItemDirectory: React.FC<{ dir: string; classActive: string }> = ({
11 | dir,
12 | classActive,
13 | }) => {
14 | const route = useLocation();
15 | const currentPath = route.pathname;
16 |
17 | const dispatch = useAppDispatch();
18 |
19 | const [modalIsShown, setModalIsShown] = useState
41 | {uncompletedTasks.length > 0 ? (
42 |
71 | )}
72 |
43 |
44 | You have {uncompletedTasks.length} uncompleted tasks today:
45 |
46 |
67 | ) : (
68 | -
47 | {tasksToShow.map((task) => (
48 |
- 49 | 53 | {task.title} 54 | 55 | 56 | ))} 57 |
Nothing to show here.
69 | )} 70 |
72 |
78 |
84 |
85 | )}
86 |
59 |
94 |
95 | );
96 | };
97 |
98 | export default SearchField;
99 |
--------------------------------------------------------------------------------
/src/components/Utilities/ModalTask.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from "react";
2 | import { Task } from "../../interfaces";
3 | import { useAppSelector } from "../../store/hooks";
4 | import Modal from "./Modal";
5 |
6 | const InputCheckbox: React.FC<{
7 | label: string;
8 | isChecked: boolean;
9 | setChecked: (value: React.SetStateAction