Show user data to my profile page

src/app/CustomerDashboard/MyProfile/page.tsx

@@ -1,32 +1,20 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import CustomerDashboardBox from "../../../Components/CustomerDashboardBox";
+import { User } from "@/types.index";
 
-const userData = {
-    Name: "abc abc",
 
-    Email: "[email protected]",
-
-    Address: "123 Main Street",
-
-    Pincode: "123456",
-
-    DateOfBirth: "00-00-0000",
-
-    City: "Visnagar",
-
-    State: "Gujarat",
-
-    Country: "India",
-
-    phone: "90000 00000",
+const page = () => {
+    const [userData, setUserData] = useState<User>({});
 
-    customer: "true",
+    useEffect(() => {
+        const UserFromLocalStorage = localStorage.getItem("User");
+        const user = JSON.parse(UserFromLocalStorage)
+        console.log(user);
+        setUserData(user)
+    }, [])
 
-    seller: "false",
-};
-
-const page = () => {
     const displayedUserData = Object.fromEntries(
         Object.entries(userData).filter(
             ([key]) => key !== "customer" && key !== "seller"
@@ -40,7 +28,7 @@ const page = () => {
 
                 <main className="w-4/5 p-6">
                     <h2 className="text-2xl font-semibold mb-4 text-gray-800">
-                     Customer Profile Page
+                        Customer Profile Page
                     </h2>
 
                     <div className="flex items-center space-x-6">

src/components/CustomerDashboardBox.tsx

@@ -1,12 +1,14 @@
 "use client";
 
 import CustomerDashboardPagesAPI from "../API/CustomerDashboardPagesAPI";
-
+import { User } from "@/types.index";
 import Link from "next/link";
 
 import { usePathname } from "next/navigation";
 
 const page = () => {
+  const user = localStorage.getItem("User");
+  const userObject: User = JSON.parse(user);
   const pathname = usePathname();
 
   const activePathClassName = "text-gray-950 font-medium";
@@ -18,7 +20,7 @@ const page = () => {
           <h2 className=" font-bold text-gray-900">Customer Profile</h2>
 
           <img
-            src="https://via.placeholder.com/150"
+            src={userObject.photo}
             alt="User Avatar"
             className="w-24 h-24 rounded-full mx-auto"
           />

src/types.index.ts

@@ -0,0 +1,14 @@
+export interface User {
+    address: string,
+    city: string,
+    country: string,
+    dateOfBirth: string,
+    email: string,
+    isSeller: boolean,
+    name: string,
+    phone: string
+    photo: string,
+    pincode: string,
+    state: string,
+    uid: string
+}

src/utils/GetDataFromCollection.ts

@@ -0,0 +1,7 @@
+import { db } from "@/firebase/config";
+import { collection, getDocs} from "firebase/firestore";
+
+export const GetDataFromCollection = async (collectionName: string) => {
+  const querySnapshot = await getDocs(collection(db, collectionName));
+  return querySnapshot.docs;
+}