Merge pull request #176 from coldsurfers/release/billets-app-v1.6.2

release(billets-app): 🎨 v1.6.2
coldsurfers · Dec 23, 2024 · 008be7e · 008be7e
2 parents 434545d + a2c8b8a
commit 008be7e
Show file tree

Hide file tree

Showing 38 changed files with 475 additions and 382 deletions.
diff --git a/apps/billets-app/App.tsx b/apps/billets-app/App.tsx
@@ -1,9 +1,9 @@
-import { AuthContextProvider, TabBarVisibleContextProvider, useFirebaseAnalytics, useFirebaseCrashlytics } from '@/lib'
+import { AuthContextProvider, useFirebaseAnalytics, useFirebaseCrashlytics } from '@/lib'
 import { CommonScreenLayout } from '@/ui'
 import { colors } from '@coldsurfers/ocean-road'
-import { Text } from '@coldsurfers/ocean-road/native'
+import { Spinner, Text } from '@coldsurfers/ocean-road/native'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import React, { PropsWithChildren, useEffect, useState } from 'react'
+import React, { PropsWithChildren, Suspense, useEffect, useState } from 'react'
 import { Platform, StatusBar, View } from 'react-native'
 import BootSplash from 'react-native-bootsplash'
 import codePush, { DownloadProgress, RemotePackage } from 'react-native-code-push'
@@ -112,16 +112,16 @@ const BootSplashAwaiter = ({ children }: PropsWithChildren) => {
 const App = () => {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <TabBarVisibleContextProvider>
-        <StatusBar translucent barStyle="dark-content" />
-        <QueryClientProvider client={queryClient}>
+      <StatusBar translucent barStyle="dark-content" />
+      <QueryClientProvider client={queryClient}>
+        <Suspense fallback={<Spinner positionCenter />}>
           <AuthContextProvider>
             <BootSplashAwaiter>
               <AppContainer />
             </BootSplashAwaiter>
           </AuthContextProvider>
-        </QueryClientProvider>
-      </TabBarVisibleContextProvider>
+        </Suspense>
+      </QueryClientProvider>
     </GestureHandlerRootView>
   )
 }

diff --git a/apps/billets-app/android/app/build.gradle b/apps/billets-app/android/app/build.gradle
@@ -98,7 +98,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 14
-        versionName "1.6.1"
+        versionName "1.6.2"
         resValue "string", "CodePushDeploymentKey", project.env.get("ANDROID_CODE_PUSH_DEPLOYMENT_KEY") ?: ""
     }
 

diff --git a/apps/billets-app/ios/FstvlLifeApp.xcodeproj/project.pbxproj b/apps/billets-app/ios/FstvlLifeApp.xcodeproj/project.pbxproj
@@ -600,7 +600,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.6.1;
+				MARKETING_VERSION = 1.6.2;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -632,7 +632,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.6.1;
+				MARKETING_VERSION = 1.6.2;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -923,7 +923,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.6.1;
+				MARKETING_VERSION = 1.6.2;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

