feat(app): Add application installation

Play-OS · Oct 18, 2019 · 479bd31 · 479bd31
1 parent 25f252b
commit 479bd31
Show file tree

Hide file tree

Showing 17 changed files with 240 additions and 43 deletions.
diff --git a/index.parcel.html b/index.parcel.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>PlayOS</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+        <meta name="format-detection" content="telephone=no">
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+        <link rel="manifest" href="/manifest.json">
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+        <meta name="theme-color" content="#ffffff">
+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="./index.js" charset="utf-8"></script>
+    </body>
+</html>
diff --git a/manifest.json b/manifest.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "build:prod": "cross-env NODE_ENV=production webpack --config ./webpack.config.js",
     "docs": "documentation build ./src > ./docs/codebase.md --shallow false --format md --sort-order alpha",
     "release": "standard-version",
+    "start:parce": "parcel index.parcel.html",
     "start": "cross-env NODE_ENV=development webpack-dev-server --config ./webpack.config.js --open true --port 3000 --inline",
     "test": "jest",
     "lint": "eslint ./src/ --cache --ignore-pattern .gitignore"

diff --git a/src/js/Configuration.ts b/src/js/Configuration.ts
@@ -11,8 +11,8 @@ const config = {
         domain: DEV_HOST + 'authentication/',
         host: DEV_HOST,
         homeUrl: DEV_HOST + 'home/',
-        provider: new RutileProvider('http://localhost:8545/', 101),
-        coreAddress: '0x776269e69e8fbee4746895ac4fb929139db828c7',
+        provider: new RutileProvider('http://localhost:8545/', 866, '0x00c7109eb8c03ad5f4383ed0ccbc4035f167aacc'),
+        coreAddress: '0xb8e0baafd907f3289dbdc0a5174ba786f4b78cf2',
     },
     production: {
         appName: 'Authentication',
@@ -21,8 +21,8 @@ const config = {
         domain: '/',
         host: '/',
         homeUrl: '#/home',
-        provider: new RutileProvider('http://localhost:8545/', 101),
-        coreAddress: '0x776269e69e8fbee4746895ac4fb929139db828c7',
+        provider: new RutileProvider('http://localhost:8545/', 866, '0x00c7109eb8c03ad5f4383ed0ccbc4035f167aacc'),
+        coreAddress: '0xb8e0baafd907f3289dbdc0a5174ba786f4b78cf2',
     },
 };
 

