Skip to content

Commit ea0ff60

Browse files
codeAbinashcodeAbinash
committed
feat: Add Location icon and implement coordinate notes store; enhance NewCoordinateNotes and LocationDetails components
1 parent 7f4d4b5 commit ea0ff60

File tree

6 files changed

+111
-81
lines changed

6 files changed

+111
-81
lines changed

‎src/assets/icons/icons.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,3 +147,4 @@ export { default as EarthIcon } from '@icons/earth-solid-rounded.svg'
147147
export { default as Timer02Icon } from '@icons/timer-02-solid-rounded.svg'
148148
export { default as ArrowDown01StrokeRoundedIcon } from '@icons/arrow-down-01-stroke-rounded.svg'
149149
export { default as ArrowRight01StrokeRoundedIcon } from '@icons/arrow-right-01-stroke-rounded.svg'
150+
export { default as Location01Icon } from '@icons/location-01-solid-rounded.svg'

‎src/assets/icons/src/location-01-solid-rounded.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/screens/CoordinateNotes/CoordinateNotes.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
1+
import { coordinateNotesStore } from '@screens/CoordinateNotes/coordinateNotesStore'
12
import { PlusSignSolidIcon } from '@assets/icons/icons'
23
import Press from '@components/Press'
34
import SettWrapper from '@components/Settings/SettWrapper'
45
import { useNavigation } from '@react-navigation/native'
56
import fabStyles from '@screens/Home/styles/fabStyles'
7+
import { Medium } from '@utils/fonts'
68
import type { NavProp, StackNav } from '@utils/types'
79
import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'
810
import { useSafeAreaInsets } from 'react-native-safe-area-context'
911
import NoNotes from './NoCoordinateNotes'
1012

