Merge pull request #36 from tech-for-better/working-on-profile

Working on profile
tech-for-better · Dec 9, 2021 · 986c608 · 986c608 · vercel · Dec 9, 2021
2 parents 7dadb31 + 949ad2a
commit 986c608
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 68 deletions.
diff --git a/components/Account.js b/components/Account.js
@@ -2,74 +2,24 @@ import { useState, useEffect } from 'react';
 import { supabase } from '../utils/supabaseClient';
 import Image from 'next/image';
 
-export default function Account({ userData, setUserData }) {
-  const [loading, setLoading] = useState(true);
-  const [email, setEmail] = useState(null);
-  const [avatar, setAvatar] = useState(null);
-  const [username, setUsername] = useState(null);
-  const [loggedinAt, setLoggedinAt] = useState(null);
-
-  useEffect(() => {
-    getProfile();
-  }, []);
-
-  async function getProfile() {
-    try {
-      setLoading(true);
-      const user = supabase.auth.user();
-
-      let { data, error, status } = await supabase
-        .from('profiles')
-        .select('username, avatar')
-        .eq('id', user.id)
-        .single();
-
-      if (error && status !== 406) {
-        throw error;
-      }
-
-      if (data) {
-        setUsername(data.username);
-        setAvatar(data.avatar);
-      }
-    } catch (error) {
-      alert(error.message);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  // async function updateProfile({ username }) {
-  //   try {
-  //     setLoading(true);
-  //     const user = supabase.auth.user();
-
-  //     const updates = {
-  //       id: profiles.id,
-  //       username,
-  //     };
-
-  //     let { error } = await supabase.from('users').upsert(updates, {
-  //       returning: 'minimal', // Don't return the value after inserting
-  //     });
-
-  //     if (error) {
-  //       throw error;
-  //     }
-  //   } catch (error) {
-  //     alert(error.message);
-  //   } finally {
-  //     setLoading(false);
-  //   }
-  // }
-  console.log(avatar);
+export default function Account({ userProfile, setUserProfile }) {
   return (
     <>
-      <div>Welcome {username}!</div>
-      <div>You last signed in at</div>
-      {/* <Image src={avatar} alt={username} width={500} height={500} /> */}
       <div>
-        <button onClick={() => supabase.auth.signOut()}>Sign Out</button>
+        {userProfile === null ? (
+          'Loding'
+        ) : (
+          <div>
+            <p>Welcome {userProfile.username}</p>{' '}
+            <Image
+              src={userProfile.avatar}
+              alt={`image of ${userProfile.username}`}
+              width={500}
+              height={500}
+            />
+            <button onClick={() => supabase.auth.signOut()}>Sign Out</button>
+          </div>
+        )}
       </div>
     </>
   );

diff --git a/components/Greeting.js b/components/Greeting.js
@@ -7,7 +7,10 @@ const Greeting = ({ user }) => {
       <div className="rounded-full inline-block bg-WHITE text-DARKPINK mt-10 text-5xl	">
         <CgProfile />
       </div>
-      <p className="text-WHITE">Hello{user}</p>
+      <p className="text-WHITE">
+        <p>Hello</p>
+        <p>{user}</p>
+      </p>
     </div>
   );
 };

diff --git a/pages/myProfile.js b/pages/myProfile.js
@@ -3,19 +3,31 @@ import Header from '../components/Header';
 import Greeting from '../components/Greeting';
 import Account from '../components/Account';
 import Main from '../components/Main';
+
+
+
 import Tabs from '../components/Tabs';
+import { supabase } from '../utils/supabaseClient';
 
 const MyProfile = ({ supabase }) => {
   const [userData, setUserData] = React.useState(null);
   const contents = [
     { topic: 'My booked courses', url: '/myCourses' },
     { topic: 'Upcoming courses', url: '/courses' },
   ];
+  const [userProfile, setUserProfile] = React.useState(null);
 
   async function fetchData() {
     const user = await supabase.auth.user();
-
     setUserData(user);
+
+    const { data, error, status } = await supabase
+      .from('profiles')
+      .select('username, avatar')
+      .eq('id', user.id)
+      .single();
+
+    setUserProfile(data);
   }
 
   React.useEffect(() => {
@@ -28,12 +40,15 @@ const MyProfile = ({ supabase }) => {
       <Greeting user={userData ? ` ${userData.email}` : 'User'} />
       <Main>
         <h1 className="mt-8 text-2xl p-4"> My Profile</h1>
-        <Account userData={userData} setUserData={setUserData} />
+
+        <Account userProfile={userProfile} setUserProfile={setUserProfile} />
+
         <div className="bg-PURPLE shadow-md"></div>
         <Tabs contents={contents} />
       </Main>
     </>
   );
 };
 
+
 export default MyProfile;