diff --git a/src/js/apps/Explorer/Explorer.tsx b/src/js/apps/Explorer/Explorer.tsx
diff --git a/src/js/apps/Explorer/index.ts b/src/js/apps/Explorer/index.ts
diff --git a/src/js/components/molecules/SideNavigation/AppInstallDialog.tsx b/src/js/components/molecules/SideNavigation/AppInstallDialog.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogActions from '@material-ui/core/DialogActions';
+import TextField from '@material-ui/core/TextField';
+import useMedia from '../../../services/hooks/useMedia';
+import { addApplication } from '../../../services/ApplicationService';
+import { addSingleApplication } from '../../../store/ApplicationStore';
+
+interface Props {
+    open: boolean;
+    onClose: () => void;
+    dispatch: Function;
+}
+
+function AppInstallDialog(props: Props) {
+    const [manifestTextFieldValue, setManifestTextFieldValue] = React.useState('');
+    const isDesktop = useMedia('(min-width: 960px)');
+
+    async function handleAppInstallClick() {
+        const app = await addApplication(manifestTextFieldValue);
+        props.dispatch(addSingleApplication(app));
+    }
+
+    function handleClose() {
+        setManifestTextFieldValue('');
+        props.onClose();
+    }
+
+    return (
+        <Dialog open={props.open} onClose={handleClose} fullScreen={!isDesktop}>
+            <DialogTitle>Install app via Manifest</DialogTitle>
+            <DialogContent>
+                <DialogContentText>
+                    You can install Progressive Web Apps via the manifest.json. Please fill in the location of the manifest.
+                </DialogContentText>
+                <TextField
+                    margin="dense"
+                    fullWidth
+                    label="Manifest.json"
+                    value={manifestTextFieldValue}
+                    onChange={(event) => setManifestTextFieldValue(event.target.value)}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose}>Cancel</Button>
+                <Button onClick={handleAppInstallClick} color="primary">Install</Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
+
+// @ts-ignore
+export default connect()(AppInstallDialog);
diff --git a/src/js/components/molecules/SideNavigation/SideNavigation.tsx b/src/js/components/molecules/SideNavigation/SideNavigation.tsx
@@ -9,6 +9,7 @@ import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
 import GetAppIcon from '@material-ui/icons/GetApp';
 import { setOpenSideBarNavigationState } from '../../../store/SideBarNavigationStore';
 import UserService from '../../../services/UserService';
+import AppInstallDialog from './AppInstallDialog';
 const styles = require('./SideNavigation.scss');
 
 interface Props {
@@ -17,6 +18,8 @@ interface Props {
 }
 
 function SideNavigation(props: Props) {
+    const [isAppInstallDialogOpen, setAppInstallDialogOpen] = React.useState(false);
+
     function handleDrawerOnClose() {
         props.dispatch(setOpenSideBarNavigationState(false));
     }
@@ -26,23 +29,35 @@ function SideNavigation(props: Props) {
         location.reload();
     }
 
+    async function handleInstallAppClick() {
+        handleDrawerOnClose();
+        setAppInstallDialogOpen(true);
+    }
+
+    async function handleInstallAppDialogClose() {
+        setAppInstallDialogOpen(false);
+    }
+
     return (
-        <Drawer className={styles.drawer} anchor="right" open={props.isOpen} onClose={handleDrawerOnClose}>
-            <List className={styles.drawerList}>
-                <ListItem button>
-                    <ListItemIcon>
-                        <GetAppIcon />
-                    </ListItemIcon>
-                    <ListItemText>Install App</ListItemText>
-                </ListItem>
-                <ListItem button onClick={handleLogoutClick}>
-                    <ListItemIcon>
-                        <PowerSettingsNewIcon />
-                    </ListItemIcon>
-                    <ListItemText>Logout</ListItemText>
-                </ListItem>
-            </List>
-        </Drawer>
+        <>
+            <Drawer className={styles.drawer} anchor="right" open={props.isOpen} onClose={handleDrawerOnClose}>
+                <List className={styles.drawerList}>
+                    <ListItem button onClick={handleInstallAppClick}>
+                        <ListItemIcon>
+                            <GetAppIcon />
+                        </ListItemIcon>
+                        <ListItemText>Install App</ListItemText>
+                    </ListItem>
+                    <ListItem button onClick={handleLogoutClick}>
+                        <ListItemIcon>
+                            <PowerSettingsNewIcon />
+                        </ListItemIcon>
+                        <ListItemText>Logout</ListItemText>
+                    </ListItem>
+                </List>
+            </Drawer>
+            <AppInstallDialog open={isAppInstallDialogOpen} onClose={handleInstallAppDialogClose} />
+        </>
     );
 }
 

diff --git a/src/js/components/organims/AppSection/AppSection.tsx b/src/js/components/organims/AppSection/AppSection.tsx
@@ -37,8 +37,8 @@ function AppSection(props: Props) {
             <div className={styles.AppSection}>
                 <div className={styles.wrapper}>
                     <SwipeableViews enableMouseEvents resistance onChangeIndex={handleChangeIndex} index={viewIndex}>
-                        {appGrids.map((appGrid, index) => {
-                            return <AppGrid grid={appGrid} key={index} />
+                        {appGrids.map((appGrid) => {
+                            return <AppGrid grid={appGrid} key={appGrid.id} />
                         })}
                     </SwipeableViews>
                     <BulletNavigation amount={appGrids.length} activeIndex={viewIndex} onClick={handleChangeIndex} />
@@ -50,6 +50,7 @@ function AppSection(props: Props) {
 
 const mapStateToProps = (store: any) => {
     return {
+        ApplicationStore: store.ApplicationStore,
         apps: store.ApplicationStore.apps,
     };
 };

diff --git a/src/js/models/Application.ts b/src/js/models/Application.ts
@@ -32,16 +32,16 @@ interface Application {
     theme_color: string;
     manifest_url: string;
 
-    properties?: ApplicationProperties,
-    status: ApplicationStatus,
-    isFolder?: boolean,
+    // properties?: ApplicationProperties,
+    // status: ApplicationStatus,
+    // isFolder?: boolean,
     // isRemoteFolder?: boolean,
-    apps?: Application[],
+    // apps?: Application[],
     // businessInfo: {
     //     name: string,
     //     id: string,
     // },
-    supportedDeviceTypes: string[],
+    // supportedDeviceTypes: string[],
 }
 
 export default Application;
diff --git a/src/js/services/ApplicationService.ts b/src/js/services/ApplicationService.ts
@@ -0,0 +1,16 @@
+import Application from "../models/Application";
+import IProvider from "./providers/IProvider";
+import Configuration from "../Configuration";
+
+export async function addApplication(manifestUrl: string): Promise<Application> {
+    const provider: IProvider = Configuration.get('provider');
+    const response = await fetch(manifestUrl);
+    const app: Application = await response.json();
+
+    app.id = Math.random().toString();
+    app.manifest_url = manifestUrl;
+
+    await provider.addApplicationToStore(app);
+
+    return app;
+}
diff --git a/src/js/services/micro/sortAppsInGrids.ts b/src/js/services/micro/sortAppsInGrids.ts
@@ -1,6 +1,7 @@
 import Application from "../../models/Application";
 
 export interface AppGrid {
+    id: string;
     apps: Application[];
 }
 
@@ -15,6 +16,7 @@ export interface AppGrid {
 export default function sortAppsInGrids(apps: Application[], amountPerGrid: number): AppGrid[] {
     const result: AppGrid[] = [];
     let gridItem: AppGrid = {
+        id: Math.random().toString(),
         apps: [],
     };
 
@@ -25,7 +27,10 @@ export default function sortAppsInGrids(apps: Application[], amountPerGrid: numb
             result.push(gridItem);
 
             // Rest the grid
-            gridItem = { apps: [] };
+            gridItem = {
+                id: Math.random().toString(),
+                apps: []
+            };
         }
     });
 

diff --git a/src/js/services/providers/IProvider.ts b/src/js/services/providers/IProvider.ts
@@ -30,4 +30,5 @@ export default interface IProvider {
     getPrivateKeyForApp(appId: string, nonce: number, userKeys: PrivateKey): PrivateKey;
     storageSet(key: string, value: string): Promise<void>;
     storageGet(key: string): Promise<string>;
+    addApplicationToStore(app: Application): Promise<void>;
 }
diff --git a/src/js/services/providers/RutileContract.ts b/src/js/services/providers/RutileContract.ts
@@ -0,0 +1,25 @@
+import * as ethers from "ethers";
+import Application from "../../models/Application";
+
+class RutileContract {
+    contract: ethers.Contract;
+
+    constructor(address: string, provider: ethers.providers.JsonRpcProvider, wallet: ethers.Wallet) {
+        const abi: string[] = [
+            'function addApplicationToStore(string app)',
+        ];
+
+        this.contract = new ethers.Contract(address, abi, wallet);
+    }
+
+    async addApplicationToStore(app: Application) {
+        const data = ethers.utils.toUtf8Bytes(JSON.stringify(app));
+        const encodedData = ethers.utils.hexlify(data);
+
+        console.log('[] this.contract -> ', this.contract);
+
+        await this.contract.addApplicationToStore(encodedData);
+    }
+}
+
+export default RutileContract;