Matt Painter - Code Challenge Solution. #5
Conversation
| return { | ||
| getDashboardData: async () => { | ||
|
|
||
| return [ |
There was a problem hiding this comment.
Take a look at Brian O's implementation if you want to come back and finish this: https://github.com/hansoninc/react-coding-challenge/pull/6/files#diff-47ea94a332b74bd2a3659a7665d7776a9da80d507b8618bb897236fc23e81ba2
| import { Grid } from '@material-ui/core'; | ||
|
|
||
| function Card(props){ | ||
| const item = props.item; |
There was a problem hiding this comment.
You shouldn't really need to alias item here. A better pattern would be to destructure props in the function signature, e.g.
function Card({item}) {
...
| const item = props.item; | ||
| return ( | ||
| <Grid container onClick={() => props.buttonAction(item.id)}> | ||
| <Grid item xs={10}> |
There was a problem hiding this comment.
I know the default in your IDE is to autocomplete attributes to {}, but when you're using a static value instead of a calculated one, you can use quotes, e.g.
<Grid item xs="10">
| </ul> | ||
| </Grid> | ||
| <Grid item xs={2}> | ||
| <Button variant="contained" color="primary">{props.buttonText}</Button> |
There was a problem hiding this comment.
If you end up destructuring your props, make sure to add buttonText as well:
function Card({item, buttonText}) {
...
Then you can just use {buttonText} here.
| <h3>Filter Input</h3> | ||
| <form> | ||
| <label></label> | ||
| <input type="text" onChange={(event) => props.onFilterChange(event.target.value)}/> |
There was a problem hiding this comment.
onFilterChange prop could be destructured above.
|
|
||
| function List(props){ | ||
|
|
||
| console.log("here"); |
There was a problem hiding this comment.
Don't forget to clean up console.log()s when you submit a PR! I usually end up opening one, reading through it once, and then committing a "cleanup" push.
|
|
||
| function onFilterChange(text){ | ||
| console.log(text); | ||
| console.log("filter"); |
There was a problem hiding this comment.
Stray console.log()s
| @@ -1,6 +1,6 @@ | |||
| import * as React from "react"; | |||
| import { Route, withRouter } from "react-router"; | |||
| import { DashboardPage } from "./dashboard"; | |||
| import { DashboardPage } from "./dashboard/index"; | |||
There was a problem hiding this comment.
Not sure if this was autocorrected by your IDE, but one of the quirks of import is that if you have a folder, and an index.js inside of it, you don't strictly need to reference <folder>/index.
does not pull data in from api dynamically. Is using static results.
has non-functioning "submit" button on filter.
no clear button for filter, but does clear out when emptying the filter fields.