feat: install basic install feature

amoshydra · Feb 15, 2024 · c55026b · c55026b
1 parent 81fddd6
commit c55026b
Show file tree

Hide file tree

Showing 12 changed files with 399 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,26 @@
   </head>
   <body>
     <div id="root"></div>
+    <script>
+      const SETTINGS = {
+        pretokenise : true,
+        minify : false,  // disabled by default due to https://github.com/espruino/BangleApps/pull/355#issuecomment-620124162
+        settime : false, // Always update time when we connect
+        favourites : ["launch"],
+        language : "",
+        bleCompat: false, // 20 byte MTU BLE Compatibility mode
+        sendUsageStats: true,  // send usage stats to banglejs.com
+        alwaysAllowUpdate : false, //  Always show "reinstall app" buttonregardless of the version
+        autoReload: false //  Automatically reload watch after app App Loader actions (removes "Hold button" prompt)
+      };
+    </script>
+    <script src="https://banglejs.com/apps/core/js/utils.js"></script>
+    <script src="https://banglejs.com/apps/webtools/puck.js"></script>
+    <script src="https://banglejs.com/apps/webtools/heatshrink.js"></script>
+    <script src="https://banglejs.com/apps/core/lib/espruinotools.js"></script>
+    <script src="https://banglejs.com/apps/core/js/comms.js"></script>
+    <script src="https://banglejs.com/apps/core/js/appinfo.js"></script>
+    <script src="https://banglejs.com/apps/gadgetbridge.js"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-router-dom": "^6.22.0",
     "rehype-highlight": "^7.0.0",
     "rehype-sanitize": "^6.0.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -9,6 +9,7 @@ import {
 } from "react-router-dom";
 import App from './views/Apps';
 import { SWRConfig } from 'swr';