1113
export default function CoordinateNotes({ navigation }: NavProp) {
14+
const notes = coordinateNotesStore((state) => state.notes)
1215
return (
1316
<>
1417
<SettWrapper navigation={navigation} title='Coordinate Notes'>
1518
<NoNotes />
19+
<Medium>{JSON.stringify(notes, null, 2)}</Medium>
1620
</SettWrapper>
1721
<FabButton />
1822
</>

‎src/screens/CoordinateNotes/LocationDetails.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import {
2+
DashboardSpeed02Icon,
3+
EarthIcon,
4+
LatitudeIcon,
5+
LongitudeIcon,
6+
Rocket01Icon,
7+
Timer02Icon,
8+
} from '@assets/icons/icons'
9+
import { Gap12 } from '@components/Gap'
10+
import RoundedIcon from '@components/RoundedIcon'
11+
import SettGroup from '@components/Settings/SettGroup'
12+
import { SettOption } from '@components/Settings/SettOption'
13+
import { Txt } from '@components/Text'
14+
import { getLatitude, getLongitude } from '@utils/utils'
15+
import { GeoPosition } from 'react-native-geolocation-service'
16+
17+
export default function LocationDetails({ data }: { data: GeoPosition | undefined }) {
18+
const { coords: { latitude, longitude, accuracy, altitude, altitudeAccuracy, speed } = {}, timestamp } = data || {}
19+
20+
return (
21+
<>
22+
<Gap12>
23+
<SettGroup title='Location Details'>
24+
<SettOption
25+
title='Latitude'
26+
Icon={<RoundedIcon Icon={LongitudeIcon} className='bg-blue-500' />}
27+
Right={<Txt skeleton={latitude === undefined}>{getLatitude(latitude || 0)}</Txt>}
28+
/>
29+
<SettOption
30+
title='Longitude'
31+
Icon={<RoundedIcon Icon={LatitudeIcon} className='bg-green-500' />}
32+
Right={<Txt skeleton={longitude === undefined}>{getLongitude(longitude || 0)}</Txt>}
33+
/>
34+
<SettOption
35+
title='Accuracy'
36+
Icon={<RoundedIcon Icon={DashboardSpeed02Icon} className='bg-rose-500' />}
37+
Right={<Txt skeleton={accuracy === undefined}>{accuracy?.toFixed(0)} m</Txt>}
38+
/>
39+
<SettOption
40+
title='Altitude'
41+
Icon={<RoundedIcon Icon={EarthIcon} className='bg-blue-500' />}
42+
Right={
43+
<Txt skeleton={altitude === undefined}>
44+
{altitude?.toFixed(0)} m ± {altitudeAccuracy?.toFixed(0)} m
45+
</Txt>
46+
}
47+
/>
48+
<SettOption
49+
title='Speed'
50+
Icon={<RoundedIcon Icon={Rocket01Icon} className='bg-orange-500' />}
51+
Right={<Txt skeleton={speed === undefined}>{speed?.toFixed(0)} m/s</Txt>}
52+
/>
53+
<SettOption
54+
title='Timestamp'
55+
Icon={<RoundedIcon Icon={Timer02Icon} className='bg-accent' />}
56+
Right={<Txt skeleton={timestamp === undefined}>{new Date(timestamp || 0).toLocaleString()}</Txt>}
57+
/>
58+
</SettGroup>
59+
</Gap12>
60+
</>
61+
)
62+
}

‎src/screens/CoordinateNotes/NewCoordinateNotes.tsx

Lines changed: 31 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,4 @@
1-
import {
2-
DashboardSpeed02Icon,
3-
EarthIcon,
4-
Home01SolidIcon,
5-
LatitudeIcon,
6-
LongitudeIcon,
7-
MapsLocation02SolidIcon,
8-
Rocket01Icon,
9-
Timer02Icon,
10-
} from '@assets/icons/icons'
1+
import { Home01SolidIcon, Location01Icon, MapsLocation02SolidIcon } from '@assets/icons/icons'
112
import Btn, { BtnTransparent } from '@components/Button'
123
import { Gap12 } from '@components/Gap'
134
import { Input } from '@components/Input'
@@ -16,55 +7,68 @@ import { PaddingBottom } from '@components/SafePadding'
167
import SettGroup from '@components/Settings/SettGroup'
178
import { SettOption } from '@components/Settings/SettOption'
189
import SettWrapper from '@components/Settings/SettWrapper'
19-
import { Txt } from '@components/Text'
10+
import { coordinateNotesStore } from '@screens/CoordinateNotes/coordinateNotesStore'
2011
import { fetchLocation } from '@screens/CoordinateNotes/lib'
2112
import { useQuery } from '@tanstack/react-query'
2213
import { NavProp } from '@utils/types'
23-
import { getLatitude, getLongitude } from '@utils/utils'
14+
import { useState } from 'react'
2415
import { View } from 'react-native'
2516
import { GeoPosition } from 'react-native-geolocation-service'
17+
import LocationDetails from './LocationDetails'
2618

2719
export default function NewCoordinateNotes({ navigation }: NavProp) {
28-
const { data, isFetching, refetch } = useQuery({
20+
const [name, setName] = useState<string>('')
21+
const [description, setDescription] = useState<string>('')
22+
const newNote = coordinateNotesStore((state) => state.newNote)
23+
24+
const { data, isFetching, refetch, isPending } = useQuery({
2925
queryFn: fetchLocation,
3026
queryKey: ['currentLocation'],
3127
})
3228

29+
const isDisabled = name?.trim().length === 0 || isFetching || isPending
30+
31+
function handleSave() {
32+
console.log('Save Location Note')
33+
console.log(name, description, data)
34+
newNote({
35+
title: name,
36+
description,
37+
location: data as GeoPosition,
38+
})
39+
navigation.goBack()
40+
}
41+
3342
return (
3443
<SettWrapper
3544
className='flex-1'
36-
// Header={
37-
// <BackHeader
38-
// title={'New Location Note'}
39-
// navigation={navigation}
40-
// Right={
41-
// <Press>
42-
// <SemiBold className='text-sm text-accent'>Save</SemiBold>
43-
// </Press>
44-
// }
45-
// />
46-
// }
4745
title={'New Location Note'}
4846
>
4947
<Gap12 className='mt-3'>
5048
<SettGroup title='Location Name'>
5149
<Input
52-
Icon={<RoundedIcon Icon={MapsLocation02SolidIcon} className='bg-blue-500' />}
50+
Icon={<RoundedIcon Icon={Location01Icon} className='bg-blue-500' />}
5351
placeholder='Enter a name for this location'
52+
value={name}
53+
onChangeText={setName}
54+
autoFocus
5455
/>
5556
</SettGroup>
5657
<SettGroup title='Description'>
5758
<Input
5859
placeholder='This is a input field with multiple lines. You can type as much as you want.'
5960
multiline
6061
numberOfLines={10}
62+
value={description}
63+
onChangeText={setDescription}
64+
Icon={<RoundedIcon Icon={MapsLocation02SolidIcon} className='bg-slate-500' />}
6165
/>
6266
</SettGroup>
6367
<SettGroup title='Tag'>
6468
<SettOption
6569
title=''
6670
placeholder='Add a tag'
67-
Icon={<RoundedIcon Icon={Home01SolidIcon} className='bg-blue-500' />}
71+
Icon={<RoundedIcon Icon={Home01SolidIcon} className='bg-rose-500' />}
6872
onPress={() => navigation.navigate('Tags')}
6973
arrow
7074
/>
@@ -76,60 +80,10 @@ export default function NewCoordinateNotes({ navigation }: NavProp) {
7680
disabled={isFetching}
7781
/>
7882
<View className='px-5'>
79-
<Btn title={'Save Location Note'} onPress={() => navigation.goBack()} />
83+
<Btn title={'Save Location Note'} onPress={handleSave} disabled={isDisabled} />
8084
<PaddingBottom />
8185
</View>
8286
</Gap12>
8387
</SettWrapper>
8488
)
8589
}
86-
87-
function LocationDetails({ data }: { data: GeoPosition | undefined }) {
88-
console.log(data?.coords.latitude)
89-
const { coords: { latitude, longitude, accuracy, altitude, altitudeAccuracy, speed } = {}, timestamp } = data || {}
90-
91-
console.log(latitude, longitude, accuracy, altitude, altitudeAccuracy, speed, timestamp)
92-
93-
return (
94-
<>
95-
<Gap12>
96-
<SettGroup title='Location Details'>
97-
<SettOption
98-
title='Latitude'
99-
Icon={<RoundedIcon Icon={LongitudeIcon} className='bg-blue-500' />}
100-
Right={<Txt skeleton={latitude === undefined}>{getLatitude(latitude || 0)}</Txt>}
101-
/>
102-
<SettOption
103-
title='Longitude'
104-
Icon={<RoundedIcon Icon={LatitudeIcon} className='bg-green-500' />}
105-
Right={<Txt skeleton={longitude === undefined}>{getLongitude(longitude || 0)}</Txt>}
106-
/>
107-
<SettOption
108-
title='Accuracy'
109-
Icon={<RoundedIcon Icon={DashboardSpeed02Icon} className='bg-rose-500' />}
110-
Right={<Txt skeleton={accuracy === undefined}>{accuracy?.toFixed(0)} m</Txt>}
111-
/>
112-
<SettOption
113-
title='Altitude'
114-
Icon={<RoundedIcon Icon={EarthIcon} className='bg-blue-500' />}
115-
Right={
116-
<Txt skeleton={altitude === undefined}>
117-
{altitude?.toFixed(0)} m ± {altitudeAccuracy?.toFixed(0)} m
118-
</Txt>
119-
}
120-
/>
121-
<SettOption
122-
title='Speed'
123-
Icon={<RoundedIcon Icon={Rocket01Icon} className='bg-orange-500' />}
124-
Right={<Txt skeleton={speed === undefined}>{speed?.toFixed(0)} m/s</Txt>}
125-
/>
126-
<SettOption
127-
title='Timestamp'
128-
Icon={<RoundedIcon Icon={Timer02Icon} className='bg-accent' />}
129-
Right={<Txt skeleton={timestamp === undefined}>{new Date(timestamp || 0).toLocaleString()}</Txt>}
130-
/>
131-
</SettGroup>
132-
</Gap12>
133-
</>
134-
)
135-
}

‎src/zustand/coordinateNotesStore.ts renamed to ‎src/screens/CoordinateNotes/coordinateNotesStore.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
import S from '@utils/storage'
2+
import { GeoPosition } from 'react-native-geolocation-service'
23
import { create } from 'zustand'
34

45
type Note = {
56
title: string
67
description: string
7-
coordinate: {
8-
latitude: number
9-
longitude: number
10-
}
8+
location: GeoPosition
119
}
1210

1311
type CoordinateNotesStore = {
1412
notes: Note[]
1513
setNotes: (notes: Note[]) => void
14+
newNote: (note: Note) => void
1615
}
1716

1817
export const coordinateNotesStore = create<CoordinateNotesStore>((set) => ({
1918
notes: getNotes(),
2019
setNotes: (notes: Note[]) => setNotes(notes, set),
20+
newNote : (note: Note) => newNote(note, set),
2121
}))
2222

2323
type Set = (fn: (state: CoordinateNotesStore) => CoordinateNotesStore) => void
@@ -26,6 +26,12 @@ function getNotes() {
2626
return JSON.parse(S.get('CoordinateNotes') || '[]')
2727
}
2828

29+
function newNote(note: Note, set: Set) {
30+
const notes = getNotes()
31+
notes.push(note)
32+
setNotes(notes, set)
33+
}
34+
2935
function setNotes(notes: Note[], set: Set) {
3036
S.set('CoordinateNotes', JSON.stringify(notes))
3137
set((state) => ({ ...state, notes }))

0 commit comments

Comments
 (0)