The goal of this exercise is to make a multipage todo app. You are provided with a boilerplate, it is up to you to fill in the blanks.
Project consist out 2 parts out of a backend
and frontend
.
backend
can be found in theserver
directoryfrontend
can be found in theapp
directory
Install dependencies for both with npm
.
cd app
npm install
cd server
npm install
The server
uses nodemon to run it's code.
Nodemon allows for automatic restarting of the node
process when changes occur.
Install it globably with:
npm install -g nodemon
The backend uses a mongodb database. But the specific instance of this database is not configured. You will need to configure a connection url for this database.
Obtain a connection url from the instructor or use your own if so desired.
Create a file name .env
in the server
directory.
Now add a new line to it.
CONNECTION_URL=<url_goes_here>
Add a second line to it with as value your name (without any special characters or spaces). This will be your personal database for this exercise.
DATABASE_NAME=<your_name_goes_here>
Now run npm run init
from withing the server
directory, to seed your database and test if the connection is working.
Starts the backend server on http://localhost:3001.
There are more scripts as the frontend is initialized with create-react-app but for this exercise only the useful set is listed.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Runs the the api at http://localhost:3001.
The page will reload if you make edits and the server will restart. You will also see any lint errors in the console.
- Implement the resolve button
- Implement the
editTodo
inapi.js
. - On click call function
- If successful refresh the list by fetching it again and updating the
state
- In the navigation make sure the active page is indicated with a color.
- Check the documentation on how to do this https://reacttraining.com/react-router/web/guides/quick-start.
- Split up the list by
category
- Remove the overview
Route
and add 2 new routes to/work
and to/private
. - Instead of component define a
render
property on theRoute
. - The
render
property should be implemented with a function that returns theTodoList
- The
TodoList
should be returned with a propcategory
and the value being eitherwork
orprivate
depending on the route. - See https://reacttraining.com/react-router/web/api/Route/render-func for an example.
- In
TodoLisst
filter the todos that do not match the category.- In the
render
function,this.state.todos
should be filtered with.filter
- Keep the
todos
that matchthis.props.category
- In the
- Implement the edit button
When the user clicks edit they are redirected to a page with a prefilled form where they can change the description.
- Add a function
onEditClick
in theTodoList
- Add a prop
onEditClick
to<TodoItem />
inTodoList
and set the value tothis.onEditClick
- In
TodoList.onEditClick
set the id that is passed a first argument to the function to a state variable callededitingTodoId
withthis.setState
- Import
Redirect
fromreact-router-dom
inTodoList.js
- In the
render
method ofTodoList
add anif (this.state.editingTodoId) { return <Redirect to={
/todos/${this.state.editingTodoId} /> }
- Copy the
TodoForm.js
to a file component calledEditForm.js
. - Rename all occurences of
TodoForm
toEditForm
inEditForm.js
- Add a
Route
to/todos/:id
inTodoNavigation
,EditForm
will be thecomponent
for this route. - Implement the
getTodo
function inapi.js
- This should be a
GET
fetch
to/todos/:id
,:id
needs to filled in by the argument of the function.
- This should be a
- In
componentDidMount
ofEditForm
you need to call the newly implementedgetTodo
with theid
from the route.- make sure the you import the
Api
from./api.js
inEditForm.js
- Call the static function
getTodo
onApi
with theid
of the todo - Check the documentation on how to get the
id
from the route it is somethingreact-router-dom
supports https://reacttraining.com/react-router/web/example/url-params - Set the result of the call to a
state
variable calledtodo
- make sure the you import the
- Set the form input values with data from
this.state.todo
- On submit instead of calling
Api.addTodo
callApi.editTodo
.