refactor(llm/manager): type fix & stateless install/uninstall modals

LedgerHQ · Oct 19, 2023 · 0c9f64d · 0c9f64d
1 parent 461e66d
commit 0c9f64d
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 51 deletions.
diff --git a/apps/ledger-live-mobile/src/screens/Manager/AppsInstallUninstallWithDependenciesContext.ts b/apps/ledger-live-mobile/src/screens/Manager/AppsInstallUninstallWithDependenciesContext.ts
@@ -14,7 +14,7 @@ export type AppWithDependencies = {
 /**
  * Represents an installed app that has other installed apps depending on it.
  * For instance:
- * { app: ethereumApp, dependents: [polygonApp] }`
+ * `{ app: ethereumApp, dependents: [polygonApp] }`
  */
 export type AppWithDependents = {
   app: App;
@@ -26,6 +26,11 @@ type AppsInstallUninstallWithDependenciesValue = {
   setAppWithDependentsToUninstall: (appWithDependents: AppWithDependents | null) => void; // TODO: rename in uninstall with dependents
 };
 
+/**
+ * Defines setters for apps to install with their dependencies or apps to
+ * uninstall with their dependents.
+ * This context was introduced to avoid prop drilling.
+ */
 const AppsInstallUninstallWithDependenciesContext = React.createContext<
   AppsInstallUninstallWithDependenciesValue | undefined
 >(undefined);

diff --git a/apps/ledger-live-mobile/src/screens/Manager/Manager.tsx b/apps/ledger-live-mobile/src/screens/Manager/Manager.tsx
@@ -14,8 +14,8 @@ import GenericErrorBottomModal from "../../components/GenericErrorBottomModal";
 import { TrackScreen } from "../../analytics";
 import QuitManagerModal from "./Modals/QuitManagerModal";
 import StorageWarningModal from "./Modals/StorageWarningModal";
-import AppDependenciesModal from "./Modals/AppDependenciesModal";
-import UninstallDependenciesModal from "./Modals/UninstallDependenciesModal";
+import InstallAppDependenciesModal from "./Modals/InstallAppDependenciesModal";
+import UninstallAppDependenciesModal from "./Modals/UninstallAppDependenciesModal";
 import { useLockNavigation } from "../../components/RootNavigator/CustomBlockRouterNavigator";
 import { setLastSeenDeviceInfo } from "../../actions/settings";
 import { ScreenName } from "../../const";
@@ -139,14 +139,6 @@ const Manager = ({ navigation, route }: NavigationProps) => {
 
   const closeErrorModal = useCallback(() => setError(null), [setError]);
 
-  const resetAppInstallWithDependencies = useCallback(() => {
-    setAppWithDependenciesToInstall(null);
-  }, []);
-
-  const resetAppUninstallWithDependencies = useCallback(() => {
-    setAppWithDependentsToUninstall(null);
-  }, []);
-
   const closeQuitManagerModal = useCallback(
     () => setQuitManagerAction(null),
     [setQuitManagerAction],
@@ -198,14 +190,36 @@ const Manager = ({ navigation, route }: NavigationProps) => {
     [device, navigation],
   );
 
-  const contextValue = useMemo(
+  const appsInstallUninstallWithDependenciesContextValue = useMemo(
     () => ({
       setAppWithDependenciesToInstall,
       setAppWithDependentsToUninstall,
     }),
     [],
   );
 
+  const onCloseInstallAppDependenciesModal = useCallback(() => {
+    setAppWithDependenciesToInstall(null);
+  }, []);
+
+  const installAppWithDependencies = useCallback(() => {
+    if (appWithDependenciesToInstall) {
+      dispatch({ type: "install", name: appWithDependenciesToInstall?.app.name });
+    }
+    onCloseInstallAppDependenciesModal();
+  }, [appWithDependenciesToInstall, onCloseInstallAppDependenciesModal, dispatch]);
+
+  const onCloseUninstallAppDependenciesModal = useCallback(() => {
+    setAppWithDependentsToUninstall(null);
+  }, []);
+
+  const uninstallAppsWithDependents = useCallback(() => {
+    if (appWithDependentsToUninstall) {
+      dispatch({ type: "uninstall", name: appWithDependentsToUninstall?.app.name });
+    }
+    onCloseUninstallAppDependenciesModal();
+  }, [appWithDependentsToUninstall, dispatch, onCloseUninstallAppDependenciesModal]);
+
   return (
     <>
       <TrackScreen
@@ -216,7 +230,9 @@ const Manager = ({ navigation, route }: NavigationProps) => {
         appLength={result ? result.installed.length : 0}
       />
       <SyncSkipUnderPriority priority={100} />
-      <AppsInstallUninstallWithDependenciesContextProvider value={contextValue}>
+      <AppsInstallUninstallWithDependenciesContextProvider
+        value={appsInstallUninstallWithDependenciesContextValue}
+      >
         <AppsScreen
           state={state}
           dispatch={dispatch}
@@ -245,15 +261,15 @@ const Manager = ({ navigation, route }: NavigationProps) => {
         uninstallQueue={uninstallQueue}
       />
       <StorageWarningModal warning={storageWarning} onClose={resetStorageWarning} />
-      <AppDependenciesModal
+      <InstallAppDependenciesModal
         appWithDependenciesToInstall={appWithDependenciesToInstall}
-        onClose={resetAppInstallWithDependencies}
-        dispatch={dispatch}
+        onClose={onCloseInstallAppDependenciesModal}
+        installAppWithDependencies={installAppWithDependencies}
       />
-      <UninstallDependenciesModal
+      <UninstallAppDependenciesModal
         appWithDependentsToUninstall={appWithDependentsToUninstall}
-        onClose={resetAppUninstallWithDependencies}
-        dispatch={dispatch}
+        onClose={onCloseUninstallAppDependenciesModal}
+        uninstallAppsWithDependents={uninstallAppsWithDependents}
       />
       <FirmwareUpdateScreen
         device={device}

diff --git a/...s/Manager/Modals/AppDependenciesModal.tsx → ...er/Modals/InstallAppDependenciesModal.tsx b/...s/Manager/Modals/AppDependenciesModal.tsx → ...er/Modals/InstallAppDependenciesModal.tsx
@@ -1,22 +1,16 @@
-import React, { memo, useCallback } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import React, { memo } from "react";
 import { TouchableOpacity } from "react-native";
 import { Trans } from "react-i18next";
-
-import { Action } from "@ledgerhq/live-common/apps/index";
-
 import styled from "styled-components/native";
 import { Flex, IconsLegacy, Text, Button } from "@ledgerhq/native-ui";
-import { hasInstalledAnyAppSelector } from "../../../reducers/settings";
-import { installAppFirstTime } from "../../../actions/settings";
 import AppIcon from "../AppsList/AppIcon";
 import QueuedDrawer from "../../../components/QueuedDrawer";
 import { AppWithDependencies } from "../AppsInstallUninstallWithDependenciesContext";
 
 type Props = {
   appWithDependenciesToInstall: AppWithDependencies | null;
-  dispatch: (_: Action) => void;
   onClose: () => void;
+  installAppWithDependencies: () => void;
 };
 
 const IconContainer = styled(Flex).attrs({
@@ -59,25 +53,14 @@ const CancelButton = styled(TouchableOpacity)`
   margin-top: 25;
 `;
 
-function AppDependenciesModal({
+function InstallAppDependenciesModal({
   appWithDependenciesToInstall,
-  dispatch: dispatchProps,
   onClose,
+  installAppWithDependencies,
 }: Props) {
-  const dispatch = useDispatch();
-  const hasInstalledAnyApp = useSelector(hasInstalledAnyAppSelector);
-
   const { app, dependencies = [] } = appWithDependenciesToInstall || {};
   const { name } = app || {};
 
-  const installAppDependencies = useCallback(() => {
-    if (!hasInstalledAnyApp) {
-      dispatch(installAppFirstTime(true));
-    }
-    dispatchProps({ type: "install", name });
-    onClose();
-  }, [dispatch, dispatchProps, onClose, name, hasInstalledAnyApp]);
-
   return (
     <QueuedDrawer isRequestingToBeOpened={!!app} onClose={onClose}>
       <Flex alignItems="center">
@@ -112,7 +95,7 @@ function AppDependenciesModal({
               </ModalText>
             </TextContainer>
             <ButtonsContainer>
-              <Button size="large" type="main" onPress={installAppDependencies}>
+              <Button size="large" type="main" onPress={installAppWithDependencies}>
                 <Trans i18nKey="AppAction.install.continueInstall" />
               </Button>
               <CancelButton onPress={onClose}>
@@ -128,4 +111,4 @@ function AppDependenciesModal({
   );
 }
 
-export default memo(AppDependenciesModal);
+export default memo(InstallAppDependenciesModal);
diff --git a/...ger/Modals/UninstallDependenciesModal.tsx → .../Modals/UninstallAppDependenciesModal.tsx b/...ger/Modals/UninstallDependenciesModal.tsx → .../Modals/UninstallAppDependenciesModal.tsx
@@ -22,8 +22,8 @@ const { height } = getWindowDimensions();
 
 type Props = {
   appWithDependentsToUninstall: AppWithDependents | null;
-  dispatch: (_: Action) => void;
   onClose: () => void;
+  uninstallAppsWithDependents: () => void;
 };
 
 const LIST_HEIGHT = height - 420;
@@ -57,16 +57,15 @@ const ButtonsContainer = styled(Flex).attrs({
   width: "100%",
 })``;
 
-const UninstallDependenciesModal = ({ appWithDependentsToUninstall, dispatch, onClose }: Props) => {
+const UninstallAppDependenciesModal = ({
+  appWithDependentsToUninstall,
+  uninstallAppsWithDependents,
+  onClose,
+}: Props) => {
   const { colors } = useTheme() as DefaultTheme & Theme;
   const { app, dependents = [] } = appWithDependentsToUninstall || {};
   const { name } = app || {};
 
-  const unInstallApp = useCallback(() => {
-    dispatch({ type: "uninstall", name });
-    onClose();
-  }, [dispatch, onClose, name]);
-
   const renderDepLine = useCallback(
     ({ item }: { item: App }) => (
       <Flex
@@ -117,7 +116,7 @@ const UninstallDependenciesModal = ({ appWithDependentsToUninstall, dispatch, on
               }}
             />
             <ButtonsContainer>
-              <Button size="large" type="error" onPress={unInstallApp}>
+              <Button size="large" type="error" onPress={uninstallAppsWithDependents}>
                 <Trans i18nKey="AppAction.uninstall.continueUninstall" values={{ app: name }} />
               </Button>
             </ButtonsContainer>
@@ -128,4 +127,4 @@ const UninstallDependenciesModal = ({ appWithDependentsToUninstall, dispatch, on
   );
 };
 
-export default memo(UninstallDependenciesModal);
+export default memo(UninstallAppDependenciesModal);