fix: bug fixes

Scan-Go · Mar 29, 2024 · 0d19941 · 0d19941
1 parent 11e1387
commit 0d19941
Show file tree

Hide file tree

Showing 6 changed files with 171 additions and 119 deletions.
diff --git a/app/(app)/(tabs)/tags.tsx b/app/(app)/(tabs)/tags.tsx
@@ -22,6 +22,7 @@ export default function TagsScreen() {
   const renderItem = useCallback(({ item }: { item: ITag }) => {
     return (
       <Link
+        asChild
         href={{
           pathname: '/(app)/tag/[id]/edit',
           params: {
@@ -54,6 +55,7 @@ export default function TagsScreen() {
     <Suspense fallback={<Spinner />}>
       <Screen>
         <FlatList
+          style={{ flex: 1, width: '100%' }}
           refreshControl={
             <RefreshControl
               refreshing={queryTags.isPending}

diff --git a/app/(app)/profile-settings.tsx b/app/(app)/profile-settings.tsx
@@ -1,3 +1,4 @@
+import AppLoading from '@lib/components/app_loading';
 import Screen from '@lib/components/screen';
 import { QueryKeys } from '@lib/models/query_keys.model';
 import { IUser } from '@lib/models/user.model';
@@ -7,7 +8,7 @@ import { profileService } from '@lib/services/profile.service';
 import { useAuthStore } from '@lib/store/auth.store';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { Suspense } from 'react';
-import { Spinner } from 'tamagui';
+import { ScrollView } from 'tamagui';
 
 export default function ProfileSettingsPage() {
   const user = useAuthStore((state) => state.user);
@@ -18,10 +19,12 @@ export default function ProfileSettingsPage() {
   });
 
   return (
-    <Suspense fallback={<Spinner />}>
-      <Screen gap="$5">
-        <ProfilePictureSection user={profileQuery.data} />
-        <ProfileSection user={profileQuery.data} />
+    <Suspense fallback={<AppLoading />}>
+      <Screen>
+        <ScrollView contentContainerStyle={{ gap: '$5' }}>
+          <ProfilePictureSection user={profileQuery.data} />
+          <ProfileSection user={profileQuery.data} />
+        </ScrollView>
       </Screen>
     </Suspense>
   );

diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -32,13 +32,13 @@ export default function RootLayout() {
   }, [isInitialized]);
 
   useEffect(() => {
-    if ((interLoaded || interError) && isInitialized) {
+    if ((interLoaded && !interError) || isInitialized) {
       // Hide the splash screen after the fonts have loaded (or an error was returned) and the UI is ready.
       SplashScreen.hideAsync();
     }
   }, [interLoaded, interError, isInitialized]);
 
-  if (!interLoaded && !interError && !isInitialized) {
+  if (!interLoaded || interError || !isInitialized) {
     return null;
   }
 

diff --git a/lib/components/app_loading.tsx b/lib/components/app_loading.tsx
@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { Modal, StatusBar, View } from 'react-native';
+import { Spinner, Text, YStack } from 'tamagui';
+
+const bgColor = 'rgba(0,0,0,0.6)';
+
+export default function AppLoading() {
+  useEffect(() => {
+    const entry = {
+      backgroundColor: bgColor,
+      animated: true
+    };
+    StatusBar.pushStackEntry(entry);
+
+    return () => {
+      StatusBar.popStackEntry(entry);
+    };
+  }, []);
+
+  return (
+    <Modal
+      presentationStyle="overFullScreen"
+      transparent
+      animationType="fade"
+    >
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: bgColor
+        }}
+      >
+        <YStack gap="$5">
+          <Spinner size="large" />
+          <Text color="whitesmoke">Laddar..</Text>
+        </YStack>
+      </View>
+    </Modal>
+  );
+}
diff --git a/lib/components/profile_view.tsx b/lib/components/profile_view.tsx
@@ -11,6 +11,7 @@ import {
   H2,
   Image,
   ListItem,
+  ScrollView,
   Separator,
   Text,
   View,
@@ -41,133 +42,137 @@ export default function ProfileView({
   socialData
 }: IProps) {
   return (
-    <YStack
-      justifyContent="space-evenly"
-      alignItems="center"
-      gap="$5"
-      w="100%"
-    >
+    <ScrollView>
       <YStack
-        gap="$3"
+        justifyContent="space-evenly"
         alignItems="center"
+        gap="$5"
+        w="100%"
       >
-        <Avatar
-          circular
-          size="$14"
+        <YStack
+          gap="$3"
+          alignItems="center"
         >
-          {profileData.profileImageUrl ? (
-            <>
-              <Avatar.Image source={{ uri: profileData.profileImageUrl }} />
+          <Avatar
+            circular
+            size="$14"
+          >
+            {profileData.profileImageUrl ? (
+              <>
+                <Avatar.Image source={{ uri: profileData.profileImageUrl }} />
 
-              <Avatar.Fallback>
-                <Image source={require('@assets/images/no_avatar.svg')} />
-              </Avatar.Fallback>
-            </>
-          ) : (
-            <NoAvatar width={200} />
+                <Avatar.Fallback>
+                  <Image source={require('@assets/images/no_avatar.svg')} />
+                </Avatar.Fallback>
+              </>
+            ) : (
+              <NoAvatar width={200} />
+            )}
+          </Avatar>
+          <H2>{`${profileData.firstName} ${profileData.lastName}`}</H2>
+          <Text>{profileData.bio}</Text>
+        </YStack>
+
+        {showSendMessageBtn &&
+          profileData?.sendMessageAllowed &&
+          isSignedIn && (
+            <Button
+              w="100%"
+              icon={<Send />}
+              onPress={onSendMessage}
+            >
+              Skicka meddelande
+            </Button>
           )}
-        </Avatar>
-        <H2>{`${profileData.firstName} ${profileData.lastName}`}</H2>
-        <Text>{profileData.bio}</Text>
-      </YStack>
 
-      {showSendMessageBtn && profileData?.sendMessageAllowed && isSignedIn && (
-        <Button
+        <View
+          p="$3"
+          bg="$background"
+          py="$5"
+          borderRadius="$4"
           w="100%"
-          icon={<Send />}
-          onPress={onSendMessage}
-        >
-          Skicka meddelande
-        </Button>
-      )}
-
-      <View
-        p="$3"
-        bg="$background"
-        py="$5"
-        borderRadius="$4"
-        w="100%"
-      >
-        <Text>{bioText}</Text>
-        <Text
-          fontSize="$5"
-          color="$colorFocus"
         >
-          {bioContent}
-        </Text>
-      </View>
-      <View
-        bg="$background"
-        p="$3"
-        py="$5"
-        borderRadius="$4"
-        w="100%"
-        justifyContent="center"
-        alignItems="center"
-      >
-        <Image
-          src="https://upload.wikimedia.org/wikipedia/commons/5/5b/Qrcode_wikipedia.jpg"
-          w="$13"
-          h="$13"
-        />
-      </View>
-      {(socialData || phoneData) && (
+          <Text>{bioText}</Text>
+          <Text
+            fontSize="$5"
+            color="$colorFocus"
+          >
+            {bioContent}
+          </Text>
+        </View>
         <View
-          bg="$backgroundStrong"
+          bg="$background"
+          p="$3"
+          py="$5"
           borderRadius="$4"
+          w="100%"
           justifyContent="center"
           alignItems="center"
-          w="100%"
         >
-          <YGroup
-            alignSelf="center"
-            width="100%"
-            separator={<Separator />}
+          <Image
+            src="https://upload.wikimedia.org/wikipedia/commons/5/5b/Qrcode_wikipedia.jpg"
+            w="$13"
+            h="$13"
+          />
+        </View>
+        {(socialData || phoneData) && (
+          <View
+            bg="$backgroundStrong"
+            borderRadius="$4"
+            justifyContent="center"
+            alignItems="center"
+            w="100%"
           >
-            {phoneData && (
-              <YGroup.Item>
-                <Link
-                  href={`tel:${phoneData.number}`}
-                  target="_blank"
-                  asChild
-                >
-                  <ListItem
-                    size="$5"
-                    hoverTheme
-                    pressTheme
-                    icon={<Phone />}
-                    alignItems="center"
-                    onPress={() => null}
-                    title="Mobil"
-                    subTitle={phoneData.number}
-                  />
-                </Link>
-              </YGroup.Item>
-            )}
+            <YGroup
+              alignSelf="center"
+              width="100%"
+              separator={<Separator />}
+            >
+              {phoneData && (
+                <YGroup.Item>
+                  <Link
+                    href={`tel:${phoneData.number}`}
+                    target="_blank"
+                    asChild
+                  >
+                    <ListItem
+                      size="$5"
+                      hoverTheme
+                      pressTheme
+                      icon={<Phone />}
+                      alignItems="center"
+                      onPress={() => null}
+                      title="Mobil"
+                      subTitle={phoneData.number}
+                    />
+                  </Link>
+                </YGroup.Item>
+              )}
 
-            {socialData?.twitter && (
-              <YGroup.Item>
-                <Link
-                  href={`http://x.com/${socialData.twitter}`}
-                  target="_blank"
-                  asChild
-                >
-                  <ListItem
-                    size="$5"
-                    hoverTheme
-                    pressTheme
-                    icon={<Twitter />}
-                    alignItems="center"
-                    onPress={() => null}
-                    title="Twitter"
-                    subTitle={socialData?.twitter}
-                  />
-                </Link>
-              </YGroup.Item>
-            )}
-          </YGroup>
-        </View>
-      )}
-    </YStack>
+              {socialData?.twitter && (
+                <YGroup.Item>
+                  <Link
+                    href={`http://x.com/${socialData.twitter}`}
+                    target="_blank"
+                    asChild
+                  >
+                    <ListItem
+                      size="$5"
+                      hoverTheme
+                      pressTheme
+                      icon={<Twitter />}
+                      alignItems="center"
+                      onPress={() => null}
+                      title="Twitter"
+                      subTitle={socialData?.twitter}
+                    />
+                  </Link>
+                </YGroup.Item>
+              )}
+            </YGroup>
+          </View>
+        )}
+      </YStack>
+    </ScrollView>
   );
 }
diff --git a/lib/components/tags/tag_card.component.tsx b/lib/components/tags/tag_card.component.tsx
@@ -24,6 +24,7 @@ export default function TagCard({ created_at, isActive, name, note }: IProps) {
       animation="bouncy"
       hoverStyle={{ scale: 0.98 }}
       pressStyle={{ scale: 0.98 }}
+      w="100%"
     >
       <LinearGradient
         colors={['#642401', '#064a7d']}