fack1 / kamsafer Goto Github PK

So there is a confusion I guess between the running the app on the development and production mode, when running the app on development mode (Two server running simulatesnly) when chaning the url e.g. /add it will go directly to that endpoint while on the production mode it will say Cannot GET /add because it will try to ask the server while in the development mode it will be requested from the client server which doesn't exsit on production only the Build Files.

To resolve that:

• Get the server to respond with the APP whenevr an endpoint doesn't match any API

• There is a conflict of endpoint where the /cars endpoint exists on the client and server, for example if the user tries to refresh the pags at /cats they will get a JSON response! so one of the endpoint need to changed

• confirm : component show in it data the user added in add Component and send it to parent App props
  • data log (purpose , start KM , End KM , Driver , Total trip , notes)
  • button confirm : if click send data log to /addlog to insert data log to database else back to add
    Page
    to edit data .
  • Text WARNING to user

related #26

Finish login design by resizing the MercyCorps logo.

The component will be designed as the following:

• Once clicked, it allows the user to select month and year .
• Call function from logs component that:
  • send a GET request to the /logs endpoint
  • Retrieve data by querying [get Logs of a specific car in selected month] the database.

• DB
• Technologies
• Technical tasks : Components
• End points

The login Component will render (default) if the user is not logged in.

• design the component as the following:

• Username and password fields

• login button that will trigger a request to the back-end to authenticate:

• Use fetch to send data to the server to y check if the username and password are correct.

• According to the server's response, either trigger a redirect (render cars component) if successful, and an error if not.

only thing left is:

• design with MUI.

• Export Data Excel Sheet
• React Router
• Calender React

• render component footer,get data from local storage save data in login , the footer have these data :
• car model
• car owner
• car No

When you select a car it gives an error of some kind. Check that out and fix it.

• check response of result from dB if null ?

The auth check does bcrypt compare, but then doesn't check the match variable to see if it's true or not!

bcrypt will return match=true if the hashes match and match=false if they do not.

• basic file structure
• create react app
• eslint
• travis
• setup basic express server
• setup proxy

The button will be designed as the following:

• It will be a button with a header and an icon.

• Once clicked, it will send a GET request to the /logs endpoint.

• Retrieve data by querying the database for the current month's (by default) reports.

• Set state with the arriving data. If it haven't arrived yet, render "loading...". If it did, render the table component with the data.

• download button : when click in the button will take an array of logs and download it as excel file .

• 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 #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. 

Following Anam's email:

