Merge pull request #162 from coldsurfers/feature/billets-app/modify-d…

…esigns

feature(billets-app): modify designs

apps/billets-app/babel.config.js

@@ -14,6 +14,7 @@ module.exports = {
           '@/lib': './src/lib',
           '@/ui': './src/ui',
           '@/features': './src/features',
+          '@/types': './src/types',
         },
       },
     ],

apps/billets-app/src/features/concert/ui/concert-list-item/concert-list-item.tsx

@@ -46,6 +46,7 @@ export const ConcertListItem = ({
         styles.concertListItem,
         {
           width: size === 'small' ? 140 : '100%',
+          padding: size === 'small' ? 0 : 12,
         },
       ]}
     >
@@ -54,7 +55,8 @@ export const ConcertListItem = ({
         style={[
           styles.concertThumbnail,
           {
-            height: size === 'small' ? 120 : 250,
+            borderBottomLeftRadius: size === 'small' ? 0 : 8,
+            borderBottomRightRadius: size === 'small' ? 0 : 8,
           },
         ]}
       >
@@ -64,14 +66,24 @@ export const ConcertListItem = ({
           </View>
         )}
       </FastImage>
-      <View style={styles.bottom}>
+      <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.concertInfoWrapper}>
           <Text
             numberOfLines={size === 'small' ? 2 : 0}
             style={[
               styles.concertTitle,
               {
-                fontSize: size === 'small' ? 14 : 18,
+                fontSize: size === 'small' ? 14 : 20,
               },
             ]}
           >
@@ -83,6 +95,7 @@ export const ConcertListItem = ({
                 styles.concertFormattedDate,
                 {
                   fontSize: size === 'small' ? 12 : 14,
+                  marginTop: size === 'small' ? 4 : 8,
                 },
               ]}
             >
@@ -110,24 +123,27 @@ export const ConcertListItem = ({
 const styles = StyleSheet.create({
   concertListItem: {
     width: '100%',
-    backgroundColor: palettes.white,
-    marginBottom: 12,
+    backgroundColor: 'transparent',
+    marginBottom: 16,
     borderRadius: 8,
     borderWidth: 1.5,
-    borderColor: colors.oc.black.value,
+    borderColor: colors.oc.cyan[8].value,
   },
   concertThumbnail: {
     width: '100%',
-    height: 250,
+    aspectRatio: 1 / 1,
     backgroundColor: colors.oc.white.value,
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
-    borderBottomColor: colors.oc.black.value,
-    borderBottomWidth: 1.5,
+    borderRadius: 8,
+  },
+  concertTitle: { fontWeight: 'bold', color: colors.oc.black.value },
+  concertFormattedDate: {
+    fontSize: 14,
+    color: colors.oc.cyan['9'].value,
+  },
+  concertVenue: {
+    color: colors.oc.gray[7].value,
+    fontSize: 14,
   },
-  concertTitle: { fontWeight: 'bold', fontSize: 18, color: colors.oc.black.value },
-  concertFormattedDate: { marginTop: 8, fontSize: 14, color: colors.oc.black.value },
-  concertVenue: { marginTop: 8, color: colors.oc.black.value, fontSize: 14 },
   concertListContentContainer: {
     paddingHorizontal: 12,
     marginTop: 12,
@@ -149,7 +165,6 @@ const styles = StyleSheet.create({
   bottom: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 12,
   },
   subscribeBtnWrapper: { position: 'absolute', right: 12, bottom: 12 },
 })

apps/billets-app/src/features/concert/ui/concert-list/concert-list.tsx

@@ -1,5 +1,5 @@
+import { useUserCurrentLocationStore } from '@/features/location/stores'
 import useConcertListQuery from '@/lib/react-query/queries/useConcertListQuery'
-import { useUserCurrentLocationStore } from '@/lib/stores/userCurrentLocationStore'
 import { CommonListEmpty } from '@/ui'
 import { format } from 'date-fns'
 import { forwardRef, useCallback, useMemo, useState } from 'react'
@@ -104,7 +104,7 @@ export const ConcertList = forwardRef<FlatList, ConcertListProps>(({ onPressItem
 
 const styles = StyleSheet.create({
   concertListContentContainer: {
-    paddingHorizontal: 12,
+    paddingHorizontal: 16,
     marginTop: 12,
     paddingBottom: 24,
     flexGrow: 1,

apps/billets-app/src/features/location/current-location-tracker/current-location-tracker.tsx

@@ -2,7 +2,7 @@ import { permissionsUtils } from '@/features/permissions/permissions.utils'
 import { useCallback, useEffect } from 'react'
 import { AppState } from 'react-native'
 import geolocationUtils from '../../../lib/geolocationUtils'
-import { useUserCurrentLocationStore } from '../../../lib/stores/userCurrentLocationStore'
+import { useUserCurrentLocationStore } from '../stores'
 
 export const CurrentLocationTracker = () => {
   const setUserCurrentLocation = useUserCurrentLocationStore((state) => state.setUserCurrentLocation)

apps/billets-app/src/features/location/index.ts

@@ -1,2 +1,3 @@
 export * from './current-location-tracker'
+export * from './stores'
 export * from './ui'

apps/billets-app/src/features/location/stores/index.ts

@@ -0,0 +1 @@
+export * from './user-current-location-store'

apps/billets-app/src/features/location/stores/user-current-location-store/index.ts

@@ -0,0 +1,2 @@
+export * from './user-curent-location-store'
+export * from './user-current-location-store.types'

apps/billets-app/src/lib/stores/userCurrentLocationStore.ts → apps/billets-app/src/features/location/stores/user-current-location-store/user-curent-location-store.ts

@@ -1,18 +1,7 @@
+import { currentLocationStorage } from '@/lib/storage'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
-import { LatLng } from '../../types/LatLng'
-import { currentLocationStorage } from '../storage/current-location-storage'
-
-export interface UserCurrentLocationStoreState {
-  latitude: number | null
-  longitude: number | null
-}
-
-export interface UserCurrentLocationStoreAction {
-  setUserCurrentLocation: (payload: LatLng) => void
-}
-
-export type UserCurrentLocationStore = UserCurrentLocationStoreState & UserCurrentLocationStoreAction
+import { UserCurrentLocationStore } from './user-current-location-store.types'
 
 export const useUserCurrentLocationStore = create<UserCurrentLocationStore>()(
   persist(

apps/billets-app/src/features/location/stores/user-current-location-store/user-current-location-store.types.ts

@@ -0,0 +1,12 @@
+import { LatLng } from '@/types/LatLng'
+
+export interface UserCurrentLocationStoreState {
+  latitude: number | null
+  longitude: number | null
+}
+
+export interface UserCurrentLocationStoreAction {
+  setUserCurrentLocation: (payload: LatLng) => void
+}
+
+export type UserCurrentLocationStore = UserCurrentLocationStoreState & UserCurrentLocationStoreAction

apps/billets-app/src/features/location/ui/location-selector-modal/location-selector-modal.tsx

@@ -4,8 +4,8 @@ import { StyleSheet, View } from 'react-native'
 import commonStyles from '../../../../lib/common-styles'
 import geolocationUtils from '../../../../lib/geolocationUtils'
 import palettes from '../../../../lib/palettes'
-import { useUserCurrentLocationStore } from '../../../../lib/stores/userCurrentLocationStore'
 import { useHomeScreenNavigation } from '../../../../screens/home-screen/home-screen.hooks'
+import { useUserCurrentLocationStore } from '../../stores'
 
 export const LocationSelectorModal = ({
   visible,

apps/billets-app/src/features/map/ui/concert-map-view/concert-map-view.tsx

@@ -1,4 +1,4 @@
-import { useUserCurrentLocationStore } from '@/lib/stores/userCurrentLocationStore'
+import { useUserCurrentLocationStore } from '@/features/location'
 import { memo, useCallback, useEffect, useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import MapView, { Camera, Region } from 'react-native-maps'

apps/billets-app/src/features/search/store/search-store.utils.ts

@@ -10,7 +10,7 @@ export const getSearchFilterUIValue = (filter: SearchStoreLocationFilterType) =>
 }
 
 export const getViewMode = (snapIndex: SearchStoreSnapIndex) => {
-  if (snapIndex === FULLY_EXPANDED_SNAP_INDEX) {
+  if (snapIndex >= FULLY_EXPANDED_SNAP_INDEX) {
     return 'list'
   }
   return 'map'

apps/billets-app/src/features/subscribe/ui/concert-subscribe-button/concert-subscribe-button.tsx

@@ -1,5 +1,6 @@
-import { Button } from '@coldsurfers/ocean-road/native'
-import { StyleProp, ViewStyle } from 'react-native'
+import { colors } from '@coldsurfers/ocean-road'
+import { IconButton } from '@coldsurfers/ocean-road/native'
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
 
 export const ConcertSubscribeButton = ({
   onPress,
@@ -11,8 +12,20 @@ export const ConcertSubscribeButton = ({
   style?: StyleProp<ViewStyle>
 }) => {
   return (
-    <Button size="sm" theme="border" onPress={onPress} style={style}>
-      {isSubscribed ? 'Following' : 'Follow'}
-    </Button>
+    <IconButton
+      onPress={onPress}
+      style={[styles.bgColor, style]}
+      icon={'Heart'}
+      size="lg"
+      color={colors.oc.cyan[9].value}
+      strokeWidth={isSubscribed ? 1 : 2.5}
+      fill={isSubscribed ? colors.oc.cyan[9].value : 'transparent'}
+    />
   )
 }
+
+const styles = StyleSheet.create({
+  bgColor: {
+    backgroundColor: colors.oc.gray[4].value,
+  },
+})

apps/billets-app/src/lib/storage/current-location-storage.ts

@@ -1,5 +1,5 @@
+import { UserCurrentLocationStore } from '@/features/location/stores'
 import { PersistStorage } from 'zustand/middleware'
-import { UserCurrentLocationStore } from '../stores/userCurrentLocationStore'
 import { mmkvKeys } from './constants'
 import { mmkvInstance } from './mmkvInstance'
 

apps/billets-app/src/lib/stores/index.ts

@@ -0,0 +1 @@
+export * from './ui-store'

apps/billets-app/src/lib/stores/ui-store/index.ts

@@ -0,0 +1 @@
+export * from './ui-store'

apps/billets-app/src/lib/stores/ui-store/ui-store.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand'
+
+export type UIStore = {
+  bottomTabBarVisible: boolean
+  showBottomTabBar: () => void
+  hideBottomTabBar: () => void
+}
+
+export const useUIStore = create<UIStore>((set) => ({
+  bottomTabBarVisible: true,
+  showBottomTabBar: () => set({ bottomTabBarVisible: true }),
+  hideBottomTabBar: () => set({ bottomTabBarVisible: false }),
+}))

apps/billets-app/src/screens/home-screen/home-screen.tsx

@@ -1,4 +1,11 @@
-import { CurrentLocationTracker, LocationSelector, LocationSelectorModal, useToggleSubscribeConcert } from '@/features'
+import {
+  CurrentLocationTracker,
+  LocationSelector,
+  LocationSelectorModal,
+  useToggleSubscribeConcert,
+  useUserCurrentLocationStore,
+} from '@/features'
+import { ConcertListItemT } from '@/features/concert/ui/concert-list/concert-list.types'
 import { AnimatePresence } from '@/ui'
 import { useScrollToTop } from '@react-navigation/native'
 import { useCallback, useRef, useState } from 'react'
@@ -8,7 +15,6 @@ import { useShallow } from 'zustand/shallow'
 import { ConcertList } from '../../features/concert'
 import palettes from '../../lib/palettes'
 import useGetMeQuery from '../../lib/react-query/queries/useGetMeQuery'
-import { useUserCurrentLocationStore } from '../../lib/stores/userCurrentLocationStore'
 import { useHomeScreenNavigation } from './home-screen.hooks'
 
 export const HomeScreen = () => {
@@ -56,19 +62,28 @@ export const HomeScreen = () => {
 
   useScrollToTop(listRef)
 
+  const onPressSubscribe = useCallback(
+    (
+      item: ConcertListItemT,
+      options: {
+        isSubscribed: boolean
+      },
+    ) =>
+      onPressSubscribeConcertListItem({
+        isSubscribed: options.isSubscribed,
+        concertId: item.id,
+      }),
+    [onPressSubscribeConcertListItem],
+  )
+
   return (
     <SafeAreaView edges={['top']} style={styles.wrapper}>
       {latitude === null && longitude === null && <CurrentLocationTracker />}
       <LocationSelector onPress={() => setLocationModalVisible(true)} />
       <ConcertList
         ref={listRef}
         onPressItem={(item) => onPressConcertListItem(item.id)}
-        onPressSubscribe={(item, { isSubscribed }) =>
-          onPressSubscribeConcertListItem({
-            isSubscribed,
-            concertId: item.id,
-          })
-        }
+        onPressSubscribe={onPressSubscribe}
       />
       <AnimatePresence>
         {locationModalVisible && (

apps/billets-app/src/screens/location-selection-screen/location-selection-screen.tsx

@@ -1,9 +1,9 @@
+import { useUserCurrentLocationStore } from '@/features/location/stores'
 import { Text, TextInput } from '@coldsurfers/ocean-road/native'
 import { useCallback, useMemo, useState } from 'react'
 import { SectionList, SectionListData, StyleSheet, TouchableOpacity, View } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import palettes from '../../lib/palettes'
-import { useUserCurrentLocationStore } from '../../lib/stores/userCurrentLocationStore'
 import { LatLng } from '../../types/LatLng'
 import { useLocationSelectionScreenNavigation } from './location-selection-screen.hooks'