A simple task management app using React, Redux, and Docker. React components are styled using react-emotion
.
- Clone repository.
- In base of repository, run
docker-compose build
- After it builds, run
docker-compose up
and keep it running in that tab. - Open a new tab and run
npm install
. - After npm packages are installed, run
npm start
in the same tab. - Open browser and run on
localhost:3000
. - To run front end tests, run
npm test
.
- Create new task with name, description, and deadline.
- Filter tasks by: all, completed, due soon (today or tomorrow), overdue.
- Mark tasks incomplete or complete.
- Remove tasks.
- Color coded tasks by completion/deadline status.
- Open task for more details.
TaskListContainer
- Connects redux toApp
component with dispatch functions to create, set, update, filter, and remove tasks.App
- Parent component holding theList
andSideNav
components.SideNav
- A menu component that holds a button to create a new task and the filter options, which also acts as a color key to visually identify tasks that arecomplete
,due soon
, oroverdue
.List
- Component that holds all tasks returned from the database.Task
- Component displaying information about the task. It has two states: the simple display state displays the name, a checkbox indicating if the task is complete or not, and a remove button. The outline of the task component is colored by a related filter. Clicking on this component opens a modal (TaskDetailModal
) with more details about the task, such as its description and deadline. There is also a button to mark the task complete or incomplete.CreateTaskModal
- a modal that opens when you click the button to create a task.Modal
- a simple component used as a pattern/base for more complex modals, such as theTaskDetailModal
andCreateTaskModal
.Input
- a styled input fieldCheckbox
- a styled checkboxButton
- a styled button
SET_TASKS
- sets the tasks that return fromapi/v1/tasks
on to stateSET_FILTER
- assigns the filter that is selected on to state
createTask
- creates taskupdateTask
- updates if task is complete or notremoveTask
- removes task
name
(string) required - the name of the taskdescription
(string) optional - the description of the taskdeadline
(datestring) optional - a string form of the date set as the deadline, in format 'YYYY-MM-DD'complete
(boolean) default set tofalse
- task completion status
api/v1/tasks
- Response 200 (application/json)- Response Body
[ { "id":2, "name":"testing second task", "description":"does the api work?", "deadline":"2018-04-26", "complete":false } ]
api/v1/tasks
- Response 201- Request Body
{ "name":"submit this project soon", "description":"this project should be submitted tomorrow", "deadline":"2018-04-11", "complete":false }
api/v1/tasks/:id
Response 201- Request Body
{ complete: true }
api/v1/tasks/:id
Response 204- no response body