Overall flow of the app

[orjwan98]

• User requests the GET / and gets served up build/public files.

• Render the login component by default.

• Send request to checkAuth endpoint which will check the cookies and respond accordingly:
  1. If not; keep the login component rendered (no change). related checkAuth: is the user already logged in?  #45
  - once the login button is pressed, send a request to the server /login to make sure the user have the correct credentials to sign in.
  2. If so, set the cookies and send the response, and render the cars component.
  3. To render the cars' component with data, send a request to the backend to fetch data. GET /cars

• When the user selects a car, update the global state to that car's information.
  1. redirect to /home component

• On the home screen, there are two components:

1. Add: once the user clicks on the add button, they'll get redirected to add trip component. /add.
   - Make a request to the server and get the last log of startKM associated with the selected car, auto fill startKm. GET /lastLog
   - Update the global state to what the user fills in as they go (onChange).
   - When confirm is pressed, render the confirm component. /confirm.
   - Once the confirm button is pressed, send your data to be saved in the database. POST /addLogs.
   - After it saves, update the the cars table column of lastlog_km to the value of end_km of the last log.
   - Redirect to /reports. (Table and calendar father element)

2. Show reports: once the user clicks on the show reports button, a request is made to the database to fetch all reports associated with the selected car. POST /carLogs
   - render the reports parent component, and inside it:
   1. render the table component along with retrieved data (according to current month).
   2. render the calendar component along with the current month.
   - once you select a month from the calendar, send a request to the server to fetch that month's data. GET /monthData
   - render the data in the table component.

NOTE

We have two extra features in case everything goes well and we have enough time to implement them:

Notes' AutoComplete feature

When the user focuses on the field, send a request to the server to fetch all data associated with the notes column. `GET /notes`.
Make suggestions based on what the user types in the field. 
Update the global state which has all data accordingly. 

Remember last car selected by the user feature

Save last selected car either by using cookies or local storage. 

[orjwan98]

@m4v15 can you please review my issue? Thanks.

[m4v15]

Nice!

In general I would say this is good, but would like a bit more detail in places, especially what will happen on the backend at the endpoints you mention (I think you probably know but I want to see it written down clearly in the plan) eg:

• POST /addLogs: extract the data from the post request, add them to the logs table, and update the cars table for last km travelled (will this be one or two queries)

I would also say it would probably help if this was displayed in a more consistant manner, to make sure everything is covered - when it is written like this it is hard to spot anything that might be missing e.g:

Front End

Name of "page"

• Bullet Points about what it does

Back End

Endpoint URL and method

• Bullet points about what data the endpoint is expecting (if POST), what the server will do (if a query, rough desc of the DB query) and what exactly it will send back to the front end (eg: send back JSON like {success:true}

Again I want to stress to all of you that this is about everyone being on the same page about what's happening - maybe you all know all of the extra details already, and that's great, but please get them written down.

[m4v15]

I will go through this and give some specific feedback about some of the points in a little bit.

[Samaamro20]

@m4v15

• about POST /addLogs : we created a psql function to update last_log_km column on the car table .
• by making update query each time we add new log to the logs model and we define it using sequalize as follows :
  logs.hook('afterCreate', log => car.update({ last_log_km: log.end_km }, { where: { id: log.car_id } }));

[m4v15]

More specific feedback as promised - you don't have to do all (or any of it) but just my thoughts on the plan

• User requests the GET / and gets served up build/public files.
• Render the login component by default.
• Send request to check_auth endpoint which will check the cookies and respond accordingly:
  Why not just check the cookie at the / route instead of sending 2 requests and rerendering?
  1. If not; keep the login component rendered (no change).
  • once the login button is pressed, send a request to the server /login to make sure the user have the correct credentials to sign in.
  2. If so, set the cookies and send the response, and render the cars component.
  3. To render the cars' component with data, send a request to the backend to fetch data. GET /cars

Just to be clear, you should be requesting the data in componentDidMount of the cars component

• When the user selects a car, update the global state to that car's information.
  1. redirect to /home component
• On the home screen, there are two components:

1. Add: once the user clicks on the add button, they'll get redirected to add trip component. /add.
   • Make a request to the server and get the last log of startKM associated with the selected car, auto fill startKm. GET /lastLog

I thought this would be in the cars table so would already be on global state?

• Update the global state to what the user fills in as they go (onChange).
• When confirm is pressed, render the confirm component. /confirm.
• Once the confirm button is pressed, send your data to be saved in the database. POST /addLogs.

What happens at addLogs?

• After it saves, update the the cars table column of lastlog_km to the value of end_km of the last log.
• Redirect to /reports. (Table and calendar father element)

2. Show reports: once the user clicks on the show reports button, a request is made to the database to fetch all reports associated with the selected car. POST /carLogs

Why POST? Could be a GET?

• render the reports parent component, and inside it:

1. render the table component along with retrieved data (according to current month).
2. render the calendar component along with the current month.

• once you select a month from the calendar, send a request to the server to fetch that month's data. GET /monthData

To me a simpler way of doing it could be:

• 1 endpoint URI /carLogs/:id which gives you the logs of the car with that :id
• If you send it with month query parameter it will give you that month only, eg: /carLogs/:id?month=04-18
• Maybe keep it your way for now but in general having 2 endpoints to access almost exactly the same data is probably a bad way of setting up the server

• render the data in the table component.

NOTE

We have two extra features in case everything goes well and we have enough time to implement them:

Notes' AutoComplete feature

When the user focuses on the field, send a request to the server to fetch all data associated with the notes column. `GET /notes`.
Make suggestions based on what the user types in the field. 
Update the global state which has all data accordingly. 

Remember last car selected by the user feature

Save last selected car either by using cookies or local storage. 

Nice to have this extracted out as stretch goals

[m4v15]

FYI, @Samaamro20 I wrote this before I saw your other comment 🙈

[ghassanmas]

The flow of the app need to be updated regarding the rerpots/logs page

• There is two endpoints used in the page :

  • GET /logmonth/:year/:month returns an xlsx file for the logs as specfied in the parameter.
  • GET /logs/:year/:month returns a JSON object for the logs as specifed in the parameters.

• Calender is not used, rather two select list one for year and one for month, and by default it select the current year and month and show its logs, there is onChange function for both list that will trigger the function will send GET \logs\:year_selected\:month_selected.

• The download button sends requests to GET /logmonth/:year_selected/:month_selected which returns the file

• Endpoint name may better to be changed to be relevant to their function.