How carecsnay/task-manager-react18 works
This is a React task-management app for creating, scheduling, tracking, editing, and deleting tasks, with a dashboard and motivational quotes. Users enter through the task views, load task data, then act through task controls or a detail form; React Query hooks perform API operations and update cached data. The graph preserves the dashboard and quote branches as well as the main task workflow. Evidence is limited to the README (empty), the SOURCE INDEX, and the sampled files; unsampled relationships are omitted.
Main entry points: axios.js API Client · queries.js Query Keys · TaskDetails.jsx Task Details · use-update-tasks.js Task Updates
Components 21
App Views
- Home Dashboard
src/pages/Home.jsx - Tasks Page
src/pages/Tasks.jsx - Task Details
src/pages/TaskDetails.jsx
Task Interface
- Task List
src/components/Tasks.jsx - Task Header
src/components/Header.jsx - Add Task Dialog
src/components/AddTaskDialog.jsx - Task Item
src/components/TaskItem.jsx - Dashboard Cards
src/components/DashboardCards.jsx - Motivational Quote
src/components/MotivationalQuote.jsx
Task Data
- Task Queries
src/hooks/data/use-get-tasks.js - Detail Query
src/hooks/data/use-details-task.js - Task Creation
src/hooks/data/use-create-tasks.js - Task Updates
src/hooks/data/use-update-tasks.js - Task Deletion
src/hooks/data/use-delete-tasks.js - Bulk Deletion
src/hooks/data/use-delete-all-tasks.js - Quote Query
src/hooks/data/use-get-quotes.js
API and Cache
- Query Keys
src/keys/queries.js - Mutation Keys
src/keys/mutations.js - API Client
src/lib/axios.js
Other components
- User
- Task and Quote API
Connections 36
- User → Home Dashboard: opens dashboard
- User → Tasks Page: opens tasks
- User → Task Details: opens task detail
- Home Dashboard → Dashboard Cards: renders
src/pages/Home.jsx - Home Dashboard → Motivational Quote: renders
src/pages/Home.jsx - Home Dashboard → Task Queries: reads tasks
src/pages/Home.jsx - Tasks Page → Task List: renders
src/pages/Tasks.jsx - Task List → Task Queries: reads tasks
src/components/Tasks.jsx - Task List → Task Header: renders
src/components/Tasks.jsx - Task List → Task Item: renders
src/components/Tasks.jsx - Task Header → Add Task Dialog: opens
src/components/Header.jsx - Task Header → Bulk Deletion: clears tasks
src/components/Header.jsx - Add Task Dialog → Task Creation: creates task
src/components/AddTaskDialog.jsx - Task Item → Task Updates: updates status
src/components/TaskItem.jsx - Task Item → Task Deletion: deletes task
src/components/TaskItem.jsx - Task Item → Task Details: links to
src/components/TaskItem.jsx - Task Details → Detail Query: loads task
src/pages/TaskDetails.jsx - Task Details → Task Updates: saves changes
src/pages/TaskDetails.jsx - Task Details → Task Deletion: deletes task
src/pages/TaskDetails.jsx - Motivational Quote → Quote Query: loads quote
src/components/MotivationalQuote.jsx - Task Queries → Query Keys: uses query key
src/hooks/data/use-get-tasks.js - Detail Query → Query Keys: uses query key
src/hooks/data/use-details-task.js - Quote Query → Query Keys: uses query key
src/hooks/data/use-get-quotes.js - Task Creation → Query Keys: uses query key
src/hooks/data/use-create-tasks.js - Task Updates → Query Keys: updates cache
src/hooks/data/use-update-tasks.js - Task Deletion → Query Keys: updates cache
src/hooks/data/use-delete-tasks.js - Task Updates → Mutation Keys: uses mutation key
src/hooks/data/use-update-tasks.js - Task Deletion → Mutation Keys: uses mutation key
src/hooks/data/use-delete-tasks.js - Task Queries → API Client: calls
src/hooks/data/use-get-tasks.js - Detail Query → API Client: calls
src/hooks/data/use-details-task.js - Task Creation → API Client: calls
src/hooks/data/use-create-tasks.js - Task Updates → API Client: calls
src/hooks/data/use-update-tasks.js - Task Deletion → API Client: calls
src/hooks/data/use-delete-tasks.js - Bulk Deletion → API Client: calls
src/hooks/data/use-delete-all-tasks.js - Quote Query → API Client: calls
src/hooks/data/use-get-quotes.js - API Client → Task and Quote API: sends requests