fetch public data from profiles table

Co-authored-by: moggach <[email protected]>
tech-for-better · Dec 9, 2021 · 25036fe · 25036fe
1 parent c5cb77f
commit 25036fe
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 36 deletions.
diff --git a/components/Account.js b/components/Account.js
@@ -2,42 +2,42 @@ import { useState, useEffect } from 'react';
 import { supabase } from '../utils/supabaseClient';
 import Image from 'next/image';
 
-export default function Account({ userData, setUserData }) {
+export default function Account({ userProfile, setUserProfile }) {
   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();
-  }, []);
+  // useEffect(() => {
+  //   getProfile();
+  // }, []);
 
-  async function getProfile() {
-    try {
-      setLoading(true);
-      const user = supabase.auth.user();
+  // 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();
+  //     let { data, error, status } = await supabase
+  //       .from('profiles')
+  //       .select('username, avatar')
+  //       .eq('id', user.id)
+  //       .single();
 
-      if (error && status !== 406) {
-        throw error;
-      }
+  //     if (error && status !== 406) {
+  //       throw error;
+  //     }
 
-      if (data) {
-        setUsername(data.username);
-        setAvatar(data.avatar);
-      }
-    } catch (error) {
-      alert(error.message);
-    } finally {
-      setLoading(false);
-    }
-  }
+  //     if (data) {
+  //       setUsername(data.username);
+  //       setAvatar(data.avatar);
+  //     }
+  //   } catch (error) {
+  //     alert(error.message);
+  //   } finally {
+  //     setLoading(false);
+  //   }
+  // }
 
   // async function updateProfile({ username }) {
   //   try {
@@ -62,15 +62,17 @@ export default function Account({ userData, setUserData }) {
   //     setLoading(false);
   //   }
   // }
-  console.log(avatar);
+  console.log('userProfile on Account :', userProfile);
   return (
     <>
-      <div>Welcome {username}!</div>
+      Hello
+      {/* <div>Welcome {username}!</div>
       <div>You last signed in at</div>
       {/* <Image src={avatar} alt={username} width={500} height={500} /> */}
-      <div>
+      {/* <div>
         <button onClick={() => supabase.auth.signOut()}>Sign Out</button>
-      </div>
+      </div> */}{' '}
+      */
     </>
   );
 }
diff --git a/components/Greeting.js b/components/Greeting.js
@@ -8,7 +8,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
@@ -5,15 +5,22 @@ import Greeting from '../components/Greeting';
 import Account from '../components/Account';
 import { BsFillArrowRightCircleFill } from 'react-icons/bs';
 import Main from '../components/Main';
+import { supabase } from '../utils/supabaseClient';
 
 const MyProfile = ({ supabase }) => {
-
   const [userData, setUserData] = React.useState(null);
-
+  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,8 +35,7 @@ const MyProfile = ({ supabase }) => {
       <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>
         <ul className=" p-4">
           <li className="border border-BLUE p-2 rounded mb-4 shadow-md">
@@ -58,4 +64,18 @@ const MyProfile = ({ supabase }) => {
   );
 };
 
+// export async function getServerSideProps({ session, supabase }) {
+//   const user = supabase.auth.user();
+//   const { userProfile, error, status } = await supabase
+//     .from('profiles')
+//     .select('username, avatar')
+//     .eq('id', user.id)
+//     .single();
+
+//   console.log(userProfile);
+//   return {
+//     props: { userProfile, error },
+//   };
+// }
+
 export default MyProfile;