finished Update support: webUI side

webUI/react/src/components/ExtensionCard.tsx

@@ -49,11 +49,17 @@ interface IProps {
 export default function ExtensionCard(props: IProps) {
     const {
         extension: {
-            name, lang, versionName, installed, pkgName, iconUrl,
+            name, lang, versionName, installed, hasUpdate, obsolete, pkgName, iconUrl,
         },
         notifyInstall,
     } = props;
-    const [installedState, setInstalledState] = useState<string>((installed ? 'uninstall' : 'install'));
+    const [installedState, setInstalledState] = useState<string>(
+        () => {
+            if (obsolete) { return 'obsolete'; }
+            if (hasUpdate) { return 'update'; }
+            return (installed ? 'uninstall' : 'install');
+        },
+    );
 
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
 
@@ -69,6 +75,15 @@ export default function ExtensionCard(props: IProps) {
             });
     }
 
+    function update() {
+        setInstalledState('updating');
+        client.get(`/api/v1/extension/update/${pkgName}`)
+            .then(() => {
+                setInstalledState('uninstall');
+                notifyInstall();
+            });
+    }
+
     function uninstall() {
         setInstalledState('uninstalling');
         client.get(`/api/v1/extension/uninstall/${pkgName}`)
@@ -79,10 +94,22 @@ export default function ExtensionCard(props: IProps) {
     }
 
     function handleButtonClick() {
-        if (installedState === 'install') {
-            install();
-        } else {
-            uninstall();
+        switch (installedState) {
+            case 'install':
+                install();
+                break;
+            case 'update':
+                update();
+                break;
+            case 'obsolete':
+                uninstall();
+                setTimeout(() => window.location.reload(), 3000);
+                break;
+            case 'uninstall':
+                uninstall();
+                break;
+            default:
+                break;
         }
     }
 
@@ -108,7 +135,14 @@ export default function ExtensionCard(props: IProps) {
                     </div>
                 </div>
 
-                <Button variant="outlined" onClick={() => handleButtonClick()}>{installedState}</Button>
+                <Button
+                    variant="outlined"
+                    style={{ color: installedState === 'obsolete' ? 'red' : 'inherit' }}
+                    onClick={() => handleButtonClick()}
+                >
+                    {installedState}
+
+                </Button>
             </CardContent>
         </Card>
     );

webUI/react/src/screens/Extensions.tsx

@@ -17,7 +17,7 @@ const allLangs: string[] = [];
 
 function groupExtensions(extensions: IExtension[]) {
     allLangs.length = 0; // empty the array
-    const result = { installed: [] } as any;
+    const result = { installed: [], 'updates pending': [] } as any;
     extensions.sort((a, b) => ((a.apkName > b.apkName) ? 1 : -1));
 
     extensions.forEach((extension) => {
@@ -26,7 +26,11 @@ function groupExtensions(extensions: IExtension[]) {
             if (extension.lang !== 'all') { allLangs.push(extension.lang); }
         }
         if (extension.installed) {
-            result.installed.push(extension);
+            if (extension.hasUpdate) {
+                result['updates pending'].push(extension);
+            } else {
+                result.installed.push(extension);
+            }
         } else {
             result[extension.lang].push(extension);
         }
@@ -79,11 +83,12 @@ export default function Extensions() {
     if (Object.entries(extensions).length === 0) {
         return <h3>loading...</h3>;
     }
+    const groupsToShow = ['updates pending', 'installed', ...shownLangs];
     return (
         <>
             {
                 Object.entries(extensions).map(([lang, list]) => (
-                    ((['installed', ...shownLangs].indexOf(lang) !== -1 && (list as []).length > 0)
+                    ((groupsToShow.indexOf(lang) !== -1 && (list as []).length > 0)
                         && (
                             <React.Fragment key={lang}>
                                 <h1 key={lang} style={{ marginLeft: 25 }}>

webUI/react/src/typings.d.ts

@@ -14,9 +14,9 @@ interface IExtension {
     isNsfw: boolean
     apkName: string
     iconUrl: string
-    isInstalled: boolean
+    installed: boolean
     hasUpdate: boolean
-    isObsolete: boolean
+    obsolete: boolean
 }
 
 interface ISource {
@@ -81,4 +81,4 @@ interface ICategory {
 interface INavbarOverride {
     status: boolean
     value: any
-}
+}

webUI/react/src/util/language.tsx

@@ -8,6 +8,7 @@
 export const ISOLanguages = [
     { code: 'all', name: 'All', nativeName: 'All' },
     { code: 'installed', name: 'Installed', nativeName: 'Installed' },
+    { code: 'updates pending', name: 'Updates pending', nativeName: 'Updates pending' },
 
     // full list: https://github.com/meikidd/iso-639-1/blob/master/src/data.js
     { code: 'en', name: 'English', nativeName: 'English' },