Skip to content

Commit a652a72

Browse files
chrisreddingtonchrisreddington
authored
Add hydration to task board.
1 parent 1e34fa7 commit a652a72

File tree

11 files changed

+246
-62
lines changed

11 files changed

+246
-62
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# React Todo App - Copilot Instructions
1+
# Task Dashboard App - Copilot Instructions
22

33
## Project Overview
44
This is a React-based Todo application that allows users to create, manage, and organize tasks with features like tags, task lists, and task filtering. The application is built using React, Framer Motion for animations, and Tailwind CSS for styling. It uses Vite as the build tool and Vitest for testing.

‎.github/workflows/ci-cd.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: React Todo App CI/CD
1+
name: Task Dashboard App CI/CD
22

33
on:
44
push:

‎README.md‎

Lines changed: 64 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,91 @@
1-
# GitHub Codespaces ♥️ React
1+
# Task Dashboard
22

3-
Welcome to your shiny new Codespace running React! We've got everything fired up and running for you to explore React.
3+
A task management application that allows users to create, organize, and filter tasks using a modern, responsive UI built with React.
44

5-
You've got a blank canvas to work on from a git perspective as well. There's a single initial commit with the what you're seeing right now - where you go from here is up to you!
5+
![Task Dashboard](https://github.com/yourusername/todo-app-attestations/raw/main/public/screenshot.png)
66

7-
Everything you do here is contained within this one codespace. There is no repository on GitHub yet. If and when you’re ready you can click "Publish Branch" and we’ll create your repository and push up your project. If you were just exploring then and have no further need for this code then you can simply delete your codespace and it's gone forever.
7+
> **Note:** This application is intended for demonstration purposes only and is not meant for production use.
88
9-
This project was bootstrapped for you with [Vite](https://vitejs.dev/).
9+
## Features
1010

11-
## Available Scripts
11+
- **Task Management**: Create, complete, and delete tasks
12+
- **Task Tags**: Organize tasks with customizable tags
13+
- **Task Lists**: Create multiple lists with custom filters
14+
- **List Filters**: Filter tasks by tags or completion status
15+
- **Animations**: Smooth transitions and animations using Framer Motion
16+
- **Responsive Design**: Works on desktop and mobile devices
1217

13-
In the project directory, you can run:
18+
## Technology Stack
1419

15-
### `npm start`
20+
- **React**: Modern React with functional components and hooks
21+
- **Tailwind CSS**: Utility-first CSS framework for styling
22+
- **Framer Motion**: Animation library for React
23+
- **Vite**: Fast, modern build tool and development server
24+
- **Vitest**: Testing framework compatible with Vite
1625

17-
We've already run this for you in the `Codespaces: server` terminal window below. If you need to stop the server for any reason you can just run `npm start` again to bring it back online.
26+
## Getting Started
1827

19-
Runs the app in the development mode.\
20-
Open [http://localhost:3000/](http://localhost:3000/) in the built-in Simple Browser (`Cmd/Ctrl + Shift + P > Simple Browser: Show`) to view your running application.
28+
### Prerequisites
2129

22-
The page will reload automatically when you make changes.\
23-
You may also see any lint errors in the console.
30+
- Node.js (v18+)
31+
- npm (v10+)
2432

25-
### `npm test`
33+
### Installation
2634

27-
Launches the test runner in the interactive watch mode.\
28-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
35+
1. Clone the repository:
36+
```bash
37+
git clone https://github.com/yourusername/todo-app-attestations.git
38+
cd todo-app-attestations
39+
```
2940

30-
### `npm run build`
41+
2. Install dependencies:
42+
```bash
43+
npm install
44+
```
3145

32-
Builds the app for production to the `build` folder.\
33-
It correctly bundles React in production mode and optimizes the build for the best performance.
46+
3. Start the development server:
47+
```bash
48+
npm start
49+
```
3450

35-
The build is minified and the filenames include the hashes.\
36-
Your app is ready to be deployed!
51+
4. Open [http://localhost:3000](http://localhost:3000) to view the app
3752

38-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
53+
### Available Scripts
3954

40-
## Learn More
55+
- `npm start` - Start the development server
56+
- `npm test` - Run tests with Vitest
57+
- `npm run build` - Build for production
58+
- `npm run preview` - Preview the production build locally
4159

42-
You can learn more in the [Vite documentation](https://vitejs.dev/guide/).
60+
## Architecture
4361

44-
To learn Vitest, a Vite-native testing framework, go to [Vitest documentation](https://vitest.dev/guide/)
62+
### State Management
4563

46-
To learn React, check out the [React documentation](https://reactjs.org/).
64+
The application uses React Context for state management:
4765

48-
### Code Splitting
66+
- **TaskContext**: Manages tasks state and operations (add, toggle, delete)
67+
- **TagContext**: Manages tags and their relationships with tasks
68+
- **ListContext**: Manages task lists and filtering logic
4969

50-
This section has moved here: [https://sambitsahoo.com/blog/vite-code-splitting-that-works.html](https://sambitsahoo.com/blog/vite-code-splitting-that-works.html)
70+
### UI Components
5171

52-
### Analyzing the Bundle Size
72+
The application features several key components:
73+
- **TaskList**: Renders a list of tasks
74+
- **TaskItem**: Renders an individual task
75+
- **TaskBoard**: Manages multiple task lists
76+
- **TagManager**: Interface for creating and managing tags
77+
- **GlobalTaskForm**: Form for creating new tasks
78+
- **ListAddTask**: Form for adding tasks to specific lists
79+
- **TaskListConfig**: Interface for configuring task lists
5380

54-
This section has moved here: [https://github.com/btd/rollup-plugin-visualizer#rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer#rollup-plugin-visualizer)
81+
## Contributing
5582

56-
### Making a Progressive Web App
83+
1. Fork the repository
84+
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
85+
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
86+
4. Push to the branch (`git push origin feature/amazing-feature`)
87+
5. Open a Pull Request
5788

58-
This section has moved here: [https://dev.to/hamdankhan364/simplifying-progressive-web-app-pwa-development-with-vite-a-beginners-guide-38cf](https://dev.to/hamdankhan364/simplifying-progressive-web-app-pwa-development-with-vite-a-beginners-guide-38cf)
89+
## License
5990

60-
### Advanced Configuration
61-
62-
This section has moved here: [https://vitejs.dev/guide/build.html#advanced-base-options](https://vitejs.dev/guide/build.html#advanced-base-options)
63-
64-
### Deployment
65-
66-
This section has moved here: [https://vitejs.dev/guide/build.html](https://vitejs.dev/guide/build.html)
67-
68-
### Troubleshooting
69-
70-
This section has moved here: [https://vitejs.dev/guide/troubleshooting.html](https://vitejs.dev/guide/troubleshooting.html)
91+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "codespaces-react",
2+
"name": "task-dashboard",
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {

‎src/common/utils/DataHydrationService.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import initialData from '../../data/initialData.json';
2+
3+
/**
4+
* Service to hydrate the application with initial sample data
5+
*/
6+
export const DataHydrationService = {
7+
/**
8+
* Load sample task lists into the application
9+
* @returns {Array} Array of sample task lists
10+
*/
11+
getInitialTaskLists: () => {
12+
return initialData.taskLists;
13+
},
14+
15+
/**
16+
* Load sample tags into the application
17+
* @returns {Array} Array of sample tags
18+
*/
19+
getInitialTags: () => {
20+
return initialData.tags;
21+
},
22+
23+
/**
24+
* Load sample tasks into the application
25+
* @returns {Array} Array of sample tasks
26+
*/
27+
getInitialTasks: () => {
28+
return initialData.tasks;
29+
},
30+
31+
/**
32+
* Check if the application should be hydrated with sample data
33+
* This can be expanded to check localStorage or other conditions
34+
* @returns {boolean}
35+
*/
36+
shouldHydrate: () => {
37+
// You can add logic here to check if hydration should occur
38+
// For example, checking if it's the first time the app is run
39+
return true;
40+
}
41+
};

‎src/context/ListContext.jsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { createContext, useState, useContext } from 'react';
2+
import { DataHydrationService } from '../common/utils/DataHydrationService';
23

34
// Create the list context
45
const ListContext = createContext();
@@ -8,9 +9,12 @@ export const useListContext = () => useContext(ListContext);
89

910
// List provider component
1011
export const ListProvider = ({ children }) => {
11-
const [taskLists, setTaskLists] = useState([
12-
{ id: 'default', title: 'All Tasks', filters: [] }
13-
]);
12+
const [taskLists, setTaskLists] = useState(() => {
13+
// Initialize with hydrated data if should hydrate
14+
return DataHydrationService.shouldHydrate()
15+
? DataHydrationService.getInitialTaskLists()
16+
: [{ id: 'default', title: 'All Tasks', filters: [] }];
17+
});
1418

1519
const addTaskList = () => {
1620
const newList = {

‎src/context/TagContext.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { createContext, useState, useContext, useEffect } from 'react';
22
import { useTaskContext } from './TaskContext';
3+
import { DataHydrationService } from '../common/utils/DataHydrationService';
34

45
// Create the tag context
56
const TagContext = createContext();
@@ -9,7 +10,12 @@ export const useTagContext = () => useContext(TagContext);
910

1011
// Tag provider component
1112
export const TagProvider = ({ children }) => {
12-
const [tags, setTags] = useState([]);
13+
const [tags, setTags] = useState(() => {
14+
// Initialize with hydrated data if should hydrate
15+
return DataHydrationService.shouldHydrate()
16+
? DataHydrationService.getInitialTags()
17+
: [];
18+
});
1319
const { tasks } = useTaskContext();
1420

1521
// Extract and collect all unique tags from tasks when tasks change

‎src/context/TaskContext.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { createContext, useState, useContext, useEffect } from 'react';
2+
import { DataHydrationService } from '../common/utils/DataHydrationService';
23

34
// Create the task context
45
const TaskContext = createContext();
@@ -8,7 +9,12 @@ export const useTaskContext = () => useContext(TaskContext);
89

910
// Task provider component
1011
export const TaskProvider = ({ children }) => {
11-
const [tasks, setTasks] = useState([]);
12+
const [tasks, setTasks] = useState(() => {
13+
// Initialize with hydrated data if should hydrate
14+
return DataHydrationService.shouldHydrate()
15+
? DataHydrationService.getInitialTasks()
16+
: [];
17+
});
1218
const [stats, setStats] = useState({ total: 0, completed: 0, remaining: 0 });
1319

1420
useEffect(() => {

‎src/data/initialData.json‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
{
2+
"taskLists": [
3+
{
4+
"id": "default",
5+
"title": "All Tasks",
6+
"filters": []
7+
},
8+
{
9+
"id": "ms-build-2025",
10+
"title": "Microsoft Build 2025",
11+
"filters": [
12+
{
13+
"type": "tag",
14+
"value": "Build"
15+
}
16+
]
17+
},
18+
{
19+
"id": "github-universe-2025",
20+
"title": "GitHub Universe 2025",
21+
"filters": [
22+
{
23+
"type": "tag",
24+
"value": "Universe"
25+
}
26+
]
27+
}
28+
],
29+
"tags": [
30+
"GitHub",
31+
"Microsoft",
32+
"Build",
33+
"Universe",
34+
"Copilot",
35+
"Actions",
36+
"DevOps",
37+
"AI",
38+
"Community",
39+
"Keynote"
40+
],
41+
"tasks": [
42+
{
43+
"id": 1001,
44+
"title": "Attend Day 1 Keynote",
45+
"description": "Main conference keynote with major announcements",
46+
"isCompleted": false,
47+
"tags": ["Microsoft", "Build", "Keynote"]
48+
},
49+
{
50+
"id": 1002,
51+
"title": "Attend Day 2 Keynote",
52+
"description": "Technical deep dive keynote session",
53+
"isCompleted": false,
54+
"tags": ["Microsoft", "Build", "Keynote"]
55+
},
56+
{
57+
"id": 1003,
58+
"title": "GitHub Copilot Lab",
59+
"description": "Try out the latest and greatest features of GitHub Copilot",
60+
"isCompleted": false,
61+
"tags": ["Microsoft", "Build", "Copilot", "AI", "GitHub"]
62+
},
63+
{
64+
"id": 1004,
65+
"title": "Attend GitHub Actions session",
66+
"description": "Learn about GitHub Actions improvements and new features",
67+
"isCompleted": false,
68+
"tags": ["Microsoft", "Build", "GitHub", "Actions"]
69+
},
70+
{
71+
"id": 1005,
72+
"title": "Contribute to an open source project (find a good first issue)",
73+
"description": "Find a good first issue to work on at the hackathon",
74+
"isCompleted": false,
75+
"tags": ["Microsoft", "Build", "GitHub", "Community"]
76+
},
77+
{
78+
"id": 2001,
79+
"title": "Register for GitHub Universe 2025",
80+
"description": "Early bird tickets available soon",
81+
"isCompleted": false,
82+
"tags": ["GitHub", "Universe"]
83+
},
84+
{
85+
"id": 2002,
86+
"title": "Meet with GitHub engineering team",
87+
"description": "Schedule office hours with product teams",
88+
"isCompleted": false,
89+
"tags": ["GitHub", "Universe", "Community"]
90+
},
91+
{
92+
"id": 2003,
93+
"title": "Attend GitHub Actions workshop",
94+
"description": "Learn about the newest CI/CD features",
95+
"isCompleted": false,
96+
"tags": ["GitHub", "Universe", "Actions", "DevOps"]
97+
},
98+
{
99+
"id": 2004,
100+
"title": "Do some live coding and collab Universe",
101+
"description": "Prepare demo and documentation",
102+
"isCompleted": false,
103+
"tags": ["GitHub", "Universe", "Community"]
104+
}
105+
]
106+
}

0 commit comments

Comments
 (0)