@@ -56,13 +56,20 @@ export default function HomePage() {
5656
5757 const getListData = async ( ) => {
5858 const item = await AsyncStorage . getItem ( 'listData' )
59- return item != null ? setCardData ( JSON . parse ( item ) ) : null ;
59+ return item != null ? setCardData ( JSON . parse ( item ) ) : setCardData ( fileList ) ;
6060 }
6161
6262 useEffect ( ( ) => {
6363 getListData ( )
6464 } , [ ] )
6565
66+ const handleSearchInputChange = ( text ) => {
67+ setSearchInput ( text )
68+ }
69+ const filteredCards = cardData ?. filter ( ( card ) =>
70+ card . title . toLowerCase ( ) . includes ( searchInput . toLowerCase ( ) )
71+ )
72+
6673 const storeLayout = async ( value : string ) => {
6774 try {
6875 await AsyncStorage . setItem ( 'viewAs' , value )
@@ -75,12 +82,22 @@ export default function HomePage() {
7582 const storeOrder = async ( value : string ) => {
7683 try {
7784 await AsyncStorage . setItem ( 'order' , value )
78- setCardData ( currentData => ( { ...currentData , order : value } ) )
85+ // setCardData(currentData => ({ ...currentData, order: value }))
7986 } catch ( e ) {
8087 console . error ( e )
8188 }
8289 }
8390
91+ const handleValueChange = ( value : string ) => {
92+ // storeLayout(value)
93+ setViewState ( value )
94+ }
95+
96+ const handleOrderChange = ( value : string ) => {
97+ storeOrder ( value )
98+ setOrder ( value )
99+ }
100+
84101 const removeData = async ( ) => {
85102 try {
86103 const deleteList = await FileSystem . readDirectoryAsync ( `${ FileSystem . documentDirectory } ` )
@@ -104,23 +121,6 @@ export default function HomePage() {
104121 }
105122 }
106123
107- const handleSearchInputChange = ( text ) => {
108- setSearchInput ( text )
109- }
110- const filteredCards = cardData . filter ( ( card ) =>
111- card . title . toLowerCase ( ) . includes ( searchInput . toLowerCase ( ) )
112- )
113-
114- const handleValueChange = ( value : string ) => {
115- storeLayout ( value )
116- setViewState ( value )
117- }
118-
119- const handleOrderChange = ( value : string ) => {
120- storeOrder ( value )
121- setOrder ( value )
122- }
123-
124124 const onRefresh = React . useCallback ( ( ) => {
125125 setRefreshing ( true )
126126 getListData ( )
@@ -186,80 +186,82 @@ export default function HomePage() {
186186 exitStyle = { { x : 0 , y : 10 , opacity : 0 , scale : 0.95 } }
187187 gap = "$4"
188188 >
189- < Dialog . Title > Settings</ Dialog . Title >
190- < Dialog . Description >
191- Adjust your preferences. Click anywhere outside when you're done.
192- </ Dialog . Description >
193-
194- < YGroup alignSelf = "center" bordered width = "100%" size = "$4" >
195- < YGroup . Item >
196- < ListItem onPress = { ( ) => { removeData ( ) } } hoverTheme pressTheme icon = { Delete } iconAfter = { ChevronRight } title = "Clear Data" subTitle = { `This will clear all the documents from the 'app data'.` } />
197- </ YGroup . Item >
198- </ YGroup >
199- < H6 > View Options</ H6 >
200- < YGroup alignSelf = "center" bordered width = "100%" size = "$4" >
201- < YGroup . Item >
202- < ListItem
203- hoverTheme
204- pressTheme
205- title = "View As"
206- iconAfter = {
207- < ToggleGroup
208- orientation = "horizontal"
209- size = "$2"
210- type = "single"
211- // disableDeactivation={true}
212- onValueChange = { filteredCards . length !== 0 ? ( value ) => handleValueChange ( value ) : undefined }
213- value = { viewState }
214- // disabled={filteredCards.length === 0}
215- >
216- < ToggleGroup . Item value = "grid" aria-label = "View as grid" >
217- < LayoutGrid />
218- </ ToggleGroup . Item >
219- < ToggleGroup . Item value = "list" aria-label = "View as list" >
220- < IconList />
221- </ ToggleGroup . Item >
222- </ ToggleGroup >
223- }
224- />
225- </ YGroup . Item >
226- < YGroup . Item >
227- < ListItem
228- hoverTheme
229- pressTheme
230- title = "Order As"
231- subTitle = "Ascending (Old First) / Descending (New First)"
232- iconAfter = {
233- < ToggleGroup
234- orientation = "horizontal"
235- size = "$2"
236- type = "single"
237- // disableDeactivation={true}
238- onValueChange = { ( ) => handleOrderChange }
239- value = { order }
240- // disabled={filteredCards.length === 0}
241- >
242- < ToggleGroup . Item value = "ascending" aria-label = "Ascending" >
243- < AArrowUp />
244- </ ToggleGroup . Item >
245- < ToggleGroup . Item value = "descending" aria-label = "Descending" >
246- < AArrowDown />
247- </ ToggleGroup . Item >
248- </ ToggleGroup >
249- }
250- />
251- </ YGroup . Item >
252- { /* <ListItem onPress={() => { removeData() }} hoverTheme pressTheme iconAfter={<Switch size="$3" defaultChecked onCheckedChange={handleCheck(isChecked)} value={isChecked}><Switch.Thumb animation="quicker" /></Switch>} title="Show All Filename Extensions" /> */ }
253- </ YGroup >
254- < Separator />
255- < XStack alignSelf = 'center' paddingTop = "$5" >
256- < Image style = { { borderRadius : 15 } } source = { require ( '../assets/images/adaptive-icon.png' ) } width = { 128 } height = { 128 } scale />
257- < YStack alignSelf = 'center' >
258- < H6 paddingLeft = "$4" > Tech Fiddle</ H6 >
259- < H1 paddingLeft = "$4" > DocExt</ H1 >
260- < H6 paddingLeft = "$4" > { AppVersion ( ) } </ H6 >
261- </ YStack >
262- </ XStack >
189+ < ScrollView >
190+ < Dialog . Title > Settings</ Dialog . Title >
191+ < Dialog . Description >
192+ Adjust your preferences. Click anywhere outside when you're done.
193+ </ Dialog . Description >
194+
195+ < YGroup alignSelf = "center" bordered width = "100%" size = "$4" >
196+ < YGroup . Item >
197+ < ListItem onPress = { ( ) => { removeData ( ) } } hoverTheme pressTheme icon = { Delete } iconAfter = { ChevronRight } title = "Clear Data" subTitle = { `This will clear all the documents from the 'app data'.` } />
198+ </ YGroup . Item >
199+ </ YGroup >
200+ < H6 > View Options</ H6 >
201+ < YGroup alignSelf = "center" bordered width = "100%" size = "$4" >
202+ < YGroup . Item >
203+ < ListItem
204+ hoverTheme
205+ pressTheme
206+ title = "View As"
207+ iconAfter = {
208+ < ToggleGroup
209+ orientation = "horizontal"
210+ size = "$2"
211+ type = "single"
212+ // disableDeactivation={true}
213+ onValueChange = { handleValueChange }
214+ value = { viewState }
215+ // disabled={filteredCards.length === 0}
216+ >
217+ < ToggleGroup . Item value = "grid" aria-label = "View as grid" >
218+ < LayoutGrid />
219+ </ ToggleGroup . Item >
220+ < ToggleGroup . Item value = "list" aria-label = "View as list" >
221+ < IconList />
222+ </ ToggleGroup . Item >
223+ </ ToggleGroup >
224+ }
225+ />
226+ </ YGroup . Item >
227+ < YGroup . Item >
228+ < ListItem
229+ hoverTheme
230+ pressTheme
231+ title = "Order As"
232+ subTitle = "Ascending (Old First) / Descending (New First)"
233+ iconAfter = {
234+ < ToggleGroup
235+ orientation = "horizontal"
236+ size = "$2"
237+ type = "single"
238+ // disableDeactivation={true}
239+ onValueChange = { ( ) => handleOrderChange }
240+ value = { order }
241+ // disabled={filteredCards.length === 0}
242+ >
243+ < ToggleGroup . Item value = "ascending" aria-label = "Ascending" >
244+ < AArrowUp />
245+ </ ToggleGroup . Item >
246+ < ToggleGroup . Item value = "descending" aria-label = "Descending" >
247+ < AArrowDown />
248+ </ ToggleGroup . Item >
249+ </ ToggleGroup >
250+ }
251+ />
252+ </ YGroup . Item >
253+ { /* <ListItem onPress={() => { removeData() }} hoverTheme pressTheme iconAfter={<Switch size="$3" defaultChecked onCheckedChange={handleCheck(isChecked)} value={isChecked}><Switch.Thumb animation="quicker" /></Switch>} title="Show All Filename Extensions" /> */ }
254+ </ YGroup >
255+ < Separator />
256+ < XStack alignSelf = 'center' paddingTop = "$5" >
257+ < Image style = { { borderRadius : 15 } } source = { require ( '../assets/images/adaptive-icon.png' ) } width = { 128 } height = { 128 } scale />
258+ < YStack alignSelf = 'center' >
259+ < H6 paddingLeft = "$4" > Tech Fiddle</ H6 >
260+ < H1 paddingLeft = "$4" > DocExt</ H1 >
261+ < H6 paddingLeft = "$4" > { AppVersion ( ) } </ H6 >
262+ </ YStack >
263+ </ XStack >
264+ </ ScrollView >
263265
264266 { /* <XStack alignSelf="flex-end" gap="$4">
265267 <Dialog.Close displayWhenAdapted asChild>
0 commit comments