feat: Enhance Coordinate Notes functionality; add update and delete operations, improve UI components, and integrate location mapping

codeAbinash · codeAbinash · commit 2e1628e60f75 · 2025-06-01T20:13:48.000+05:30
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
@@ -1,4 +1,8 @@
-I am using bun package manager
-Do not add unnecessary comments for my understanding.
-Icons are used from hugeicons if you want to add extra icons to the library, you can add it running `ic-old iconName` command.
-`iconName` is from the hugeicons website.
+- I am using bun package manager
+
+- Do not add unnecessary comments for my understanding.
+
+- Icons are used from hugeicons if you want to add extra icons to the library, you can add it running `ic-old iconName` command.
+`iconName` is from the hugeicons website.
+
+- No need to fix formatting related issues.
diff --git a/src/screens/CoordinateNotes/CoordinateNote.tsx b/src/screens/CoordinateNotes/CoordinateNote.tsx
@@ -1,8 +1,19 @@
+import popupStore from '@/zustand/popupStore'
+import { Home01SolidIcon, Location01Icon, MapsLocation02SolidIcon } from '@assets/icons/icons'
+import Btn from '@components/Button'
+import { Gap12 } from '@components/Gap'
+import { Input } from '@components/Input'
+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 { RouteProp } from '@react-navigation/native'
-import { LocationNote } from '@screens/CoordinateNotes/coordinateNotesStore'
-import { Medium } from '@utils/fonts'
+import { coordinateNotesStore, LocationNote } from '@screens/CoordinateNotes/coordinateNotesStore'
 import type { StackNav } from '@utils/types'
