custom app rendering

src/Profile/Profile.js

@@ -1,4 +1,4 @@
-import server from "../_/code/bridge/server";
+import server from "../_/code/bridge/serverFunctions";
 import util from "../util";
 
 css(`

src/apps/Announcements/Announcements.js

@@ -83,7 +83,11 @@ class Announcements extends Shadow {
                             .display("none")
                             .visibility("hidden")
                             .onChange((e) => {
-                                this.handleUpload(e.target.files[0]);
+                                const file = e.target.files[0]
+                                if (!file) return
+                                this.stagedImage = file
+                                this.stagedImageURL = URL.createObjectURL(file)
+                                this.rerender()
                             })
 
                         div("+")
@@ -138,8 +142,8 @@ class Announcements extends Shadow {
                                     this.style.backgroundColor = "var(--accent)"
                                 } else {
                                     setTimeout(() => {
-
                                         $("appmenu-").display("none")
+                                        this.focus()
                                     }, 20)
                                     console.log($("appmenu-"))
                                     this.style.backgroundColor = "var(--searchbackground)"
@@ -169,6 +173,31 @@ class Announcements extends Shadow {
         })
     }
 
+    async handleUpload(file) {
+        try {
+            const body = new FormData();
+            body.append('image', file);
+            const res = await util.authFetch(`${util.HOST}/profile/upload-image`, {
+                method: "POST",
+                credentials: "include",
+                headers: {
+                "Accept": "application/json"
+                },
+                body: body
+            });
+            
+            if(res.status === 401) {
+                return res.status
+            }
+            if (!res.ok) return res.status;
+            const data = await res.json()
+            global.profile = data.member
+            console.log(global.profile)
+        } catch (err) { // Network error / Error reaching server
+            console.error(err);
+        }
+    }
+
     addPhoto() {
         console.log("hey")
     }

src/apps/People/PeopleCard.js

@@ -10,7 +10,6 @@ class PeopleCard extends Shadow {
     render() {
         HStack(() => {
             HStack(() => { 
-                console.log(this.imgSrc)
                 if (this.imgSrc && !this.imgSrc.includes("null")) {
                     img(this.imgSrc, "3em", "3em")
                         .borderRadius(100, pct)

src/components/AppMenu.js

@@ -3,35 +3,33 @@ import util from "../util.js"
 
 class AppMenu extends Shadow {
     selected = ""
+    apps = global.currentNetwork.apps
+    darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
 
-    images = {
-        "Dashboard": {src: ["home-src", "home-selected-src"]},
-        "People": {src: ["people-src", "people-selected-src"]},
-        "Settings": {src: ["settings-src", "settings-selected-src"]},
-        "Events": {src: ["events-src", "events-selected-src"]},
-        "Jobs": {src: ["jobs-src", "jobs-selected-src"]}
+    getImageURL(appName) {
+        let imgUrl = `${util.HOST}/db/apps/${appName}/icons/${appName}`
+        if(this.darkMode) {
+            imgUrl += "light"
+        }
+        imgUrl += ".svg"
+        imgUrl = imgUrl.toLowerCase()
+        return imgUrl
     }
 
     onNewSelection() {
         this.$$("img").forEach((image) => {
             image.style.borderBottom = "1px solid transparent"
-            const app = image.attributes.app.value
-            if (app === global.currentApp()) {
+            const appName = image.attributes.app.value
+            if (appName === global.currentApp()) {
                 image.style.borderBottom = "1px solid var(--text)"
-                image.src = util.cssVariable(this.images[app].src[1])
-            } else {
-                image.src = util.cssVariable(this.images[app].src[0])
             }
+            image.src = this.getImageURL(appName)
         })
     }
 
     render() {
-         // let apps = global.currentNetwork.apps
-        let apps = [
-            "Dashboard", "Jobs", "Events", "People"
-        ]
-
-        let appCount = apps.filter(a => a !== "Settings").length
+        let apps = this.apps
+        let appCount = apps.filter(app => app !== "Settings").length
         let horizontalMargin = {
             1: 50,
             2: 10,
@@ -45,7 +43,8 @@ class AppMenu extends Shadow {
             for(let i = 0; i < apps.length; i++) {
                 let app = apps[i]
                 if (app === "Settings") continue;
-                img(util.cssVariable(global.currentApp() === app ? this.images[app].src[1] : this.images[app].src[0]), "1.3em")
+
+                img(this.getImageURL(app), "1.3em")
                     .attr({app: app})
                     .padding(0.5, em)
                     .borderBottom(global.currentApp() === app ? "1px solid var(--text)" : "1px solid transparent")
@@ -59,7 +58,7 @@ class AppMenu extends Shadow {
             }
         })
         .display("grid")
-        .gridTemplateColumns(`repeat(${apps.filter(a => a !== "Settings").length}, 1fr)`)
+        .gridTemplateColumns(`repeat(${apps.filter(app => app !== "Settings").length}, 1fr)`)
         .placeItems("center")
         .borderTop("0.5px solid var(--divider)")
         .height("auto")

src/components/AppWindow.js

@@ -4,6 +4,7 @@ import "../apps/Jobs/Jobs.js"
 import "../apps/People/People.js"
 import "../apps/Events/Events.js"
 import "../apps/Announcements/Announcements.js"
+import util from "../util.js"
 
 class AppWindow extends Shadow {
     render() {
@@ -14,14 +15,6 @@ class AppWindow extends Shadow {
                         Announcements()
                         break;
     
-                    case "Messages":
-                        Messages()
-                        break;
-        
-                    case "People":
-                        People()
-                        break;
-    
                     case "Jobs":
                         Jobs()
                         break;
@@ -29,6 +22,18 @@ class AppWindow extends Shadow {
                     case "Events":
                         Events()
                         break;
+
+                    case "People":
+                        People()
+                        break;
+
+                    default:
+                        if(window[app]) {
+                            window[app]()
+                        } else {
+                            this.getCustomApp(app)
+                        }
+                        break;
                 }
         })
         .height(100, pct)
@@ -37,6 +42,11 @@ class AppWindow extends Shadow {
             this.rerender()
         })
     }
+
+    async getCustomApp(app) {
+        await import(`${util.HOST}/apps/${app.toLowerCase()}/${app.toLowerCase()}.js`);
+        this.rerender()
+    }
 }
 
 register(AppWindow)