Removed the final CSS module

Author: kiwicopple

example/next-storage/README.md

@@ -31,6 +31,4 @@ begin;
 commit;
 
 alter publication supabase_realtime add table profiles;
-
-
 ```

example/next-storage/components/Account.tsx

@@ -7,6 +7,7 @@ import { DEFAULT_AVATARS_BUCKET, Profile } from '../lib/constants'
 
 export default function Account({ session }: { session: AuthSession }) {
   const [loading, setLoading] = useState<boolean>(true)
+  const [uploading, setUploading] = useState<boolean>(false)
   const [avatar, setAvatar] = useState<string | null>(null)
   const [username, setUsername] = useState<string | null>(null)
   const [website, setWebsite] = useState<string | null>(null)
@@ -22,12 +23,13 @@ export default function Account({ session }: { session: AuthSession }) {
 
   async function uploadAvatar(event: ChangeEvent<HTMLInputElement>) {
     try {
-      const user = supabase.auth.user()
+      setUploading(true)
 
       if (!event.target.files || event.target.files.length == 0) {
         throw 'You must select an image to upload.'
       }
 
+      const user = supabase.auth.user()
       const file = event.target.files[0]
       const fileExt = file.name.split('.').pop()
       const fileName = `${session?.user.id}${Math.random()}.${fileExt}`
@@ -52,6 +54,8 @@ export default function Account({ session }: { session: AuthSession }) {
       setAvatar(filePath)
     } catch (error) {
       alert(error.message)
+    } finally {
+      setUploading(false)
     }
   }
 
@@ -125,7 +129,7 @@ export default function Account({ session }: { session: AuthSession }) {
         <div>
           <Avatar url={avatar} size={270} />
         </div>
-        <UploadButton onUpload={uploadAvatar} />
+        <UploadButton onUpload={uploadAvatar} loading={uploading} />
       </div>
 
       <div>

example/next-storage/components/ProfileList.tsx

@@ -0,0 +1,54 @@
+import ProfileCard from '../components/ProfileCard'
+import { Profile } from '../lib/constants'
+import { Subscription, SupabaseRealtimePayload } from '@supabase/supabase-js'
+import { supabase } from '../lib/api'
+import { useState, useEffect } from 'react'
+
+var realtimeProfiles: Subscription | null
+
+export default function ProfileList() {
+  const [profiles, setProfiles] = useState<Profile[]>([])
+
+  useEffect(() => {
+    getPublicProfiles()
+
+    realtimeProfiles = supabase
+      .from('profiles')
+      .on('*', (payload: SupabaseRealtimePayload<Profile>) => {
+        console.log('profiles', profiles)
+        const otherProfiles = profiles?.filter((x) => x.id != payload.new.id)
+        console.log('otherProfiles', otherProfiles)
+        setProfiles([payload.new, ...otherProfiles])
+      })
+      .subscribe()
+
+    return () => {
+      supabase.removeSubscription(realtimeProfiles)
+      realtimeProfiles = null
+    }
+  }, [])
+
+  async function getPublicProfiles() {
+    try {
+      const { data, error } = await supabase
+        .from('profiles')
+        .select('id, username, avatar_url, website, updated_at')
+        .order('updated_at', { ascending: false })
+      if (error) {
+        throw error
+      }
+      console.log('data', data)
+      setProfiles(data)
+    } catch (error) {
+      console.log('error', error.message)
+    }
+  }
+
+  return (
+    <>
+      {profiles?.map((profile) => (
+        <ProfileCard profile={profile} key={profile.id} />
+      ))}
+    </>
+  )
+}

example/next-storage/components/UploadButton.module.css

@@ -1,22 +1,26 @@
 import { ChangeEventHandler } from 'react'
-import styles from './UploadButton.module.css'
 
 export type UploadButtonProps = {
   onUpload: ChangeEventHandler<HTMLInputElement>
+  loading: boolean
 }
 
 export default function UploadButton(props: UploadButtonProps) {
   return (
-    <div className={styles.container}>
-      <label className={styles.label} htmlFor="single">
-        Upload avatar
+    <div>
+      <label className="button primary block" htmlFor="single">
+        {props.loading ? 'Uploading ...' : 'Upload'}
       </label>
       <input
-        className={styles.input}
+        style={{
+          visibility: 'hidden',
+          position: 'absolute',
+        }}
         type="file"
         id="single"
         accept="image/*"
         onChange={props.onUpload}
+        disabled={props.loading}
       />
     </div>
   )

example/next-storage/components/UploadButton.tsx

@@ -1,54 +1,21 @@
-import { useState, useEffect } from 'react'
-import { supabase } from '../lib/api'
 import Auth from '../components/Auth'
 import Account from '../components/Account'
-import ProfileCard from '../components/ProfileCard'
-import { AuthSession, Subscription, SupabaseRealtimePayload } from '../../../dist/main'
-import { Profile } from '../lib/constants'
-
-var realtimeProfiles: Subscription | null
+import ProfileList from '../components/ProfileList'
+import { useState, useEffect } from 'react'
+import { supabase } from '../lib/api'
+import { AuthSession } from '@supabase/supabase-js'
 
 export default function Home() {
   const [session, setSession] = useState<AuthSession | null>(null)
-  const [profiles, setProfiles] = useState<Profile[]>([])
 
   useEffect(() => {
     setSession(supabase.auth.session())
-    getPublicProfiles()
 
     supabase.auth.onAuthStateChange((_event: string, session: AuthSession | null) => {
       setSession(session)
     })
-
-    realtimeProfiles = supabase
-      .from('profiles')
-      .on('*', (payload: SupabaseRealtimePayload<Profile>) => {
-        setProfiles([payload.new, ...profiles?.filter((x) => x.id != payload.new.id)])
-      })
-      .subscribe()
-
-    return () => {
-      supabase.removeSubscription(realtimeProfiles)
-      realtimeProfiles = null
-    }
   }, [])
 
-  async function getPublicProfiles() {
-    try {
-      const { data, error } = await supabase
-        .from('profiles')
-        .select('id, username, avatar_url, website, updated_at')
-        .order('updated_at', { ascending: false })
-      if (error) {
-        throw error
-      }
-      console.log('data', data)
-      setProfiles(data)
-    } catch (error) {
-      console.log('error', error.message)
-    }
-  }
-
   return (
     <div
       style={{
@@ -62,16 +29,12 @@ export default function Home() {
       {!session ? (
         <Auth />
       ) : (
-        <div style={{ display: 'flex', gap: 20, width: '50%' }}>
-          <div className="flex flex-1">
+        <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 flex-1">
-            {profiles?.map((profile) => (
-              <div key={profile.id}>
-                <ProfileCard profile={profile} />
-              </div>
-            ))}
+          <div className="flex column w-half" style={{ gap: 20 }}>
+            <ProfileList />
           </div>
         </div>
       )}

example/next-storage/pages/index.tsx

@@ -49,6 +49,10 @@ input[disabled] {
 
 /* Utils */
 
+.w-half {
+  width: 50%;
+}
+
 .block {
   display: block;
   width: 100%;
@@ -62,18 +66,20 @@ input[disabled] {
   display: flex;
 }
 .flex.column {
-  flex: column;
+  flex-direction: column;
 }
 .flex.row {
-  flex: row;
+  flex-direction: row;
 }
 .flex.flex-1 {
   flex: 1 1 0;
 }
 
 /* Button */
 
-button {
+button,
+.button {
+  color: var(--custom-color);
   border: var(--custom-border);
   background-color: var(--custom-bg-color);
   display: inline-block;
@@ -86,14 +92,17 @@ button {
   text-transform: uppercase;
 }
 
-button.primary {
+button.primary,
+.button.primary {
   background-color: var(--custom-color-brand);
+  border: 1px solid var(--custom-color-brand);
 }
 
 /* Widgets */
 
 .card {
   width: 100%;
+  display: block;
   border: var(--custom-border);
   border-radius: var(--custom-border-radius);
   padding: var(--custom-spacing);