Markdown Editor with NextJS, Redux, SCSS and JWT

Community feedback

• 

  Sean Red•635

  @seanred360Posted over 2 years ago

  Thanks for posting this! This is a great chance for us to practice Redux. I really like the design of the login page, it is very minimalistic and clean. I recommend writing on the page how to login. I almost clicked away because I wasn't sure what I was looking at. I notice on Redux you are dispatching the UPDATE_LOGIN_FORM_INPUT action every time the user clicks on the pin number pad. I think this is a bad practice, because you are essentially submitting an incomplete form every time. In this situation I would keep the current input in the components local state. You should call the UPDATE_LOGIN_FORM_INPUT when you submit the form (in your case this is when the number of digits is 6). You could also implement a wrong pin number state. I would add a login error state so the user knows they made a mistake. You can put this in the payload of the action.

  I made a pull request on Github if you want to see my suggestions.

  Marked as helpful

  1

  ---

  

  P

  Jérôme Haas•320

  @jeromehaasPosted over 2 years ago

  Wow, thank you very much for your detailed answer and your pull-request! So far the best inputs I’ve got here on FrontendMentor!

  I can follow your advice - that it’s not efficient to dispatch an action with Redux every time an input is updated. I think I choose this approach because I was not sure if it’s a good practice to mix the native state from React and the State from Redux and because I did not notice any performance issues I did not think about it further.

  I’ll go over the app again and check where I can use the native state instead of dispatching an action.

  Thanks again for your input and have a good start into the new week.

  1

  

  Sean Red•635

  @seanred360Posted over 2 years ago

  @jeromehaas You do not need to use Redux as a silver bullet to solve every problem. A component can still have local state. I just think that the global state doesn't need to know how the form got the password from the user, it only needs to know the entire password so it can respond, that is an implementation detail that we should hide it from the outside. It also litters the Redux dev tools window with millions of meaningless events that do not effect the state of the application. So use local state when it makes sense and Redux global state when it makes sense.

  Also, you should look into creating a Redux Middleware that has a loading state and an error state when the user types in a full 6 digit password. That way the user knows when they typed the wrong password, or the page is logging in.

  Marked as helpful

  1
• 

  P

  Jérôme Haas•320

  @jeromehaasPosted over 2 years ago

  The code to login is: 123456

  1