Web: Index comp #5
Conversation
web/src/components/Cards/index.js
Outdated
| @@ -0,0 +1,10 @@ | |||
| import jobShowCarousel from './jobShowCarousel' | |||
There was a problem hiding this comment.
There's actually a shorthand for re-exporting like this:
export jobShowCarousel from './jobShowCarousel'| @@ -0,0 +1,34 @@ | |||
| import React from 'react' | |||
| import {Carousel,Card} from 'react-bootstrap' | |||
There was a problem hiding this comment.
(Re this whole file:) Whitespace matters. JS may not have semantic whitespace like Python, but good and consistent formatting makes your code more maintainable.
|
|
||
| const JobCardHeader = ({ category, title, styling }) => ( | ||
| <Card body className={ styling }> | ||
| { category } > { title } |
There was a problem hiding this comment.
Multiple spaces don't work like this. Also, use > for > for safety.
web/src/components/Cards/index.js
Outdated
| jobShowCarousel, | ||
| jobShowHeader, | ||
| jobShowSummary | ||
| } |
There was a problem hiding this comment.
Always leave an empty line at the end of your files.
| import React from 'react' | ||
| import {Carousel,Card} from 'react-bootstrap' | ||
|
|
||
| const items = (source) => { |
There was a problem hiding this comment.
Is this a component? If so, two notes: 1) the name of a component should be capitalized, and 2) the only parameter should be props:
const Items = ({ source }) => {| function RoleShow(){ | ||
| // const {label, title, data, style, imgArr} = JobInfo | ||
| return( | ||
| <Container> |
web/src/screens/JobIndex.js
Outdated
| import {JobIndexInfo} from '../constants' | ||
| import {JobIndexIterator} from '../components' | ||
|
|
||
| function RoleShow(){ |
There was a problem hiding this comment.
Use arrow notation for functions that don't use this.
web/src/screens/JobIndex.js
Outdated
| @@ -0,0 +1,20 @@ | |||
| import React from 'react' | |||
| import {Container, Col, Row,} from 'react-bootstrap' | |||
| // import {jobShowHeader as Header, jobShowCarousel as JobGraphics, jobShowSummary as Summary } from '../components/Cards' | |||
There was a problem hiding this comment.
You don't need to keep imports that aren't being used. Adding import statements can be done automatically.
web/src/screens/roleShow.js
Outdated
| @@ -1,15 +1,16 @@ | |||
| import React from 'react' | |||
| import {Container, Col, Row} from 'react-bootstrap' | |||
| import {jobShowHeader as Header, jobShowCarousel as JobGraphics, jobShowSummary as Summary } from '../components/Cards' | |||
| import {JobShowHeader as Header, JobShowCarousel as JobGraphics, JobShowSummary as Summary } from '../components/Cards' | |||
There was a problem hiding this comment.
If your components need different names, rename the actual components, not the imports
web/src/Routes.js
Outdated
| @@ -1,7 +1,7 @@ | |||
| import React from 'react' | |||
| import { Route, Switch, BrowserRouter as Router } from 'react-router-dom' | |||
| import JobIndex from './screens/JobIndex' | |||
| import RoleShow from './screens/RoleShow' | |||
| import JobIndex from './screens/JobIndex.js' | |||
There was a problem hiding this comment.
This isn't necessary.
|
Use ESLint for styling. Prettier is optional, but I find it frustrating. I'll help you set this up. |
|
Start your commit messages with the service name, e.g. "Web:" |
|
Try to keep everything in one commit related, and keep the commits small. |
Web: Features added:
Job Index Screen
Index Iterator Component
Index Header Card
Index base data constant (for testing)
Refactored Routes.js to include params. Will be targeting queries next