One thing I wanted to mention to you that might have an impact on the KamSafer MVP. I ended up needing to return my car to Mercy Corps for maintenance and take another car. This happens often. I was thinking it would be better to remove the labels on the cars in the app (e.g. "Anam’s Car", "Ryan’s Car”) and just have the color, car type, and number plate. So just “Blue Corolla, 33-898292).

Make this a stretch goal. Also, reply to her tomorrow with an email.

• End points
• /login POST
• /cars get list of the cars GET return result of [get list of all cars and their owners] query asJSON .
• /home response with the appGET .
• /add log add new log of a specific car Post[add trip log of a car] query .
• /logs get logs of a specific car GET return result of [get Logs of a specific car in a month] query as JSON.

The component will be designed as the following:

• back button
• logo
• title of app
• logout button
• style with MUI
• if /cars don't display the back icon
• if /login don't display the entire header

• make footer in the bottom

Make a function and a new endpoint to check if the user is already logged in or not.

• Create a new endpoint /checkauth with a function that checks if the cookie exists and is valid.

• The function will be called from the login component as soon as it renders; using componentDidMount( ).

• return a json response of true if the user's already logged it, and false if they're not.

The button will be designed as the following:

• It will be a button with a header and an icon.

• Once clicked, it will render the (add) component in accordance to react router.

• check total trip and block it be negative.

As a user who uses the Mercy Corps' car for personal and business purposes, I need to keep track of my travels information and kilometers.

The component will be designed as the following:

• It will have two radio buttons, 5 text fields, and 1 button.

• Once the button is clicked:
  1. It will automatically calculate the total, and already have the start kilometers. It will check if the fields are filled or not.

   2. If not, render an error. If so, proceed with the next step.
  
   3. It will render the (confirm) component along with all the data retrieved from the form. 
  

• Cars Component : when cars components render it have a :
  • car list : render to car component its a list of car component in the DB by end point /cars get list of the cars JSON data .
• Car Component : is a part of Cars Component
  • car component : each car is a components has:
    • car owner
    • car model
    • car No

• remove /carsinfo end point because its extra .

• Show the last 10 logs from the current month .

What is React Router?

React Router is a package that enables React to serve up components based on urls requested. Much like you'd be making a request to a server that would look at your endpoints, and decide which files to serve you.

How to setup React Router for your project?

1. Open your terminal and cd to your project's folder.
2. Run the command: npm install react-router-dom.
3. Now check your package.json and make sure it has the react-router-dom.

How to use it?

We're gonna be making a small demo where we use the React Router.

First off: Set up a small react project, like you'd usually do. You can use the command npx create-react-app yourProject'sName to create your react app's folder. You'll find a number of files there... clean your app from all files except for App.js, index.js, and serviceWorker.js.

Second: Clean your files from imports and code that concerns files that are no longer there.
In your App.js file, in the App class, inside the return statement and inside the <div></div> tags, clean all code and write instead <h1>Hello World</h1>.

Third: Start your server by typing in your terminal npm start.
The app's tab should open in your browser. If it doesn't, just type in your URL bar localhost:3000.

Fourth: Let's make an app that has 4 components. A main navigation page, a home page, a contact page, and an about page.

1. Make a new directory in your src and call it components. This is where we're gonna be making and saving our components.

2. Make 4 folders, and call them Home, Contact, About, Navbar.

3. Make an index.js file inside each folder.

4. In the first 3 files mentioned in step 2, make a functional component that serves up a header one which has the name of the page, and a paragraph that gives a short description. Don't forget to wrap them in a <React.Fragment> in order to display correctly.

5. export default nameOfComponent for each one of them.

6. In the Navbar file, also make a functional component that serves up an unordered list, which has anchor elements nested within.

7. Populate the anchor tags with proper text for each page: Home, Contact, About.

8. Set the href attribute to whatever endpoints you want for each one of them. For example, you can set the href attribute for the Home one to be / .

9. export default your Navabr component. We're gonna need it.

10. Import all your exported components to your App.js file.

11. Inside your <div></div> tag, nest your <Navbar/> component to render it.

check if everything is working correctly before going to the next steps

Fifth:

1. In your App component, in the return statement, nest your <div></div> tags in <BrowserRouter></BrowserRouter>.

2. Import react-router-dom in your App.js by typing at the top of your file:

import { BrowserRouter, Route } from "react-router-dom"

3- To start setting routes, nest the following line in your <div></div> element three times:
<Route path=" " component={ } />

Let's break it down:

a. means that you're setting/defining a route.
b. The path property is to set the destination/endpoint.
c. The component property is to specify which component to serve up once you hit this particular endpoint.
For example: <Route path="/contact" component={Contact}/> means serve up the Contact component (which we imported) when you hit the /contact endpoint.

4- Try the links you set up in your Navbar component and if they truly serve up your components or not.

Sixth: There are many observations, notes and clarifications to be made. -To be continued.

Good morning, can I have 10 mins of your time?

We're student of the coding academy in Hebron, and we designed a web app called "KamSafer" for a client. And we would love to test it with you, and benefit from your opinions and notes.

KamSafer is a web app to record your traveled kilometers when you're going somewhere, and the information of the this trip, such as: Name of the driver, destination, purpose, and the number of kilometers traveled.

To get the best results, we're gonna ask you to do a bunch of tasks. We're gonna be observing from a distance and we hope you speak your thoughts out loud as you go around.
Now, imagine you went on a trip from Hebron to Jerusalem:

1. Try to log your trip and save it.
2. Try to log some other trips, like two or three more.
3. Try to show your reports for a specific month.
4. Try to download the report of all your trips for that month.

• check response of result from dB if null ?
• add catch to fetch function to check result .

We will use PSQL and Sequelize:

• setup tables according to schema
• each table has a model
• setup connection to database
• create both a local and a remote heroku database