Userprofile - add and edit

package.json

@@ -14,6 +14,7 @@
     "@auth0/auth0-react": "^2.2.4",
     "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "crypto-js": "^4.2.0",
     "i18next": "^23.16.6",
     "i18next-browser-languagedetector": "^8.0.0",

src/App.jsx

@@ -13,6 +13,7 @@ import { useEffect, useState } from "react";
 import axiosInstance from "./components/config/axios-config.js";
 import { ACCESS_TOKEN, LOGGED_IN_VIA, REFRESH_TOKEN } from "./utils/Constants.js";
 import { useAuth } from "./components/config/AuthContext.jsx";
+import EditUserProfile from "./components/user-profile/edit-user-profile/EditUserProfile.jsx";
 
 const tokenExpiryTime = import.meta.env.VITE_TOKEN_EXPIRY_TIME_SEC;
 
@@ -70,6 +71,7 @@ function App() {
                 <Route path="/" element={ <HomePage /> } />
                 <Route path="/texts" element={ <HomePage /> } />
                 <Route path="/profile" element={ <AuthenticationGuard component={ UserProfile } /> } />
+                <Route path="/edit-profile" element={ <AuthenticationGuard component={ EditUserProfile } /> } />
                 <Route path="/reset-password" element={ < ResetPassword /> } />
                 <Route path="/forgot-password" element={ <ForgotPassword /> } />
                 <Route path="/register" element={ <UserRegistration /> } />

src/components/user-profile/UserProfile.jsx

@@ -1,52 +1,28 @@
 import React from "react";
 import "./UserProfile.scss";
 import { useAuth0 } from "@auth0/auth0-react";
-import { Card } from "react-bootstrap";
-import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import PechaUserProfile from "./pecha-user-profile/PechaUserProfile.jsx";
+import {useQuery} from "react-query";
+import axiosInstance from "../config/axios-config.js";
 
 function UserProfile() {
     const {user, isAuthenticated} = useAuth0();
     const {t} = useTranslation();
-
-    console.log(user);
+    const userInfo = useQuery("userInfo",async () => {
+        return await axiosInstance.get("/api/v1/users/info");
+    })
+    console.log(userInfo)
 
     function renderProfileViaSocialLogin() {
         return (
-            <Card className="profile-card">
-                <Card.Body>
-                    <div className="profile-header">
-                        <img src={user.picture} alt={`${user.name}'s profile`} className="profile-picture"/>
-                        <h2>{user.given_name} {user.family_name}</h2>
-                        <h5>Nickname: {user.nickname}</h5>
-                    </div>
-                    <Card.Text>
-                        <strong>Email:</strong> {user.email}<br/>
-                        <strong>Email Verified:</strong> {user.email_verified ? 'Yes' : 'No'}<br/>
-                        <strong>Last Updated:</strong> {new Date(user.updated_at).toLocaleString()}<br/>
-                        <Link to="/reset-password" className="reset-password">
-                            {t("resetPassword")}
-                        </Link>
-                    </Card.Text>
-                </Card.Body>
-            </Card>
+            <PechaUserProfile userInfo ={user}/>
         )
     }
 
-    function renderProfileViaPechaLogin(){
+    function renderProfileViaPechaLogin() {
         return (
-            <Card className="profile-card">
-                <Card.Body>
-                    <div className="profile-header">
-                        <img  className="profile-picture" />
-                        <h2>To be implemented</h2>
-                    </div>
-                    <Card.Text>
-                        <strong>Email:</strong>[email protected]<br />
-
-                    </Card.Text>
-                </Card.Body>
-            </Card>
+          <PechaUserProfile userInfo = {user}/>
         )
     }