🐤🎣 ↝ Claiming of anomalies introduced along with Unity build and flask wrapper (via submodule)

.github/workflows/supabaseStorage.yml

@@ -0,0 +1,42 @@
+name: SupaStorage-backup
+on:
+    push:
+        branches: [ main ]
+    pull_request:
+        branches: [ main ]
+    workflow_dispatch:
+    schedule:
+        - cron: '0 8,20 * * *'
+
+    jobs:
+        backup:
+            runs-on: ubuntu-latest
+            env:
+                SUPABASE_URL: https://qwbufbmxkjfaikoloudl.supabase.co
+                SUPABASE_SERVICE_ROLE: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InF3YnVmYm14a2pmYWlrb2xvdWRsIiwicm9sZSI6ImFub24iLCJpYXQiOjE2Njk5NDE3NTksImV4cCI6MTk4NTUxNzc1OX0.RNz5bvsVwLvfYpZtUjy0vBPcho53_VS2AIVzT8Fm-lk
+            permissions:
+                contents: write
+            steps:
+                - name: Checkout code
+                  uses: actions/checkout@v3
+                  with:
+                    ref: ${{ gtihub.head_ref }}
+                - name: Set up Python
+                  uses: actions/setup-python@v4
+                  with:
+                    python-version: '3.10'
+
+                - name: Install dependencies and perform backup
+                  run: |
+                    pip install supabase
+                    [[ -d supabase_storage_backup ]] | mkdir supabase_storage_backup
+                    cd supabase_storage_backup
+                    wget https://raw.githubusercontent.com/signal-k/client/main/storage-backup.py
+                    chmod +x storage-backup.py
+                    python storage-backup.py
+                    rm storage-backup.py
+                shell: bash
+
+            - name: Set current date as env variable
+              run: echo "NOW=$(date + '%Y -%m-%dT%H:%M:%S')" >> $GITHUB_ENV
+            - uses: 

components/AccountAvatar.tsx

@@ -84,11 +84,13 @@ export default function AccountAvatar ({
 export function PostCardAvatar ({
     url,
     size,
-    //onUpload
+    //uid,
+    //onUpload,
 }: {
     url: Profiles['avatar_url']
-    size: number
-    //onUpload: (url: string) => void
+    size: number,
+    //onUpload: (url: string) => void,
+    //uid: string
 }) {
     let width = 'w-12';
     //width = 'w-24 md:w-36';
@@ -100,6 +102,33 @@ export function PostCardAvatar ({
         if (url) downloadImage(url);
     }, [url]);
 
+    /*const uploadAvatar: React.ChangeEventHandler<HTMLInputElement> = async (event) => {
+        try {
+            setUploading(true);
+            if (!event.target.files || event.target.files.length === 0) { // If there is no file selected
+                throw new Error('You must select an image to upload');
+            };
+
+            const file = event.target.files[0];
+            const fileExt = file.name.split('.').pop();
+            const fileName = `${uid}.${fileExt}`;
+            const filePath = `${fileName}`;
+            let { error: uploadError } = await supabase.storage
+                .from('avatars')
+                .upload(filePath, file, { upsert: true })
+            if (uploadError) {
+                throw uploadError;
+            };
+
+            onUpload(filePath);
+        } catch (error) {
+            alert('Error uploading avatar, check console');
+            console.log(error);
+        } finally {
+            setUploading(false);
+        }
+    }*/
+
     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);
@@ -187,6 +216,91 @@ export function AccountAvatarV1 ({
         }
     }
 
+    return (
+        <div>
+            {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 style={{ width: size }}>
+                <label className="button primary block" htmlFor='single'>
+                    {uploading ? 'Uploading ...': 'Upload new avatar'}
+                </label>
+                <input
+                    style={{
+                        visibility: 'hidden',
+                        position: 'absolute',
+                    }}
+                    type='file'
+                    id='single'
+                    accept='image/*'
+                    onChange={uploadAvatar}
+                    disabled={uploading} // Disabled once upload button/process clicked/initiated
+                />
+            </div>
+        </div>
+    );
+}
+
+export function AccountAvatarV2 ({
+    uid,
+    url,
+    size,
+    onUpload
+}) {
+    const supabase = useSupabaseClient<Database>();
+    const [avatarUrl, setAvatarUrl] = useState<Profiles['avatar_url']>(null);
+    const [uploading, setUploading] = useState(false);
+    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)
+        }
+    }
+
+    const uploadAvatar: React.ChangeEventHandler<HTMLInputElement> = async (event) => {
+        try {
+            setUploading(true);
+            if (!event.target.files || event.target.files.length === 0) { // If there is no file selected
+                throw new Error('You must select an image to upload');
+            };
+
+            const file = event.target.files[0];
+            const fileExt = file.name.split('.').pop();
+            const fileName = `${uid}.${fileExt}`;
+            const filePath = `${fileName}`;
+            let { error: uploadError } = await supabase.storage
+                .from('avatars')
+                .upload(filePath, file, { upsert: true })
+            if (uploadError) {
+                throw uploadError;
+            };
+
+            onUpload(filePath);
+        } catch (error) {
+            alert('Error uploading avatar, check console');
+            console.log(error);
+        } finally {
+            setUploading(false);
+        }
+    }
+
     return (
         <div>
             {avatarUrl ? (