From 545f2e83bca28402130bb8f61f641b7b1c72dc51 Mon Sep 17 00:00:00 2001 From: Jonny Hicks Date: Mon, 19 May 2025 16:17:45 +0200 Subject: [PATCH 01/10] Add task management features with Zustand and update app structure - Implemented task management using Zustand for state management. - Created TaskList, TaskItem, TaskForm, and TaskCounter components. - Updated App component to include new task management components. - Added date-fns dependency for date handling. - Updated package.json for new dependencies and devDependencies. --- package.json | 8 +- progess.md | 192 +++++++++++++++++++++++++++++ src/App.jsx | 19 ++- src/components/StartOverbutton.jsx | 0 src/components/TaskCounter.jsx | 14 +++ src/components/TaskForm.jsx | 37 ++++++ src/components/TaskItem.jsx | 36 ++++++ src/components/TaskList.jsx | 16 +++ src/main.jsx | 13 +- src/useTaskStore.js | 31 +++++ 10 files changed, 353 insertions(+), 13 deletions(-) create mode 100644 progess.md create mode 100644 src/components/StartOverbutton.jsx create mode 100644 src/components/TaskCounter.jsx create mode 100644 src/components/TaskForm.jsx create mode 100644 src/components/TaskItem.jsx create mode 100644 src/components/TaskList.jsx create mode 100644 src/useTaskStore.js diff --git a/package.json b/package.json index caf6289..d584b88 100644 --- a/package.json +++ b/package.json @@ -10,18 +10,22 @@ "preview": "vite preview" }, "dependencies": { + "date-fns": "^4.1.0", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "styled-components": "^6.1.18", + "zustand": "^5.0.4" }, "devDependencies": { "@eslint/js": "^9.21.0", "@types/react": "^19.0.10", "@types/react-dom": "^19.0.4", "@vitejs/plugin-react": "^4.3.4", + "babel-plugin-styled-components": "^2.1.4", "eslint": "^9.21.0", "eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-refresh": "^0.4.19", "globals": "^15.15.0", - "vite": "^6.2.0" + "vite": "^6.3.5" } } diff --git a/progess.md b/progess.md new file mode 100644 index 0000000..5d7cf73 --- /dev/null +++ b/progess.md @@ -0,0 +1,192 @@ +โœ… Task App Project Plan (Using Zustand + React) +๐Ÿง  Goal: +Build a responsive, accessible, and easy-to-use task manager app using Zustand for state management, React components, and clean code. + +๐Ÿ—“๏ธ DAY 1 โ€“ Plan, Set Up & Display Tasks +Focus: Understand the app structure, create the store, and list tasks on screen. + +โฐ Total Time: ~4 hours (includes breaks) + +1๏ธโƒฃ Session 1: Sketch & Plan (60 min) + +Why: Planning first prevents confusion later. + +Sketch your layout on paper: input field, task list, counter. + +Break it into components: TaskList, TaskItem, TaskForm, TaskCounter. + +Define a task object: + +{ +id: string, +text: string, +completed: boolean, +createdAt: string +} +Learn why Zustand helps: No prop drilling โ†’ better control of data. + +๐Ÿง˜ Break โ€“ 10 minutes + +2๏ธโƒฃ Session 2: Set up project + Zustand store (60 min) +Why: Zustand holds your data in one place โ€” like a digital whiteboard. + +Create a new React app (npm create vite@latest or CRA). + +Install Zustand: npm install zustand + +Make a useTaskStore.js file. + +Add this basic store: + +import { create } from 'zustand'; + +const useTaskStore = create((set) => ({ +tasks: [], +addTask: (task) => set((state) => ({ tasks: [...state.tasks, task] })), +removeTask: (id) => set((state) => ({ +tasks: state.tasks.filter((task) => task.id !== id), +})), +})); + +export default useTaskStore; +๐Ÿง˜ Break โ€“ 10 minutes + +3๏ธโƒฃ Session 3: List tasks on screen (60 min) +Why: Seeing results early helps you understand your appโ€™s flow. + +Create TaskList component. + +Get tasks from Zustand using: + +const tasks = useTaskStore((state) => state.tasks); +For now, hardcode a few tasks in tasks: [...] in the store. + +Map over tasks and render them: + +tasks.map(task =>
  • {task.text}
  • ) +๐Ÿ’ก End-of-day reflection (15 min): + +What worked? + +What was tricky? + +What do you want to understand better? + +๐Ÿ—“๏ธ DAY 2 โ€“ Add, Toggle, and Count Tasks +Focus: Add tasks, mark them as completed, and display counters. + +โฐ Total Time: ~4 hours +1๏ธโƒฃ Session 1: Add new task (90 min) +Why: This is how users interact with your app. + +Create TaskForm with input + button. + +On submit, call addTask() from store. + +Use: + +const newTask = { +id: crypto.randomUUID(), +text: inputValue, +completed: false, +createdAt: new Date().toISOString() +} +Clear the input after adding a task. + +๐Ÿง˜ Break โ€“ 10 minutes + +2๏ธโƒฃ Session 2: Toggle task complete/incomplete (60 min) +Why: Interactivity makes it a real to-do app. + +Add a checkbox in TaskItem. + +In the store, add: + +toggleTaskCompleted: (id) => +set((state) => ({ +tasks: state.tasks.map((task) => +task.id === id ? { ...task, completed: !task.completed } : task +), +})), +Hook checkbox to that function using onChange. + +๐Ÿง˜ Break โ€“ 10 minutes + +3๏ธโƒฃ Session 3: Count tasks & delete tasks (60 min) +Why: Good UX shows users whatโ€™s going on. + +Show total tasks and/or uncompleted tasks. + +Add a "Delete" button to TaskItem that calls removeTask(id). + +Use semantic HTML (like