extension card cleanup (#252)

* [Cleanup] Use enums for extension "InstalledState"

* [Cleanup] Reduce code duplication

src/components/ExtensionCard.tsx

@@ -21,19 +21,48 @@ interface IProps {
     notifyInstall: () => void;
 }
 
+enum ExtensionAction {
+    UPDATE = 'UPDATE',
+    UNINSTALL = 'UNINSTALL',
+    INSTALL = 'INSTALL',
+}
+
+enum ExtensionState {
+    OBSOLETE = 'OBSOLETE',
+    UPDATING = 'UPDATING',
+    UNINSTALLING = 'UNINSTALLING',
+    INSTALLING = 'INSTALLING',
+}
+
+type InstalledStates = ExtensionAction | ExtensionState;
+
+const InstalledState = { ...ExtensionAction, ...ExtensionState } as const;
+
+const EXTENSION_ACTION_TO_STATE_MAP: { [action in ExtensionAction]: ExtensionState } = {
+    [ExtensionAction.UPDATE]: ExtensionState.UPDATING,
+    [ExtensionAction.UNINSTALL]: ExtensionState.UNINSTALLING,
+    [ExtensionAction.INSTALL]: ExtensionState.INSTALLING,
+} as const;
+
+const EXTENSION_ACTION_TO_NEXT_ACTION_MAP: { [action in ExtensionAction]: ExtensionAction } = {
+    [ExtensionAction.UPDATE]: ExtensionAction.UNINSTALL,
+    [ExtensionAction.UNINSTALL]: ExtensionAction.INSTALL,
+    [ExtensionAction.INSTALL]: ExtensionAction.UNINSTALL,
+} as const;
+
 export default function ExtensionCard(props: IProps) {
     const {
         extension: { name, lang, versionName, installed, hasUpdate, obsolete, pkgName, iconUrl, isNsfw },
         notifyInstall,
     } = props;
-    const [installedState, setInstalledState] = useState<string>(() => {
+    const [installedState, setInstalledState] = useState<InstalledStates>(() => {
         if (obsolete) {
-            return 'obsolete';
+            return InstalledState.OBSOLETE;
         }
         if (hasUpdate) {
-            return 'update';
+            return InstalledState.UPDATE;
         }
-        return installed ? 'uninstall' : 'install';
+        return installed ? InstalledState.UNINSTALL : InstalledState.INSTALL;
     });
 
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
@@ -41,44 +70,25 @@ export default function ExtensionCard(props: IProps) {
 
     const langPress = lang === 'all' ? 'All' : lang.toUpperCase();
 
-    function install() {
+    const requestExtensionAction = async (action: ExtensionAction): Promise<void> => {
-        setInstalledState('installing');
+        const nextAction = EXTENSION_ACTION_TO_NEXT_ACTION_MAP[action];
-        client.get(`/api/v1/extension/install/${pkgName}`).then(() => {
+        const state = EXTENSION_ACTION_TO_STATE_MAP[action];
-            setInstalledState('uninstall');
-            notifyInstall();
-        });
-    }
 
-    function update() {
+        setInstalledState(state);
-        setInstalledState('updating');
+        await client.get(`/api/v1/extension/${action.toLowerCase()}/${pkgName}`);
-        client.get(`/api/v1/extension/update/${pkgName}`).then(() => {
+        setInstalledState(nextAction);
-            setInstalledState('uninstall');
+        notifyInstall();
-            notifyInstall();
+    };
-        });
-    }
-
-    function uninstall() {
-        setInstalledState('uninstalling');
-        client.get(`/api/v1/extension/uninstall/${pkgName}`).then(() => {
-            // setInstalledState('install');
-            notifyInstall();
-        });
-    }
 
     function handleButtonClick() {
         switch (installedState) {
-            case 'install':
+            case ExtensionAction.INSTALL:
-                install();
+            case ExtensionAction.UPDATE:
+            case ExtensionAction.UNINSTALL:
+                requestExtensionAction(installedState).catch(() => {});
                 break;
-            case 'update':
+            case ExtensionState.OBSOLETE:
-                update();
+                requestExtensionAction(ExtensionAction.UNINSTALL).catch(() => {});
-                break;
-            case 'obsolete':
-                uninstall();
-                setTimeout(() => window.location.reload(), 3000);
-                break;
-            case 'uninstall':
-                uninstall();
                 break;
             default:
                 break;
@@ -124,7 +134,7 @@ export default function ExtensionCard(props: IProps) {
 
                 <Button
                     variant="outlined"
-                    sx={{ color: installedState === 'obsolete' ? 'red' : 'inherit' }}
+                    sx={{ color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit' }}
                     onClick={() => handleButtonClick()}
                 >
                     {installedState}