+
+ {label}
++ {value} +
+
+
+
+);
+
+export default Spinner;
diff --git a/src/components/profile/updateProfileButtons.tsx b/src/components/profile/updateProfileButtons.tsx
new file mode 100644
index 0000000..ac34b81
--- /dev/null
+++ b/src/components/profile/updateProfileButtons.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+interface ButtonProps {
+ text: string;
+ disabled?: boolean;
+ dataTestId?: string;
+ backgroundColor?: string;
+ onClick?: () => void;
+}
+
+const Button: React.FC
+
+
+ {error &&
+);
+
+export default ProfileTextInput;
diff --git a/src/pages/updateProfile.tsx b/src/pages/updateProfile.tsx
new file mode 100644
index 0000000..cafb46d
--- /dev/null
+++ b/src/pages/updateProfile.tsx
@@ -0,0 +1,287 @@
+import React, { useEffect, useState } from "react";
+import { BiImageAdd } from "react-icons/bi";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { useSelector } from "react-redux";
+import { ToastContainer, toast } from "react-toastify";
+import { AxiosError } from "axios";
+
+import LinkPages from "../components/common/auth/LinkPages";
+import { RootState } from "../redux/store";
+import profileSchema from "../schemas/profileSchema";
+import ProfileTextInput from "../components/profile/updateProfileInput";
+import { getProfile } from "../redux/reducers/profileSlice";
+import { updateProfile } from "../redux/reducers/updateProfileSlice";
+import { useAppDispatch } from "../redux/hooks";
+import sideImage from "../assets/sideImage.png";
+import Button from "../components/profile/updateProfileButtons";
+import LinkToUpdatePage from "../components/profile/linkToUpdate";
+import HeaderInfo from "../components/common/header/Info";
+import Footer from "../components/common/footer/Footer";
+
+export const convertUrlToFile = async (url: string): Promise{error}
} +
+
+ );
+};
+
+export default UpdateUserProfile;
diff --git a/src/pages/userProfile.tsx b/src/pages/userProfile.tsx
new file mode 100644
index 0000000..d42b303
--- /dev/null
+++ b/src/pages/userProfile.tsx
@@ -0,0 +1,117 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { getProfile } from "../redux/reducers/profileSlice";
+import { RootState } from "../redux/store";
+import DisplayProfileData from "../components/profile/getProfile";
+import Spinner from "../components/profile/spinner";
+import LinkToUpdatePage from "../components/profile/linkToUpdate";
+import HeaderInfo from "../components/common/header/Info";
+import Footer from "../components/common/footer/Footer";
+
+const UsersProfile: React.FC = () => {
+ const dispatch = useDispatch();
+ const { profile, loading, error } = useSelector(
+ (state: RootState) => state.usersProfile,
+ );
+ useEffect(() => {
+ // @ts-ignore
+ dispatch(getProfile());
+ }, [dispatch]);
+ const loggedInUserToken = localStorage.getItem("accessToken");
+ // @ts-ignore
+ const userData = JSON.parse(atob(loggedInUserToken.split(".")[1]));
+ if (loading) {
+ return (
+
+
+
+
+
+
+
+ + Home + /My Account +
+
+
+ + Welcome + + {' '} + {profile?.fullName} + +
+ +
+
+
+
+
+ 
+
+
+
+ + {" "} + Update your profile +
+ {/* @ts-ignore */} + +
+
+
+
+
+ );
+ }
+ if (error) {
+ return (
+
+ Loading...
+
+
+ Error:
+ {error}
+
+ );
+ }
+ return (
+
+
+ );
+};
+
+export default UsersProfile;
diff --git a/src/redux/api/productsApiSlice.ts b/src/redux/api/productsApiSlice.ts
index b7240b3..09658a6 100644
--- a/src/redux/api/productsApiSlice.ts
+++ b/src/redux/api/productsApiSlice.ts
@@ -17,7 +17,6 @@ const addProduct = createAsyncThunk(
return data;
} catch (err) {
const error = err as AxiosError;
- console.log(error);
return rejectWithValue(error.response?.data);
}
},
diff --git a/src/redux/reducers/profileSlice.ts b/src/redux/reducers/profileSlice.ts
new file mode 100644
index 0000000..e109020
--- /dev/null
+++ b/src/redux/reducers/profileSlice.ts
@@ -0,0 +1,80 @@
+import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
+import { AxiosError } from "axios";
+
+import axios from "../api/api";
+import { Profile } from "../../../type";
+
+interface ProfileState {
+ loading: boolean;
+ error: string | null;
+ profile: Profile | null;
+}
+
+const initialState: ProfileState = {
+ loading: false,
+ error: null,
+ profile: null,
+};
+
+interface ProfileResponse {
+ data: Profile;
+}
+
+interface ProfileError {
+ message: string;
+}
+
+export const getProfile = createAsyncThunk<
+ProfileResponse,
+void,
+{ rejectValue: ProfileError }
+>("getProfile", async (_, { rejectWithValue }) => {
+ try {
+ const response = await axios.get
+
+
+
+
+
+
+ + Home + /Profile + {" "} +
+
+
+
+ {profile && (
+
+
+
+ 
+
+
+
+ {profile?.fullName}
+{userData.email}
+
+
+
+
+
+
+
+ )}
+
+
+
+