Adding drives view #652
Adding drives view #652
Conversation
|
I just exported all of the data from the backend. Thanks for approving my work 😀 |
| @@ -115,6 +115,7 @@ const Sidebar = ({ | |||
| className={classes.link} | |||
| onClick={onClose} | |||
| > | |||
| {console.log('traslations', r)} | |||
There was a problem hiding this comment.
please remove console.log
| @@ -0,0 +1,45 @@ | |||
| // values to generate MenuItems in select fields. Will be converted to redux slice. | |||
There was a problem hiding this comment.
This file is redundant, cars, passengers and projects are fetched from backend and real data are used in the form
There was a problem hiding this comment.
I can't recall creating this file, removed nonetheless
| @@ -0,0 +1,168 @@ | |||
| import React, { useState } from 'react'; | |||
There was a problem hiding this comment.
React import is redundant as from version 17 you no longer need to explicitly import the React module in files containing React components
| }, | ||
| })); | ||
|
|
||
| const totalMilage = () => { |
There was a problem hiding this comment.
totalMileage should be calculated inside the component (using useMemo hook)
Even if we use mock data, the component should be written in such a way that in the next iteration of development, only the source of mock data will be replaced with one that will be returned by the selector from the store. So the data should be defined and operations on it should happen in the component.
| const totalMilage = () => { | ||
| let milage = 0; | ||
|
|
||
| mockDrives.map((drive) => { |
There was a problem hiding this comment.
Array.prototype.map() is a method that creates a new array populated with the results of calling a provided callback function on every element in the calling array. To achieve the effect you expect, you should use Array.prototype.reduce() method.
There was a problem hiding this comment.
Rewritten to utilized reduce and use Memo
| @@ -0,0 +1,2804 @@ | |||
| export const mockDrives = [ | |||
There was a problem hiding this comment.
The data format is not consistent with Drives format returned from the backend. Properties names should be in camelCase and data for nested objects (e.g. projects) should not be flattened. Mocking data in the final format allows you to avoid further changes in components when real data will be used.
There was a problem hiding this comment.
This data was taken from Django Admin. Where can I check the returned back-end data so that my mock data is consistent with it?
There was a problem hiding this comment.
I think that the best source will be to check in the browser how the data is returned by this endpoint for the vue application
| @@ -0,0 +1,6 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
react import is redundant
|
Thanks for the insights. I'll make the changes when I find the time. |
This is my first PR, the view was done at @juliaanholcer request, and according the original view written in Vue
Drives view is a basic component that heavily utilizes material-UI v4 for easier development and maintenance. Components used are: Accordion ( for collapsible drive descriptions) and Pagination ( for pagination button on the bottom of the page). Style-wise I was trying it keep it close to the original Drives view written in Vue.
The full change-log is listed below.
Changes done
Not working properly
Features to implement