+import { useCallback, useEffect, useState } from 'react'
+import { BackHandler, View } from 'react-native'
+import LocationDetails from './LocationDetails'
 
 type ParamList = {
   CoordinateNote: CoordinateNoteParamList
@@ -18,12 +29,91 @@ type CoordinateNoteProps = {
 }
 
 export default function CoordinateNote({ navigation, route }: CoordinateNoteProps) {
+  const alert = popupStore((store) => store.alert)
   const data = route.params.data
+  const [name, setName] = useState<string>(data.title || '')
+  const [description, setDescription] = useState<string>(data.description || '')
+  const updateNote = coordinateNotesStore((state) => state.updateNote)
+  const deleteNote = coordinateNotesStore((state) => state.deleteNote)
+
+  const handleSave = useCallback(() => {
+    if (!name || name.trim().length === 0) return
+    updateNote({
+      title: name.trim(),
+      description: description.trim(),
+      location: data.location,
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data.location, description, name])
+
+  const handleRemove = useCallback(() => {
+    alert('Delete this note?', 'Are you sure you want to delete this note? This action cannot be undone.', [
+      { text: 'Cancel' },
+      {
+        text: 'Delete',
+        onPress: () => {
+          deleteNote(data.location.timestamp)
+          navigation.goBack()
+        },
+      },
+    ])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const onBackPress = useCallback(() => {
+    handleSave()
+    return false
+  }, [handleSave])
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress)
+    return () => backHandler.remove()
+  }, [onBackPress])
+
+  useEffect(() => {
+    const timer = setTimeout(handleSave, 500)
+    return () => clearTimeout(timer)
+  }, [handleSave])
 
   return (
     <>
-      <SettWrapper navigation={navigation} title={data.title}>
-        <Medium>{JSON.stringify(data, null, 2)}</Medium>
+      <SettWrapper navigation={navigation} title={name || 'Location Note'}>
+        <Gap12 className='mt-3'>
+          <SettGroup title='Location Name'>
+            <Input
+              Icon={<RoundedIcon Icon={Location01Icon} />}
+              placeholder='Enter a name for this location'
+              value={name}
+              onChangeText={setName}
+            />
+          </SettGroup>
+          <SettGroup title='Description'>
+            <Input
+              placeholder='This is a input field with multiple lines. You can type as much as you want.'
+              multiline
+              numberOfLines={10}
+              value={description}
+              onChangeText={setDescription}
+              Icon={<RoundedIcon Icon={MapsLocation02SolidIcon} className='bg-slate-500' />}
+            />
+          </SettGroup>
+          <SettGroup title='Tag'>
+            <SettOption
+              title=''
+              placeholder='Add a tag'
+              Icon={<RoundedIcon Icon={Home01SolidIcon} className='bg-rose-500' />}
+              onPress={() => navigation.navigate('LocationTags')}
+              arrow
+            />
+          </SettGroup>
+          <LocationDetails data={data.location} />
+          <SettText>
+            Deleting this note will remove it from the list of coordinate notes. This action cannot be undone.
+          </SettText>
+          <View className='mt-5 px-5'>
+            <Btn title={'Delete Note'} className='bg-red-500' onPress={handleRemove} />
+          </View>
+        </Gap12>
       </SettWrapper>
     </>
   )
diff --git a/src/screens/CoordinateNotes/CoordinateNotes.tsx b/src/screens/CoordinateNotes/CoordinateNotes.tsx
@@ -7,7 +7,7 @@ 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 { coordinateNotesStore, LocationNote } from '@screens/CoordinateNotes/coordinateNotesStore'
 import fabStyles from '@screens/Home/styles/fabStyles'
 import type { NavProp, StackNav } from '@utils/types'
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'
@@ -20,30 +20,38 @@ export default function CoordinateNotes({ navigation }: NavProp) {
     <>
       <SettWrapper navigation={navigation} title='Coordinate Notes'>
         <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>
+        <NotesList notes={notes} />
       </SettWrapper>
       <FabButton />
     </>
   )
 }
 
+function NotesList({ notes }: { notes: LocationNote[] }) {
+  const navigation = useNavigation<StackNav>()
+  if (!notes || notes.length === 0) return null
+  return (
+    <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>
+  )
+}
+
 export const FabButton = () => {
   const navigation = useNavigation<StackNav>()
   const bottom = useSafeAreaInsets().bottom
diff --git a/src/screens/CoordinateNotes/LocationDetails.tsx b/src/screens/CoordinateNotes/LocationDetails.tsx
@@ -3,6 +3,7 @@ import {
   EarthIcon,
   LatitudeIcon,
   LongitudeIcon,
+  MapsLocation02SolidIcon,
   Rocket01Icon,
   Timer02Icon,
 } from '@assets/icons/icons'
@@ -12,6 +13,7 @@ import SettGroup from '@components/Settings/SettGroup'
 import { SettOption } from '@components/Settings/SettOption'
 import { Txt } from '@components/Text'
 import { getLatitude, getLongitude } from '@utils/utils'
+import { Linking } from 'react-native'
 import { GeoPosition } from 'react-native-geolocation-service'
 
 export default function LocationDetails({ data }: { data: GeoPosition | undefined }) {
@@ -56,6 +58,18 @@ export default function LocationDetails({ data }: { data: GeoPosition | undefine
             Right={<Txt skeleton={timestamp === undefined}>{new Date(timestamp || 0).toLocaleString()}</Txt>}
           />
         </SettGroup>
+        {latitude && longitude && (
+          <SettGroup title='View on Map'>
+            <SettOption
+              title='View on Map'
+              Icon={<RoundedIcon Icon={MapsLocation02SolidIcon} className='bg-green-500' />}
+              onPress={() =>
+                Linking.openURL(`https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`)
+              }
+              arrow
+            />
+          </SettGroup>
+        )}
       </Gap12>
     </>
   )
diff --git a/src/screens/CoordinateNotes/NewCoordinateNotes.tsx b/src/screens/CoordinateNotes/NewCoordinateNotes.tsx
@@ -1,57 +1,64 @@
 import { Home01SolidIcon, Location01Icon, MapsLocation02SolidIcon } from '@assets/icons/icons'
-import Btn, { BtnTransparent } from '@components/Button'
+import { BtnTransparent } from '@components/Button'
 import { Gap12 } from '@components/Gap'
 import { Input } from '@components/Input'
 import RoundedIcon from '@components/RoundedIcon'
-import { PaddingBottom } from '@components/SafePadding'
 import SettGroup from '@components/Settings/SettGroup'
 import { SettOption } from '@components/Settings/SettOption'
 import SettWrapper from '@components/Settings/SettWrapper'
 import { coordinateNotesStore } from '@screens/CoordinateNotes/coordinateNotesStore'
 import { fetchLocation } from '@screens/CoordinateNotes/lib'
 import { useQuery } from '@tanstack/react-query'
 import { NavProp } from '@utils/types'
-import { useState } from 'react'
-import { View } from 'react-native'
+import { useCallback, useEffect, useState } from 'react'
+import { BackHandler, View } from 'react-native'
 import { GeoPosition } from 'react-native-geolocation-service'
 import LocationDetails from './LocationDetails'
 
 export default function NewCoordinateNotes({ navigation }: NavProp) {
   const [name, setName] = useState<string>('')
   const [description, setDescription] = useState<string>('')
-  const newNote = coordinateNotesStore((state) => state.newNote)
+  const updateNote = coordinateNotesStore((state) => state.updateNote)
 
-  const { data, isFetching, refetch, isPending } = useQuery({
+  const { data, isFetching, refetch } = useQuery({
     queryFn: fetchLocation,
     queryKey: ['currentLocation'],
   })
 
-  const isDisabled = name?.trim().length === 0 || isFetching || isPending
-
-  function handleSave() {
-    console.log('Save Location Note')
-    console.log(name, description, data)
-    newNote({
-      title: name,
-      description,
+  const handleSave = useCallback(() => {
+    if (!name || name.trim().length === 0) return
+    updateNote({
+      title: name.trim(),
+      description: description.trim(),
       location: data as GeoPosition,
     })
-    navigation.goBack()
-  }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, description, name])
+
+  const onBackPress = useCallback(() => {
+    handleSave()
+    return false
+  }, [handleSave])
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress)
+    return () => backHandler.remove()
+  }, [onBackPress])
+
+  useEffect(() => {
+    const timer = setTimeout(handleSave, 500)
+    return () => clearTimeout(timer)
+  }, [handleSave])
 
   return (
-    <SettWrapper
-      className='flex-1'
-      title={'New Location Note'}
-    >
+    <SettWrapper className='flex-1' title={name || 'New Location Note'}>
       <Gap12 className='mt-3'>
         <SettGroup title='Location Name'>
           <Input
-            Icon={<RoundedIcon Icon={Location01Icon} className='bg-blue-500' />}
+            Icon={<RoundedIcon Icon={Location01Icon} />}
             placeholder='Enter a name for this location'
             value={name}
             onChangeText={setName}
-            autoFocus
           />
         </SettGroup>
         <SettGroup title='Description'>
@@ -74,14 +81,12 @@ export default function NewCoordinateNotes({ navigation }: NavProp) {
           />
         </SettGroup>
         <LocationDetails data={data} />
-        <BtnTransparent
-          title={isFetching ? 'Fetching...' : 'Refetch Location'}
-          onPress={() => refetch()}
-          disabled={isFetching}
-        />
         <View className='px-5'>
-          <Btn title={'Save Location Note'} onPress={handleSave} disabled={isDisabled} />
-          <PaddingBottom />
+          <BtnTransparent
+            title={isFetching ? 'Fetching...' : 'Refetch Location'}
+            onPress={() => refetch()}
+            disabled={isFetching}
+          />
         </View>
       </Gap12>
     </SettWrapper>
diff --git a/src/screens/CoordinateNotes/coordinateNotesStore.ts b/src/screens/CoordinateNotes/coordinateNotesStore.ts
@@ -12,12 +12,16 @@ type CoordinateNotesStore = {
   notes: LocationNote[]
   setNotes: (notes: LocationNote[]) => void
   newNote: (note: LocationNote) => void
+  updateNote: (note: LocationNote) => void
+  deleteNote: (timestamp: number) => void
 }
 
 export const coordinateNotesStore = create<CoordinateNotesStore>((set) => ({
   notes: getNotes(),
   setNotes: (notes: LocationNote[]) => setNotes(notes, set),
   newNote: (note: LocationNote) => newNote(note, set),
+  updateNote: (note: LocationNote) => updateNote(note, set),
+  deleteNote: (timestamp: number) => deleteNote(timestamp, set),
 }))
 
 type Set = (fn: (state: CoordinateNotesStore) => CoordinateNotesStore) => void
@@ -32,6 +36,19 @@ function newNote(note: LocationNote, set: Set) {
   setNotes(notes, set)
 }
 
+function updateNote(note: LocationNote, set: Set) {
+  const notes = getNotes()
+  const index = notes.findIndex((n: LocationNote) => n.location.timestamp === note.location.timestamp)
+  index !== -1 ? (notes[index] = note) : notes.push(note)
+  setNotes(notes, set)
+}
+
+function deleteNote(timestamp: number, set: Set) {
+  const notes = getNotes()
+  const filteredNotes = notes.filter((note: LocationNote) => note.location.timestamp !== timestamp)
+  setNotes(filteredNotes, set)
+}
+
 function setNotes(notes: LocationNote[], set: Set) {
   S.set('CoordinateNotes', JSON.stringify(notes))
   set((state) => ({ ...state, notes }))
