feat: Refactor Coordinate Notes screens; add LocationTags and CoordinateNote components, update navigation and store types

Author: codeAbinash

App.tsx

@@ -9,7 +9,7 @@ import { CardStyleInterpolators, createStackNavigator, type StackNavigationOptio
 import ComputerScienceSettings from '@screens/ComputerScience/ComputerScienceSettings'
 import CoordinateNotes from '@screens/CoordinateNotes/CoordinateNotes'
 import NewCoordinateNotes from '@screens/CoordinateNotes/NewCoordinateNotes'
-import Tags from '@screens/CoordinateNotes/Tags'
+import LocationTags from '@screens/CoordinateNotes/LocationTags'
 import DeveloperOptions from '@screens/DeveloperOptions/DeveloperOptions'
 import MMKVDataEditor, { type MMKVDataEditorParamList } from '@screens/DeveloperOptions/MMKVDataEditor'
 import MMKVDataList from '@screens/DeveloperOptions/MMKVDataList'
@@ -61,6 +61,7 @@ import { Dimensions, SafeAreaView, useColorScheme } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'
 import './global.css'
+import CoordinateNote, { CoordinateNoteParamList } from '@screens/CoordinateNotes/CoordinateNote'
 
 function App(): React.JSX.Element {
   const scheme = useColorScheme()
@@ -197,14 +198,16 @@ function Navigation() {
         <Stack.Screen name='Onboarding' component={Onboarding} options={NO_ANIMATION} />
         <Stack.Screen name='CoordinateNotes' component={CoordinateNotes} options={GestureEnabled} />
         <Stack.Screen name='NewCoordinateNotes' component={NewCoordinateNotes} options={GestureEnabled} />
-        <Stack.Screen name='Tags' component={Tags} options={IOS_BOTTOM_STYLE} />
+        <Stack.Screen name='LocationTags' component={LocationTags} options={IOS_BOTTOM_STYLE} />
+        <Stack.Screen name='CoordinateNote' component={CoordinateNote} options={GestureEnabled} />
       </Stack.Navigator>
     </>
   )
 }
 
 export type RootStackParamList = {
-  Tags: undefined
+  CoordinateNote: CoordinateNoteParamList
+  LocationTags: undefined
   Home: undefined
   Location: undefined
   Test: undefined

src/screens/CoordinateNotes/CoordinateNote.tsx

@@ -0,0 +1,30 @@
+import SettWrapper from '@components/Settings/SettWrapper'
+import { RouteProp } from '@react-navigation/native'
+import { LocationNote } from '@screens/CoordinateNotes/coordinateNotesStore'
+import { Medium } from '@utils/fonts'
+import type { StackNav } from '@utils/types'
+
+type ParamList = {
+  CoordinateNote: CoordinateNoteParamList
+}
+
+export type CoordinateNoteParamList = {
+  data: LocationNote
+}
+
+type CoordinateNoteProps = {
+  route: RouteProp<ParamList, 'CoordinateNote'>
+  navigation: StackNav
+}
+
+export default function CoordinateNote({ navigation, route }: CoordinateNoteProps) {
+  const data = route.params.data
+
+  return (
+    <>
+      <SettWrapper navigation={navigation} title={data.title}>
+        <Medium>{JSON.stringify(data, null, 2)}</Medium>
+      </SettWrapper>
+    </>
+  )
+}

src/screens/CoordinateNotes/CoordinateNotes.tsx

@@ -1,10 +1,14 @@
-import { coordinateNotesStore } from '@screens/CoordinateNotes/coordinateNotesStore'
-import { PlusSignSolidIcon } from '@assets/icons/icons'
+import { Location01Icon, PlusSignSolidIcon } from '@assets/icons/icons'
+import { Gap12 } from '@components/Gap'
 import Press from '@components/Press'
+import RoundedIcon from '@components/RoundedIcon'
+import SettGroup from '@components/Settings/SettGroup'
+import { SettOption } from '@components/Settings/SettOption'
+import SettText from '@components/Settings/SettText'
 import SettWrapper from '@components/Settings/SettWrapper'
 import { useNavigation } from '@react-navigation/native'
+import { coordinateNotesStore } from '@screens/CoordinateNotes/coordinateNotesStore'
 import fabStyles from '@screens/Home/styles/fabStyles'
-import { Medium } from '@utils/fonts'
 import type { NavProp, StackNav } from '@utils/types'
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -15,8 +19,25 @@ export default function CoordinateNotes({ navigation }: NavProp) {
   return (
     <>
       <SettWrapper navigation={navigation} title='Coordinate Notes'>
-        <NoNotes />
-        <Medium>{JSON.stringify(notes, null, 2)}</Medium>
+        <NoNotes notes={notes} />
+        <Gap12>
+          <SettText className='mt-3.5'>
+            {notes.length === 0
+              ? ''
+              : `Found ${notes.length} note${notes.length > 1 ? 's' : ''}. Tap on a note to view details.`}
+          </SettText>
+          <SettGroup title='Notes'>
+            {notes.map((item) => (
+              <SettOption
+                key={item.location.timestamp}
+                title={item.title}
+                Icon={<RoundedIcon Icon={Location01Icon} />}
+                arrow
+                onPress={() => navigation.navigate('CoordinateNote', { data: item })}
+              />
+            ))}
+          </SettGroup>
+        </Gap12>
       </SettWrapper>
       <FabButton />
     </>

src/screens/CoordinateNotes/Tags.tsx renamed to src/screens/CoordinateNotes/LocationTags.tsx

@@ -4,7 +4,7 @@ import { Bold, Medium } from '@utils/fonts'
 import { StatusBar, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 
-export default function Tags() {
+export default function LocationTags() {
   return (
     <View className='flex-1 bg-zinc-50 dark:bg-zinc-950'>
       <StatusBar barStyle='default' />

src/screens/CoordinateNotes/NewCoordinateNotes.tsx

@@ -69,7 +69,7 @@ export default function NewCoordinateNotes({ navigation }: NavProp) {
             title=''
             placeholder='Add a tag'
             Icon={<RoundedIcon Icon={Home01SolidIcon} className='bg-rose-500' />}
-            onPress={() => navigation.navigate('Tags')}
+            onPress={() => navigation.navigate('LocationTags')}
             arrow
           />
         </SettGroup>

src/screens/CoordinateNotes/NoCoordinateNotes.tsx

@@ -3,8 +3,10 @@ import { Lottie } from '@components/Lottie'
 import { W } from '@utils/dimensions'
 import { Regular } from '@utils/fonts'
 import { View } from 'react-native'
+import { LocationNote } from './coordinateNotesStore'
 
-export default function CoordinateNotes() {
+export default function CoordinateNotes({ notes }: { notes: LocationNote[] }) {
+  if (notes.length > 0) return null
   return (
     <View>
       <Lottie source={Animations.location} size={W} />

src/screens/CoordinateNotes/coordinateNotesStore.ts

@@ -2,22 +2,22 @@ import S from '@utils/storage'
 import { GeoPosition } from 'react-native-geolocation-service'
 import { create } from 'zustand'
 
-type Note = {
+export type LocationNote = {
   title: string
   description: string
   location: GeoPosition
 }
 
 type CoordinateNotesStore = {
-  notes: Note[]
-  setNotes: (notes: Note[]) => void
-  newNote: (note: Note) => void
+  notes: LocationNote[]
+  setNotes: (notes: LocationNote[]) => void
+  newNote: (note: LocationNote) => void
 }
 
 export const coordinateNotesStore = create<CoordinateNotesStore>((set) => ({
   notes: getNotes(),
-  setNotes: (notes: Note[]) => setNotes(notes, set),
-  newNote : (note: Note) => newNote(note, set),
+  setNotes: (notes: LocationNote[]) => setNotes(notes, set),
+  newNote: (note: LocationNote) => newNote(note, set),
 }))
 
 type Set = (fn: (state: CoordinateNotesStore) => CoordinateNotesStore) => void
@@ -26,13 +26,13 @@ function getNotes() {
   return JSON.parse(S.get('CoordinateNotes') || '[]')
 }
 
-function newNote(note: Note, set: Set) {
+function newNote(note: LocationNote, set: Set) {
   const notes = getNotes()
   notes.push(note)
   setNotes(notes, set)
 }
 
-function setNotes(notes: Note[], set: Set) {
+function setNotes(notes: LocationNote[], set: Set) {
   S.set('CoordinateNotes', JSON.stringify(notes))
   set((state) => ({ ...state, notes }))
 }