diff --git a/components/.PostCard.js.icloud b/components/.PostCard.js.icloud deleted file mode 100644 index 70914b17..00000000 Binary files a/components/.PostCard.js.icloud and /dev/null differ diff --git a/components/Cover.tsx b/components/Cover.tsx index 8e92f170..4ae5e854 100644 --- 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 (
User's cover image
+ {isUploading && ( +
+ )} {editable && ( -
+
+
)}
); diff --git a/components/Layout.tsx b/components/Layout.tsx index b7222498..fc3fe695 100644 --- 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}) { ); +} + +export function ProfileLayout({children,hideNavigation}) { + let rightColumnClasses = ''; + if (hideNavigation) { + rightColumnClasses += 'w-full'; + } else { + rightColumnClasses += 'mx-4 md:mx-0 md:w-9/12'; + } + return ( +
+ {!hideNavigation && ( +
+ +
+ )} +
+ {children} +
+
+ ); } \ No newline at end of file diff --git a/components/NavigationCard.tsx b/components/NavigationCard.tsx index 2fd58efb..dca1e537 100644 --- a/components/NavigationCard.tsx +++ b/components/NavigationCard.tsx @@ -53,4 +53,105 @@ export default function NavigationCard(){ ); +} + +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 ( + <> + +
+

Navigation

+ + + + + Home + + + + + + Friends + + + + + + Saved posts + + + + + + Notifications + + +
+ + +
+

Sandbox

+ + + + + Contracts + + + + + + Components + + + + + + Datasets + + + + + + Edge Functions/Forks + + + + + + All together :/ + + + + + + Publications + + +
+ + + ); } \ No newline at end of file diff --git a/components/PostCard.tsx b/components/PostCard.tsx index a8621032..0fb52970 100644 --- a/components/PostCard.tsx +++ b/components/PostCard.tsx @@ -65,7 +65,7 @@ export default function PostCard ( { content, created_at, media, profiles:author {dropdownOpen && (
- )} + )} {/* Add a button/handler to show Sandbox info if available */}
{dropdownOpen && ( diff --git a/pages/posts/Profile.tsx b/pages/posts/Profile.tsx index 0d092d7f..cc22d3ab 100644 --- 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(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 ( - +
- -
+ +
{profile && ( )} @@ -115,6 +93,12 @@ export default function ProfilePage() { Photos + + + + {/* Add Generator here, highlight the "ProfileNavigation" there */} + Sandbox +
@@ -183,6 +167,6 @@ export default function ProfilePage() {
)} - + ); } \ No newline at end of file