Read-only profile page #53
Conversation
package.json
Outdated
| "graphcool": "^0.11.5" | ||
| } | ||
| }, | ||
| "proxy": "http://192.168.99.100:60000" |
There was a problem hiding this comment.
woops. Shouldn't be there.
src/scenes/UserProfile/queries.js
Outdated
|
|
||
| export const getAllPersonalData = graphql(getAllPersonalDataQuery, { | ||
| skip: props => !auth.getUserProfile(), | ||
| options: props => ({variables: {auth0UserId: auth.getUserProfile().sub}}) |
There was a problem hiding this comment.
Instead of auth0UserId, you should use directly the graphcool ID. You can get it using auth.getUserNodeId()
src/scenes/UserProfile/queries.js
Outdated
| ` | ||
|
|
||
| export const getAllPersonalData = graphql(getAllPersonalDataQuery, { | ||
| skip: props => !auth.getUserProfile(), |
There was a problem hiding this comment.
You shouldn't need to skip the request because /user-profile is a PrivateRoute so it will only render if the user is authenticated
| createdAt | ||
| node { | ||
| id | ||
| question { |
There was a problem hiding this comment.
You should add the attribute id of question in order to allow apollo to retrieve it from cache
| createdAt | ||
| type | ||
| node { | ||
| question { |
There was a problem hiding this comment.
Same here with id of node and question
| createdAt | ||
| node { | ||
| id | ||
| question { |
There was a problem hiding this comment.
Same here, you need to query the id
| } | ||
| }))) | ||
| .reduce((all, entities) => all.concat(entities)) | ||
| .sort((a, b) => a.at < b.at ? 1 : a.at > b.at ? -1 : 0) |
There was a problem hiding this comment.
Maybe a small comment on what this does would be useful for futur contributors?
| {userLog.map(({type, id, at, question}) => ( | ||
| <tr key={id}> | ||
| <td>{type}</td> | ||
| <td style={{whiteSpace: 'nowrap'}}>{at}</td> |
There was a problem hiding this comment.
You can use the moment library to format the timestamp:
moment(at).format('DD/MM/YYYY HH:MM') (See moment's documentation for more formats)
There was a problem hiding this comment.
The format you mention only makes sense in France. I'd rather stick with ISO 8601.
| } | ||
|
|
||
| if (User === null) { | ||
| return <NotFound {...props} /> |
There was a problem hiding this comment.
If User === null, we should show an error instead of a 'NotFound', as this isn't a normal case
|
|
||
| .card .card-table td { | ||
| padding: 0.5em; | ||
| } |
There was a problem hiding this comment.
I'm not sure theses css rules should be in Card.css as they only help the user-profile page.
There was a problem hiding this comment.
Well I made them generic enough I think. Any table in a card will look the same.
| const UserProfile = props => { | ||
| if (!props.data) { | ||
| props.history.push('/auth/login') | ||
| } |
There was a problem hiding this comment.
You shouldn't need this condition if you don't skip the request (see other review comment for explanation)
| <tr key={id}> | ||
| <td>{type}</td> | ||
| <td style={{whiteSpace: 'nowrap'}}>{at}</td> | ||
| <td style={{wordBreak: 'break-word'}}><Link to={question.link}>{question.title}</Link></td> |
There was a problem hiding this comment.
In order to show emojis, you will need to use services/markdown and call markdown.title(question.title)
Because the component is on a private route.
A first step towards GDPR compliancy (see #36).