david-mi / dajr_david_michel_13_13_03_2023 Goto Github PK

• move userStatus into enum folder
• move initial state into initialState file

• remove getToken method from User service and make it a function exported from utils file, named getStorageToken
• Add getStorageTokenOrThrow method
• Call it outside services, inside middlewares
• Add setStorageToken
• Add deleteStorageToken

• remove generic error messages in reducers
• custom error should show when failing login
• custom error should display when failing form edit
• remove error message in store when closing edit form

• add an error middleware to handle error type
• add a MissingTokenErrorclass to handle missing tokens

Improve error handling inside fetchOrThrow

• use normal Thunks instead of createAsyncThunk to have more sequencials actions
• convert extraReducers to reducers
• add authenticated and hasDisconnected to initial states

• If remember me is checked, put token in localStorage on login submit succeed
• if remember me is not checked put token in session storage on login submit succeed
• on page load, if we find a token from local storage, check the box

• When non route is found, redirect to Home page
• when clicking on header user name, redirect to profile page

• use native html validation
• use pattern attribute with regex
• show error messages for both
• change text input to email input

• Move useEffect from private to app.js, so it can applies for Login page also
• remove login useEffect to disconnect if users got an error
• Add useEffec in login to redirect user to profile page if authenticated

• Remove hasDisconnected from the store
• Remove conditions inside App.js useEffect
  Prefer this:

    useEffect(() => {
      dispatch(getProfileMiddleware);
    }, []);

• Remove useSelectors from App.js

• instead of having navProps variable, directly pass it to

• Complete JsDoc
• Complete PropTypes
• Complete Readme

• use native html validation
• use pattern attribute with regex
• show error messages for both
• show firstName and lastName as default input value on component render

• Add loaders for all 3 fetch requests
• use svg
• use fake delay for testing, conditionnal method in services
• Disable form buttons when loading, to avoid multiple fetch requests (maybe add an abortController)
• set inititial get status state to pending, to avoid enabling form buttons too early #40

Input type email should be used instead of text

• avoid destructuring in selectors : source

• initial user slice state should have this structure :

const initialState = {
  firstName: "",
  lastName: "",
  email: "",
  get: {
    status: fetchStatus.PENDING,
    error: null
  },
  edit: {
    status: fetchStatus.IDLE,
    error: null
  },
  login: {
    status: fetchStatus.IDLE,
    error: null
  },
  authenticated: false
};

• each rejected reducers should have an error message (for now only generic messages)

• make it in a separate branch and start it when you're sure almost everything else is finished
• Make 2 Errors classes MissingTokenError and FetchError (I can't add status to a normal Error instance, typescript complains
• Add hooks.ts with useAppDispatch and useAppSelector recommended by the documentation
• Add global.d.ts with declare module '*.css'; to accept css modules

• Remove auth slice
• Add logic status in profile reducer
• Only keep loginStatus, remove token

• rename SignForm to AuthForm
• rename handler to loginFormHandler in Login
• rename formEditHandler to editFormHandler in Profile
• rename handlerto submitHandler in AuthForm