From 9c0aecb1ca5597db170aa93837ace5a56753f26c Mon Sep 17 00:00:00 2001 From: dani Date: Mon, 19 Aug 2024 21:08:55 -0500 Subject: [PATCH 01/32] Create layout of Done.jsx component branch feat/done --- src/done/Done.jsx | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/done/Done.jsx b/src/done/Done.jsx index 2f431d7..91fa3b6 100644 --- a/src/done/Done.jsx +++ b/src/done/Done.jsx @@ -1,9 +1,30 @@ import './Done.css' - +import { Store } from '../store/store' export const Done = () => { + const store = Store() return (

Done

+
+

Worked Hours

+
This Month: 23
+
This Week: 23
+
This Day: 23
+
+
+
    +
  • reading
    • +
  • reading
    • +
  • reading
    • +
+
+ +
+ +
) } \ No newline at end of file From 6dd0c20a88081eaa0e03a3d9483e12894fe5be9a Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 11:20:15 -0500 Subject: [PATCH 02/32] Create general styles for buttons and input fields branch feat/done --- src/App.css | 28 +++++++++++++++++++++++++++- src/doing/Doing.jsx | 6 +++--- src/todo/Todo.css | 23 ----------------------- src/todo/Todo.jsx | 9 +++++---- 4 files changed, 35 insertions(+), 31 deletions(-) diff --git a/src/App.css b/src/App.css index 4c4f081..cfcabaa 100644 --- a/src/App.css +++ b/src/App.css @@ -1,9 +1,35 @@ -button { +.bigBtn { padding: 0 2%; font-size: 2vw; cursor: pointer; } +.midBtn { + width: fit-content; + font-size: 14px; + white-space: nowrap; +} + +.input { + width: 100%; + padding: 5px; + border: 1px solid red; + border-radius: 5px; + outline: none; + color: white; + background-color: black; +} + +.ul { + width: 95%; + align-self: flex-end; +} + +.li { + padding: 5px 0; + font-size: 12px; +} + .hide { display: none; } diff --git a/src/doing/Doing.jsx b/src/doing/Doing.jsx index fcf1639..cf3d20e 100644 --- a/src/doing/Doing.jsx +++ b/src/doing/Doing.jsx @@ -81,9 +81,9 @@ export const Doing = () => { />
- - - + + +

{quote}

diff --git a/src/todo/Todo.css b/src/todo/Todo.css index 72ae026..3913be6 100644 --- a/src/todo/Todo.css +++ b/src/todo/Todo.css @@ -23,15 +23,8 @@ font-size: 22px; } -.Todo ul { - width: 95%; - align-self: flex-end; - font-size: 12px; -} - .Todo ul li { cursor: pointer; - padding: 5px 0; } .Todo ul .dones { @@ -42,19 +35,3 @@ display: flex; column-gap: 12px; } - -.Todo footer button { - width: fit-content; - font-size: 14px; - white-space: nowrap; -} - -.Todo footer input { - width: 100%; - padding: 5px; - border: 1px solid red; - border-radius: 5px; - outline: none; - color: white; - background-color: black; -} diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx index b43e521..0276bc2 100644 --- a/src/todo/Todo.jsx +++ b/src/todo/Todo.jsx @@ -17,14 +17,15 @@ export const Todo = ({ store }) => {
Completed: {store.completed()}

{store.title}

-
    - {store.todos.map(item => (
  • store.markAsDone(item)}>{item.content}
    • ))} - {store.dones.map(item => (
  • store.markAsTodo(item)}>{item.content}
    • ))} +
      + {store.todos.map(item => (
    • store.markAsDone(item)}>{item.content}
      • ))} + {store.dones.map(item => (
    • store.markAsTodo(item)}>{item.content}
      • ))}
    - + setInput(e.target.value)} From aedcfad41b27b675b308f349e4ad701eaee20ce5 Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 11:32:33 -0500 Subject: [PATCH 03/32] Use general styles on Done component branch feat/done --- src/done/Done.jsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/done/Done.jsx b/src/done/Done.jsx index 91fa3b6..b9e7fa6 100644 --- a/src/done/Done.jsx +++ b/src/done/Done.jsx @@ -12,18 +12,19 @@ export const Done = () => {
    This Day: 23
-
    -
  • reading
    • -
  • reading
    • -
  • reading
    • +
      +
    • reading
      • +
    • reading
      • +
    • reading
    - +
    + />
) From 1b7a83a37a11160ebc2c7d85dcf05cdf6e42f799 Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 14:22:39 -0500 Subject: [PATCH 04/32] Create more general style items branch feat/done --- src/App.css | 37 +++++++++++++++++++++++++++++-------- 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/src/App.css b/src/App.css index cfcabaa..c54f688 100644 --- a/src/App.css +++ b/src/App.css @@ -1,18 +1,21 @@ +button { + border: 1px solid rgb(79, 79, 79); + border-radius: 5px; + padding: 1%; + white-space: nowrap; + cursor: pointer; +} .bigBtn { - padding: 0 2%; font-size: 2vw; - cursor: pointer; } .midBtn { - width: fit-content; - font-size: 14px; - white-space: nowrap; + font-size: 1.2vw; } .input { width: 100%; - padding: 5px; + padding: 1%; border: 1px solid red; border-radius: 5px; outline: none; @@ -20,6 +23,21 @@ background-color: black; } +.sub-container { + width: 100%; + border: 1px solid red; + border-radius: 10px; + padding: 10px; + display: flex; + flex-direction: column; + row-gap: 12px; +} + +.counter-stats { + font-size: 24px; + font-weight: 700; +} + .ul { width: 95%; align-self: flex-end; @@ -49,12 +67,15 @@ li { .Todos, .Doing, .Done { - width: 33%; + width: 100%; border: 1px solid red; - border-radius: 15px; + border-radius: 20px; + padding: 5px; display: flex; flex-direction: column; + row-gap: 1%; align-items: center; + overflow-y: auto; } @media (width <= 720px) { From ed74ea5039ac5cf4cf533bc55be395f47410039a Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 14:25:22 -0500 Subject: [PATCH 05/32] Use general styles for sub component and counter stats branch feat/done --- src/todo/Todo.css | 15 --------------- src/todo/Todo.jsx | 4 ++-- src/todo/Todos.css | 5 ----- 3 files changed, 2 insertions(+), 22 deletions(-) delete mode 100644 src/todo/Todos.css diff --git a/src/todo/Todo.css b/src/todo/Todo.css index 3913be6..d3effc6 100644 --- a/src/todo/Todo.css +++ b/src/todo/Todo.css @@ -1,24 +1,9 @@ -.Todo { - width: 100%; - border: 1px solid red; - border-radius: 10px; - padding: 10px; - display: flex; - flex-direction: column; - row-gap: 12px; -} - .Todo header { display: flex; justify-content: space-between; align-items: center; } -.Todo header span span { - font-size: 24px; - font-weight: 700; -} - .Todo header h1 { font-size: 22px; } diff --git a/src/todo/Todo.jsx b/src/todo/Todo.jsx index 0276bc2..a1c9d02 100644 --- a/src/todo/Todo.jsx +++ b/src/todo/Todo.jsx @@ -12,9 +12,9 @@ export const Todo = ({ store }) => { }, [store.todos, store.dones, store.title]) return ( -
+
-
Completed: {store.completed()}
+
Completed: {store.completed()}

{store.title}

    diff --git a/src/todo/Todos.css b/src/todo/Todos.css deleted file mode 100644 index 3a232b3..0000000 --- a/src/todo/Todos.css +++ /dev/null @@ -1,5 +0,0 @@ -.Todos { - display: flex; - row-gap: 1%; - overflow-y: auto; -} From feb6cab2f1370de91f2e8c7cecd01d72986cc029 Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 14:26:11 -0500 Subject: [PATCH 06/32] Remove repeated styles that are already included in App.css branch feat/done --- src/doing/Doing.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/doing/Doing.css b/src/doing/Doing.css index 1acb9a9..658f6e7 100644 --- a/src/doing/Doing.css +++ b/src/doing/Doing.css @@ -1,8 +1,3 @@ -.Doing { - padding: 5px; - row-gap: 100px; -} - .pomodoro { width: 100%; padding: 5px; From e2644ee0bd6e596e5aaa57eb5a799f989a9d4c73 Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 14:46:49 -0500 Subject: [PATCH 07/32] Improve mobile layout branch feat/done --- src/App.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.css b/src/App.css index c54f688..39b2993 100644 --- a/src/App.css +++ b/src/App.css @@ -88,6 +88,7 @@ li { .Doing, .Done { width: 100%; + overflow-y:visible; } .Todos { From 64ed858b8156b47e333f29ba13c22b6003b71a34 Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 14:47:32 -0500 Subject: [PATCH 08/32] Apply the same general style to Doing sub component branch feat/done --- src/doing/Doing.css | 19 ++++++++----------- src/doing/Doing.jsx | 2 +- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/src/doing/Doing.css b/src/doing/Doing.css index 658f6e7..b1f7602 100644 --- a/src/doing/Doing.css +++ b/src/doing/Doing.css @@ -1,14 +1,9 @@ -.pomodoro { - width: 100%; - padding: 5px; - display: flex; - flex-direction: column; - justify-content: center; +.Doing .pomodoro { align-items: center; row-gap: 50px; } -.clock { +.Doing .clock { width: fit-content; border: 1px solid red; border-radius: 20px; @@ -18,24 +13,26 @@ font-family: 'CustomFont', monospace; } -.controls { +.Doing .controls { width: 100%; justify-content: center; display: flex; column-gap: 10px; } -.motivational { +.Doing .motivational { cursor: pointer; display: flex; flex-direction: column; row-gap: 10px; } -.motivational p:first-of-type { + +.Doing .motivational p:first-of-type { font-style: italic; } -.motivational p:last-of-type { + +.Doing .motivational p:last-of-type { font-size: 0.7rem; } diff --git a/src/doing/Doing.jsx b/src/doing/Doing.jsx index cf3d20e..aca66a1 100644 --- a/src/doing/Doing.jsx +++ b/src/doing/Doing.jsx @@ -71,7 +71,7 @@ export const Doing = () => { return (

    Doing

    -
    +
    Date: Tue, 20 Aug 2024 14:48:58 -0500 Subject: [PATCH 09/32] Improve layout of Done.jsx component branch feat/done --- src/done/Done.jsx | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/src/done/Done.jsx b/src/done/Done.jsx index b9e7fa6..762dc11 100644 --- a/src/done/Done.jsx +++ b/src/done/Done.jsx @@ -5,26 +5,30 @@ export const Done = () => { return (

    Done

    -
    +

    Worked Hours

    -
    This Month: 23
    -
    This Week: 23
    -
    This Day: 23
    +
    +
    12This Month
    +
    23This Week
    +
    2.25This Day
    +
    -
    +
    +

    Completed Tasks

      -
    • reading
      • -
    • reading
      • -
    • reading
      • +
    • eat
      • +
    • code
      • +
    • sleep
      • +
    • repeat
    +
    -
    ) From 9f24d4a424c756c42e1982d8379f12631f5c762f Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 14:49:23 -0500 Subject: [PATCH 10/32] Apply the general styles to Done component branch feat/done --- src/done/Done.css | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/src/done/Done.css b/src/done/Done.css index 20ebaf5..b4731b7 100644 --- a/src/done/Done.css +++ b/src/done/Done.css @@ -1,3 +1,27 @@ -.Done { - color: white; +.Done h2 { + text-align: right; } + +.Done .worked-hours .this { + width: 100%; + display: flex; + justify-content: space-evenly; +} + +.Done .worked-hours .this .this-month, +.Done .worked-hours .this .this-week, +.Done .worked-hours .this .this-day { + display: flex; + flex-direction: column; + align-items: center; +} + +.Done .completed-tasks.sub-container ul li.dones { + color: gray; +} + +.Done footer { + width: 100%; + display: flex; + column-gap: 12px; +} \ No newline at end of file From 8e243ae77954b196978aa767da78703e2b24e29a Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 14:50:20 -0500 Subject: [PATCH 11/32] Fix Stylelint errors branch feat/done --- src/App.css | 5 +++-- src/doing/Doing.css | 2 -- src/done/Done.css | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/App.css b/src/App.css index 39b2993..d171b6f 100644 --- a/src/App.css +++ b/src/App.css @@ -5,6 +5,7 @@ button { white-space: nowrap; cursor: pointer; } + .bigBtn { font-size: 2vw; } @@ -23,7 +24,7 @@ button { background-color: black; } -.sub-container { +.sub-container { width: 100%; border: 1px solid red; border-radius: 10px; @@ -88,7 +89,7 @@ li { .Doing, .Done { width: 100%; - overflow-y:visible; + overflow-y: visible; } .Todos { diff --git a/src/doing/Doing.css b/src/doing/Doing.css index b1f7602..0afc9c3 100644 --- a/src/doing/Doing.css +++ b/src/doing/Doing.css @@ -27,12 +27,10 @@ row-gap: 10px; } - .Doing .motivational p:first-of-type { font-style: italic; } - .Doing .motivational p:last-of-type { font-size: 0.7rem; } diff --git a/src/done/Done.css b/src/done/Done.css index b4731b7..4255ef8 100644 --- a/src/done/Done.css +++ b/src/done/Done.css @@ -24,4 +24,4 @@ width: 100%; display: flex; column-gap: 12px; -} \ No newline at end of file +} From 8221775ffa867d6e5f184f65cdda816de1cd613b Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 15:00:12 -0500 Subject: [PATCH 12/32] Delete Todos.css reference as that file is not neccessary branch feat/done --- src/todo/Todos.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/todo/Todos.jsx b/src/todo/Todos.jsx index 4527f46..8419032 100644 --- a/src/todo/Todos.jsx +++ b/src/todo/Todos.jsx @@ -1,6 +1,5 @@ import { Store } from '../store/store.js' import { Todo } from './Todo.jsx' -import './Todos.css' export const Todos = () => { const store = Store() From b298308d32b98ff8b424578b83280e0dbe9ada88 Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 15:25:27 -0500 Subject: [PATCH 13/32] Change font-size of all
  • elements to rem instead of px branch feat/done --- src/App.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index d171b6f..6ba3ad6 100644 --- a/src/App.css +++ b/src/App.css @@ -46,7 +46,7 @@ button { .li { padding: 5px 0; - font-size: 12px; + font-size: 0.8rem; } .hide { From 69265e49b1c022c19233bc1c13394352ddc914ca Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 15:26:58 -0500 Subject: [PATCH 14/32] Avoid text wrapping on small screens branch feat/done --- src/done/Done.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/done/Done.css b/src/done/Done.css index 4255ef8..ed5694b 100644 --- a/src/done/Done.css +++ b/src/done/Done.css @@ -16,6 +16,13 @@ align-items: center; } +.Done .worked-hours .this .this-month span:last-of-type, +.Done .worked-hours .this .this-week span:last-of-type, +.Done .worked-hours .this .this-day span:last-of-type { + white-space: nowrap; + font-size: 0.8rem; +} + .Done .completed-tasks.sub-container ul li.dones { color: gray; } @@ -24,4 +31,4 @@ width: 100%; display: flex; column-gap: 12px; -} +} \ No newline at end of file From cc7e9249b1ea91ddcea9b7c64c9c7563c3b0971c Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 15:27:33 -0500 Subject: [PATCH 15/32] Create tasks slice on the Store branch feat/done --- src/store/store.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/store/store.js b/src/store/store.js index d8308fd..59de209 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -35,8 +35,14 @@ const todoMonthlySlice = (set, get) => ({ deleteDones: () => deleteDones(set, "monthly") }) +const tasksSlice = (set, get) => ({ + todos: [], + add: (input)=> add(set, input, "tasks") +}) + export const Store = create(devtools((set, get) => ({ daily: todoDailySlice(set, get), weekly: todoWeeklySlice(set, get), - monthly: todoMonthlySlice(set, get) + monthly: todoMonthlySlice(set, get), + tasks: tasksSlice(set, get) }))) \ No newline at end of file From 193e91e1a80ba77d7931acce124a385c4d4ead51 Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 15:28:17 -0500 Subject: [PATCH 16/32] Create input function and Show completed tasks from Store data branch feat/done --- src/done/Done.jsx | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/src/done/Done.jsx b/src/done/Done.jsx index 762dc11..b25234a 100644 --- a/src/done/Done.jsx +++ b/src/done/Done.jsx @@ -1,7 +1,18 @@ -import './Done.css' +import { useState } from 'react' import { Store } from '../store/store' +import './Done.css' + export const Done = () => { const store = Store() + const [input, setInput] = useState("") + const handleEnter = (k) => { + + if (k.key === "Enter") { + store.tasks.add(input) + setInput("") + } + } + return (

    Done

    @@ -16,17 +27,17 @@ export const Done = () => {

    Completed Tasks

      -
    • eat
      • -
    • code
      • -
    • sleep
      • -
    • repeat
      • + {store.tasks.todos.map(item => (
    • {item.content}
      • ))}
    setInput(e.target.value)} + onKeyDown={k => handleEnter(k)} />
    From e895f82b4b17dffa4eee5f4c144325dc47f507a9 Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 15:31:30 -0500 Subject: [PATCH 17/32] Refine input function to avoid the user to enter null values branch feat/done --- src/done/Done.jsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/done/Done.jsx b/src/done/Done.jsx index b25234a..91c1686 100644 --- a/src/done/Done.jsx +++ b/src/done/Done.jsx @@ -5,13 +5,7 @@ import './Done.css' export const Done = () => { const store = Store() const [input, setInput] = useState("") - const handleEnter = (k) => { - - if (k.key === "Enter") { - store.tasks.add(input) - setInput("") - } - } + const handleInputEnterKey = k => k.key === "Enter" && input.trim() != "" && (store.tasks.add(input), setInput("")) return (
    @@ -37,7 +31,7 @@ export const Done = () => { value={input} placeholder='Type a completed task and press Enter' onChange={e => setInput(e.target.value)} - onKeyDown={k => handleEnter(k)} + onKeyDown={k => handleInputEnterKey(k)} />
    From 965c7ce11f7b1bf1634293ce201bcf40fc0dce11 Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 15:38:49 -0500 Subject: [PATCH 18/32] Save completed tasks data on local storage branch feat/done --- src/done/Done.jsx | 3 ++- src/store/store.js | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/done/Done.jsx b/src/done/Done.jsx index 91c1686..58797e2 100644 --- a/src/done/Done.jsx +++ b/src/done/Done.jsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useState, useEffect } from 'react' import { Store } from '../store/store' import './Done.css' @@ -6,6 +6,7 @@ export const Done = () => { const store = Store() const [input, setInput] = useState("") const handleInputEnterKey = k => k.key === "Enter" && input.trim() != "" && (store.tasks.add(input), setInput("")) + useEffect(() => localStorage.setItem("Completed Tasks", JSON.stringify(store.tasks.todos)), [store.tasks.todos]) return (
    diff --git a/src/store/store.js b/src/store/store.js index 59de209..0b9748f 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -36,13 +36,13 @@ const todoMonthlySlice = (set, get) => ({ }) const tasksSlice = (set, get) => ({ - todos: [], - add: (input)=> add(set, input, "tasks") + todos: JSON.parse(localStorage.getItem("Completed Tasks")) || [], + add: (input) => add(set, input, "tasks") }) export const Store = create(devtools((set, get) => ({ daily: todoDailySlice(set, get), weekly: todoWeeklySlice(set, get), monthly: todoMonthlySlice(set, get), - tasks: tasksSlice(set, get) + tasks: tasksSlice(set, get) }))) \ No newline at end of file From cdbba864528531648981ffda1e005db6a4d8a897 Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 16:02:22 -0500 Subject: [PATCH 19/32] Create the logic for tasks slice on a separated file branch feat/done --- src/store/tasks_logic.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/store/tasks_logic.js diff --git a/src/store/tasks_logic.js b/src/store/tasks_logic.js new file mode 100644 index 0000000..f937b4c --- /dev/null +++ b/src/store/tasks_logic.js @@ -0,0 +1,13 @@ +export const addCompletedTask = (set, input) => set(state => ({ + tasks: { + ...state.tasks, + completed: [...state.tasks.completed, { id: Date.now(), content: input }] + } +}), false, 'tasks/add') + +export const deleteAllCompletedTasks = set => set(state => ({ + tasks: { + ...state.tasks, + completed: [] + } +}), false, 'tasks/deleteAllCompleted') \ No newline at end of file From c3bb2dfbbe45fbec02ec01be073e83557949e208 Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 16:06:05 -0500 Subject: [PATCH 20/32] Remove extra parenthesis branch feat/done --- src/store/store.js | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/store/store.js b/src/store/store.js index 0b9748f..262fb3a 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -1,15 +1,16 @@ import { create } from "zustand" import { devtools } from "zustand/middleware" import { add, completed, markAsDone, markAsTodo, deleteDones } from "./todo_logic.js" +import { addCompletedTask, deleteAllCompletedTasks } from './tasks_logic.js' const todoDailySlice = (set, get) => ({ title: "Daily Goals", completed: () => completed(get, "daily"), todos: JSON.parse(localStorage.getItem("Daily Goals Todos")) || [], dones: JSON.parse(localStorage.getItem("Daily Goals Dones")) || [], - add: (input) => add(set, input, "daily"), - markAsDone: (item) => markAsDone(set, item, "daily"), - markAsTodo: (item) => markAsTodo(set, item, "daily"), + add: input => add(set, input, "daily"), + markAsDone: item => markAsDone(set, item, "daily"), + markAsTodo: item => markAsTodo(set, item, "daily"), deleteDones: () => deleteDones(set, "daily") }) @@ -18,9 +19,9 @@ const todoWeeklySlice = (set, get) => ({ completed: () => completed(get, "weekly"), todos: JSON.parse(localStorage.getItem("Weekly Goals Todos")) || [], dones: JSON.parse(localStorage.getItem("Weekly Goals Dones")) || [], - add: (input) => add(set, input, "weekly"), - markAsDone: (item) => markAsDone(set, item, "weekly"), - markAsTodo: (item) => markAsTodo(set, item, "weekly"), + add: input => add(set, input, "weekly"), + markAsDone: item => markAsDone(set, item, "weekly"), + markAsTodo: item => markAsTodo(set, item, "weekly"), deleteDones: () => deleteDones(set, "weekly") }) @@ -29,20 +30,21 @@ const todoMonthlySlice = (set, get) => ({ completed: () => completed(get, "monthly"), todos: JSON.parse(localStorage.getItem("Monthly Goals Todos")) || [], dones: JSON.parse(localStorage.getItem("Monthly Goals Dones")) || [], - add: (input) => add(set, input, "monthly"), - markAsDone: (item) => markAsDone(set, item, "monthly"), - markAsTodo: (item) => markAsTodo(set, item, "monthly"), + add: input => add(set, input, "monthly"), + markAsDone: item => markAsDone(set, item, "monthly"), + markAsTodo: item => markAsTodo(set, item, "monthly"), deleteDones: () => deleteDones(set, "monthly") }) -const tasksSlice = (set, get) => ({ - todos: JSON.parse(localStorage.getItem("Completed Tasks")) || [], - add: (input) => add(set, input, "tasks") +const tasksSlice = set => ({ + completed: JSON.parse(localStorage.getItem("Completed Tasks")) || [], + add: input => addCompletedTask(set, input), + deleteCompleted: () => deleteAllCompletedTasks(set) }) export const Store = create(devtools((set, get) => ({ daily: todoDailySlice(set, get), weekly: todoWeeklySlice(set, get), monthly: todoMonthlySlice(set, get), - tasks: tasksSlice(set, get) + tasks: tasksSlice(set) }))) \ No newline at end of file From e2174d13569cb79637634bf052d257f8d686e3aa Mon Sep 17 00:00:00 2001 From: dani Date: Tue, 20 Aug 2024 16:14:54 -0500 Subject: [PATCH 21/32] Fix fetching wrong data from Store branch feat/done --- src/done/Done.jsx | 6 +++--- src/todo/Todo.jsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/done/Done.jsx b/src/done/Done.jsx index 58797e2..4e9fbed 100644 --- a/src/done/Done.jsx +++ b/src/done/Done.jsx @@ -6,7 +6,7 @@ export const Done = () => { const store = Store() const [input, setInput] = useState("") const handleInputEnterKey = k => k.key === "Enter" && input.trim() != "" && (store.tasks.add(input), setInput("")) - useEffect(() => localStorage.setItem("Completed Tasks", JSON.stringify(store.tasks.todos)), [store.tasks.todos]) + useEffect(() => localStorage.setItem("Completed Tasks", JSON.stringify(store.tasks.completed)), [store.tasks.completed]) return (
    @@ -22,10 +22,10 @@ export const Done = () => {

    Completed Tasks

      - {store.tasks.todos.map(item => (
    • {item.content}
      • ))} + {store.tasks.completed.map(item => (
    • {item.content}
      • ))}
    - + { className='input' value={input} placeholder="Type a goal and press Enter" - onChange={(e) => setInput(e.target.value)} - onKeyDown={(k) => handleInputEnterKey(k)} + onChange={e => setInput(e.target.value)} + onKeyDown={k => handleInputEnterKey(k)} />
    From 6ae9c3d75ace11c7d03918cd61e7500e7aa1adf9 Mon Sep 17 00:00:00 2001 From: dani Date: Wed, 21 Aug 2024 17:49:27 -0500 Subject: [PATCH 22/32] Create tasks slice on the Store branch feat/done --- src/store/store.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/store/store.js b/src/store/store.js index 262fb3a..08910a9 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -1,13 +1,13 @@ import { create } from "zustand" import { devtools } from "zustand/middleware" import { add, completed, markAsDone, markAsTodo, deleteDones } from "./todo_logic.js" -import { addCompletedTask, deleteAllCompletedTasks } from './tasks_logic.js' +import { addCompletedTask, deleteAllCompletedTasks, workedHours } from './tasks_logic.js' const todoDailySlice = (set, get) => ({ title: "Daily Goals", - completed: () => completed(get, "daily"), todos: JSON.parse(localStorage.getItem("Daily Goals Todos")) || [], dones: JSON.parse(localStorage.getItem("Daily Goals Dones")) || [], + completed: () => completed(get, "daily"), add: input => add(set, input, "daily"), markAsDone: item => markAsDone(set, item, "daily"), markAsTodo: item => markAsTodo(set, item, "daily"), @@ -16,9 +16,9 @@ const todoDailySlice = (set, get) => ({ const todoWeeklySlice = (set, get) => ({ title: "Weekly Goals", - completed: () => completed(get, "weekly"), todos: JSON.parse(localStorage.getItem("Weekly Goals Todos")) || [], dones: JSON.parse(localStorage.getItem("Weekly Goals Dones")) || [], + completed: () => completed(get, "weekly"), add: input => add(set, input, "weekly"), markAsDone: item => markAsDone(set, item, "weekly"), markAsTodo: item => markAsTodo(set, item, "weekly"), @@ -27,24 +27,26 @@ const todoWeeklySlice = (set, get) => ({ const todoMonthlySlice = (set, get) => ({ title: "Monthly Goals", - completed: () => completed(get, "monthly"), todos: JSON.parse(localStorage.getItem("Monthly Goals Todos")) || [], dones: JSON.parse(localStorage.getItem("Monthly Goals Dones")) || [], + completed: () => completed(get, "monthly"), add: input => add(set, input, "monthly"), markAsDone: item => markAsDone(set, item, "monthly"), markAsTodo: item => markAsTodo(set, item, "monthly"), deleteDones: () => deleteDones(set, "monthly") }) -const tasksSlice = set => ({ +const tasksSlice = (set, get) => ({ completed: JSON.parse(localStorage.getItem("Completed Tasks")) || [], + workedHoursHistory: [], add: input => addCompletedTask(set, input), - deleteCompleted: () => deleteAllCompletedTasks(set) + deleteCompleted: () => deleteAllCompletedTasks(set), + workedHours: () => workedHours(get), }) export const Store = create(devtools((set, get) => ({ daily: todoDailySlice(set, get), weekly: todoWeeklySlice(set, get), monthly: todoMonthlySlice(set, get), - tasks: tasksSlice(set) + tasks: tasksSlice(set, get) }))) \ No newline at end of file From 9f786522b750c6bde7498b43930c96e1dba245bd Mon Sep 17 00:00:00 2001 From: dani Date: Wed, 21 Aug 2024 17:50:13 -0500 Subject: [PATCH 23/32] Hard coded worked hours for last month and last week branch feat/done --- src/store/tasks_logic.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/store/tasks_logic.js b/src/store/tasks_logic.js index f937b4c..842e603 100644 --- a/src/store/tasks_logic.js +++ b/src/store/tasks_logic.js @@ -10,4 +10,9 @@ export const deleteAllCompletedTasks = set => set(state => ({ ...state.tasks, completed: [] } -}), false, 'tasks/deleteAllCompleted') \ No newline at end of file +}), false, 'tasks/deleteAllCompleted') + +export const workedHours = get => { + const day = get().tasks.completed.length*15/60 + return ({ "day": day, "week": 123, "month": 400 }) +} \ No newline at end of file From 0749ffbcf252df111ebede420537c0a53d750abd Mon Sep 17 00:00:00 2001 From: dani Date: Wed, 21 Aug 2024 17:51:06 -0500 Subject: [PATCH 24/32] Show or render worked hours counter from the Store on Done component branch feat/done --- src/done/Done.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/done/Done.jsx b/src/done/Done.jsx index 4e9fbed..050ef68 100644 --- a/src/done/Done.jsx +++ b/src/done/Done.jsx @@ -14,9 +14,9 @@ export const Done = () => {

    Worked Hours

    -
    12This Month
    -
    23This Week
    -
    2.25This Day
    +
    {store.tasks.workedHours().month}Last Month
    +
    {store.tasks.workedHours().week}Last Week
    +
    {store.tasks.workedHours().day}Today
    From 75204ca34cb6a6c45a627a42e510eae3ebb8994e Mon Sep 17 00:00:00 2001 From: dani Date: Wed, 21 Aug 2024 18:12:25 -0500 Subject: [PATCH 25/32] Calculate worked hours counter for last 7 and 30 days branch feat/done --- src/store/store.js | 2 +- src/store/tasks_logic.js | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/store/store.js b/src/store/store.js index 08910a9..80a2e92 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -40,7 +40,7 @@ const tasksSlice = (set, get) => ({ completed: JSON.parse(localStorage.getItem("Completed Tasks")) || [], workedHoursHistory: [], add: input => addCompletedTask(set, input), - deleteCompleted: () => deleteAllCompletedTasks(set), + deleteCompleted: () => deleteAllCompletedTasks(set, get), workedHours: () => workedHours(get), }) diff --git a/src/store/tasks_logic.js b/src/store/tasks_logic.js index 842e603..8ec362c 100644 --- a/src/store/tasks_logic.js +++ b/src/store/tasks_logic.js @@ -5,14 +5,17 @@ export const addCompletedTask = (set, input) => set(state => ({ } }), false, 'tasks/add') -export const deleteAllCompletedTasks = set => set(state => ({ +export const deleteAllCompletedTasks = (set, get) => set(state => ({ tasks: { ...state.tasks, + workedHoursHistory: [...state.tasks.workedHoursHistory, get().tasks.completed.length * 15 / 60], completed: [] } }), false, 'tasks/deleteAllCompleted') export const workedHours = get => { - const day = get().tasks.completed.length*15/60 - return ({ "day": day, "week": 123, "month": 400 }) + const day = get().tasks.completed.length * 15 / 60 + const week = get().tasks.workedHoursHistory.slice(-7).reduce((a, b)=> a+b, 0) + const month = get().tasks.workedHoursHistory.slice(-30).reduce((a, b)=> a+b, 0) + return ({ "day": day, "week": week, "month": month }) } \ No newline at end of file From 42e1b5a897190deeb7b07f5bb5613c8bff2f49b8 Mon Sep 17 00:00:00 2001 From: dani Date: Wed, 21 Aug 2024 22:05:00 -0500 Subject: [PATCH 26/32] Avoid long lines of code branch feat/done --- src/done/Done.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/done/Done.jsx b/src/done/Done.jsx index 050ef68..5956d72 100644 --- a/src/done/Done.jsx +++ b/src/done/Done.jsx @@ -25,7 +25,12 @@ export const Done = () => { {store.tasks.completed.map(item => (
  • {item.content}
    • ))}