Prettify storage example app

Author: joshen-supabase

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<boolean>(true)
   const [uploading, setUploading] = useState<boolean>(false)
   const [avatar, setAvatar] = useState<string | null>(null)
@@ -111,33 +117,18 @@ export default function Account({ session }: { session: AuthSession }) {
       alert(error.message)
     } finally {
       setLoading(false)
+      onSaveComplete()
     }
   }
 
   return (
-    <div
-      style={{
-        minWidth: 250,
-        maxWidth: 600,
-        margin: 'auto',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 20,
-      }}
-    >
-      <div className="card">
-        <div>
-          <Avatar url={avatar} size={270} />
-        </div>
-        <UploadButton onUpload={uploadAvatar} loading={uploading} />
-      </div>
-
+    <div className="account">
       <div>
         <label htmlFor="email">Email</label>
         <input id="email" type="text" value={session.user.email} disabled />
       </div>
       <div>
-        <label htmlFor="username">Username</label>
+        <label htmlFor="username">Name</label>
         <input
           id="username"
           type="text"
@@ -154,10 +145,23 @@ export default function Account({ session }: { session: AuthSession }) {
           onChange={(e) => setWebsite(e.target.value)}
         />
       </div>
+      <div>
+        <label htmlFor="avatar">Avatar image</label>
+        <div className="avatarField">
+          <div className="avatarContainer">
+            {avatar ? (
+              <Avatar url={avatar} size={40} />
+            ) : (
+              <div className="avatarPlaceholder">?</div>
+            )}
+          </div>
+          <UploadButton onUpload={uploadAvatar} loading={uploading} />
+        </div>
+      </div>
 
       <div>
         <button className="button block primary" onClick={() => updateProfile()} disabled={loading}>
-          {loading ? 'Loading ...' : 'Update'}
+          {loading ? 'Loading ...' : 'Save and preview'}
         </button>
       </div>
 

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 (
-    <div style={{ display: 'flex', gap: 20, flexDirection: 'column' }}>
-      <div>
-        <label>Email</label>
+    <div className="authContainer">
+      <div className="authTitle">
+        <h1 className="header">Experience our open-source storage system</h1>
+        <p className="description">
+          Through a simple profile management example. Create your user profile and upload an avatar
+          image - Fast, simple, secure.
+        </p>
+      </div>
+      <div className="authWidget" style={{ display: 'flex', gap: 20, flexDirection: 'column' }}>
+        <p className="description">Sign in via magic link with your email below</p>
         <input
+          className="inputField"
           type="email"
           placeholder="Your email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
         />
-      </div>
-
-      <div>
         <button
           onClick={(e) => {
             e.preventDefault()
@@ -46,9 +47,13 @@ export default function Auth({}) {
           className={'button block'}
           disabled={loading}
         >
-          {loading ? 'Loading ..' : 'Send magic link'}
+          {loading ? <img className="loader" src="loader.svg" /> : <span>Send magic link</span>}
         </button>
       </div>
+      <div className="footer">
+        Powered by
+        <img src="logo.png" />
+      </div>
     </div>
   )
 }

example/next-storage/components/ProfileCard.tsx

@@ -4,18 +4,26 @@ import Avatar from './Avatar'
 export default function ProfileCard({ profile }: { profile: Profile }) {
   const lastUpdated = profile.updated_at ? new Date(profile.updated_at) : null
   return (
-    <div className="card">
-      <Avatar url={profile.avatar_url} size={50} />
-      <p>Username: {profile.username}</p>
-      <p>Website: {profile.website}</p>
-      <p>
+    <>
+      <div className="profileCard">
+        <div className="avatarContainer">
+          <Avatar url={profile.avatar_url} size={200} />
+        </div>
+        <div className="userInfo">
+          <p className="username">{profile.username}</p>
+          <a href={profile.website} target="_blank" className="website">
+            {profile.website}
+          </a>
+        </div>
+      </div>
+      <p style={{ marginTop: '0px' }}>
         <small>
           Last updated{' '}
           {lastUpdated
             ? `${lastUpdated.toLocaleDateString()} ${lastUpdated.toLocaleTimeString()}`
             : 'Never'}
         </small>
       </p>
-    </div>
+    </>
   )
 }

example/next-storage/components/ProfileList.tsx

@@ -10,7 +10,8 @@ export default function ProfileList() {
   const [profiles, setProfiles] = useState<Profile[]>([])
 
   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)

example/next-storage/pages/index.tsx

@@ -16,6 +16,10 @@ export default function Home() {
     })
   }, [])
 
+  const onSaveComplete = () => {
+    console.log('complete')
+  }
+
   return (
     <div
       style={{
@@ -29,12 +33,20 @@ export default function Home() {
       {!session ? (
         <Auth />
       ) : (
-        <div className="flex w-half" style={{ gap: 10 }}>
-          <div className="flex column w-half">
-            <Account key={session.user.id} session={session} />
-          </div>
-          <div className="flex column w-half" style={{ gap: 20 }}>
-            <ProfileList />
+        <div style={{ width: '50%' }}>
+          <p className="mainHeader">
+            Let's set up a simple profile
+            <span style={{ display: 'block', opacity: '50%', marginTop: '5px' }}>
+              And watch it update on the right
+            </span>
+          </p>
+          <div className="flex" style={{ gap: 10, width: '100%', justifyContent: 'space-between' }}>
+            <div className="flex column" style={{ width: '45%' }}>
+              <Account key={session.user.id} session={session} onSaveComplete={onSaveComplete} />
+            </div>
+            <div className="flex column" style={{ gap: 20, width: '45%' }}>
+              <ProfileList />
+            </div>
           </div>
         </div>
       )}