wip: change profile picture support

app/(app)/(tabs)/profile.tsx

@@ -8,7 +8,7 @@ import { useNavigation } from 'expo-router';
 import { Suspense, useLayoutEffect } from 'react';
 import { Spinner } from 'tamagui';
 
-export default function TabTwoScreen() {
+export default function ProfileScreen() {
   const navigation = useNavigation();
   const user = useAuthStore((state) => state.user);
 

app/(app)/profile-settings.tsx

@@ -2,6 +2,7 @@ import Screen from '@lib/components/screen';
 import { QueryKeys } from '@lib/models/query_keys.model';
 import { IUser } from '@lib/models/user.model';
 import ProfilePictureSection from '@lib/modules/profile-settings/ProfilePictureSection';
+import { profileService } from '@lib/services/profile.service';
 import { useAuthStore } from '@lib/store/auth.store';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { Suspense } from 'react';
@@ -10,7 +11,8 @@ import { Spinner } from 'tamagui';
 export default function ProfileSettingsPage() {
   const user = useAuthStore((state) => state.user);
   const profileQuery = useSuspenseQuery<IUser>({
-    queryKey: [QueryKeys.ProfileWithRelations, user?.id]
+    queryKey: [QueryKeys.ProfileWithRelations, user?.id],
+    queryFn: () => profileService.fetchProfile(user!.id)
   });
 
   return (

lib/components/profile_view.tsx

@@ -12,7 +12,6 @@ import {
   Image,
   ListItem,
   Separator,
-  Spinner,
   Text,
   View,
   YGroup,
@@ -58,10 +57,10 @@ export default function ProfileView({
         >
           {profileData.profileImageUrl ? (
             <>
-              <Avatar.Image src={require('@assets/images/no_avatar.svg')} />
+              <Avatar.Image source={{ uri: profileData.profileImageUrl }} />
 
               <Avatar.Fallback>
-                <Spinner />
+                <Image source={require('@assets/images/no_avatar.svg')} />
               </Avatar.Fallback>
             </>
           ) : (

lib/components/switch.tsx

@@ -8,6 +8,12 @@ const AppSwitchFrame = styled(SwitchFrame, {
         backgroundColor: '$backgroundStrong',
         borderWidth: 2,
         borderColor: '$backgroundStrong'
+      },
+      true: {
+        borderRadius: 1000,
+        backgroundColor: '$backgroundStrong',
+        borderWidth: 2,
+        borderColor: '$backgroundStrong'
       }
     },
 

lib/components/toast.tsx

@@ -1,20 +1,20 @@
-import { Toast as IToast, useToastState } from "@tamagui/toast";
-import { useMemo } from "react";
-import { YStack } from "tamagui";
+import { Toast as IToast, useToastState } from '@tamagui/toast';
+import { useMemo } from 'react';
+import { Spinner, XStack, YStack } from 'tamagui';
 
 const Toast = () => {
   const currentToast = useToastState();
   const toastBgColor = useMemo(() => {
     switch (currentToast?.toastType) {
-      case "error":
-        return "red";
-      case "success":
-        return "green";
-      case "warning":
-        return "orange";
+      case 'error':
+        return 'red';
+      case 'success':
+        return 'green';
+      case 'warning':
+        return 'orange';
 
       default:
-        return "blue";
+        return 'lightblue';
     }
   }, [currentToast]);
 
@@ -32,14 +32,21 @@ const Toast = () => {
       viewportName={currentToast.viewportName}
       bg={toastBgColor}
     >
-      <YStack>
-        <IToast.Title color="white">{currentToast.title}</IToast.Title>
-        {!!currentToast.message && (
-          <IToast.Description color="white">
-            {currentToast.message}
-          </IToast.Description>
-        )}
-      </YStack>
+      {currentToast.isLoading ? (
+        <XStack gap="$5">
+          <Spinner />
+          <IToast.Title color="white">{currentToast.title}</IToast.Title>
+        </XStack>
+      ) : (
+        <YStack>
+          <IToast.Title color="white">{currentToast.title}</IToast.Title>
+          {!!currentToast.message && (
+            <IToast.Description color="white">
+              {currentToast.message}
+            </IToast.Description>
+          )}
+        </YStack>
+      )}
     </IToast>
   );
 };

lib/modules/profile-settings/ProfilePictureSection.tsx

@@ -1,28 +1,63 @@
 import NO_AVATAR from '@assets/images/no_avatar.svg';
 import Button from '@lib/components/button';
+import { QueryKeys } from '@lib/models/query_keys.model';
+import { IUserWithPhoneAndSocial } from '@lib/models/user.model';
 import { profileService } from '@lib/services/profile.service';
+import { storageService } from '@lib/services/storage.service';
 import { config } from '@tamagui/config/v2-reanimated';
 import { Edit3 } from '@tamagui/lucide-icons';
-import { useMutation } from '@tanstack/react-query';
+import { useToastController } from '@tamagui/toast';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import * as ImagePicker from 'expo-image-picker';
-import React, { useCallback, useState } from 'react';
-import { Avatar, Card, Text, View, XStack, ZStack } from 'tamagui';
+import React, { useCallback, useMemo, useState } from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { Avatar, Card, Spinner, Text, View, XStack, YStack } from 'tamagui';
 import { ISectionProps } from '.';
 
 interface IUpdateMutation {
-  profileImageUrl: string;
+  profileImageUrl: string | null;
 }
 
 export default function ProfilePictureSection({ user }: ISectionProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const queryClient = useQueryClient();
+  const toast = useToastController();
   const [selectedImage, setSelectedImage] =
     useState<ImagePicker.ImagePickerAsset>();
 
   const mutation = useMutation<void, void, IUpdateMutation>({
     mutationFn: ({ profileImageUrl }) =>
-      profileService.updateProfile(user.id, { profileImageUrl })
+      profileService.updateProfile(user.id, { profileImageUrl }),
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<IUserWithPhoneAndSocial>(
+        [QueryKeys.ProfileWithRelations, user.id],
+        (u) => {
+          if (!u) return;
+          return {
+            ...u,
+            profileImageUrl: variables.profileImageUrl!
+          };
+        }
+      );
+    }
   });
 
-  const onSave = useCallback(async () => {}, []);
+  const onSave = useCallback(async () => {
+    if (!selectedImage) return;
+    setIsLoading(true);
+
+    const ref = await storageService.uploadAvatar(user!.id, selectedImage);
+
+    if (ref) {
+      const photoURL = storageService.getAvatarURL(ref.path);
+
+      await mutation.mutateAsync({ profileImageUrl: photoURL });
+
+      toast.show('Sparat', { toastType: 'success' });
+    }
+
+    setIsLoading(false);
+  }, [selectedImage]);
 
   const onSelect = useCallback(async () => {
     let result = await ImagePicker.launchImageLibraryAsync({
@@ -38,59 +73,111 @@ export default function ProfilePictureSection({ user }: ISectionProps) {
       if (result.assets && result.assets.length === 1) {
         setSelectedImage(result.assets[0]);
 
-        console.log(result.assets);
+        await onSave();
       }
     }
   }, []);
 
+  const onPressRemove = useCallback(async () => {
+    await mutation.mutateAsync({
+      profileImageUrl: null
+    });
+  }, []);
+
+  const profilePicture = useMemo<ImageSourcePropType>(() => {
+    if (selectedImage) {
+      return {
+        uri: selectedImage.uri
+      };
+    }
+
+    if (user.profileImageUrl) {
+      return {
+        uri: user.profileImageUrl
+      };
+    }
+
+    return {
+      uri: ''
+    };
+  }, [selectedImage, user]);
+
   return (
     <Card>
       <Card.Header padded>
         <Text>Profilbild</Text>
       </Card.Header>
 
       <View
+        animation="bouncy"
+        animateOnly={['transform']}
+        pressStyle={{
+          scale: 0.9
+        }}
         justifyContent="center"
         alignItems="center"
       >
-        <ZStack>
-          <Avatar
-            circular
-            size="$8"
-          >
-            <Avatar.Image
-              source={{
-                uri: (selectedImage?.uri ?? user.profileImageUrl) || undefined
-              }}
-            />
+        <Avatar
+          onPress={onSelect}
+          cursor="pointer"
+          circular
+          size="$8"
+        >
+          <Avatar.Image source={profilePicture} />
 
-            <Avatar.Fallback>
-              <NO_AVATAR
-                width={config.tokens.size[8].val}
-                height={config.tokens.size[8].val}
-              />
-            </Avatar.Fallback>
-          </Avatar>
-          <Edit3 />
-        </ZStack>
+          <Avatar.Fallback>
+            <NO_AVATAR
+              width={config.tokens.size[8].val}
+              height={config.tokens.size[8].val}
+            />
+          </Avatar.Fallback>
+        </Avatar>
+        <View
+          theme="subtle"
+          bg="$background"
+          p="$2"
+          borderRadius="$12"
+          position="relative"
+          top="$-12"
+          right="$-6"
+          zIndex={1}
+        >
+          <Edit3
+            size="$1"
+            color="black"
+          />
+        </View>
       </View>
 
       <Card.Footer
         padded
         justifyContent="center"
       >
-        <XStack>
-          {selectedImage && (
-            <Button onPress={onSelect}>Välj nytt profilbild</Button>
+        <YStack gap="$5">
+          {isLoading && (
+            <XStack
+              animation="medium"
+              enterStyle={{
+                scale: 1
+              }}
+              justifyContent="center"
+              gap="$3"
+            >
+              <Spinner />
+
+              <Text>Sparar...</Text>
+            </XStack>
           )}
 
-          <Button
-            theme={selectedImage ? 'active' : 'subtle'}
-            onPress={selectedImage ? onSave : onSelect}
-          >
-            {selectedImage ? 'Spara' : 'Välj en profilbild'}
-          </Button>
-        </XStack>
+          {user.profileImageUrl && (
+            <Button
+              theme="active"
+              onPress={onPressRemove}
+            >
+              Radera
+            </Button>
+          )}
+        </YStack>
       </Card.Footer>
     </Card>
   );

lib/services/storage.service.ts

@@ -0,0 +1,36 @@
+import { decode } from 'base64-arraybuffer';
+import { ImagePickerAsset } from 'expo-image-picker';
+import mime from 'mime';
+import { BaseService } from './base.service';
+
+class StorageService extends BaseService {
+  async uploadAvatar(userUid: string, photo: ImagePickerAsset) {
+    const mimeType = photo.mimeType;
+
+    if (!mimeType) return;
+
+    const ext = mime.getExtension(photo.mimeType!);
+    const path = `${userUid}/avatar.${ext}`;
+
+    const { data, error } = await this.client.storage
+      .from('avatars')
+      .upload(path, decode(photo.base64!), {
+        upsert: true,
+        contentType: mimeType
+      });
+
+    if (error) {
+      throw error;
+    }
+
+    return data;
+  }
+
+  getAvatarURL(userUid: string): string {
+    const { data } = this.client.storage.from('avatars').getPublicUrl(userUid);
+
+    return data.publicUrl;
+  }
+}
+
+export const storageService = new StorageService();

lib/tamagui/config.ts

@@ -18,5 +18,6 @@ declare module 'tamagui' {
 declare module '@tamagui/toast' {
   interface CustomData {
     toastType?: 'error' | 'success' | 'warning';
+    isLoading?: boolean;
   }
 }

lib/tamagui/palette.ts

@@ -24,7 +24,6 @@ export const colorPalette_Light = [
 
 export const colorPalette_Dark = [
   darkTransparent,
-  'hsl(165, 25%, 15%)',
   'hsl(165, 64%, 81%)',
   'hsl(165, 63%, 76%)',
   'hsl(165, 62%, 71%)',