feat: Implemented User Profile Page issue: #143

[kaali001]

Description

This PR introduces several new features and components to the User Profile page, enhancing the user experience and functionality. The following key features have been implemented:

Changes

1. User Profile Page Layout

• Created a structured layout for the User Profile page.
• Implemented navigation to different sections such as Account Details, Wishlist, Purchased Items, Payment Methods, and Address.

2. Account Details Component

• Displays user information including name, email, and profile picture.
• Allows users to update their profile details and upload a new profile picture.

3. Wishlist Component

• Displays the user's wishlist items in a visually appealing card layout.
• Uses DaisyUI and Tailwind CSS for styling.
• Includes a heart button on product cards to add/remove items from the wishlist.
• Fetches and displays the wishlist items dynamically.
• Implements pagination for the wishlist, showing 5 items per page in a three-column layout.

4. Purchased Items Component

• As of now I have added a empty image in this component.
  

5. Payment Methods Component

• As of now this also implemented as empty.

6. Address Component

• Displays user's saved addresses.
• Ensures proper validation of address fields.

7. Prisma Schema Updates

• Created a new schema for handling wishlist items.
• The Wishlist model includes fields for id, userId, and productId

        model Wishlist {
            id               Int      @id @default(autoincrement())
           userId         String
           productId   Int
           product      Product  @relation(fields: [productId], references: [productId])
          user             Mainuser @relation(fields: [userId], references: [email])
           @@unique([userId, productId])
         }

8. Wishlist Controller

• addToWishlist Function

  • Adds a product to the wishlist.

  • Removes the product from the wishlist if it already exists.

  • getWishlistFunction

    • Fetches the user's wishlist items.

9. PrivateRoute Component

• PrivateRoute Component

  • Created a PrivateRoute component to protect routes that should only be accessible to logged-in users.
    • Redirects users to the login page if they are not authenticated.

Bug Fixes

1. Addressed issues related to adding/removing items from the wishlist.
2. Improved state management to ensure the correct display of wishlist items.
3. Added a border to navbar.
4. Added a profile image on navbar at place of user name after login.
5. Added a dropdown on the profile avatar of user profile page and logout.
6. Implemented a privateroute component for preventing user to visit profile page , cart page without login.

Before:

After:

How to test

1. Setup:

• Ensure that the server and client are running.
• Ensure you are logged in to access the User Profile page.

2. Accessing User Profile Page:

• Click on the profile picture in the navbar.
• Verify that the User Profile page loads with the appropriate sections (Account, Wishlist, Purchased Items, etc.).

3. Testing Wishlist Functionality:

• Navigate to the product listing page.
• Click the heart button on a product card to add it to the wishlist.
• Verify that the heart button turns red.
• Reload the page and verify that the heart button remains red for items in the wishlist.
• Navigate to the Wishlist section in the User Profile page.
• Verify that the added product appears in the wishlist.
• Remove a product from the wishlist by clicking the heart button again.
• Verify that the product is removed from the wishlist and the heart button turns gray.

4. Testing PrivateRoute:

• Try to access the User Profile page while logged out.
• Verify that you are redirected to the login page.
• Log in and try to access the User Profile page again.
• Verify that you can now access the User Profile page.

It fixes the issue #143 .

[dvjsharma]

Approving the changes, would be good if you work on the others features as well post GSSoC :)

[kaali001]

Hey @dvjsharma , add the labels on this issue.