+import { GlobalProgressToaster } from './services/GlobalProgress';
 
 const router = createHashRouter(
   createRoutesFromElements(
@@ -32,11 +33,11 @@ const router = createHashRouter(
   )
 );
 
-
 function Entry() {
   return (
     <SWRConfig value={{ provider: localStorageProvider }}>
       <RouterProvider router={router} />
+      <GlobalProgressToaster />
     </SWRConfig>
   )
 }

diff --git a/src/components/AppListItemDetailView/AppDetailView.tsx b/src/components/AppListItemDetailView/AppDetailView.tsx
@@ -5,7 +5,7 @@ import { AppDetailViewProps } from "./interface";
 import { Readme } from "./Readme";
 import { AppStorageController } from "./AppStorageController";
 
-export const AppDetailView = ({ app, className }: AppDetailViewProps) => {
+export const AppDetailView = ({ app, apps, className }: AppDetailViewProps) => {
   return (
     <div
       className={className}
@@ -15,11 +15,11 @@ export const AppDetailView = ({ app, className }: AppDetailViewProps) => {
         flex-direction: column;
       `}
     >
-      <Heading app={app} />
-      <AppStorageController app={app} />
+      <Heading app={app} apps={apps} />
+      <AppStorageController app={app} apps={apps} />
       <p>{app.description}</p>
-      <Screenshost app={app} />
-      <Readme app={app} />
+      <Screenshost app={app} apps={apps} />
+      <Readme app={app} apps={apps} />
       <pre css={css`word-break: break-all; white-space: pre-wrap;`}>
         {JSON.stringify(app, null, 2)}
       </pre>

diff --git a/src/components/AppListItemDetailView/AppListItemDetailView.tsx b/src/components/AppListItemDetailView/AppListItemDetailView.tsx
@@ -4,7 +4,8 @@ import { Modal } from "./Modal";
 import { AppDetailView } from "./AppDetailView";
 
 export interface AppListItemDetailViewProps {
-  data: AppItem | null;
+  apps: AppItem[];
+  app: AppItem | null;
   isLoading: boolean;
   error: Error | null;
 }
@@ -24,13 +25,13 @@ export const AppListItemDetailView = (p: AppListItemDetailViewProps) => {
       )
     }
 
-    if (p.data === null) {
+    if (p.app === null) {
       return (
         <div>404 not found</div>
       )
     }
 
-    return <AppDetailView app={p.data} />
+    return <AppDetailView app={p.app} apps={p.apps} />
   })();
 
   const navigate = useNavigate()

diff --git a/src/components/AppListItemDetailView/AppStorageController.tsx b/src/components/AppListItemDetailView/AppStorageController.tsx
@@ -2,7 +2,9 @@ import { css } from "@emotion/react";
 import { AppDetailViewProps } from "./interface";
 import { UiButton } from "../Buttons/UiButton";
 import { ButtonIconContainer } from "../Buttons/ButtonIconContainer";
-import { faGear, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { faGear, faDownload, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { EspruinoComms } from "../../services/Espruino/Comms";
+import { useEffect, useState } from "react";
 
 interface ControlButtonProps extends AppDetailViewProps {
   hasConfiguration: boolean;
@@ -24,7 +26,51 @@ const InstallControlButton = (props: ControlButtonProps) => {
   }
 
   return (
-    <UiButton fullWidth>
+    <UiButton
+      fullWidth
+      onClick={async () => {
+        try {
+          const deviceInfo = await EspruinoComms.getDeviceInfo();
+          const device = {
+            ...deviceInfo,
+            appsInstalled: deviceInfo.apps,
+          }
+
+          if (props.app.dependencies) {
+            Object.entries(props.app.dependencies)
+              .map(async ([dependencyAppId]) => {
+                const hasInstalled = device.apps.find(app => app.id === dependencyAppId);
+                if (hasInstalled) return;
+
+                const dependencyApp = props.apps.find(app => app.id === dependencyAppId);
+                if (!dependencyApp) {
+                  const errorMessage = `dependency required "${dependencyAppId}" is not found`;
+                  alert(errorMessage);
+                  throw new Error(errorMessage)
+                }
+
+                await EspruinoComms.uploadApp(dependencyApp, { device });
+                // TODO: Implement dependency clash with the usage of provide_modules
+                // see AppInfo.checkDependencies
+              })
+          }
+
+          await EspruinoComms.uploadApp(props.app, { device });
+          if (props.app.type === "clock") {
+            const settings = await EspruinoComms.readFile("setting.json");
+            await EspruinoComms.writeFile("setting.json", JSON.stringify({
+              ...JSON.parse(settings),
+              clock: `${props.app.id}.app.js`,
+            }))
+            EspruinoComms.resetDevice()
+          }
+
+        } catch (error) {
+          alert((error as Error).message);
+          throw error;
+        }
+      }}
+    >
       <ButtonIconContainer
         leftIcon={faDownload}
       >
@@ -34,28 +80,69 @@ const InstallControlButton = (props: ControlButtonProps) => {
   )
 };
 const ConfigureControlButton = (props: ControlButtonProps) => {
-    if (props.hasConfiguration) {
-      return (
-        <UiButton fullWidth>
-          <ButtonIconContainer
-            leftIcon={faGear}
-          >
-            Configure
-          </ButtonIconContainer>
-        </UiButton>
-      );
-    }
-
-    return null
-  };
+  if (props.hasConfiguration) {
+    return (
+      <UiButton fullWidth>
+        <ButtonIconContainer
+          leftIcon={faGear}
+        >
+          Configure
+        </ButtonIconContainer>
+      </UiButton>
+    );
+  }
+
+  return null
+};
+
+const UninstallControlButton = (props: ControlButtonProps) => {
+  if (props.hasInstalled) {
+    return (
+      <UiButton
+        fullWidth
+        onClick={async () => {
+          try {
+            await EspruinoComms.getDeviceInfo();
+            await EspruinoComms.removeApp(props.app)
+          } catch (error) {
+            alert((error as Error).message);
+            throw error;
+          }
+        }}
+      >
+        <ButtonIconContainer
+          leftIcon={faTrash}
+        >
+          Remove
+        </ButtonIconContainer>
+      </UiButton>
+    );
+  }
+
+  return null
+};
 
 
 export const AppStorageController = (props: AppDetailViewProps) => {
+  const [ hasInstalled, setHasInstalled ] = useState(false);
+  const [ hasUpdate, setHasUpdate ] = useState(false);
+  useEffect(() => {
+    if (EspruinoComms.isConnected()) {
+      EspruinoComms.getDeviceInfo()
+        .then(({ apps }) => {
+          const found = apps.find(app => app.id === props.app.id);
+
+          setHasInstalled(!!found);
+          setHasUpdate(!!(found && found.version === props.app.version));
+        })
+    }
+  }, [props.app]);
+
   const controlButtonProps: ControlButtonProps = {
     ...props,
     hasConfiguration: !!(props.app.custom ?? props.app.interface),
-    hasInstalled: false,
-    hasUpdate: false,
+    hasInstalled,
+    hasUpdate,
   };
   return (
     <div
@@ -66,6 +153,7 @@ export const AppStorageController = (props: AppDetailViewProps) => {
       `}
     >
       <ConfigureControlButton {...controlButtonProps} />
+      <UninstallControlButton {...controlButtonProps} />
       <InstallControlButton {...controlButtonProps} />
     </div>
   )

diff --git a/src/components/AppListItemDetailView/interface.ts b/src/components/AppListItemDetailView/interface.ts
@@ -1,6 +1,7 @@
 import { AppItem } from "../../api/banglejs/interface";
 
 export interface AppDetailViewProps {
+  apps: AppItem[];
   app: AppItem;
   className?: string;
 }
diff --git a/src/main.tsx b/src/main.tsx
@@ -8,3 +8,16 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     <App />
   </React.StrictMode>,
 )
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const espruinoOriginalHttpGet = httpGet;
+console.log(espruinoOriginalHttpGet);
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+window.httpGet = (url: string) => {
+  console.log('fetching', url);
+  const updatedUrl = new URL(url, "https://banglejs.com/apps/");
+  console.log('fetching', url, updatedUrl);
+  return espruinoOriginalHttpGet(updatedUrl.href);
+}