diff --git a/apps/billets-app/package.json b/apps/billets-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coldsurfers/billets-app",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "private": true,
   "scripts": {
     "android": "react-native run-android",

diff --git a/apps/billets-app/src/features/concert/ui/concert-list-item/concert-list-item.tsx b/apps/billets-app/src/features/concert/ui/concert-list-item/concert-list-item.tsx
@@ -4,8 +4,12 @@ import { Text } from '@coldsurfers/ocean-road/native'
 import { useCallback } from 'react'
 import { Pressable, StyleSheet, View } from 'react-native'
 import FastImage from 'react-native-fast-image'
-import palettes from '../../../../lib/palettes'
 import useSubscribedConcertQuery from '../../../../lib/react-query/queries/useSubscribedConcertQuery'
+import {
+  getConcertListBottomWrapperDynamicStyles,
+  getConcertListItemWrapperDynamicStyles,
+  getConcertListThumbnailWrapperDynamicStyles,
+} from './concert-list-item.utils'
 
 export const ConcertListItem = ({
   concertId,
@@ -40,43 +44,18 @@ export const ConcertListItem = ({
   }, [onPressSubscribe, subscribedConcertData, concertId])
 
   return (
-    <Pressable
-      onPress={handlePress}
-      style={[
-        styles.concertListItem,
-        {
-          width: size === 'small' ? 140 : '100%',
-          padding: size === 'small' ? 0 : 12,
-        },
-      ]}
-    >
+    <Pressable onPress={handlePress} style={[styles.concertListItem, getConcertListItemWrapperDynamicStyles(size)]}>
       <FastImage
         source={{ uri: thumbnailUrl }}
-        style={[
-          styles.concertThumbnail,
-          {
-            borderBottomLeftRadius: size === 'small' ? 0 : 8,
-            borderBottomRightRadius: size === 'small' ? 0 : 8,
-          },
-        ]}
+        style={[styles.concertThumbnail, getConcertListThumbnailWrapperDynamicStyles(size)]}
       >
         {onPressSubscribe && (
           <View style={styles.subscribeBtnWrapper}>
             <ConcertSubscribeButton onPress={handlePressSubscribe} isSubscribed={!!subscribedConcertData} />
           </View>
         )}
       </FastImage>
-      <View
-        style={[
-          styles.bottom,
-          {
-            paddingLeft: size === 'small' ? 8 : 0,
-            paddingRight: size === 'small' ? 8 : 0,
-            marginTop: size === 'small' ? 8 : 16,
-            marginBottom: size === 'small' ? 8 : 4,
-          },
-        ]}
-      >
+      <View style={[styles.bottom, getConcertListBottomWrapperDynamicStyles(size)]}>
         <View style={styles.concertInfoWrapper}>
           <Text
             numberOfLines={size === 'small' ? 2 : 0}
@@ -120,6 +99,30 @@ export const ConcertListItem = ({
   )
 }
 
+ConcertListItem.Skeleton = ({ size = 'large' }: { size?: 'small' | 'large' }) => {
+  return (
+    <Pressable style={[styles.concertListItem, getConcertListItemWrapperDynamicStyles(size)]}>
+      <View
+        style={[styles.concertThumbnail, getConcertListThumbnailWrapperDynamicStyles(size), styles.skeletonBackground]}
+      />
+      <View style={[styles.bottom, getConcertListBottomWrapperDynamicStyles(size)]}>
+        <View style={{ width: '100%' }}>
+          <View style={styles.skeletonTitle} />
+          {size === 'small' && <View style={styles.skeletonTitle} />}
+          <View
+            style={[
+              styles.skeletonSubtitle,
+              {
+                marginTop: size === 'small' ? 4 : 8,
+              },
+            ]}
+          />
+        </View>
+      </View>
+    </Pressable>
+  )
+}
+
 const styles = StyleSheet.create({
   concertListItem: {
     width: '100%',
@@ -151,20 +154,24 @@ const styles = StyleSheet.create({
     flexGrow: 1,
   },
   concertInfoWrapper: {},
-  concertSaveButton: {
-    marginLeft: 'auto',
-    borderWidth: 1,
-    borderRadius: 18,
-    borderColor: palettes.gray['300'],
-    width: 36,
-    height: 36,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  concertSaveButtonIcon: { fontSize: 24 },
   bottom: {
     flexDirection: 'row',
     alignItems: 'center',
   },
   subscribeBtnWrapper: { position: 'absolute', right: 12, bottom: 12 },
+  skeletonBackground: {
+    backgroundColor: colors.oc.gray[3].value,
+  },
+  skeletonTitle: {
+    width: '80%',
+    backgroundColor: colors.oc.gray[3].value,
+    height: 24,
+    borderRadius: 8,
+  },
+  skeletonSubtitle: {
+    width: '20%',
+    backgroundColor: colors.oc.gray[3].value,
+    height: 24,
+    borderRadius: 8,
+  },
 })
diff --git a/apps/billets-app/src/features/concert/ui/concert-list-item/concert-list-item.utils.ts b/apps/billets-app/src/features/concert/ui/concert-list-item/concert-list-item.utils.ts
@@ -0,0 +1,24 @@
+import { StyleProp, ViewStyle } from 'react-native'
+
+export const getConcertListItemWrapperDynamicStyles = (size: 'small' | 'large'): StyleProp<ViewStyle> => {
+  return {
+    width: size === 'small' ? 140 : '100%',
+    padding: size === 'small' ? 0 : 12,
+  }
+}
+
+export const getConcertListThumbnailWrapperDynamicStyles = (size: 'small' | 'large') => {
+  return {
+    borderBottomLeftRadius: size === 'small' ? 0 : 8,
+    borderBottomRightRadius: size === 'small' ? 0 : 8,
+  }
+}
+
+export const getConcertListBottomWrapperDynamicStyles = (size: 'small' | 'large') => {
+  return {
+    paddingLeft: size === 'small' ? 8 : 0,
+    paddingRight: size === 'small' ? 8 : 0,
+    marginTop: size === 'small' ? 8 : 16,
+    marginBottom: size === 'small' ? 8 : 4,
+  }
+}
diff --git a/apps/billets-app/src/features/concert/ui/concert-list/concert-list-skeleton.tsx b/apps/billets-app/src/features/concert/ui/concert-list/concert-list-skeleton.tsx
@@ -0,0 +1,20 @@
+import { memo } from 'react'
+import { FlatList } from 'react-native'
+import { ConcertListItem } from '../concert-list-item'
+import { concertListStyles } from './concert-list.styles'
+
+const renderItem = () => {
+  return <ConcertListItem.Skeleton />
+}
+
+const data = Array.from({ length: 5 }).map((_, index) => index)
+
+export const ConcertListSkeleton = memo(() => {
+  return (
+    <FlatList
+      data={data}
+      renderItem={renderItem}
+      contentContainerStyle={concertListStyles.concertListContentContainer}
+    />
+  )
+})
diff --git a/apps/billets-app/src/features/concert/ui/concert-list/concert-list.styles.ts b/apps/billets-app/src/features/concert/ui/concert-list/concert-list.styles.ts
@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native'
+
+export const concertListStyles = StyleSheet.create({
+  concertListContentContainer: {
+    paddingHorizontal: 16,
+    marginTop: 12,
+    paddingBottom: 24,
+    flexGrow: 1,
+  },
+  loadingIndicatorWrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})