From 34b8c1f962a5c835351dc6f4369757259998af16 Mon Sep 17 00:00:00 2001 From: Akshay Nair Date: Sat, 28 Sep 2024 22:19:31 +0530 Subject: Finish up app menu + fix drag interaction --- App.tsx | 13 +++++---- bun.lockb | Bin 398665 -> 399052 bytes package.json | 1 + src/View.tsx | 25 +++++++++-------- src/components/AppMenu.tsx | 39 +++++++++++++++++--------- src/components/Clock.tsx | 4 +-- src/components/Favorites.tsx | 62 ++++++++++++++++++++++-------------------- src/hooks/useFavorites.ts | 53 ++++++++++++++++++++++-------------- src/hooks/useInstalledApps.ts | 19 +++++++++++++ src/screens/AppList.tsx | 31 +++++++++++---------- src/screens/Home.tsx | 8 ++---- 11 files changed, 153 insertions(+), 102 deletions(-) create mode 100644 src/hooks/useInstalledApps.ts diff --git a/App.tsx b/App.tsx index 1852a04..dd4cdd8 100644 --- a/App.tsx +++ b/App.tsx @@ -2,14 +2,17 @@ import React from 'react'; import {SafeAreaView} from 'react-native'; import {GestureHandlerRootView} from 'react-native-gesture-handler'; import {View} from './src/View'; +import {Provider as JotaiProvider} from 'jotai'; const App: React.FC = () => { return ( - - - - - + + + + + + + ); }; diff --git a/bun.lockb b/bun.lockb index 1506e50..33efa1e 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index ba53403..35311b7 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "@angelkrak/react-native-intent-launcher": "^1.0.2", "@react-native-async-storage/async-storage": "^1.23.1", + "jotai": "^2.10.0", "match-sorter": "^6.3.4", "nativewind": "^2.0.11", "react": "18.2.0", diff --git a/src/View.tsx b/src/View.tsx index c5084f2..110e3fe 100644 --- a/src/View.tsx +++ b/src/View.tsx @@ -1,18 +1,19 @@ -import React, {useState} from 'react'; -import {InstalledApps} from 'react-native-launcher-kit'; +import React, {useEffect, useState} from 'react'; import Swiper from 'react-native-swiper'; import {AppList} from './screens/AppList'; import {Home} from './screens/Home'; +import {useInstalledApps} from './hooks/useInstalledApps'; +import {useFavorites} from './hooks/useFavorites'; -export const View: React.FC = () => { - const [apps, _setApps] = useState(() => InstalledApps.getSortedApps()); +export const View: React.FC = React.memo(() => { + const {refreshApps} = useInstalledApps(); + const {refreshFavorites} = useFavorites(); const [screenIndex, setScreenIndex] = useState(0); - // const refreshApps = () => setApps(InstalledApps.getSortedApps()); - - // useEffect(() => { - // refreshApps(); - // }, [screenIndex]); + useEffect(() => { + refreshApps(); + refreshFavorites(); + }, [screenIndex, refreshApps, refreshFavorites]); return ( { dot={<>} activeDot={<>} onIndexChanged={setScreenIndex}> - - + + ); -}; +}); diff --git a/src/components/AppMenu.tsx b/src/components/AppMenu.tsx index ec0d684..2319e73 100644 --- a/src/components/AppMenu.tsx +++ b/src/components/AppMenu.tsx @@ -2,7 +2,10 @@ import {Text, View, Modal, TouchableOpacity, Pressable} from 'react-native'; import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps'; import {useFavorites} from '../hooks/useFavorites'; import React, {useState} from 'react'; +// @ts-expect-error No declaration file import IntentLauncher from '@angelkrak/react-native-intent-launcher'; +import {TouchableHighlight} from 'react-native-gesture-handler'; +import {useStableCallback} from '../hooks/useStableCallback'; export const AppMenu: React.FC> = ({ app, @@ -11,24 +14,26 @@ export const AppMenu: React.FC> = ({ const [isOpen, setIsOpen] = useState(false); const {addToFavorites, isFavorite, removeFromFavorites} = useFavorites(); - const menuPress = (fn: () => Promise | void) => async () => { + const openContextMenu = useStableCallback(() => setIsOpen(true)); + const closeContextMenu = useStableCallback(() => setIsOpen(false)); + + const onMenuItemPress = (fn: () => Promise | void) => async () => { + closeContextMenu(); await fn(); - setIsOpen(false); }; - const menuItems = [ isFavorite(app.packageName) ? { label: 'Remove from favorites', - onPress: menuPress(() => removeFromFavorites(app.packageName)), + onPress: onMenuItemPress(() => removeFromFavorites(app.packageName)), } : { label: 'Add to favorites', - onPress: menuPress(() => addToFavorites(app.packageName)), + onPress: onMenuItemPress(() => addToFavorites(app.packageName)), }, { label: 'App info', - onPress: menuPress(() => + onPress: onMenuItemPress(() => IntentLauncher.startActivity({ action: 'android.settings.APPLICATION_DETAILS_SETTINGS', data: 'package:' + app.packageName, @@ -37,7 +42,7 @@ export const AppMenu: React.FC> = ({ }, { label: 'Uninstall', - onPress: menuPress(() => + onPress: onMenuItemPress(() => IntentLauncher.startActivity({ action: 'android.intent.action.DELETE', data: 'package:' + app.packageName, @@ -46,25 +51,33 @@ export const AppMenu: React.FC> = ({ }, ]; + const openApp = useStableCallback(() => + IntentLauncher.startAppByPackageName(app.packageName), + ); + return ( <> - setIsOpen(true)}> + {children} - + setIsOpen(false)}> - setIsOpen(false)}> + onRequestClose={closeContextMenu}> + - + {menuItems.map((menuItem) => ( + className="py-3 px-4 border-b border-[#222] last:border-b-0 last:border-transparent"> {menuItem.label} diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx index 619a31b..f41a298 100644 --- a/src/components/Clock.tsx +++ b/src/components/Clock.tsx @@ -1,7 +1,7 @@ import React, {useEffect, useMemo, useState} from 'react'; import {Text, View} from 'react-native'; -export const Clock: React.FC = () => { +export const Clock: React.FC = React.memo(() => { const [date, setDate] = useState(() => new Date()); useEffect(() => { const interval = setInterval(() => { @@ -34,4 +34,4 @@ export const Clock: React.FC = () => { {dateText} ); -}; +}); diff --git a/src/components/Favorites.tsx b/src/components/Favorites.tsx index c2adae7..6ee99cb 100644 --- a/src/components/Favorites.tsx +++ b/src/components/Favorites.tsx @@ -9,12 +9,23 @@ import DraggableFlatList, { } from 'react-native-draggable-flatlist'; import Icon from 'react-native-vector-icons/MaterialIcons'; import {AppMenu} from './AppMenu'; +import {useInstalledApps} from '../hooks/useInstalledApps'; -export const Favorites: React.FC<{apps: AppDetail[]; active: boolean}> = ({ - apps, - active, -}) => { - const {favoriteAppNames, setFavorites, refreshFavorites} = useFavorites(); +const AppLabel: React.FC<{app: AppDetail}> = React.memo(({app}) => { + return ( + + + + {app.label} + + + + ); +}); + +export const Favorites: React.FC<{active: boolean}> = (_) => { + const {apps} = useInstalledApps(); + const {favoriteAppNames, setFavorites} = useFavorites(); const appByName = useMemo( () => Object.fromEntries(apps.map((app) => [app.packageName, app])), @@ -33,40 +44,33 @@ export const Favorites: React.FC<{apps: AppDetail[]; active: boolean}> = ({ [setFavorites], ); - useEffect(() => { - if (!active) return; - refreshFavorites(); - }, [active, refreshFavorites]); - return ( item.packageName} + keyExtractor={(app) => app.packageName} renderItem={({item: app, drag, isActive}) => ( - + - - - {app.label} - - - - - - - + + + + + + + )} - renderPlaceholder={() => } + renderPlaceholder={() => } /> ); diff --git a/src/hooks/useFavorites.ts b/src/hooks/useFavorites.ts index 46b6e77..24684aa 100644 --- a/src/hooks/useFavorites.ts +++ b/src/hooks/useFavorites.ts @@ -1,31 +1,46 @@ -import {useEffect, useState} from 'react'; import {useAsyncStorage} from '@react-native-async-storage/async-storage'; import {useStableCallback} from './useStableCallback'; +import {atom, useAtom} from 'jotai'; + +const favoriteAppNamesAtom = atom([]); + +const serialize = (packageNames: string[]) => JSON.stringify(packageNames); + +const deserialize = (packageNames: string): string[] => { + try { + const apps = JSON.parse(packageNames); + if (!Array.isArray(apps)) return []; + return apps; + } catch (err) { + console.error(err); + return []; + } +}; export const useFavorites = () => { const favoritesStorage = useAsyncStorage('favorites'); - const [favoriteAppNames, setFavoriteAppNames] = useState([]); + const [favoriteAppNames, setFavoriteAppNames] = useAtom(favoriteAppNamesAtom); const getFavoriteAppNames = useStableCallback(async (): Promise => { - try { - const result = await favoritesStorage.getItem(); - const apps = result ? JSON.parse(result) : []; - if (!Array.isArray(apps)) return []; - return apps; - } catch (err) { - console.error(err); - return []; - } + const result = await favoritesStorage.getItem(); + return deserialize(result ?? 'null'); }); - const refreshFavorites = useStableCallback(async () => { - getFavoriteAppNames().then(setFavoriteAppNames); + const setFavoritesState = useStableCallback((packageNames: string[]) => { + const newNames = [...new Set(packageNames)]; + if (serialize(newNames) === serialize(favoriteAppNames)) return newNames; + + setFavoriteAppNames(newNames); + return newNames; }); - const setFavorites = useStableCallback(async (names: string[]) => { - const newNames = [...new Set(names)]; - await favoritesStorage.setItem(JSON.stringify(newNames)); - refreshFavorites(); + const setFavorites = useStableCallback(async (packageNames: string[]) => { + const newNames = setFavoritesState(packageNames); + await favoritesStorage.setItem(serialize(newNames)); + }); + + const refreshFavorites = useStableCallback(async () => { + getFavoriteAppNames().then(setFavoritesState); }); const addToFavorites = useStableCallback(async (packageName: string) => { @@ -41,10 +56,6 @@ export const useFavorites = () => { favoriteAppNames.includes(packageName), ); - useEffect(() => { - refreshFavorites(); - }, [refreshFavorites]); - return { addToFavorites, favoriteAppNames, diff --git a/src/hooks/useInstalledApps.ts b/src/hooks/useInstalledApps.ts new file mode 100644 index 0000000..32290e5 --- /dev/null +++ b/src/hooks/useInstalledApps.ts @@ -0,0 +1,19 @@ +import {atom, useAtom} from 'jotai'; +import {InstalledApps} from 'react-native-launcher-kit'; +import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps'; +import {useStableCallback} from './useStableCallback'; + +const installedAppsAtom = atom(InstalledApps.getSortedApps()); + +export const useInstalledApps = () => { + const [apps, setApps] = useAtom(installedAppsAtom); + + const refreshApps = useStableCallback(() => + setApps(InstalledApps.getSortedApps()), + ); + + return { + apps, + refreshApps, + }; +}; diff --git a/src/screens/AppList.tsx b/src/screens/AppList.tsx index e6b3e6e..adb51b5 100644 --- a/src/screens/AppList.tsx +++ b/src/screens/AppList.tsx @@ -1,14 +1,24 @@ import {matchSorter} from 'match-sorter'; 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 Icon from 'react-native-vector-icons/MaterialIcons'; import {AppMenu} from '../components/AppMenu'; +import {useInstalledApps} from '../hooks/useInstalledApps'; +import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps'; + +const AppListItem: React.FC<{app: AppDetail}> = React.memo(({app}) => { + return ( + + + {app.label} + {app.packageName} + + + ); +}); -export const AppList: React.FC<{apps: AppDetail[]; active: boolean}> = ({ - apps, - active, -}) => { +export const AppList: React.FC<{active: boolean}> = React.memo(({active}) => { + const {apps} = useInstalledApps(); const textInputRef = useRef(null); const [searchText, setSearchText] = useState(''); @@ -41,17 +51,10 @@ export const AppList: React.FC<{apps: AppDetail[]; active: boolean}> = ({ {filteredApps.map((app, index) => ( - - - - {app.label} - - {app.packageName} - - + ))} ); -}; +}); diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx index 7bd1a3f..0d694c0 100644 --- a/src/screens/Home.tsx +++ b/src/screens/Home.tsx @@ -1,17 +1,13 @@ import React from 'react'; import {View} from 'react-native'; import {Clock} from '../components/Clock'; -import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps'; import {Favorites} from '../components/Favorites'; -export const Home: React.FC<{apps: AppDetail[]; active: boolean}> = ({ - apps, - active, -}) => { +export const Home: React.FC<{active: boolean}> = ({active}) => { return ( - + ); }; -- cgit v1.3.1