Frontend/#062 user dashboard #115
Conversation
There was a problem hiding this comment.
Login
client/src/domain/Auth/Login/index.js
Move conditional jsx return from OnSubmit to separate const. Then you might finish this way:
return !isAuthenticated ? <NoAuth/>: <Redirect to=""/>Navbar
client/src/components/Navbar/index.js
This is a mess, please clean it up.
Remember to use PascalCase on react components.
{!isAuthenticated ? unauthenticatedNavBar() : authenticatedNavBar()}✅ Use JSX instead
{!isAuthenticated ? <NoAuthNavBar/> : <AuthNavBar/>}Btw fix return logic above. If is authenticated return <AuthNavBar/> else return NoAuth
Signup
client/src/domain/Auth/SignUp/index.js
It would be good if you use a package to handle forms.
My proposals are React Hook Form or Formik.
Inputs have no labels
Remove resetForm function, it’s just code repetition
Same old story with auth, nonauth and ternary returning jsx
MovieSlider
client/src/domain/MovieSlider/index.js
If you combine jsx with array methods it’s common to make a single iteration component
{posters.map((poster) => {
return (
<div key={poster} className="slider_container">
<img className="slider_container_img" src={poster} alt="" />
</div>
);
})}✅
{posters.map((poster) => (<PosterItem key={/*lodash*/} poster={poster}/>))| {posters.map((poster) => { | ||
| console.log(poster); | ||
| return ( |
There was a problem hiding this comment.
you don't need this return anymore
| isAuthenticated: true, | ||
| loading: false, | ||
| user: payload.user, |
There was a problem hiding this comment.
what else do you have in the payload?
| user: { | ||
| id: undefined, | ||
| isAdmin: undefined, | ||
| }, |
There was a problem hiding this comment.
why you define a user but all his\her props are undefined? 🤔
| @@ -18,8 +18,8 @@ function Navbar() { | |||
| if (!isLoggedOut) { | |||
| alert('Could not log out user. Try again'); | |||
| } | |||
| return <Redirect to="/movies" />; | |||
There was a problem hiding this comment.
Why do you make a redirect on Navbar level?
There was a problem hiding this comment.
After logging out, whoever is at the page is redirected to the landing page.
There was a problem hiding this comment.
Ok, but is he\she on a Navbar page? 🧐 What I mean is that navbar is not the best place to put authorization logic
| const unauthenticatedNavBar = () => { | ||
| return ( |
| @@ -0,0 +1,33 @@ | |||
| /* eslint-disable react/destructuring-assignment */ | |||
There was a problem hiding this comment.
linter is right 😉
| loadUser(dispatchUserContext); | ||
| return; | ||
| } | ||
| alert('Cannot delete order at this moment'); |
There was a problem hiding this comment.
avoid using JS alert
| const userOrders = user.orders | ||
| ? user.orders.map((order) => { | ||
| return ( | ||
| <OrderItem | ||
| key={order._id} | ||
| id={order._id} | ||
| callback={handleOrderDelete} | ||
| /> | ||
| ); | ||
| }) | ||
| : undefined; |
There was a problem hiding this comment.
set null instead of undefined. If component returns null it won't be rendered
| }} | ||
| > | ||
| <h2>Orders</h2> | ||
| <ul>{userOrders !== undefined ? userOrders : <li>No orders</li>}</ul> |
There was a problem hiding this comment.
<ul>
{userOrders ? userOrders : <li>No orders</li>}
</ul>| return ( | ||
| <li className="profile__list-item"> | ||
| <p> | ||
| {title}: <span className="profile__list-item--bold" /> |
There was a problem hiding this comment.
why span is self closing?
There was a problem hiding this comment.
Why indeed :)
No description provided.