Skip to content

Commit 90785f4

Browse files
codeAbinashcodeAbinash
committed
feat: Update icons in LocationNote and NewLocationNote components for improved clarity
1 parent 44b657f commit 90785f4

17 files changed

+201
-141
lines changed

‎App.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import { queryClient } from '@query/index'
77
import { NavigationContainer, useNavigation } from '@react-navigation/native'
88
import { CardStyleInterpolators, createStackNavigator, type StackNavigationOptions } from '@react-navigation/stack'
99
import ComputerScienceSettings from '@screens/ComputerScience/ComputerScienceSettings'
10-
import { LocationNoteParamList } from '@screens/CoordinateNotes/LocationNote'
11-
import LocationNotes from '@screens/CoordinateNotes/LocationNotes'
12-
import LocationNote from '@screens/CoordinateNotes/LocationNote'
13-
import LocationTags from '@screens/CoordinateNotes/LocationTags'
10+
import { LocationNoteParamList } from '@screens/LocationNotes/LocationNote'
11+
import LocationNotes from '@screens/LocationNotes/LocationNotes'
12+
import LocationNote from '@screens/LocationNotes/LocationNote'
13+
import LocationTags from '@screens/LocationNotes/LocationTags'
1414
import DeveloperOptions from '@screens/DeveloperOptions/DeveloperOptions'
1515
import MMKVDataEditor, { type MMKVDataEditorParamList } from '@screens/DeveloperOptions/MMKVDataEditor'
1616
import MMKVDataList from '@screens/DeveloperOptions/MMKVDataList'
@@ -62,7 +62,7 @@ import { Dimensions, SafeAreaView, useColorScheme } from 'react-native'
6262
import { GestureHandlerRootView } from 'react-native-gesture-handler'
6363
import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'
6464
import './global.css'
65-
import NewLocationNote from '@screens/CoordinateNotes/NewLocationNotes'
65+
import NewLocationNote from '@screens/LocationNotes/NewLocationNotes'
6666

