🌭👜 ↝ Add method to update profile cover & cleaned up nav, cover on pr…

…ofile page
Signal-K · Feb 10, 2023 · e12ec43 · e12ec43
1 parent cb24087
commit e12ec43
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 37 deletions.
diff --git a/components/.PostCard.js.icloud b/components/.PostCard.js.icloud
diff --git a/components/Cover.tsx b/components/Cover.tsx
@@ -1,9 +1,50 @@
-export default function UserCoverImage ( { url, editable } ) {
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import { useState } from "react";
+import { ClimbingBoxLoader } from "react-spinners";
+
+export default function UserCoverImage ( { url, editable, onChange } ) {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [isUploading, setIsUploading] = useState(false);
+
+    async function updateCover (e) {
+        const file = e.target.files?.[0];
+        if (file) {
+            setIsUploading(true);
+            const fileName = session?.user?.id + '_cover_' + Date.now(); // Could also include the original file name somewhere...
+            const { data, error } = await supabase.storage
+                .from('covers')
+                .upload(fileName, file)//.then()
+
+            if (error) throw error;
+            if (data) {
+                const url = process.env.NEXT_PUBLIC_SUPABASE_URL + '/storage/v1/object/public/covers/' + data.path;
+                supabase.from('profiles')
+                    .update({
+                        cover: url,
+                    })
+                    .eq('id', session?.user?.id)
+                    .then(({data, error}) => {
+                        if (error) throw error;
+                        if (data && onChange) { onChange(); };
+                    })
+                setIsUploading(false);
+            }
+        }
+    }
+
     return (
         <div className="h-60 overflow-hidden flex justify-center items-center relative">
             <div><img src={url} alt="User's cover image"/></div>
+            {isUploading && (
+                <div className="absolute inset-0 bg-white bg-opacity-80% flex items-center z-10"><div className="inline-block mx-auto"><ClimbingBoxLoader /></div></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 className="items-center cursor-pointer absolute right-0 bottom-0 m-2"><label className="flex items-center gap-2 bg-white py-1 px-2 rounded-md shadow-md shadow-black cursor-pointer">
+                    <input type='file' onChange={updateCover} className='hidden' />
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" /><path strokeLinecap="round" strokeLinejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z" /></svg>Change cover image</label>
+                </div>
             )}
         </div>
     );

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,4 +1,4 @@
-import NavigationCard from "./NavigationCard";
+import NavigationCard, { ProfileNavigationCard } from "./NavigationCard";
 
 export default function Layout({children,hideNavigation}) {
   let rightColumnClasses = '';
@@ -19,4 +19,25 @@ export default function Layout({children,hideNavigation}) {
       </div>
     </div>
   );
+}
+
+export function ProfileLayout({children,hideNavigation}) {
+  let rightColumnClasses = '';
+  if (hideNavigation) {
+    rightColumnClasses += 'w-full';
+  } else {
+    rightColumnClasses += 'mx-4 md:mx-0 md:w-9/12';
+  }
+  return (
+    <div className="md:flex mt-4 max-w-4xl mx-auto gap-6 mb-24 md:mb-0">
+      {!hideNavigation && (
+        <div className="fixed md:static w-full bottom-0 md:w-3/12 -mb-5">
+          <ProfileNavigationCard />
+        </div>
+      )}
+      <div className={rightColumnClasses}>
+        {children}
+      </div>
+    </div>
+  );
 }
diff --git a/components/NavigationCard.tsx b/components/NavigationCard.tsx
@@ -53,4 +53,105 @@ export default function NavigationCard(){
       </div>
     </Card>
   );
+}
+
+export function ProfileNavigationCard(){
+  const router = useRouter();
+  const { asPath:pathname } = router;
+  const activeElementClasses = 'text-sm md:text-md flex gap-1 md:gap-3 py-3 my-1 bg-socialBlue text-white md:-mx-7 px-6 md:px-7 rounded-md shadow-md shadow-gray-300 items-center';
+  const nonActiveElementClasses= 'text-sm md:text-md flex gap-1 md:gap-3 py-2 my-2 hover:bg-blue-500 hover:bg-opacity-20 md:-mx-4 px-6 md:px-4 rounded-md transition-all hover:scale-110 hover:shadow-md shadow-gray-300 items-center';
+
+  const supabase = useSupabaseClient();
+  async function logout() { await supabase.auth.signOut(); }
+
+  return (
+    <>
+      <Card noPadding={true}>
+        <div className="px-4 py-2 flex justify-between md:block shadow-md shadow-gray-500 md:shadow-none">
+          <h2 className="text-gray-400 mb-3 hidden md:block">Navigation</h2>
+          <Link href="/posts" className={pathname === '/' ? activeElementClasses : nonActiveElementClasses}>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+            </svg>
+            <span className="hidden md:block">Home</span>
+          </Link>
+          <Link href="/posts/profile/friends" className={pathname === '/profile/friends' ? activeElementClasses : nonActiveElementClasses}>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <span className="hidden md:block">Friends</span>
+          </Link>
+          <Link href="/posts/saved" className={pathname === '/saved' ? activeElementClasses : nonActiveElementClasses}>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
+            </svg>
+            <span className="hidden md:block">Saved posts</span>
+          </Link>
+          <Link href="/posts/notifications" className={pathname === '/notifications' ? activeElementClasses : nonActiveElementClasses}>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+            </svg>
+            <span className="hidden md:block">Notifications</span>
+          </Link>
+          <button onClick={logout} className='w-full -my-2'>
+            <span className={nonActiveElementClasses}>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
+              </svg>
+              <span className="hidden md:block">Logout</span>
+            </span>
+          </button>
+        </div>
+      </Card>
+      <Card noPadding={true}>
+        <div className="px-4 py-2 flex justify-between md:block shadow-md shadow-gray-500 md:shadow-none">
+          <h2 className="text-gray-400 mb-3 hidden md:block">Sandbox</h2>
+          <Link href="/posts" className={pathname === '/' ? activeElementClasses : nonActiveElementClasses}>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+            </svg>
+            <span className="hidden md:block">Contracts</span>
+          </Link>
+          <Link href="/posts/profile/friends" className={pathname === '/profile/friends' ? activeElementClasses : nonActiveElementClasses}>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <span className="hidden md:block">Components</span>
+          </Link>
+          <Link href="/posts/saved" className={pathname === '/saved' ? activeElementClasses : nonActiveElementClasses}>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
+            </svg>
+            <span className="hidden md:block">Datasets</span>
+          </Link>
+          <Link href="/posts/notifications" className={pathname === '/notifications' ? activeElementClasses : nonActiveElementClasses}>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+            </svg>
+            <span className="hidden md:block">Edge Functions/Forks</span>
+          </Link>
+          <Link href="/posts/notifications" className={pathname === '/notifications' ? activeElementClasses : nonActiveElementClasses}>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+            </svg>
+            <span className="hidden md:block">All together :/</span>
+          </Link>
+          <Link href="/posts/notifications" className={pathname === '/notifications' ? activeElementClasses : nonActiveElementClasses}>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+            </svg>
+            <span className="hidden md:block">Publications</span>
+          </Link>
+          <button onClick={logout} className='w-full -my-2'>
+            <span className={nonActiveElementClasses}>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
+              </svg>
+              <span className="hidden md:block">View on ORCID/ETH</span>
+            </span>
+          </button>
+        </div>
+      </Card>
+    </>
+  );
 }
diff --git a/components/PostCard.tsx b/components/PostCard.tsx
@@ -65,7 +65,7 @@ export default function PostCard ( { content, created_at, media, profiles:author
           </button>
           {dropdownOpen && (
             <div className="bg-red w-5 h-5 absolute top-0"></div>
-          )}
+          )} {/* Add a button/handler to show Sandbox info if available */}
           <ClickOutHandler onClickOut={handleClickOutsideDropdown}>
             <div className="relative">
               {dropdownOpen && (

diff --git a/pages/posts/Profile.tsx b/pages/posts/Profile.tsx
@@ -1,4 +1,4 @@
-import Layout from "../../components/Layout";
+import Layout, { ProfileLayout } from "../../components/Layout";
 import Card from "../../components/Card";
 import Avatar from "../../components/Avatar";
 import Link from "next/link";
@@ -37,48 +37,26 @@ export default function ProfilePage() {
     if (!userId) {
       return;
     }
+    fetchProfile();
+  }, [userId]);
 
+  function fetchProfile () {
     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)
-      .then(result => {
-        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}>
+    <ProfileLayout hideNavigation={false}>
       <Card noPadding={true}>
         <div className="relative overflow-hidden rounded-md">
-          <UserCoverImage url={profile?.cover} editable={true} />
-          <div className="absolute top-40 mt-12 left-4 w-full">
+          <UserCoverImage url={profile?.cover} editable={true} onChange={fetchProfile()} />
+          <div className="absolute top-40 mt-12 left-4 w-full z-20">
             {profile && (<PostCardAvatar
                 url={profile?.avatar_url}
                 size={120} /> )}
@@ -115,6 +93,12 @@ export default function ProfilePage() {
                 </svg>
                 <span className="hidden sm:block">Photos</span>
               </Link>
+              <Link href={'/profile/sandbox'} className={isPhotos ? activeTabClasses : tabClasses}>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+                </svg> {/* Add Generator here, highlight the "ProfileNavigation" there */}
+                <span className="hidden sm:block">Sandbox</span>
+              </Link>
             </div>
           </div>
         </div>
@@ -183,6 +167,6 @@ export default function ProfilePage() {
           </Card>
         </div>
       )}
-    </Layout>
+    </ProfileLayout>
   );
 }