From 64685f6d045a2fc1d4984ebae13fcb6ff835281b Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Fri, 26 Mar 2021 00:51:55 +0800 Subject: [PATCH] Prettify storage example app --- example/next-storage/components/Account.tsx | 44 +++-- example/next-storage/components/Auth.tsx | 29 +-- .../next-storage/components/ProfileCard.tsx | 20 +- .../next-storage/components/ProfileList.tsx | 21 ++- example/next-storage/pages/index.tsx | 24 ++- example/next-storage/public/loader.svg | 1 + example/next-storage/public/logo.png | Bin 0 -> 10556 bytes example/next-storage/styles/globals.css | 177 +++++++++++++++++- 8 files changed, 269 insertions(+), 47 deletions(-) create mode 100644 example/next-storage/public/loader.svg create mode 100644 example/next-storage/public/logo.png diff --git a/example/next-storage/components/Account.tsx b/example/next-storage/components/Account.tsx index dd3aceac7..d275cc5f5 100644 --- a/example/next-storage/components/Account.tsx +++ b/example/next-storage/components/Account.tsx @@ -5,7 +5,13 @@ import Avatar from './Avatar' import { AuthSession } from '../../../dist/main' import { DEFAULT_AVATARS_BUCKET, Profile } from '../lib/constants' -export default function Account({ session }: { session: AuthSession }) { +export default function Account({ + session, + onSaveComplete, +}: { + session: AuthSession + onSaveComplete: Function +}) { const [loading, setLoading] = useState(true) const [uploading, setUploading] = useState(false) const [avatar, setAvatar] = useState(null) @@ -111,33 +117,18 @@ export default function Account({ session }: { session: AuthSession }) { alert(error.message) } finally { setLoading(false) + onSaveComplete() } } return ( -
-
-
- -
- -
- +
- + setWebsite(e.target.value)} />
+
+ +
+
+ {avatar ? ( + + ) : ( +
?
+ )} +
+ +
+
diff --git a/example/next-storage/components/Auth.tsx b/example/next-storage/components/Auth.tsx index d208b075f..92a6d8cc1 100644 --- a/example/next-storage/components/Auth.tsx +++ b/example/next-storage/components/Auth.tsx @@ -10,11 +10,7 @@ export default function Auth({}) { try { setLoading(true) const { error, user } = await supabase.auth.signIn({ email }) - - if (error) { - throw error - } - + if (error) throw error console.log('user', user) alert('Check your email for the login link!') } catch (error) { @@ -26,18 +22,23 @@ export default function Auth({}) { } return ( -
-
- +
+
+

Experience our open-source storage system

+

+ Through a simple profile management example. Create your user profile and upload an avatar + image - Fast, simple, secure. +

+
+
+

Sign in via magic link with your email below

setEmail(e.target.value)} /> -
- -
+
+ Powered by + +
) } diff --git a/example/next-storage/components/ProfileCard.tsx b/example/next-storage/components/ProfileCard.tsx index 1de252f76..89753872c 100644 --- a/example/next-storage/components/ProfileCard.tsx +++ b/example/next-storage/components/ProfileCard.tsx @@ -4,11 +4,19 @@ import Avatar from './Avatar' export default function ProfileCard({ profile }: { profile: Profile }) { const lastUpdated = profile.updated_at ? new Date(profile.updated_at) : null return ( -
- -

Username: {profile.username}

-

Website: {profile.website}

-

+ <> +

+
+ +
+
+

{profile.username}

+ + {profile.website} + +
+
+

Last updated{' '} {lastUpdated @@ -16,6 +24,6 @@ export default function ProfileCard({ profile }: { profile: Profile }) { : 'Never'}

-
+ ) } diff --git a/example/next-storage/components/ProfileList.tsx b/example/next-storage/components/ProfileList.tsx index de732b3d7..3b8210d58 100644 --- a/example/next-storage/components/ProfileList.tsx +++ b/example/next-storage/components/ProfileList.tsx @@ -10,7 +10,8 @@ export default function ProfileList() { const [profiles, setProfiles] = useState([]) useEffect(() => { - getPublicProfiles() + // getPublicProfiles() + getUserProfile() realtimeProfiles = supabase .from('profiles') @@ -27,6 +28,23 @@ export default function ProfileList() { setProfiles([updated, ...otherProfiles]) } + async function getUserProfile() { + const user = supabase.auth.user() + try { + const { data, error } = await supabase + .from('profiles') + .select('id, username, avatar_url, website, updated_at') + .eq('id', user.id) + .order('updated_at', { ascending: false }) + if (error) { + throw error + } + setProfiles(data) + } catch (error) { + console.log('error', error.message) + } + } + async function getPublicProfiles() { try { const { data, error } = await supabase @@ -36,7 +54,6 @@ export default function ProfileList() { if (error) { throw error } - console.log('data', data) setProfiles(data) } catch (error) { console.log('error', error.message) diff --git a/example/next-storage/pages/index.tsx b/example/next-storage/pages/index.tsx index 9aaa9937e..a91f9a350 100644 --- a/example/next-storage/pages/index.tsx +++ b/example/next-storage/pages/index.tsx @@ -16,6 +16,10 @@ export default function Home() { }) }, []) + const onSaveComplete = () => { + console.log('complete') + } + return (
) : ( -
-
- -
-
- +
+

+ Let's set up a simple profile + + And watch it update on the right + +

+
+
+ +
+
+ +
)} diff --git a/example/next-storage/public/loader.svg b/example/next-storage/public/loader.svg new file mode 100644 index 000000000..e1a70c127 --- /dev/null +++ b/example/next-storage/public/loader.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/example/next-storage/public/logo.png b/example/next-storage/public/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..cba20968f072015524a97761d447356919369e9c GIT binary patch literal 10556 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 literal 0 HcmV?d00001 diff --git a/example/next-storage/styles/globals.css b/example/next-storage/styles/globals.css index 34cf01b7e..da87b8b3c 100644 --- a/example/next-storage/styles/globals.css +++ b/example/next-storage/styles/globals.css @@ -2,7 +2,7 @@ html, body { --custom-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - --custom-bg-color: #1f1f1f; + --custom-bg-color: #101010; --custom-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.8); --custom-color: #fff; --custom-color-brand: #24b47e; @@ -136,3 +136,178 @@ button.primary, transform: translateY(-50%); text-align: center; } + +.footer { + position: absolute; + bottom: 2rem; + left: 0; + right: 0; + margin: auto; + width: 200px; + font-size: 0.8rem; + font-weight: 300; + display: flex; + align-items: center; + justify-content: center; +} + +.footer > img { + height: 20px; + margin-left: 10px; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.mainHeader { + width: 100%; + font-size: 1.3rem; + margin-bottom: 20px; +} + +.avatarPlaceholder { + border: var(--custom-border); + border-radius: var(--custom-border-radius); + width: 40px; + height: 40px; + background-color: rgba(255, 255, 255, 0.2); + display: flex; + align-items: center; + justify-content: center; +} + +/* Auth */ + +.authContainer { + display: flex; + /* flex-direction: column; */ + align-items: center; + justify-items: center; +} + +.authContainer > .authTitle { + width: 22rem; + margin-right: 40px; +} + +.authContainer > .authTitle > .header { + font-weight: 400; +} + +.authContainer > .authTitle > .description { + opacity: 50%; + font-weight: 300; + line-height: 1.6em; +} + +.authWidget { + background-color: #181818; + border: 1px solid #2a2a2a; + padding: 30px 30px; + border-radius: 5px; + width: 28rem; +} + +.authWidget > .description { + margin: 0; + font-size: 0.9rem; +} + +.authWidget > .inputField { + border: none; + padding: 10px 10px; +} + +.authWidget > .button { + display: flex; + align-items: center; + justify-content: center; + border: none; + background-color: #444444; + text-transform: none !important; + transition: all 0.2s ease; +} + +.authWidget > .button:hover { + background-color: #2a2a2a; +} + +.authWidget > .button > .loader { + width: 17px; + animation: spin 1s linear infinite; + filter: invert(1); +} + +/* Account */ + +.account { + width: 100%; + max-width: 400px; + display: flex; + flex-direction: column; + gap: 20px; +} + +.account > * > .avatarField { + display: flex; + align-items: center; + margin-bottom: 30px; +} + +.account > * > .avatarField > .avatarContainer { + margin-right: 20px; +} + +/* Profile Card */ + +.profileCard { + border-radius: 5px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #2a2a2a; + padding: 30px; +} + +.profileCard > .avatarContainer { + border-radius: 50%; + overflow: hidden; + margin-bottom: 30px; +} + +.profileCard > .avatar { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.profileCard > .userInfo { + width: 100%; + font-weight: 300; + display: flex; + flex-direction: column; + justify-content: center; +} + +.profileCard > .userInfo > p { + margin: 0; +} + +.profileCard > .userInfo > .username { + font-size: 1.3rem; + font-weight: 500; + margin-bottom: 10px; +} + +.profileCard > .userInfo > .website { + font-size: 0.9rem; + margin-bottom: 10px; + color: var(--custom-color-brand); + text-decoration: none; +}