6767
function App(): React.JSX.Element {
6868
const scheme = useColorScheme()

‎src/components/BackHeader.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default function BackHeader({ navigation, Right, title, Title, onBackPres
3030
<ArrowLeft01Icon width={26} height={26} color={scheme === 'dark' ? Colors.zinc[200] : Colors.zinc[800]} />
3131
</TouchableOpacity>
3232
<SemiBold
33-
style={{ fontSize: 14.3, flex: 1, paddingBottom: 2 }}
33+
style={{ fontSize: 14.3, flex: 1, paddingBottom: 5 }}
3434
className='mt-0.5 text-zinc-800 dark:text-zinc-200'
3535
numberOfLines={1}
3636
>

‎src/screens/CoordinateNotes/LocationNotes.tsx

Lines changed: 0 additions & 84 deletions
This file was deleted.

‎src/screens/CoordinateNotes/NoLocationNotes.tsx

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎src/screens/LocationNotes/CoordinateNote.tsx

Whitespace-only changes.

‎src/screens/CoordinateNotes/LocationDetails.tsx renamed to ‎src/screens/LocationNotes/LocationDetails.tsx

File renamed without changes.

‎src/screens/CoordinateNotes/LocationNote.tsx renamed to ‎src/screens/LocationNotes/LocationNote.tsx

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import popupStore from '@/zustand/popupStore'
2-
import { Home01SolidIcon, Location01Icon, MapsLocation02SolidIcon } from '@assets/icons/icons'
2+
import { InformationCircleSolidIcon, MapsLocation02SolidIcon } from '@assets/icons/icons'
33
import Btn from '@components/Button'
44
import { Gap12 } from '@components/Gap'
55
import { Input } from '@components/Input'
66
import RoundedIcon from '@components/RoundedIcon'
77
import SettGroup from '@components/Settings/SettGroup'
8-
import { SettOption } from '@components/Settings/SettOption'
98
import SettText from '@components/Settings/SettText'
109
import SettWrapper from '@components/Settings/SettWrapper'
1110
import { RouteProp } from '@react-navigation/native'
12-
import { coordinateNotesStore, type LocationNote } from '@screens/CoordinateNotes/locationNotesStore'
11+
import { locationNotesStore, type LocationNote } from '@screens/LocationNotes/locationNotesStore'
1312
import type { StackNav } from '@utils/types'
1413
import { useCallback, useEffect, useState } from 'react'
1514
import { BackHandler, View } from 'react-native'
@@ -33,8 +32,8 @@ export default function LocationNote({ navigation, route }: LocationNoteProps) {
3332
const data = route.params.data
3433
const [name, setName] = useState<string>(data.title || '')
3534
const [description, setDescription] = useState<string>(data.description || '')
36-
const updateNote = coordinateNotesStore((state) => state.updateNote)
37-
const deleteNote = coordinateNotesStore((state) => state.deleteNote)
35+
const updateNote = locationNotesStore((state) => state.updateNote)
36+
const deleteNote = locationNotesStore((state) => state.deleteNote)
3837

3938
const handleSave = useCallback(() => {
4039
if (!name || name.trim().length === 0 || !data) return
@@ -81,7 +80,7 @@ export default function LocationNote({ navigation, route }: LocationNoteProps) {
8180
<Gap12 className='mt-3'>
8281
<SettGroup title='Location Name'>
8382
<Input
84-
Icon={<RoundedIcon Icon={Location01Icon} />}
83+
Icon={<RoundedIcon Icon={MapsLocation02SolidIcon} />}
8584
placeholder='Enter a name for this location'
8685
value={name}
8786
onChangeText={setName}
@@ -94,22 +93,20 @@ export default function LocationNote({ navigation, route }: LocationNoteProps) {
9493
numberOfLines={10}
9594
value={description}
9695
onChangeText={setDescription}
97-
Icon={<RoundedIcon Icon={MapsLocation02SolidIcon} className='bg-slate-500' />}
96+
Icon={<RoundedIcon Icon={InformationCircleSolidIcon} className='bg-slate-500' />}
9897
/>
9998
</SettGroup>
100-
<SettGroup title='Tag'>
99+
{/* <SettGroup title='Tag'>
101100
<SettOption
102101
title=''
103102
placeholder='Add a tag'
104103
Icon={<RoundedIcon Icon={Home01SolidIcon} className='bg-rose-500' />}
105104
onPress={() => navigation.navigate('LocationTags')}
106105
arrow
107106
/>
108-
</SettGroup>
107+
</SettGroup> */}
109108
<LocationDetails data={data.location} />
110-
<SettText>
111-
Deleting this note will remove it from the list of location notes.
112-
</SettText>
109+
<SettText>Deleting this note will remove it from the list of location notes.</SettText>
113110
<View className='mt-5 px-5'>
114111
<Btn title={'Delete Note'} className='bg-red-500' onPress={handleRemove} />
115112
</View>

‎src/screens/LocationNotes/LocationNotes.tsx

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import { MapsLocation02SolidIcon, PlusSignSolidIcon } from '@assets/icons/icons'
2+
import BackHeader from '@components/BackHeader'
3+
import { Gap12 } from '@components/Gap'
4+
import Press from '@components/Press'
5+
import RoundedIcon from '@components/RoundedIcon'
6+
import Search from '@components/Search'
7+
import SettGroup from '@components/Settings/SettGroup'
8+
import { SettOption } from '@components/Settings/SettOption'
9+
import SettText from '@components/Settings/SettText'
10+
import SettWrapper from '@components/Settings/SettWrapper'
11+
import { useNavigation } from '@react-navigation/native'
12+
import fabStyles from '@screens/Home/styles/fabStyles'
13+
import { LocationNote, locationNotesStore } from '@screens/LocationNotes/locationNotesStore'
14+
import { Medium } from '@utils/fonts'
15+
import type { NavProp, StackNav } from '@utils/types'
16+
import { delayedFadeAnimationSearch, exiting, layout } from '@utils/utils'
17+
import { useEffect, useState } from 'react'
18+
import { View } from 'react-native'
19+
import Animated, { FadeIn, FadeOut, ZoomIn, ZoomOut } from 'react-native-reanimated'
20+
import { useSafeAreaInsets } from 'react-native-safe-area-context'
21+
import NoLocationNotes from './NoLocationNotes'
22+
23+
export default function LocationNotes({ navigation }: NavProp) {
24+
const notes = locationNotesStore((state) => state.notes)
25+
const [search, setSearch] = useState<string>('')
26+
const [searchResults, setSearchResults] = useState<LocationNote[]>(notes)
27+
28+
useEffect(() => {
29+
const timer = setTimeout(() => {
30+
const query = search.toLowerCase().trim()
31+
if (query.length === 0) {
32+
setSearchResults(notes)
33+
return
34+
}
35+
const results = notes.filter(
36+
(note) =>
37+
note.title.toLowerCase().includes(query) ||
38+
(note.description && note.description.toLowerCase().includes(query)),
39+
)
40+
setSearchResults(results)
41+
}, 100)
42+
43+
return () => clearTimeout(timer)
44+
}, [search, notes])
45+
46+
return (
47+
<>
48+
<SettWrapper
49+
title='Location Notes'
50+
Header={
51+
<>
52+
<BackHeader title='Location Notes' navigation={navigation} />
53+
<View className='bg-white px-5 pb-4 dark:bg-zinc-950'>
54+
<Search
55+
placeholder='Search by title or description'
56+
value={search}
57+
onChangeText={(text) => setSearch(text)}
58+
/>
59+
</View>
60+
</>
61+
}
62+
>
63+
<NoLocationNotes notes={searchResults} search={search} />
64+
<NotesList notes={searchResults} search={search} />
65+
</SettWrapper>
66+
<FabButton />
67+
</>
68+
)
69+
}
70+
71+
function NotesList({ notes, search }: { notes: LocationNote[]; search?: string }) {
72+
const navigation = useNavigation<StackNav>()
73+
if (!notes || notes.length === 0) return null
74+
return (
75+
<Gap12>
76+
<SettText className='mt-3.5'>
77+
{notes.length === 0
78+
? ''
79+
: `Found ${notes.length} note${notes.length > 1 ? 's' : ''}. Tap on a note to view details.`}
80+
</SettText>
81+
<Animated.View entering={FadeIn} exiting={FadeOut} layout={layout}>
82+
<SettGroup title='Notes'>
83+
{notes.map((item, i) => (
84+
<Animated.View
85+
key={item.location.timestamp}
86+
entering={search ? delayedFadeAnimationSearch(search, i) : undefined}
87+
exiting={exiting}
88+
layout={layout}
89+
>
90+
<SettOption
91+
title={item.title}
92+
Icon={<RoundedIcon Icon={MapsLocation02SolidIcon} />}
93+
onPress={() => navigation.navigate('LocationNote', { data: item })}
94+
numberOfLines={1}
95+
arrow
96+
>
97+
{item.description && (
98+
<Medium
99+
className='text-zinc-600 dark:text-zinc-400'
100+
style={{ fontSize: 10.5, flexShrink: 1, flex: 0.5, flexGrow: 0 }}
101+
numberOfLines={1}
102+
>
103+
{item.description}
104+
</Medium>
105+
)}
106+
</SettOption>
107+
</Animated.View>
108+
))}
109+
</SettGroup>
110+
</Animated.View>
111+
</Gap12>
112+
)
113+
}
114+
115+
export const FabButton = () => {
116+
const navigation = useNavigation<StackNav>()
117+
const bottom = useSafeAreaInsets().bottom
118+
119+
return (
120+
<Animated.View
121+
entering={ZoomIn.duration(200)}
122+
exiting={ZoomOut.duration(200)}
123+
className='absolute right-5 z-10'
124+
style={{ bottom: bottom + 15 }}
125+
>
126+
<Press
127+
style={fabStyles.fabShadow}
128+
onPress={() => navigation.navigate('NewLocationNote')}
129+
activeOpacity={0.9}
130+
activeScale={0.95}
131+
className='items-center justify-center rounded-full bg-accent'
132+
>
133+
<PlusSignSolidIcon color={'white'} height={25} width={25} />
134+
</Press>
135+
</Animated.View>
136+
)
137+
}

‎src/screens/CoordinateNotes/LocationTags.tsx renamed to ‎src/screens/LocationNotes/LocationTags.tsx

File renamed without changes.

‎src/screens/CoordinateNotes/NewLocationNotes.tsx renamed to ‎src/screens/LocationNotes/NewLocationNotes.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,33 @@
1-
import { Home01SolidIcon, Location01Icon, MapsLocation02SolidIcon } from '@assets/icons/icons'
1+
import { Home01SolidIcon, InformationCircleSolidIcon, Location01Icon } from '@assets/icons/icons'
22
import { BtnTransparent } from '@components/Button'
33
import { Gap12 } from '@components/Gap'
44
import { Input } from '@components/Input'
55
import RoundedIcon from '@components/RoundedIcon'
66
import SettGroup from '@components/Settings/SettGroup'
77
import { SettOption } from '@components/Settings/SettOption'
88
import SettWrapper from '@components/Settings/SettWrapper'
9-
import { coordinateNotesStore } from '@screens/CoordinateNotes/locationNotesStore'
10-
import { fetchLocation } from '@screens/CoordinateNotes/lib'
9+
import { fetchLocation } from '@screens/LocationNotes/lib'
10+
import { locationNotesStore } from '@screens/LocationNotes/locationNotesStore'
1111
import { useQuery } from '@tanstack/react-query'
12-
import { NavProp } from '@utils/types'
1312
import { useCallback, useEffect, useState } from 'react'
1413
import { BackHandler, View } from 'react-native'
1514
import { GeoPosition } from 'react-native-geolocation-service'
1615
import LocationDetails from './LocationDetails'
1716

18-
export default function NewLocationNote({ navigation }: NavProp) {
17+
export default function NewLocationNote() {
1918
const [name, setName] = useState<string>('')
2019
const [description, setDescription] = useState<string>('')
21-
const updateNote = coordinateNotesStore((state) => state.updateNote)
20+
const updateNote = locationNotesStore((state) => state.updateNote)
2221

2322
const { data, isFetching, refetch } = useQuery({
2423
queryFn: fetchLocation,
2524
queryKey: ['currentLocation'],
25+
// Disable caching for this query
26+
staleTime: 0,
27+
gcTime: 0,
28+
refetchOnMount: true,
29+
refetchOnWindowFocus: true,
30+
refetchInterval: false,
2631
})
2732

2833
const handleSave = useCallback(() => {
@@ -68,15 +73,14 @@ export default function NewLocationNote({ navigation }: NavProp) {
6873
numberOfLines={10}
6974
value={description}
7075
onChangeText={setDescription}
71-
Icon={<RoundedIcon Icon={MapsLocation02SolidIcon} className='bg-slate-500' />}
76+
Icon={<RoundedIcon Icon={InformationCircleSolidIcon} className='bg-slate-500' />}
7277
/>
7378
</SettGroup>
7479
<SettGroup title='Tag'>
7580
<SettOption
7681
title=''
7782
placeholder='Add a tag'
7883
Icon={<RoundedIcon Icon={Home01SolidIcon} className='bg-rose-500' />}
79-
onPress={() => navigation.navigate('LocationTags')}
8084
arrow
8185
/>
8286
</SettGroup>

‎src/screens/LocationNotes/NewNote.tsx

Whitespace-only changes.

0 commit comments

Comments
 (0)