Create Login Hook and Implement Login Functionality

[lokytech5]

Feature Request: Create Login Hook and Implement Login Functionality

Description

This task aims to create a custom hook using React Query to handle the login endpoint. The custom hook will make a POST request to the provided URL and handle the response appropriately.

Tasks

1. Navigate to the frontend folder using this command:

   cd frontend

2. Create Custom Hook for Login Endpoint:

   • Create a new file called useLogin.ts in the app/hooks directory.
   • Set up a custom hook using React Query to handle the login process.

3. Integrate Custom Hook in Login Component:

   • Ensure the custom hook is used in the Login component to handle the form submission.
   • Use the logic from the register hook for handling success and error cases.
   • Navigate user to the homepage after successful login
   • Save user token to store

Additional Notes

• Branch: Please create a new branch from development for your changes.

  git checkout feature/website-theme
  git pull origin feature/website-theme
  git checkout -b feature/create-login-hook

• Pull Request: Submit a pull request to merge your changes into development.

Testing:

• Please register with your details. A verification code will be sent to your email. Use this code to verify your account, and then you can log in with your credentials.
• Ensure the custom hook works correctly by handling the login process and providing appropriate feedback.

Guidelines to Follow:

Types expected from the login response are as follow: Update types.ts with the code below:

export interface LoginData {
  email: string;
  password: string;
}

export interface LoginResponse {
  data: {
    message: string;
    accessToken: string;
  },
  meta: Record<string, never>
}

• Make sure toast message is display as expected

[lokytech5]

Good morning @aedoardo1990 hope you good

[aedoardo1990]

good morning @lokytech5, all good thanks, what about you? thanks for assigning the task! Unfortunately I won't be able to work for the next 2-3 weeks as I will be on the road. If you are fine with that, I can contribute to the project again as of end of August

[lokytech5]

good morning @aedoardo1990, ok i we work on it to keep things moving. i we update you about the progress till you are free. have a lovely day ahead of you

[aedoardo1990]

good morning @lokytech5, sure good idea, I'd love to hear about your updates of the website so that I can contribute to it again as of end of august. thanks a lot! I wish you a good day and week as well

[lokytech5]

good day. i have work on it and added a lot of features

[lokytech5]

![Uploading Screenshot 2024-08-07 at 8.14.46 PM.png…]() here is the current feed design i have in mind for the application ![Uploading Screenshot 2024-08-07 at 8.14.46 PM.png…]()

[lokytech5]

hello, @aedoardo1990, sorry i have not yet give you update about the current project. I hope you fine and okay, how has it been since u have been in the road, hope everything is going fine and smooth. here is a brief update about the project so far.

[lokytech5]

1. Users can now login after they register.
2. The backend requires users to enter a verification code after registering, which is sent to their email. This functionality is working as expected on the frontend.
3. After a successful login, the user's details are stored in the Zustand store. When the user logs in, a request is made to fetch their profile. However, the profile is only fetched once upon login. If the user updates their profile later, a simple check in the useLogin hook ensures that the profile isn't repeatedly fetched unnecessarily.
4. I added a UserInitializer component to the root layout. This component uses initializeUser and persistUser from the store to ensure the user session is preserved when the application is refreshed.
5. everything is woking as expected when users register, verify, login and when they refresh the application.

I hope you find this valuable about the project. take good care of yourself and your health for your family.