feat: add user details and ran prettier

dscnitrourkela · Sep 27, 2023 · c04ac9d · c04ac9d
1 parent 110ad7f
commit c04ac9d
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 31 deletions.
diff --git a/src/components/User/UserData.js → config/content/Profile.js b/src/components/User/UserData.js → config/content/Profile.js
@@ -1,26 +1,26 @@
 export const UserData = [
   {
-    id: 1,
     fieldName: 'Name',
-    fieldValue: 'John Doe',
+    key: 'name',
+    fieldValue: '',
   },
   {
-    id: 2,
     fieldName: 'Email',
-    fieldValue: 'johndoe@inno.nitrkl.in',
+    key: 'email',
+    fieldValue: '',
   },
   {
-    id: 3,
     fieldName: 'Phone',
-    fieldValue: '555-5555-555',
+    key: 'mobile',
+    fieldValue: '',
   },
 ];
 
 export const RegisteredEvents = [
   {
     id: 1,
     img: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1695674904/got_lungcp.jpg',
-    title: 'A Feast for Crows',
+    title: 'A Feast for Crows Helloopooooo',
     clubName: 'House Frey',
     date: '17 July',
     location: 'LA',

diff --git a/src/components/User/User.jsx b/src/components/User/User.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import {
   DetailContainer,
   Legend,
@@ -7,39 +7,48 @@ import {
   DetailWrapper,
   RegEventContainer,
 } from './styles';
-import { UserData, RegisteredEvents as RegEvents } from './UserData';
+import { UserData, RegisteredEvents as RegEvents } from '../../../config/content/Profile';
 import { Heading2 } from '../shared';
 import RegisteredEventCard from './RegisteredEventCard';
+import { AuthContext } from '../../utils/Auth';
 
 const DataContainer = ({ name, value }) => (
-    <FieldSet>
-      <Legend align='left'>{name}</Legend>
-      <DataValue>{value}</DataValue>
-    </FieldSet>
-  );
+  <FieldSet>
+    <Legend align='left'>{name}</Legend>
+    <DataValue>{value}</DataValue>
+  </FieldSet>
+);
+
+const User = () => {
+  const { userData } = useContext(AuthContext);
 
-const User = () => (
+  return (
     <DetailWrapper>
       <Heading2>Your Details</Heading2>
       <DetailContainer>
         {UserData.map((item) => (
-          <DataContainer key={item.id} name={item.fieldName} value={item.fieldValue} />
+          <DataContainer
+            key={item.key}
+            name={item.fieldName}
+            value={userData[item.key] || item.value}
+          />
         ))}
       </DetailContainer>
       <Heading2>Registered Events</Heading2>
       <RegEventContainer>
         {RegEvents.map(({ id, title, img, clubName, date, location }) => (
-            <RegisteredEventCard
-              key={id}
-              title={title}
-              img={img}
-              clubName={clubName}
-              date={date}
-              location={location}
-            />
-          ))}
+          <RegisteredEventCard
+            key={id}
+            title={title}
+            img={img}
+            clubName={clubName}
+            date={date}
+            location={location}
+          />
+        ))}
       </RegEventContainer>
     </DetailWrapper>
   );
+};
 
 export default User;
diff --git a/src/components/User/styles.js b/src/components/User/styles.js
@@ -166,7 +166,6 @@ export const RegEventTitle = styled.div`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  //font-weight: 600;
   line-height: normal;
   letter-spacing: 0.48px;
 `;
@@ -176,11 +175,8 @@ export const RegEventClubname = styled.p`
     text-[14px]
     font-[500]
   `}
-  //color: var(--text-tertiary, #D6D6D6);
   font-family: Noto Sans, sans-serif;
-  //font-size: 14px;
   font-style: normal;
-  //font-weight: 500;
   line-height: normal;
   letter-spacing: 0.28px;
 `;

diff --git a/src/utils/Auth.jsx b/src/utils/Auth.jsx
@@ -37,10 +37,13 @@ const AuthContextProvider = ({ children }) => {
     const _cancelSubscription = onAuthStateChanged(auth, async (user) => {
       if (user) {
         setAuthenticated(true);
-        setUserData(user);
         setToken(user.accessToken);
 
-        await api.fetchUserDetails({ uid: user.uid, accessToken: user.accessToken });
+        const avenueUser = await api.fetchUserDetails({
+          uid: user.uid,
+          accessToken: user.accessToken,
+        });
+        setUserData(avenueUser);
       } else {
         setAuthenticated(false);
         setUserData({});