+}
+
+export default HelloFromJsx
\ No newline at end of file
diff --git a/src/apps/HelloFromTsx/HelloFromTsx.tsx b/src/apps/HelloFromTsx/HelloFromTsx.tsx
new file mode 100644
index 0000000..2f49a09
--- /dev/null
+++ b/src/apps/HelloFromTsx/HelloFromTsx.tsx
@@ -0,0 +1,5 @@
+const HelloFromTsx = () => {
+ return
Hello from TSX!
+}
+
+export default HelloFromTsx
\ No newline at end of file
diff --git a/src/apps/index.js b/src/apps/index.js
new file mode 100644
index 0000000..13d7076
--- /dev/null
+++ b/src/apps/index.js
@@ -0,0 +1,12 @@
+import HelloFromTsx from "./HelloFromTsx/HelloFromTsx";
+import HelloFromJsx from "./HelloFromJsx/HelloFromJsx";
+import AddWebApp from "./AddWebApp"
+import ChatClient from "./ChatClient"
+
+
+export {
+ AddWebApp,
+ ChatClient,
+ HelloFromTsx,
+ HelloFromJsx
+}
\ No newline at end of file
diff --git a/src/apps/module.d.ts b/src/apps/module.d.ts
new file mode 100644
index 0000000..5e451ad
--- /dev/null
+++ b/src/apps/module.d.ts
@@ -0,0 +1,6 @@
+
+
+declare module '**/*.jsx' {
+ var _: React.Component;
+ export default _;
+}
\ No newline at end of file
diff --git a/src/constants.js b/src/constants.ts
similarity index 50%
rename from src/constants.js
rename to src/constants.ts
index bb6028c..4914cc0 100644
--- a/src/constants.js
+++ b/src/constants.ts
@@ -1,32 +1,65 @@
-export const BUILT_IN_APPS = {
- addwebapp: {
- appid: "addwebapp",
- title: "Add New Web App",
- width: 800,
- height: 600,
- single: true,
- editable: false,
- imageUrl: "addwebapp.png"
- },
- chatclient: {
- appid: "chatclient",
- title: "Chat Client",
- width: 700,
- height: 500,
- deletable: true,
- editable: true,
- imageUrl: "chatclient.png"
- },
- statueofliberty: {
- appid: "statueofliberty",
- title: "Statue of Liberty",
- width: 700,
- height: 300,
- deletable: true,
- url: "https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3025.2951909971443!2d-74.04449699999999!3d40.689496000000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zNDDCsDQxJzIyLjIiTiA3NMKwMDInNDAuMiJX!5e0!3m2!1sen!2sus!4v1679086836141!5m2!1sen!2sus",
- editable: true
- }
-}
-
-export const MAX_WIDTH_PX = 300;
-export const MAX_HEIGHT_PX = 200;
\ No newline at end of file
+export interface AppStruct {
+ appid: string,
+ title: string,
+ width: number,
+ height: number,
+ url?: string,
+ single?: boolean,
+ deletable?: boolean,
+ editable?: boolean,
+ imageUrl?: string,
+ dom?: JSX.Element
+}
+
+export interface AppsInterface{
+ [key: string]: AppStruct
+}
+
+export const BUILT_IN_APPS: AppsInterface = {
+ addwebapp: {
+ appid: "addwebapp",
+ title: "Add New Web App",
+ width: 800,
+ height: 600,
+ single: true,
+ editable: false,
+ imageUrl: "addwebapp.png"
+ },
+ chatclient: {
+ appid: "chatclient",
+ title: "Chat Client",
+ width: 700,
+ height: 500,
+ deletable: true,
+ editable: true,
+ imageUrl: "chatclient.png"
+ },
+ statueofliberty: {
+ appid: "statueofliberty",
+ title: "Statue of Liberty",
+ width: 700,
+ height: 300,
+ deletable: true,
+ url: "https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3025.2951909971443!2d-74.04449699999999!3d40.689496000000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zNDDCsDQxJzIyLjIiTiA3NMKwMDInNDAuMiJX!5e0!3m2!1sen!2sus!4v1679086836141!5m2!1sen!2sus",
+ editable: true
+ },
+ hellofromjsx: {
+ appid: "hellofromjsx",
+ title: "Hello From JSX",
+ width: 700,
+ height: 300,
+ deletable: true,
+ editable: true
+ },
+ hellofromtsx: {
+ appid: "hellofromtsx",
+ title: "Hello From TSX",
+ width: 700,
+ height: 300,
+ deletable: true,
+ editable: true
+ }
+}
+
+export const MAX_WIDTH_PX: number = 300;
+export const MAX_HEIGHT_PX: number = 200;
\ No newline at end of file
diff --git a/src/css/App.css b/src/css/App.css
index 6249a1e..04082fe 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -1,252 +1,248 @@
-html {
- height: 100%;
-}
-
-body{
- overflow: hidden;
- min-height: 100vh;
-}
-
-.hover{
- touch-action: none;
-}
-
-.hover:hover{
- color: white;
-}
-
-.window{
- position: absolute;
- background-color: #777777 ;
- overflow: auto;
- cursor: auto;
- touch-action: none;
-
-
-}
-
-
-
-.header{
- text-align: center;
- border-bottom: dashed 1px rgb(90, 95, 90);
- font-weight: bold;
- margin-bottom: 0 !important;
- padding: 5px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- min-height: 50px;
-}
-
-.header-logo{
- font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
- text-shadow: 0.4px 1px #302c2c;
- color: white;
- font-size: 20px;
-}
-
-.header-apps-button{
- float: left;
-}
-
-.frame-border{
- position: fixed;
- background-color: #535353;
- resize: both;
- box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
-}
-
-.topbar{
- background-color: #3a3939;
- padding: 10px;
- color: #cacaca;
- cursor: pointer;
- touch-action: none;
-}
-
-.framestyle{
- top: 0;
- right: 0;
-
-}
-
-.frameloading{
- position:absolute;
- left:0; right:0;
- top:0; bottom:0;
- margin:auto;
- text-align: center;
-}
-
-
-.flex-width{
- width: 100%
-}
-
-.flex-height{
- height: 100%;
-}
-
-.btn-secondary{
- background-color: #404346 !important;
-}
-
-
-.window-footer {
- position: fixed;
- bottom: -45px;
- height: 40px;
- color:white;
- width: 100%;
- z-index: 999;
- align-items: center;
- border-top: solid 2px rgb(20, 20, 20);
- background: rgb(28,29,28);
- background: -moz-linear-gradient(0deg, rgba(28,29,28,1) 0%, rgba(68,71,69,1) 100%);
- background: -webkit-linear-gradient(0deg, rgba(28,29,28,1) 0%, rgba(68,71,69,1) 100%);
- background: linear-gradient(0deg, rgba(28,29,28,1) 0%, rgba(68,71,69,1) 100%);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c1d1c",endColorstr="#444745",GradientType=1);
- align-items: center;
- display:flex;
-}
-
-.footer {
- position: fixed;
- bottom: 0;
- min-height: 40px;
- color:white;
- width: 100%;
- z-index: 999;
- align-items: center;
- border-top: solid 2px rgb(44, 44, 44);
- background: rgb(36,36,36);
- background: -moz-linear-gradient(0deg, rgba(36,36,36,1) 0%, rgba(55,55,55,1) 100%);
- background: -webkit-linear-gradient(0deg, rgba(36,36,36,1) 0%, rgba(55,55,55,1) 100%);
- background: linear-gradient(0deg, rgba(36,36,36,1) 0%, rgba(55,55,55,1) 100%);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#242424",endColorstr="#373737",GradientType=1);
- align-items: center;
- display:flex;
- overflow-x:auto;
- overflow-y: hidden;
-}
-
-
-.showing{
- color:white;
- background-color: rgb(88, 88, 88);
-}
-
-
-.noselect {
- -webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Safari */
- -khtml-user-select: none; /* Konqueror HTML */
- -moz-user-select: none; /* Old versions of Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none; /* Non-prefixed version, currently
- supported by Chrome, Edge, Opera and Firefox */
-}
-
-
-.nohighlight{
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-
-.full-modal {
- padding: 0 !important;
-}
-.full-modal .modal-dialog {
- width: 100%;
- max-width: none;
- height: 100%;
- margin: 0;
-}
-
-.full-modal .modal-header .close{
- color:white !important;
-}
-.full-modal .modal-content {
- height: 100%;
- border: 0;
- border-radius: 0;
- color: white;
- background: #5a5a5a;
-}
-.full-modal .modal-body {
- overflow-y: auto;
-}
-
-
-
-table {
- color: rgb(209, 209, 209) !important;
-}
-
-
-.resize-arrow{
- position: absolute;
- right: -4px;
- bottom: -10px;
- cursor: se-resize ;
- z-index: 1
-}
-
-.resize-arrow-container{
- position: absolte;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: -999;
- pointer-events: none;
-}
-
-.stroke{
- stroke: url(#2a2a2a) !important;
-}
-
-.settings-cell{
- max-width: 200px;
- overflow-x: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.sash-vertical{
- z-index: 1 !important;
- width: 5px !important;
- background-color: #474747;
-}
-
-.sash-horizontal{
- z-index: 1 !important;
- height: 5px !important;
- background-color: #474747;
-}
-
-:root {
- --separator-border: none !important;
- --focus-border: none !important;
-}
-
-.split-view-view{
- z-index: 0 !important;
-}
-
-.sash-container{
- z-index: 1 !important;
-}
-
-.split-view-container{
- z-index: 0 !important;
-}
-.split-view{
- z-index: 0 !important;
+html {
+ height: 100%;
+}
+
+body{
+ overflow: hidden;
+ min-height: 100vh;
+}
+
+.hover{
+ touch-action: none;
+}
+
+.hover:hover{
+ color: white;
+}
+
+.window{
+ position: absolute;
+ background-color: inherit;
+ overflow: auto;
+ cursor: auto;
+ touch-action: none;
+}
+
+
+
+.header{
+ text-align: center;
+ border-bottom: dashed 1px rgb(90, 95, 90);
+ font-weight: bold;
+ margin-bottom: 0 !important;
+ padding: 5px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.header-logo{
+ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+ text-shadow: 0.4px 1px #302c2c;
+ color: white;
+ font-size: 20px;
+}
+
+.header-apps-button{
+ float: left;
+}
+
+.frame-border{
+ position: fixed;
+ background-color: #535353;
+ resize: both;
+ box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
+}
+
+.topbar{
+ background-color: #3a3939;
+ color: #cacaca;
+ cursor: pointer;
+ touch-action: none;
+ font-size: 0.85rem;
+}
+
+.framestyle{
+ top: 0;
+ right: 0;
+
+}
+
+.frameloading{
+ position:absolute;
+ left:0; right:0;
+ top:0; bottom:0;
+ margin:auto;
+ text-align: center;
+}
+
+
+.flex-width{
+ width: 100%
+}
+
+.flex-height{
+ height: 100%;
+}
+
+.btn-secondary{
+ background-color: #404346 !important;
+}
+
+
+.window-footer {
+ position: fixed;
+ bottom: -45px;
+ height: 40px;
+ color:white;
+ width: 100%;
+ z-index: 999;
+ align-items: center;
+ border-top: solid 2px rgb(20, 20, 20);
+ background: rgb(28,29,28);
+ background: -moz-linear-gradient(0deg, rgba(28,29,28,1) 0%, rgba(68,71,69,1) 100%);
+ background: -webkit-linear-gradient(0deg, rgba(28,29,28,1) 0%, rgba(68,71,69,1) 100%);
+ background: linear-gradient(0deg, rgba(28,29,28,1) 0%, rgba(68,71,69,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c1d1c",endColorstr="#444745",GradientType=1);
+ align-items: center;
+ display:flex;
+}
+
+.footer {
+ position: fixed;
+ bottom: 0;
+ color:white;
+ width: 100%;
+ z-index: 999;
+ align-items: center;
+ border-top: solid 2px rgb(44, 44, 44);
+ background: rgb(36,36,36);
+ background: -moz-linear-gradient(0deg, rgba(36,36,36,1) 0%, rgba(55,55,55,1) 100%);
+ background: -webkit-linear-gradient(0deg, rgba(36,36,36,1) 0%, rgba(55,55,55,1) 100%);
+ background: linear-gradient(0deg, rgba(36,36,36,1) 0%, rgba(55,55,55,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#242424",endColorstr="#373737",GradientType=1);
+ align-items: center;
+ display:flex;
+ overflow-x:auto;
+ overflow-y: hidden;
+}
+
+
+.showing{
+ color:white;
+ background-color: rgb(88, 88, 88);
+}
+
+
+.noselect {
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Safari */
+ -khtml-user-select: none; /* Konqueror HTML */
+ -moz-user-select: none; /* Old versions of Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none; /* Non-prefixed version, currently
+ supported by Chrome, Edge, Opera and Firefox */
+}
+
+
+.nohighlight{
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+
+.full-modal {
+ padding: 0 !important;
+}
+.full-modal .modal-dialog {
+ width: 100%;
+ max-width: none;
+ height: 100%;
+ margin: 0;
+}
+
+.full-modal .modal-header .close{
+ color:white !important;
+}
+.full-modal .modal-content {
+ height: 100%;
+ border: 0;
+ border-radius: 0;
+ color: white;
+ background: #5a5a5a;
+}
+.full-modal .modal-body {
+ overflow-y: auto;
+}
+
+
+
+table {
+ color: rgb(209, 209, 209) !important;
+}
+
+
+.resize-arrow{
+ position: absolute;
+ right: -2px;
+ bottom: -9px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.resize-arrow-container{
+ height: 20px;
+ width: 20px;
+ position: absolute;
+ right: -10px;
+ bottom: -10px;
+ z-index: 1;
+ cursor: se-resize ;
+}
+
+.stroke{
+ stroke: url(#2a2a2a) !important;
+}
+
+.settings-cell{
+ max-width: 200px;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.sash-vertical{
+ z-index: 1 !important;
+ width: 5px !important;
+ background-color: #474747;
+}
+
+.sash-horizontal{
+ z-index: 1 !important;
+ height: 5px !important;
+ background-color: #474747;
+}
+
+:root {
+ --separator-border: none !important;
+ --focus-border: none !important;
+}
+
+.split-view-view{
+ z-index: 0 !important;
+}
+
+.sash-container{
+ z-index: 1 !important;
+}
+
+.split-view-container{
+ z-index: 0 !important;
+}
+.split-view{
+ z-index: 0 !important;
}
\ No newline at end of file
diff --git a/src/css/index.css b/src/css/index.css
index 4f7b681..f871da5 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,9 +1,9 @@
-body {
- margin: 0;
- touch-action: none;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
+body {
+ margin: 0;
+ touch-action: none;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
diff --git a/src/img/unknown-1.png b/src/img/unknown-1.png
deleted file mode 100644
index 8334e1b..0000000
Binary files a/src/img/unknown-1.png and /dev/null differ
diff --git a/src/img/unknown.jpg b/src/img/unknown.jpg
deleted file mode 100644
index 95f4501..0000000
Binary files a/src/img/unknown.jpg and /dev/null differ
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..6119ad9
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,68 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/src/main.jsx b/src/main.tsx
similarity index 78%
rename from src/main.jsx
rename to src/main.tsx
index 4fedbd2..45f9dd0 100644
--- a/src/main.jsx
+++ b/src/main.tsx
@@ -1,86 +1,82 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import AppManager from './waim/AppManager';
-import * as serviceWorker from './serviceWorker';
-import { Provider } from "react-redux";
-import store from "./redux/store";
-import { createTheme, ThemeProvider, CssBaseline } from '@mui/material';
-import { grey, blueGrey } from '@mui/material/colors';
-
-
-// create a palette for themes
-// the mode can be used to specifcy specific color schemes
-// currently only dark and light are supported
-const getDesignTokens = (mode) => ({
- palette: {
- mode,
- primary: {
- ...grey,
- ...(mode === 'dark' && {
- main: grey[300],
- }),
- },
- ...(mode === 'light' && {
- background: {
- default: grey[300],
- paper: blueGrey[200],
- },
- }),
- ...(mode === 'dark' && {
- background: {
- default: grey[700],
- paper: grey[800],
- },
- }),
- text: {
- ...(mode === 'light'
- ? {
- primary: grey[900],
- secondary: grey[800],
- }
- : {
- primary: '#fff',
- secondary: grey[300],
- }),
- }
- },
- overrides: {
- MuiOutlinedInput: {
- root: {
- // Hover state
- "&:hover $notchedOutline": {
- borderColor: "#9a9a9a"
- },
- // Focused state
- "&$focused $notchedOutline": {
- borderColor: "#9a9a9a"
- }
- },
- // Default State
- notchedOutline: {
- borderColor: "#9a9a9a"
- }
- }
- }
-});
-
-// we pass the value of the mode here
-const theme = createTheme(getDesignTokens('dark'));
-
-// generate the root dom
-const root = ReactDOM.createRoot(document.getElementById("root"));
-
-// pass it to the redux store provider, theme provide, and css baseline components
-root.render(
-
-
-
-
-
-
-);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+import ReactDOM from 'react-dom/client';
+import AppManager from './waim/AppManager';
+import { Provider } from "react-redux";
+import { createTheme, ThemeProvider, CssBaseline, ThemeOptions, PaletteMode } from '@mui/material';
+import { grey, blueGrey } from '@mui/material/colors';
+import { store } from './waim/redux/store';
+
+interface ThemeType extends ThemeOptions {
+ overrides: Object
+}
+
+// create a palette for themes
+// the mode can be used to specifcy specific color schemes
+// currently only dark and light are supported
+const getDesignTokens = (mode: PaletteMode): ThemeType => ({
+ palette: {
+ mode,
+ primary: {
+ ...grey,
+ ...(mode === 'dark' && {
+ main: grey[300],
+ }),
+ },
+ ...(mode === 'light' && {
+ background: {
+ default: grey[300],
+ paper: blueGrey[200],
+ },
+ }),
+ ...(mode === 'dark' && {
+ background: {
+ default: grey[700],
+ paper: grey[800],
+ },
+ }),
+ text: {
+ ...(mode === 'light'
+ ? {
+ primary: grey[900],
+ secondary: grey[800],
+ }
+ : {
+ primary: '#fff',
+ secondary: grey[300],
+ }),
+ }
+ },
+ overrides: {
+ MuiOutlinedInput: {
+ root: {
+ // Hover state
+ "&:hover $notchedOutline": {
+ borderColor: "#9a9a9a"
+ },
+ // Focused state
+ "&$focused $notchedOutline": {
+ borderColor: "#9a9a9a"
+ }
+ },
+ // Default State
+ notchedOutline: {
+ borderColor: "#9a9a9a"
+ }
+ }
+ }
+});
+
+// we pass the value of the mode here
+const theme = createTheme(getDesignTokens('dark'));
+
+// generate the root dom
+const root = ReactDOM.createRoot(document.getElementById("root")!);
+
+// pass it to the redux store provider, theme provide, and css baseline components
+root.render(
+
+
+
+
+
+
+);
diff --git a/src/redux/actionTypes.js b/src/redux/actionTypes.js
deleted file mode 100644
index b51a461..0000000
--- a/src/redux/actionTypes.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export const SHOW_WINDOW = "SHOW_WINDOW"
-export const CREATE_APP = "CREATE_APP"
-export const HIDE_WINDOW = "HIDE_WINDOW"
-export const TOGGLE_SETTINGS = "TOGGLE_SETTINGS"
-export const UPDATE_INDEX = "UPDATE_INDEX"
-export const MINIMIZE_WINDOW = "MINIMIZE_WINDOW"
-export const UNMINIMIZE_WINDOW = "UNMINIMIZE_WINDOW"
-export const UNMINIMIZE_UPDATE_INDEX = "UNMINIMIZE_UPDATE_INDEX"
-export const HIDE_WINDOW_ID = "HIDE_WINDOW_ID"
-export const DELETE_WINDOW = "DELETE_WINDOW"
-export const LOAD_APPS = "LOAD_APPS"
-export const RESET_DEFAULT = "RESET_DEFAULT"
-export const UPDATE_WINDOW = "UPDATE_WINDOW"
-export const ADD_APP_DOM = "ADD_APP_DOM"
-export const SELECT_LAYOUT_APP = "SELECT_LAYOUT_APP"
-export const REMOVE_ALL_LAYOUT = "REMOVE_ALL_LAYOUT"
-export const CREATE_NOTIFICATION = "CREATE_NOTIFICATION"
-export const REMOVE_NOTIFICATION = "REMOVE_NOTIFICATION"
-export const SELECT_LAYOUT = "SELECT_LAYOUT"
-export const ADD_LAYOUT = "ADD_LAYOUT"
-export const ADD_LAYOUT_INITIAL = "ADD_LAYOUT_INITIAL"
-export const TOGGLE_LAYOUT_EDIT = "TOGGLE_LAYOUT_EDIT"
-export const LAYOUT_SIZE_CHANGE = "LAYOUT_SIZE_CHANGE"
\ No newline at end of file
diff --git a/src/redux/actions.js b/src/redux/actions.js
deleted file mode 100644
index 5973020..0000000
--- a/src/redux/actions.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import {
- SHOW_WINDOW,
- CREATE_APP,
- HIDE_WINDOW,
- TOGGLE_SETTINGS,
- UPDATE_INDEX,
- MINIMIZE_WINDOW,
- UNMINIMIZE_WINDOW,
- UNMINIMIZE_UPDATE_INDEX,
- HIDE_WINDOW_ID,
- DELETE_WINDOW,
- LOAD_APPS,
- RESET_DEFAULT,
- UPDATE_WINDOW,
- SELECT_LAYOUT,
- ADD_APP_DOM,
- SELECT_LAYOUT_APP,
- REMOVE_ALL_LAYOUT,
- CREATE_NOTIFICATION,
- REMOVE_NOTIFICATION,
- ADD_LAYOUT,
- ADD_LAYOUT_INITIAL,
- TOGGLE_LAYOUT_EDIT,
- LAYOUT_SIZE_CHANGE
-} from "./actionTypes";
-
-
-export const hideWindow = index => ({
- type: HIDE_WINDOW,
- payload: { index }
-})
-
-export const showWindow = appid => ({
- type: SHOW_WINDOW,
- payload: { appid }
-})
-
-export const createApp = (appid, title, width, height, url, single, deletable, editable, imageUrl) => ({
- type: CREATE_APP,
- payload: { appid, title, width, height, url, single, deletable, editable, imageUrl }
-})
-
-export const updateWindow = (appid, title, width, height, url, single, deletable, editable, imageUrl) => ({
- type: UPDATE_WINDOW,
- payload: { appid, title, width, height, url, single, deletable, editable, imageUrl }
-})
-
-
-export const toggleShowing = (showing) => ({
- type: TOGGLE_SETTINGS,
- payload: { showing }
-})
-
-
-export const updateIndex = (viewid) => ({
- type: UPDATE_INDEX,
- payload: { viewid }
-})
-
-export const minimizeWindow = (index) => ({
- type: MINIMIZE_WINDOW,
- payload: { index }
-})
-
-export const unminimizeWindow = (index) => ({
- type: UNMINIMIZE_WINDOW,
- payload: { index }
-})
-
-export const uminimizeUpdateIndex = (viewid) => ({
- type: UNMINIMIZE_UPDATE_INDEX,
- payload: { viewid }
-})
-
-export const hideWindowId = (viewid) => ({
- type: HIDE_WINDOW_ID,
- payload: { viewid }
-})
-
-
-export const deleteWindow = (appid) => ({
- type: DELETE_WINDOW,
- payload: { appid }
-})
-
-export const loadApps = () => ({
- type: LOAD_APPS
-})
-
-export const resetDefault = () => ({
- type: RESET_DEFAULT
-})
-
-
-
-export const selectLayout = (layoutType) => ({
- type: SELECT_LAYOUT,
- payload: {layoutType}
-})
-
-
-export const addAppDom = (appid, appDom) => ({
- type: ADD_APP_DOM,
- payload: {appid, appDom}
-})
-
-
-export const selectLayoutApp = (appid, indexPath) => ({
- type: SELECT_LAYOUT_APP,
- payload: {appid, indexPath}
-})
-
-export const removeAllLayout = () => ({
- type: REMOVE_ALL_LAYOUT
-})
-
-export const createNotification = (message, type, duration) => ({
- type: CREATE_NOTIFICATION,
- payload: {message, type, duration}
-})
-
-export const removeNotification = (id) => ({
- type: REMOVE_NOTIFICATION,
- payload: {id}
-})
-
-
-export const addLayout = (indexPath, layoutType) => ({
- type: ADD_LAYOUT,
- payload: {indexPath, layoutType}
-})
-
-export const addInitialLayout = (layoutType) => ({
- type: ADD_LAYOUT_INITIAL,
- payload: {layoutType}
-})
-
-export const toggleLayoutEdit = () => ({
- type: TOGGLE_LAYOUT_EDIT
-})
-
-export const layoutSizeChange = (indexPath, sizes) => ({
- type: LAYOUT_SIZE_CHANGE,
- payload: {indexPath, sizes}
-})
-
diff --git a/src/redux/constants.js b/src/redux/constants.js
deleted file mode 100644
index cb63ffb..0000000
--- a/src/redux/constants.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export const VERTICAL_2COLUM = 0
-export const HORIZONTAL_2COLUMN = 1
-export const HORIZONTAL_LAYOUT = "HORIZONTAL_LAYOUT"
-export const VERTICAL_LAYOUT = "VERTICAL_LAYOUT"
-export const SELECTED_APP = "SELECTED_APP"
\ No newline at end of file
diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js
deleted file mode 100644
index d5bb8e5..0000000
--- a/src/redux/reducers/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { combineReducers } from "redux";
-import windows from "./windows";
-import settings from "./settings"
-
-export default combineReducers({ windows, settings });
diff --git a/src/redux/reducers/settings.js b/src/redux/reducers/settings.js
deleted file mode 100644
index 70d49d0..0000000
--- a/src/redux/reducers/settings.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { TOGGLE_SETTINGS} from "../actionTypes";
-import * as R from 'ramda'
-
-const initialState = {
- showing: false
-};
-
-export default function(state = initialState, action) {
- switch (action.type) {
- case TOGGLE_SETTINGS: {
- const {showing} = action.payload
- return R.assoc("showing", showing, state)
- }
- default:
- return state;
- }
-}
diff --git a/src/redux/reducers/windows.js b/src/redux/reducers/windows.js
deleted file mode 100644
index 27261a6..0000000
--- a/src/redux/reducers/windows.js
+++ /dev/null
@@ -1,430 +0,0 @@
-import {
- CREATE_APP,
- SHOW_WINDOW,
- HIDE_WINDOW,
- UPDATE_INDEX,
- MINIMIZE_WINDOW,
- UNMINIMIZE_WINDOW,
- UNMINIMIZE_UPDATE_INDEX,
- HIDE_WINDOW_ID,
- DELETE_WINDOW,
- LOAD_APPS,
- RESET_DEFAULT,
- UPDATE_WINDOW,
- ADD_APP_DOM,
- REMOVE_ALL_LAYOUT,
- SELECT_LAYOUT,
- SELECT_LAYOUT_APP,
- CREATE_NOTIFICATION,
- REMOVE_NOTIFICATION,
- ADD_LAYOUT,
- ADD_LAYOUT_INITIAL,
- TOGGLE_LAYOUT_EDIT,
- LAYOUT_SIZE_CHANGE
-} from "../actionTypes";
-import * as R from 'ramda'
-import { BUILT_IN_APPS } from '../../constants'
-import { SELECTED_APP } from "../constants";
-let appView = 0;
-let opened = {}
-const appName = "waim"
-const appNameLayout = "waimlayout"
-const initialState = {
- apps: BUILT_IN_APPS,
- view: [],
- appDoms: {},
- layout:
- {},
- layoutEditEnabled: false,
- notificationCount: 0,
- notifications: {},
- openApps: {}
-};
-
-const save = (newstate) => {
- const myStorage = window.localStorage;
- myStorage.setItem(appName, JSON.stringify(newstate.apps));
- return newstate
-}
-
-const countLayoutApps = (map, layout) => {
- if(R.isNil(layout)){
- return 0
- }
- if(layout.type === SELECTED_APP){
- let count = 0;
- if(map.get(layout.appid) !== undefined){
- count = map.get(layout.appid)
- }
- map.set(layout.appid, count+1)
- }
- if(layout["0"] !== undefined){
- countLayoutApps(map, layout[0])
- }
- if(layout["1"] !== undefined){
- countLayoutApps(map, layout[1])
- }
-}
-const load = (newstate) => {
- const myStorage = window.localStorage;
- const apps = myStorage.getItem(appName);
- const layout = myStorage.getItem(appNameLayout)
- const layoutObj = R.assoc("layout", JSON.parse(layout), newstate)
- const map = new Map()
- countLayoutApps(map, R.prop("layout", layoutObj))
- let tmpLayoutObj = layoutObj
- for (let [key, value] of map) {
- tmpLayoutObj = R.assocPath(["openApps", key], value, tmpLayoutObj)
- }
- return R.assoc("apps", R.isNil(apps) ? BUILT_IN_APPS : JSON.parse(apps), tmpLayoutObj)
-}
-
-
-
-
-const updateIn = R.curry((path, val, obj) => R.compose(
- R.set(R.__, val, obj),
- R.apply(R.compose),
- R.map(R.cond([[R.is(Number), R.lensIndex], [R.T, R.lensProp]]))
-)(path));
-
-export default function main(state = initialState, action) {
- switch (action.type) {
- case SHOW_WINDOW: {
- const { appid } = action.payload
- if (R.pathEq(["apps", appid, "single"], true, state) && R.gt(R.path(["openApps", appid], state), 0)) {
- return state
- }
- appView++
- opened[appid] = true
- return R.compose(
- R.assoc("view", R.append({ appid, viewid: appView, zIndex: Number(R.length(R.prop("view", state)) + 1) }, state.view)),
- R.assocPath(["openApps", appid], R.inc(R.pathOr(0, ["openApps", appid], state)))
- )(state)
- }
-
- case HIDE_WINDOW: {
- const { index } = action.payload
-
- delete opened[R.path(["view", index, "appid"], state)]
- const zIndex = R.path(["view", Number(index), "zIndex"], state)
- const viewid = R.path(["view", Number(index), "viewid"], state)
- const length = R.length(state.view)
- const instance = R.compose(
- R.map(([index, win]) => {
- const fviewid = R.prop("viewid", win)
- const fzIndex = R.prop("zIndex", win)
- if (R.equals(fviewid, viewid)) {
- return R.assoc("zIndex", Number(length), win)
- }
- else {
- if (Number(fzIndex) > zIndex) {
- return R.assoc("zIndex", Number(fzIndex) - 1, win)
- }
- else {
- return R.assoc("zIndex", fzIndex, win)
- }
- }
- }),
- R.toPairs,
- )(state.view)
- const appid = R.path(["view", index, "appid"], state)
- return R.compose(
- R.assoc("view", R.remove(index, 1, instance)),
- R.assocPath(["openApps", appid], R.dec(R.pathOr(0, ["openApps", appid], state)))
- )(state)
- }
- case CREATE_APP: {
- const payload = action.payload;
- const window = {
- appid: payload.appid,
- title: R.propOr("No Title", "title", payload),
- width: R.propOr(500, "width", payload),
- height: R.propOr(500, "height", payload),
- url: R.propOr("", "url", payload),
- single: R.propOr(false, "single", payload),
- deletable: R.propOr(true, "deletable", payload),
- editable: R.propOr(true, "editable", payload),
- imageUrl: R.propOr("", "imageUrl", payload),
- }
- return R.compose(
- save,
- R.assocPath(["apps", action.payload.appid], window)
- )(state)
- }
- case UPDATE_INDEX: {
- const { viewid } = action.payload
- const length = R.length(state.view)
- const index = R.findIndex(R.propEq("viewid", viewid))(R.prop("view", state));
- const zIndex = R.path(["view", Number(index), "zIndex"], state)
- if (R.pathEq(["view", Number(index), "zIndex"], length, state)) {
- return state
- }
- const instance = R.compose(
- R.map(([index, win]) => {
- const fviewid = R.prop("viewid", win)
- const fzIndex = R.prop("zIndex", win)
- if (R.equals(fviewid, viewid)) {
- return R.assoc("zIndex", Number(length), win)
- }
- else {
- if (Number(fzIndex) > zIndex) {
- return R.assoc("zIndex", Number(fzIndex) - 1, win)
- }
- else {
- return R.assoc("zIndex", fzIndex, win)
- }
- }
- }),
- R.toPairs,
- )(state.view)
- return R.assoc("view", instance, state)
- }
- case MINIMIZE_WINDOW: {
- const { index } = action.payload
- const updateIn = R.curry((path, val, obj) => R.compose(
- R.set(R.__, val, obj),
- R.apply(R.compose),
- R.map(R.cond([[R.is(Number), R.lensIndex], [R.T, R.lensProp]]))
- )(path));
- return updateIn(["view", Number(index), "minimized"], true, state);
-
- }
- case UNMINIMIZE_WINDOW: {
- const { index } = action.payload
- return updateIn(["view", Number(index), "minimized"], false, state);
-
- }
-
- case UNMINIMIZE_UPDATE_INDEX: {
- const { viewid } = action.payload
- const length = R.length(state.view)
- const index = R.findIndex(R.propEq("viewid", viewid))(R.prop("view", state));
- const zIndex = R.path(["view", Number(index), "zIndex"], state)
-
-
- const min = updateIn(["view", Number(index), "minimized"], false, state)
- if (R.pathEq(["view", Number(index), "zIndex"], length, state)) {
- return min
- }
- const instance = R.compose(
- R.map(([index, win]) => {
- const fviewid = R.prop("viewid", win)
- const fzIndex = R.prop("zIndex", win)
- if (R.equals(fviewid, viewid)) {
- return R.assoc("zIndex", Number(length), win)
- }
- else {
- if (Number(fzIndex) > zIndex) {
- return R.assoc("zIndex", Number(fzIndex) - 1, win)
- }
- else {
- return R.assoc("zIndex", fzIndex, win)
- }
- }
- }),
- R.toPairs
- )(min.view)
- return R.assoc("view", instance, state)
- }
-
- case HIDE_WINDOW_ID: {
- const { viewid } = action.payload
- const index = R.findIndex(R.propEq("viewid", viewid))(R.prop("view", state));
- delete opened[R.path(["view", index, "appid"], state)]
- const zIndex = R.path(["view", Number(index), "zIndex"], state)
- const length = R.length(state.view)
- const instance = R.compose(
- R.map(([index, win]) => {
- const fviewid = R.prop("viewid", win)
- const fzIndex = R.prop("zIndex", win)
- if (R.equals(fviewid, viewid)) {
- return R.assoc("zIndex", Number(length), win)
- }
- else {
- if (Number(fzIndex) > zIndex) {
- return R.assoc("zIndex", Number(fzIndex) - 1, win)
- }
- else {
- return R.assoc("zIndex", fzIndex, win)
- }
- }
- }),
- R.toPairs,
- )(state.view)
-
- const appid = R.path(["view", index, "appid"], state)
-
- return R.compose(
- R.assoc("view", R.remove(index, 1, instance)),
- R.assocPath(["openApps", appid], R.dec(R.pathOr(0, ["openApps", appid], state)))
- )(state)
-
- }
-
-
- case UPDATE_WINDOW: {
- const payload = action.payload;
- const window = {
- appid: payload.appid,
- title: R.propOr("No Title", "title", payload),
- width: R.propOr(500, "width", payload),
- height: R.propOr(500, "height", payload),
- url: R.propOr("", "url", payload),
- single: R.propOr(false, "single", payload),
- deletable: R.propOr(true, "deletable", payload),
- editable: R.propOr(true, "editable", payload),
- imageUrl: R.propOr("", "imageUrl", payload),
- }
- delete opened[payload.appid]
-
- const removed = R.compose(
- save,
- R.assocPath(["apps", payload.appid], window),
- R.assoc("view", R.filter(view => {
- return !R.propEq("appid", payload.appid, view)
- }, state.view)
- ))(state)
-
-
- const sorted = R.reverse(R.sortBy(R.prop("zIndex"), removed.view))
- let lengthIndex = sorted.length
- return R.assoc("view", R.compose(
- R.map(([index, win]) => {
- return R.assoc("zIndex", lengthIndex--, win)
- }),
- R.toPairs,
- )(sorted), removed)
-
- }
-
- case DELETE_WINDOW: {
- const { appid } = action.payload
- const removed = R.compose(
- save,
- R.dissocPath(["apps", appid]),
- R.assoc("view", R.filter(view => {
- return !R.propEq("appid", appid, view)
- }, state.view)
- ))(state)
-
- const sorted = R.reverse(R.sortBy(R.prop("zIndex"), removed.view))
- let lengthIndex = sorted.length
- const newState = R.assoc("view", R.compose(
- R.map(([index, win]) => {
- return R.assoc("zIndex", lengthIndex--, win)
- }),
- R.toPairs,
- )(sorted), removed)
- const removedState = R.compose(
- R.assocPath(["layout", "selectedLayout"], null),
- R.assocPath(["layout", "selectedApps"], {})
- )(newState)
- window.localStorage.setItem(appNameLayout, JSON.stringify(R.prop("layout", removedState)))
- return removedState
-
- }
- case LOAD_APPS: {
- return load(state)
- }
-
- case RESET_DEFAULT: {
- opened = {}
- appView = 0
- window.localStorage.removeItem(appName);
- window.localStorage.removeItem(appNameLayout)
- return R.compose(
- save,
- R.assoc("apps", BUILT_IN_APPS),
- R.assoc("view", []),
- R.assoc("layout", {}),
- R.assoc("openApps", {})
- )(state)
- }
-
- case SELECT_LAYOUT: {
- const { layoutType } = action.payload
- const newState = R.assocPath(["layout", "selectedLayout"], layoutType, state)
- window.localStorage.setItem(appNameLayout, JSON.stringify(R.prop("layout", newState)))
- return newState
-
- }
-
- case REMOVE_ALL_LAYOUT: {
- const map = new Map()
- countLayoutApps(map, R.prop("layout", state))
- let tmpState = state
- for (let [key, _] of map) {
- tmpState = R.assocPath(["openApps", key], R.dec(R.pathOr(0, ["openApps", key], tmpState)), tmpState)
- }
- const newState = R.compose(
- R.assoc("layout", {})
- )(tmpState)
- window.localStorage.setItem(appNameLayout, JSON.stringify(R.prop("layout", newState)))
- return newState
- }
-
- case ADD_APP_DOM: {
- const { appid, appDom } = action.payload
- return R.assocPath(["appDoms", appid], appDom, state)
- }
-
- case CREATE_NOTIFICATION: {
- const { message, type, duration } = action.payload
- return R.compose(
- R.assocPath(["notifications", state.notificationCount], { message, type, duration }),
- R.assoc("notificationCount", R.inc(R.prop("notificationCount", state)))
- )(state)
- }
-
- case REMOVE_NOTIFICATION: {
- const { id } = action.payload
- return R.assoc("notifications", R.pick(R.filter((n) => {
- return n != id
- }, R.keys(state.notifications)), state.notifications), state)
- }
-
- case ADD_LAYOUT: {
- const { indexPath, layoutType } = action.payload
- const newState = R.assocPath(["layout", ...indexPath, "type"], layoutType, state)
- window.localStorage.setItem(appNameLayout, JSON.stringify(R.prop("layout", newState)))
- return newState
- }
-
- case ADD_LAYOUT_INITIAL: {
- const {layoutType} = action.payload
- const newState = R.assocPath(["layout", "type"], layoutType, state)
- window.localStorage.setItem(appNameLayout, JSON.stringify(R.prop("layout", newState)))
- return newState
- }
-
- case SELECT_LAYOUT_APP: {
- const { appid, indexPath } = action.payload
- if (R.pathEq(["apps", appid, "single"], true, state) && R.gt(R.path(["openApps", appid], state), 0)) {
- return state
- }
- const newState = R.compose(
- R.assocPath(["layout", ...indexPath, "appid"], appid),
- R.assocPath(["layout", ...indexPath, "type"], SELECTED_APP),
- R.assocPath(["openApps", appid], R.inc(R.pathOr(0, ["openApps", appid], state)))
- )(state)
- window.localStorage.setItem(appNameLayout, JSON.stringify(R.prop("layout", newState)))
- return newState
- }
-
- case TOGGLE_LAYOUT_EDIT: {
- return R.assoc("layoutEditEnabled", !R.prop("layoutEditEnabled", state), state)
- }
-
- case LAYOUT_SIZE_CHANGE: {
- const { indexPath, sizes } = action.payload
- const newState = R.assocPath(["layout", ...indexPath, "sizes"], sizes, state)
- window.localStorage.setItem(appNameLayout, JSON.stringify(R.prop("layout", newState)))
- console.log("here?")
- return newState
- }
-
- default:
- return state;
- }
-}
diff --git a/src/redux/store.js b/src/redux/store.js
deleted file mode 100644
index 9854d76..0000000
--- a/src/redux/store.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createStore, compose } from "redux";
-import rootReducer from "./reducers";
-const enhancers = compose(
- window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
- );
-export default createStore(rootReducer, enhancers);
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
index c4838eb..ccf7b53 100644
--- a/src/serviceWorker.js
+++ b/src/serviceWorker.js
@@ -1,141 +1,141 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
- window.location.hostname === 'localhost' ||
- // [::1] is the IPv6 localhost address.
- window.location.hostname === '[::1]' ||
- // 127.0.0.0/8 are considered localhost for IPv4.
- window.location.hostname.match(
- /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
- )
-);
-
-export function register(config) {
- if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
- // The URL constructor is available in all browsers that support SW.
- const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
- if (publicUrl.origin !== window.location.origin) {
- // Our service worker won't work if PUBLIC_URL is on a different origin
- // from what our page is served on. This might happen if a CDN is used to
- // serve assets; see https://github.com/facebook/create-react-app/issues/2374
- return;
- }
-
- window.addEventListener('load', () => {
- const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
- if (isLocalhost) {
- // This is running on localhost. Let's check if a service worker still exists or not.
- checkValidServiceWorker(swUrl, config);
-
- // Add some additional logging to localhost, pointing developers to the
- // service worker/PWA documentation.
- navigator.serviceWorker.ready.then(() => {
- console.log(
- 'This web app is being served cache-first by a service ' +
- 'worker. To learn more, visit https://bit.ly/CRA-PWA'
- );
- });
- } else {
- // Is not localhost. Just register service worker
- registerValidSW(swUrl, config);
- }
- });
- }
-}
-
-function registerValidSW(swUrl, config) {
- navigator.serviceWorker
- .register(swUrl)
- .then(registration => {
- registration.onupdatefound = () => {
- const installingWorker = registration.installing;
- if (installingWorker == null) {
- return;
- }
- installingWorker.onstatechange = () => {
- if (installingWorker.state === 'installed') {
- if (navigator.serviceWorker.controller) {
- // At this point, the updated precached content has been fetched,
- // but the previous service worker will still serve the older
- // content until all client tabs are closed.
- console.log(
- 'New content is available and will be used when all ' +
- 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
- );
-
- // Execute callback
- if (config && config.onUpdate) {
- config.onUpdate(registration);
- }
- } else {
- // At this point, everything has been precached.
- // It's the perfect time to display a
- // "Content is cached for offline use." message.
- console.log('Content is cached for offline use.');
-
- // Execute callback
- if (config && config.onSuccess) {
- config.onSuccess(registration);
- }
- }
- }
- };
- };
- })
- .catch(error => {
- console.error('Error during service worker registration:', error);
- });
-}
-
-function checkValidServiceWorker(swUrl, config) {
- // Check if the service worker can be found. If it can't reload the page.
- fetch(swUrl, {
- headers: { 'Service-Worker': 'script' }
- })
- .then(response => {
- // Ensure service worker exists, and that we really are getting a JS file.
- const contentType = response.headers.get('content-type');
- if (
- response.status === 404 ||
- (contentType != null && contentType.indexOf('javascript') === -1)
- ) {
- // No service worker found. Probably a different app. Reload the page.
- navigator.serviceWorker.ready.then(registration => {
- registration.unregister().then(() => {
- window.location.reload();
- });
- });
- } else {
- // Service worker found. Proceed as normal.
- registerValidSW(swUrl, config);
- }
- })
- .catch(() => {
- console.log(
- 'No internet connection found. App is running in offline mode.'
- );
- });
-}
-
-export function unregister() {
- if ('serviceWorker' in navigator) {
- navigator.serviceWorker.ready
- .then(registration => {
- registration.unregister();
- })
- .catch(error => {
- console.error(error.message);
- });
- }
-}
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+ window.location.hostname === 'localhost' ||
+ // [::1] is the IPv6 localhost address.
+ window.location.hostname === '[::1]' ||
+ // 127.0.0.0/8 are considered localhost for IPv4.
+ window.location.hostname.match(
+ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+ )
+);
+
+export function register(config) {
+ if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+ // The URL constructor is available in all browsers that support SW.
+ const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+ if (publicUrl.origin !== window.location.origin) {
+ // Our service worker won't work if PUBLIC_URL is on a different origin
+ // from what our page is served on. This might happen if a CDN is used to
+ // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+ return;
+ }
+
+ window.addEventListener('load', () => {
+ const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+ if (isLocalhost) {
+ // This is running on localhost. Let's check if a service worker still exists or not.
+ checkValidServiceWorker(swUrl, config);
+
+ // Add some additional logging to localhost, pointing developers to the
+ // service worker/PWA documentation.
+ navigator.serviceWorker.ready.then(() => {
+ console.log(
+ 'This web app is being served cache-first by a service ' +
+ 'worker. To learn more, visit https://bit.ly/CRA-PWA'
+ );
+ });
+ } else {
+ // Is not localhost. Just register service worker
+ registerValidSW(swUrl, config);
+ }
+ });
+ }
+}
+
+function registerValidSW(swUrl, config) {
+ navigator.serviceWorker
+ .register(swUrl)
+ .then(registration => {
+ registration.onupdatefound = () => {
+ const installingWorker = registration.installing;
+ if (installingWorker == null) {
+ return;
+ }
+ installingWorker.onstatechange = () => {
+ if (installingWorker.state === 'installed') {
+ if (navigator.serviceWorker.controller) {
+ // At this point, the updated precached content has been fetched,
+ // but the previous service worker will still serve the older
+ // content until all client tabs are closed.
+ console.log(
+ 'New content is available and will be used when all ' +
+ 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+ );
+
+ // Execute callback
+ if (config && config.onUpdate) {
+ config.onUpdate(registration);
+ }
+ } else {
+ // At this point, everything has been precached.
+ // It's the perfect time to display a
+ // "Content is cached for offline use." message.
+ console.log('Content is cached for offline use.');
+
+ // Execute callback
+ if (config && config.onSuccess) {
+ config.onSuccess(registration);
+ }
+ }
+ }
+ };
+ };
+ })
+ .catch(error => {
+ console.error('Error during service worker registration:', error);
+ });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+ // Check if the service worker can be found. If it can't reload the page.
+ fetch(swUrl, {
+ headers: { 'Service-Worker': 'script' }
+ })
+ .then(response => {
+ // Ensure service worker exists, and that we really are getting a JS file.
+ const contentType = response.headers.get('content-type');
+ if (
+ response.status === 404 ||
+ (contentType != null && contentType.indexOf('javascript') === -1)
+ ) {
+ // No service worker found. Probably a different app. Reload the page.
+ navigator.serviceWorker.ready.then(registration => {
+ registration.unregister().then(() => {
+ window.location.reload();
+ });
+ });
+ } else {
+ // Service worker found. Proceed as normal.
+ registerValidSW(swUrl, config);
+ }
+ })
+ .catch(() => {
+ console.log(
+ 'No internet connection found. App is running in offline mode.'
+ );
+ });
+}
+
+export function unregister() {
+ if ('serviceWorker' in navigator) {
+ navigator.serviceWorker.ready
+ .then(registration => {
+ registration.unregister();
+ })
+ .catch(error => {
+ console.error(error.message);
+ });
+ }
+}
diff --git a/src/setupTests.js b/src/setupTests.js
index 74b1a27..35417dc 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -1,5 +1,5 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..151aa68
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
\ No newline at end of file
diff --git a/src/waim/AppManager.jsx b/src/waim/AppManager.tsx
similarity index 56%
rename from src/waim/AppManager.jsx
rename to src/waim/AppManager.tsx
index 06de142..b52ddd9 100644
--- a/src/waim/AppManager.jsx
+++ b/src/waim/AppManager.tsx
@@ -1,119 +1,143 @@
-import React, { useEffect } from 'react';
-import '../css/App.css';
-import * as R from 'ramda'
-import AddWebApp from '../apps/AddWebApp'
-import { connect } from 'react-redux'
-import { loadApps, addAppDom } from '../redux/actions'
-import ChatClient from '../apps/ChatClient';
-import MainPage from './MainPage';
-import {
- createBrowserRouter,
- RouterProvider,
-} from "react-router-dom";
-import { isRouteErrorResponse, useRouteError } from "react-router-dom";
-
-
-
-const AppManager = ({ windows, loadApps, addAppDom }) => {
-
- // this will be called initially, and when the addAppDom or loadApps methods are changed
- // pass your app id and react dom below if you want to render a react component as an app
- // don't forget to add your app in src/constants.js
- useEffect(() => {
- {/* Add all static apps below */ }
- loadApps()
- addAppDom("chatclient", )
- addAppDom("addwebapp", )
- }, [addAppDom, loadApps])
-
-
-
- // the page wrapper allows for each application to occupy the entire screen
- // this is especially useful when the app is running outside of WAIM framework
- // but still going through the React Router
- const pageWrapper = (element) => {
- return (
-
-
- {element}
-
- )
- }
-
- // Apps that reside on different domains or pre-built and acecssible through a URL
- // will need to be wrapped aroudn an iframe first
- const framePageWrapper = (url) => {
- return pageWrapper()
- }
-
-
- // the error boundary function determines the error code and shows a generic error message
- // when going through React Router
- function ErrorBoundary() {
- const error = useRouteError();
- if (isRouteErrorResponse(error)) {
- return (
-
-
Error!
-
{error.status}
-
{error.statusText}
- {error.data?.message &&
{error.data.message}
}
-
- );
- } else {
- return
Unknown Error
;
- }
- }
-
- // Create pages for each app
- // the app id is used to add a react router page
- // for example an app with an id test_app_1 can be acccessed directly
- // through http://yourdomain/test_app_1
- // In production, don't forget to configure your proxy to pass calls to this application
- // for all IDs
- const createPages = () => {
- let pages = []
- R.compose(
- R.map(([key, value]) => {
- pages = R.append({ path: `${key}`, element: pageWrapper(value) }, pages)
- }),
- R.toPairs
- )(windows.appDoms)
-
- R.compose(
- R.map(([key, value]) => {
- if (R.has("url", value)) {
- pages = R.append({ path: `${key}`, element: framePageWrapper(value.url) }, pages)
- }
- },
- ),
- R.toPairs
- )(windows.apps)
- pages = R.append({
- path: "*",
- element: ,
- errorElement:
- }, pages)
- return pages
- }
-
- // Create the browser router and pass it to the router provider
- const router = createBrowserRouter(createPages());
-
- return (
-
- <>
-
-
- );
-}
-
-
-const mapStateToProps = state => {
- return state
-};
-
-// connect to the redux store
-export default connect(mapStateToProps, { loadApps, addAppDom })(AppManager);
-
-
+import React, { useEffect, useRef } from 'react';
+import '../css/App.css';
+import * as R from 'ramda'
+import MainPage from './MainPage';
+import {
+ createBrowserRouter,
+ RouterProvider,
+} from "react-router-dom";
+import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+import { addAppDom, loadApps, selectWindows } from './redux/reducers/windowsSlice';
+import { useAppSelector, useAppDispatch } from './redux/hooks';
+import StandaloneApp from './StandaloneApp.js';
+import * as Apps from "../apps/"
+
+interface PageEntry {
+ path: string,
+ element: React.ReactElement,
+ errorElement?: React.ReactElement,
+}
+
+interface FramePageWrapperProps {
+ url: string
+}
+
+const AppManager = () => {
+
+ const dispatch = useAppDispatch()
+ const windows = useAppSelector(selectWindows)
+ // this will be called initially, and when the addAppDom or loadApps methods are changed
+ // pass your app id and react dom below if you want to render a react component as an app
+ // don't forget to add your app in src/constants.js
+ useEffect(() => {
+ dispatch(loadApps())
+ for (const key in Apps) {
+ const appsObject = Apps as any
+ const appid = key.toLowerCase()
+ const keyId: any = key
+ const appDom: any = appsObject[keyId]
+ dispatch(addAppDom({appid, appDom: React.createElement(appDom as any)}))
+ }
+ }, [addAppDom, loadApps])
+
+
+
+ // the page wrapper allows for each application to occupy the entire screen
+ // this is especially useful when the app is running outside of WAIM framework
+ // but still going through the React Router
+ const pageWrapper = (element: React.ReactElement) => {
+ return (
+
+
+ {element}
+
+ )
+ }
+
+ // Apps that reside on different domains or pre-built and acecssible through a URL
+ // will need to be wrapped aroudn an iframe first
+ const FramePageWrapper = ({url} : FramePageWrapperProps) => {
+ const frameRef = useRef(null)
+ return pageWrapper(