🧪🚀 ↝ Update profile state, user info :)

components/Cover.tsx

@@ -0,0 +1,10 @@
+export default function UserCoverImage ( { url, editable } ) {
+    return (
+        <div className="h-60 overflow-hidden flex justify-center items-center relative">
+            <div><img src={url} alt="User's cover image"/></div>
+            {editable && (
+                <div className="absolute right-0 bottom-0 m-2"><button className="bg-white py-1 px-4 rounded-md">Change cover image</button></div>
+            )}
+        </div>
+    );
+}

components/PostCard.tsx

@@ -9,6 +9,10 @@ import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import ReactTimeAgo from "react-time-ago";
 import { UserContext } from "../context/UserContext";
 
+import en from 'javascript-time-ago/locale/en.json';
+import TimeAgo from "javascript-time-ago";
+TimeAgo.addDefaultLocale(en);
+
 type Profiles = Database['public']['Tables']['profiles']['Row'];
 
 export default function PostCard ( { content, created_at, media, profiles:authorProfile } ) {
@@ -35,16 +39,16 @@ export default function PostCard ( { content, created_at, media, profiles:author
     <Card noPadding={false}>
       <div className="flex gap-3">
         <div>
-          <Link href={'/posts/profile'}>
+          <Link href={'/posts/profile/'+authorProfile.id}>
             <span className="cursor-pointer">
-              <PostCardAvatar url={authorProfile.avatar_url}
+              <PostCardAvatar url={authorProfile?.avatar_url}
                 size={50} />
             </span>
           </Link>
         </div>
         <div className="grow">
           <p>
-            <Link href={'/posts/profile'}>
+            <Link href={'/posts/profile/'+authorProfile.id}>
               <span className="mr-1 font-semibold cursor-pointer hover:underline">
                 {authorProfile?.username}
               </span>
@@ -100,12 +104,13 @@ export default function PostCard ( { content, created_at, media, profiles:author
       </div>
       <div>
         <p className="my-3 text-sm">{content}</p>
-        {media?.length > 0 && media.map(media => (
-          <div><img src={media} /></div>
-        ))}
-        <div className="rounded-md overflow-hidden">
-          <img src="" alt=""/>
-        </div>
+        {media?.length > 0 && (
+          <div className="flex gap-4">
+            {media?.length > 0 && media.map(media => (
+              <div className="rounded-md overflow-hidden"><img src={media} /></div>
+            ))}
+          </div>
+        )}
       </div>
       <div className="mt-5 flex gap-8">
         <button className="flex gap-2 items-center">
@@ -129,8 +134,8 @@ export default function PostCard ( { content, created_at, media, profiles:author
       </div>
       <div className="flex mt-4 gap-3">
         <div className="mt-1">
-          <AccountAvatar uid={session.user!.id}
-              url={authorProfile.avatar_url}
+          <AccountAvatar uid={session?.user!.id}
+              url={authorProfile?.avatar_url}
               size={45} />
         </div>
         <div className="border grow rounded-full relative">

components/Sidebar.js → components/Sidebar.tsx

@@ -1,4 +1,5 @@
-import Card from "./Posts/Card";
+import React from 'react';
+import Card from './Card';
 import styles from '../styles/social-graph/Home.module.css';
 import { useRouter } from "next/router";
 import Link from "next/link";
@@ -12,9 +13,10 @@ export default function NavigationCard () {
     const activeElementClass = 'styles.activeSidebarNavItem';
     const elementClass = 'styles.sidebarNavItems';
     const user = useUser();
+    const supabase = useSupabaseClient();
 
     return (
-        <Card>
+        <Card noPadding={false}>
             <div className={styles.paddingThing}>
                 <h2>Navigation</h2>
                 {/*<Link href='/' className={pathname === '/' ? activeElementClass : elementClass}>Home</Link>*/}

pages/posts/Profile.tsx

@@ -5,58 +5,90 @@ import Link from "next/link";
 import PostCard from "../../components/PostCard";
 import {useRouter} from "next/router";
 import FriendInfo from "../../components/FriendInfo";
-import React, { useEffect, useState} from "react";
+import React, { useContext, useEffect, useState} from "react";
 import { Database } from "../../utils/database.types";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
-import AccountAvatar from "../../components/AccountAvatar";
+import AccountAvatar, { PostCardAvatar } from "../../components/AccountAvatar";
+import { UserContext } from "../../context/UserContext";
+import UserCoverImage from "../../components/Cover";
 
 type Profiles = Database['public']['Tables']['profiles']['Row'];
 
 export default function ProfilePage() {
+  const [profile, setProfile] = useState(null);
   const router = useRouter();
+  const userId = router.query.id;
   const {asPath:pathname} = router;
+
+  const supabase = useSupabaseClient();
+
   const isPosts = pathname.includes('posts') || pathname === '/profile';
   const isAbout = pathname.includes('about');
   const isFriends = pathname.includes('friends');
   const isPhotos = pathname.includes('photos');
   const tabClasses = 'flex gap-1 px-4 py-1 items-center border-b-4 border-b-white';
   const activeTabClasses = 'flex gap-1 px-4 py-1 items-center border-socialBlue border-b-4 text-socialBlue font-bold';
 
-  const [avatar_url, setAvatarUrl] = useState<Profiles['avatar_url']>(null);
+  // Toggle different profile actions (like changing picture) IF profile being viewed is the logged in user's picture
+  const session = useSession();
+  const isLoggedUser = userId === session?.user?.id;
+
+  useEffect(() => {
+    if (!userId) {
+      return;
+    }
+
+    supabase.from('profiles') // Grab profile of userId
+      .select()
+      .eq('id', userId)
+      .then(result => {
+        if (result.error) { throw result.error; };
+        if (result.data) { setProfile(result.data[0]); };
+      })
+  }, [userId]);
+
+  /*const [avatar_url, setAvatarUrl] = useState<Profiles['avatar_url']>(null);
   const [profiles, setProfiles] = useState(null);
   const supabase = useSupabaseClient();
   const session = useSession();
+  const { profile } = useContext(UserContext);
 
   useEffect(() => {
     supabase.from('profiles') // Fetch profile from user id matching session
       .select()
-      .eq('id', session.user.id)
+      .eq('id', session?.user?.id)
       .then(result => {
-        if (result.data.length > 0) {
+        if (result.data/*.length > 0*//*) {
           setProfiles(result.data[0]);
         }
       });
   }, []);
 
+  /*useEffect(() => { // Get the user's avatar (currently this is the logged in user's avatar, it should be changed to match the profile id being viewed #TO-DO)
+    supabase.from('profiles')
+      .select(`avatar_url`)
+      .eq('id', session?.user.id)
+      .then(result => {
+        setAvatarUrl(result.data[0].avatar_url) //console.log(result.data[0].avatar_url)
+      })
+  }, []);*/
+
   return (
     <Layout hideNavigation={false}>
       <Card noPadding={true}>
         <div className="relative overflow-hidden rounded-md">
-          <div className="h-60 overflow-hidden flex justify-center items-center">
-            <img src="https://images.unsplash.com/photo-1454789591675-556c287e39e2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" alt=""/>
-          </div>
-          <div className="absolute top-40 left-4">
-            <AccountAvatar uid={session.user!.id}
-                url={profiles.avatar_url}
-                size={50} />
+          <UserCoverImage url={profile?.cover} editable={true} />
+          <div className="absolute top-40 mt-12 left-4 w-full">
+            {profile && (<PostCardAvatar
+                url={profile?.avatar_url}
+                size={120} /> )}
           </div>
           <div className="p-4 pt-0 md:pt-4 pb-0">
             <div className="ml-24 md:ml-40">
-              <h1 className=" text-3xl font-bold">
-                Liam Arbuckle
-              </h1>
-              <div className="text-gray-500 leading-4">Melbourne, Australia</div>
-              <div className="@apply text-gray-500 leading-4 mb-2 mt-2">0x734gr874h4t4g8g4y384yt4490x</div> {/* Profile Location (from styles css) */}
+              <div className="flex">
+              <h1 className=" text-3xl font-bold">{profile?.full_name}</h1><p className="@apply text-blue-200 leading-4 mb-2 mt-2">{profile?.username}</p></div>
+              <div className="text-gray-500 leading-4">{profile?.location}</div>
+              <div className="@apply text-blue-200 leading-4 mb-2 mt-2">{profile?.address}{/* | {profile?.username}*/}</div> {/* Profile Location (from styles css) */}
             </div>
             <div className="mt-4 md:mt-10 flex gap-0">
               <Link href={'/profile/posts'} className={isPosts ? activeTabClasses : tabClasses}>
@@ -89,7 +121,7 @@ export default function ProfilePage() {
       </Card>
       {isPosts && (
         <div>
-          <PostCard />
+          {/*<PostCard key = { postMessage.id } { ..post } />*/}
         </div>
       )}
       {isAbout && (

pages/posts/index.tsx

@@ -8,6 +8,7 @@ import { UserContext } from "../../context/UserContext";
 
 import TimeAgo from 'javascript-time-ago';
 import en from 'javascript-time-ago/locale/en.json';
+import Login from "../login";
 TimeAgo.addDefaultLocale(en);
 
 export default function SocialGraphHome() {
@@ -53,7 +54,7 @@ export default function SocialGraphHome() {
     })
   }
 
-  if (!session) { return <LoginPage /> };
+  if (!session) { return <Login /> };
 
   return (
     <Layout hideNavigation={false}>

pages/posts/profile/[...profile].tsx → pages/posts/profile/[id].tsx

@@ -1,5 +1,6 @@
 import ProfilePage from "../profile";
 import React from "react";
+import { useRouter } from "next/router";
 
 export default function Profile() {
   return <ProfilePage />