-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
👨🏻🎓🌞 ↝ Adding more USER directory components, appears that connectio…
…n/sb speed is the issue for #26
- Loading branch information
1 parent
bb76261
commit 65319a7
Showing
6 changed files
with
96 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import React, { useState, useEffect } from "react"; | ||
|
|
||
| import { useSupabaseClient } from "@supabase/auth-helpers-react"; | ||
| import { Database } from "../../utils/database.types"; | ||
|
|
||
| type Profiles = Database['public']['Tables']['profiles']['Row']; | ||
|
|
||
| export default function UserAvatar ({ | ||
| uid, | ||
| url, | ||
| size | ||
| }: { | ||
| uid: string, | ||
| url: Profiles['avatar_url'] | ||
| size: number | ||
| }) { | ||
| const supabase = useSupabaseClient<Database>(); | ||
| const [avatarUrl, setAvatarUrl] = useState<Profiles['avatar_url']>(null); | ||
|
|
||
| const [uploading, setUploading] = useState(false); | ||
| let width = 'w-12'; | ||
|
|
||
| useEffect(() => { | ||
| if (url) downloadImage(url); | ||
| }, [url]); | ||
|
|
||
| async function downloadImage(path: string) { // Get the avatar url from Supabase for the user (if it exists) | ||
| try { | ||
| const { data, error } = await supabase.storage.from('avatars').download(path); | ||
| if (error) { | ||
| throw error; | ||
| }; | ||
| const url = URL.createObjectURL(data); | ||
| setAvatarUrl(url); | ||
| } catch (error) { | ||
| console.log('Error downloading image: ', error) | ||
| } | ||
| }; | ||
| }; | ||
|
|
||
| export function UserPostAvatar ({ | ||
| url, | ||
| size, | ||
| }: { | ||
| url: Profiles['avatar_url'] | ||
| size: number | ||
| }) { | ||
| const supabase = useSupabaseClient<Database>(); | ||
| const [avatarUrl, setAvatarUrl] = useState<Profiles['avatar_url']>(null); | ||
|
|
||
| const [uploading, setUploading] = useState(false); | ||
| let width = 'w-12'; | ||
|
|
||
| useEffect(() => { | ||
| if (url) downloadImage(url); | ||
| }, [url]); | ||
|
|
||
| async function downloadImage(path: string) { // Get the avatar url from Supabase for the user (if it exists) | ||
| try { | ||
| const { data, error } = await supabase.storage.from('avatars').download(path); | ||
| if (error) { | ||
| throw error; | ||
| }; | ||
| const url = URL.createObjectURL(data); | ||
| setAvatarUrl(url); | ||
| } catch (error) { | ||
| console.log('Error downloading image: ', error) | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="${width} rounded-lg overflow-hidden"> | ||
| {avatarUrl ? ( | ||
| <img | ||
| src={avatarUrl} | ||
| alt='Avatar' | ||
| className="avatar image" | ||
| style={{ height: size, width: size }} | ||
| /> | ||
| ) : ( | ||
| <div className="avatar no-image" style={{ height: size, width: size }} /> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,14 @@ | ||
| import { useSession } from "@supabase/auth-helpers-react"; | ||
| import Link from "next/link"; | ||
| import React from "react"; | ||
|
|
||
| export default function Home() { | ||
| const session = useSession(); | ||
|
|
||
| return ( | ||
| <div>Entry point to client</div> | ||
| <> | ||
| <div>Entry point to client</div> | ||
| <Link href='/posts'>Test</Link> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters