aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Favorites.tsx53
-rw-r--r--src/hooks/useFavorites.ts35
-rw-r--r--src/hooks/useStableCallback.ts9
-rw-r--r--src/screens/AppList.tsx37
4 files changed, 76 insertions, 58 deletions
diff --git a/src/components/Favorites.tsx b/src/components/Favorites.tsx
index 712a07f..85ab3c2 100644
--- a/src/components/Favorites.tsx
+++ b/src/components/Favorites.tsx
@@ -1,10 +1,10 @@
import React, {useCallback, useMemo} from 'react';
-import {ScrollView, Text, TouchableOpacity, View} from 'react-native';
+import {Text, TouchableOpacity, View} from 'react-native';
import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps';
import {useFavorites} from '../hooks/useFavorites';
import DraggableFlatList, {
+ DragEndParams,
OpacityDecorator,
- ScaleDecorator,
ShadowDecorator,
} from 'react-native-draggable-flatlist';
import Icon from 'react-native-vector-icons/MaterialIcons';
@@ -13,52 +13,49 @@ export const Favorites: React.FC<{apps: AppDetail[]}> = ({apps}) => {
const {favoriteAppNames, setFavorites} = useFavorites();
const appByName = useMemo(
- () => Object.fromEntries(apps.map(app => [app.packageName, app])),
+ () => Object.fromEntries(apps.map((app) => [app.packageName, app])),
[apps],
);
const favoriteApps = useMemo(
- () => favoriteAppNames.map(name => appByName[name]).filter(Boolean),
+ () => favoriteAppNames.map((name) => appByName[name]).filter(Boolean),
[appByName, favoriteAppNames],
);
const onDragEnd = useCallback(
- ({data}: {data: AppDetail[]}) => {
- setFavorites(data.map(app => app.packageName));
+ ({data}: DragEndParams<AppDetail>) => {
+ setFavorites(data.map((app) => app.packageName));
},
[setFavorites],
);
return (
- <View>
+ <View className="px-4">
<DraggableFlatList
data={favoriteApps}
onDragEnd={onDragEnd}
- keyExtractor={item => item.packageName}
+ keyExtractor={(item) => item.packageName}
renderItem={({item: app, drag, isActive}) => (
<ShadowDecorator>
- <ScaleDecorator>
- <OpacityDecorator>
- <View
- className={`py-4 px-2 flex-row ${
- isActive ? 'bg-gray-700 opacity-60' : ''
- }`}>
- <TouchableOpacity
- onLongPress={drag}
- disabled={isActive}
- delayLongPress={500}>
- <View className={'py-1 pl-3 pr-3'}>
- <Icon name="drag-indicator" size={21} color="#666" />
- </View>
- </TouchableOpacity>
-
- <Text className="text-lg">{app.label}</Text>
- </View>
- </OpacityDecorator>
- </ScaleDecorator>
+ <OpacityDecorator>
+ <View
+ className={`py-2 px-2 flex-row w-full ${
+ isActive ? 'bg-gray-200 opacity-60' : ''
+ }`}>
+ <Text className="text-lg flex-1">{app.label}</Text>
+ <TouchableOpacity
+ onLongPress={drag}
+ disabled={isActive}
+ delayLongPress={500}>
+ <View className={'py-1'}>
+ <Icon name="drag-indicator" size={21} color="#aaa" />
+ </View>
+ </TouchableOpacity>
+ </View>
+ </OpacityDecorator>
</ShadowDecorator>
)}
- renderPlaceholder={() => <View className="flex-1 bg-gray-700" />}
+ renderPlaceholder={() => <View className="flex-1 bg-gray-200" />}
/>
</View>
);
diff --git a/src/hooks/useFavorites.ts b/src/hooks/useFavorites.ts
index 54d77fd..619817c 100644
--- a/src/hooks/useFavorites.ts
+++ b/src/hooks/useFavorites.ts
@@ -1,11 +1,12 @@
-import {useCallback, useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
import {useAsyncStorage} from '@react-native-async-storage/async-storage';
+import {useStableCallback} from './useStableCallback';
export const useFavorites = () => {
const favoritesStorage = useAsyncStorage('favorites');
const [favoriteAppNames, setFavoriteAppNames] = useState<string[]>([]);
- const getFavoriteAppNames = useCallback(async (): Promise<string[]> => {
+ const getFavoriteAppNames = useStableCallback(async (): Promise<string[]> => {
try {
const result = await favoritesStorage.getItem();
const apps = result ? JSON.parse(result) : [];
@@ -15,28 +16,22 @@ export const useFavorites = () => {
console.error(err);
return [];
}
- }, [favoritesStorage]);
+ });
- const refreshFavorites = useCallback(async () => {
+ const refreshFavorites = useStableCallback(async () => {
getFavoriteAppNames().then(setFavoriteAppNames);
- }, [getFavoriteAppNames]);
+ });
- const setFavorites = useCallback(
- async (names: string[]) => {
- const newNames = [...new Set(names)];
- setFavoriteAppNames(newNames);
- await favoritesStorage.setItem(JSON.stringify(newNames));
- },
- [favoritesStorage],
- );
+ const setFavorites = useStableCallback(async (names: string[]) => {
+ const newNames = [...new Set(names)];
+ setFavoriteAppNames(newNames);
+ await favoritesStorage.setItem(JSON.stringify(newNames));
+ });
- const addToFavorites = useCallback(
- async (packageName: string) => {
- const names = await getFavoriteAppNames();
- setFavorites([...names, packageName]);
- },
- [getFavoriteAppNames, setFavorites],
- );
+ const addToFavorites = useStableCallback(async (packageName: string) => {
+ const names = await getFavoriteAppNames();
+ setFavorites([...names, packageName]);
+ });
useEffect(() => {
refreshFavorites();
diff --git a/src/hooks/useStableCallback.ts b/src/hooks/useStableCallback.ts
new file mode 100644
index 0000000..98e6c0d
--- /dev/null
+++ b/src/hooks/useStableCallback.ts
@@ -0,0 +1,9 @@
+import {useCallback, useRef} from 'react';
+
+export const useStableCallback = <Args extends any[], Ret>(
+ callback: (...a: Args) => Ret,
+): ((...a: Args) => Ret) => {
+ const cb = useRef(callback);
+ cb.current = callback;
+ return useCallback((...args: Args) => cb.current(...args), [cb]);
+};
diff --git a/src/screens/AppList.tsx b/src/screens/AppList.tsx
index ec83124..81c8f4f 100644
--- a/src/screens/AppList.tsx
+++ b/src/screens/AppList.tsx
@@ -1,12 +1,18 @@
import {matchSorter} from 'match-sorter';
-import React, {useMemo, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
import {ScrollView, Text, TextInput, View} from 'react-native';
import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps';
+import {useFavorites} from '../hooks/useFavorites';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import Icon from 'react-native-vector-icons/MaterialIcons';
-export const AppList: React.FC<{apps: AppDetail[]; screenIndex: number}> = ({
+export const AppList: React.FC<{apps: AppDetail[]; isActive: boolean}> = ({
apps,
- screenIndex,
+ isActive,
}) => {
+ const {addToFavorites} = useFavorites();
+
+ const textInputRef = useRef<TextInput>(null);
const [searchText, setSearchText] = useState('');
const filteredApps = useMemo(() => {
@@ -15,14 +21,22 @@ export const AppList: React.FC<{apps: AppDetail[]; screenIndex: number}> = ({
return matchSorter(apps, searchText, {keys: ['label', 'packageName']});
}, [apps, searchText]);
+ // Autofocus
+ useEffect(() => {
+ if (!textInputRef.current) return;
+ if (isActive) TextInput.State.focusTextInput(textInputRef.current);
+ }, [isActive]);
+
return (
<View>
- <View>
+ <View className="flex justify-between flex-row items-center gap-2">
+ <Icon name="search" size={21} color="#aaa" />
<TextInput
- key={screenIndex}
- autoFocus
+ ref={textInputRef}
+ autoFocus={false}
autoCorrect={false}
value={searchText}
+ className="flex-1"
onChangeText={setSearchText}
/>
</View>
@@ -31,10 +45,13 @@ export const AppList: React.FC<{apps: AppDetail[]; screenIndex: number}> = ({
<View className="flex-1">
{filteredApps.map((app, index) => (
<View className="mt-4 px-4" key={app.packageName + index}>
- <Text className="text-md font-bold dark:text-white">
- {app.label}
- </Text>
- <Text className="text-xs">{app.packageName}</Text>
+ <TouchableOpacity
+ onLongPress={() => addToFavorites(app.packageName)}>
+ <Text className="text-md font-bold dark:text-white">
+ {app.label}
+ </Text>
+ <Text className="text-xs">{app.packageName}</Text>
+ </TouchableOpacity>
</View>
))}
</View>