working on webshare

src/sh2.less

@@ -3172,7 +3172,47 @@ input[type=checkbox] {
     animation-duration: 0.3s;
 }
 
-body.prompt-webshare {
+body.prompt-webshare #main {
+    display: flex;
+    flex-direction: column;
+    
+    .logo-header {
+        display: flex;
+        flex-direction: row;
+        padding: 10px;
+        border-bottom: 1px solid #777;
+        align-items: center;
+
+        .logo-text {
+            .mono-font(32px);
+            color: @prompt-green;
+        }
+
+        .download-button {
+            margin-right: 20px;
+        }
+    }
+
+    .prompt-content {
+        flex-grow: 1;
+        padding: 10px;
+    }
+
+    .prompt-footer {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        color: #aaa;
+        border-top: 1px solid #777;
+        height: 50px;
+        padding-left: 20px;
+        padding-right: 20px;
+
+        a {
+            display: block;
+        }
+    }
+    
     color: white;
     
     #app {

src/util.ts

@@ -1,6 +1,26 @@
 import * as mobx from "mobx";
 import {sprintf} from "sprintf-js";
 
+function handleNotOkResp(resp : any, url : URL) : Promise<any> {
+    let errMsg = sprintf("Bad status code response from fetch '%s': code=%d %s", url.toString(), resp.status, resp.statusText);
+    return resp.text().then((textData) => {
+        if (textData == null || textData == "") {
+            throw new Error(errMsg);
+        }
+        let rtnData : any = null;
+        try {
+            rtnData = JSON.parse(textData);
+        }
+        catch (err) {
+            // nothing (rtnData will be null)
+        }
+        if (rtnData != null && typeof(rtnData) == "object" && rtnData["error"] != null) {
+            throw new Error(rtnData["error"]);
+        }
+        throw new Error(errMsg + "\n" + textData);
+    });
+}
+
 function fetchJsonData(resp : any, ctErr : boolean) : Promise<any> {
     let contentType = resp.headers.get("Content-Type");
     if (contentType != null && contentType.startsWith("application/json")) {
@@ -27,13 +47,7 @@ function fetchJsonData(resp : any, ctErr : boolean) : Promise<any> {
 
 function handleJsonFetchResponse(url : URL, resp : any) : Promise<any> {
     if (!resp.ok) {
-        let errData = fetchJsonData(resp, false);
-        if (errData && errData["error"]) {
-            throw new Error(errData["error"])
-        }
-        let errMsg = sprintf("Bad status code response from fetch '%s': %d %s", url.toString(), resp.status, resp.statusText);
-        let rtnErr = new Error(errMsg);
-        throw rtnErr;
+        return handleNotOkResp(resp, url);
     }
     let rtnData = fetchJsonData(resp, true);
     return rtnData;

src/webshare-elems.tsx

@@ -5,11 +5,42 @@ import {sprintf} from "sprintf-js";
 import {boundMethod} from "autobind-decorator";
 import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
 import cn from "classnames";
+import {WebShareModel} from "./webshare-model";
 
+@mobxReact.observer
 class WebShareMain extends React.Component<{}, {}> {
+    renderCopy() {
+        return (<div>&copy; 2023 Dashborg Inc</div>);
+    }
+            
     render() {
         return (
-            <h1>hello from webshare</h1>
+            <div id="main">
+                <div className="logo-header">
+                    <div className="logo-text">[prompt]</div>
+                    <div className="flex-spacer"/>
+                    <a href="https://getprompt.dev/download/" target="_blank" className="download-button button is-link">
+                        <span>Download Prompt</span>
+                        <span className="icon is-small">
+                            <i className="fa-sharp fa-solid fa-cloud-arrow-down"/>
+                        </span>
+                    </a>
+                </div>
+                <div className="prompt-content">
+                    <div>screenid={WebShareModel.screenId}, viewkey={WebShareModel.viewKey}</div>
+                    <div>{WebShareModel.errMessage.get()}</div>
+                </div>
+                <div className="prompt-footer">
+                    {this.renderCopy()}
+                    <div className="flex-spacer"/>
+                    <a target="_blank" href="https://discord.gg/XfvZ334gwU" className="button is-link is-small">
+                        <span className="icon is-small">
+                            <i className="fa-brands fa-discord"/>
+                        </span>
+                        <span>Discord</span>
+                    </a>
+                </div>
+            </div>
         );
     }
 }

src/webshare-model.ts

@@ -0,0 +1,63 @@
+import * as mobx from "mobx";
+import {boundMethod} from "autobind-decorator";
+import {handleJsonFetchResponse} from "./util";
+
+type OV<V> = mobx.IObservableValue<V>;
+type OArr<V> = mobx.IObservableArray<V>;
+type OMap<K,V> = mobx.ObservableMap<K,V>;
+type CV<V> = mobx.IComputedValue<V>;
+
+function isBlank(s : string) {
+    return (s == null || s == "");
+}
+
+function getBaseUrl() {
+    return "https://ot2e112zx5.execute-api.us-west-2.amazonaws.com/dev";
+}
+
+class WebShareModelClass {
+    viewKey : string;
+    screenId : string;
+    errMessage : OV<string> = mobx.observable.box(null, {name: "errMessage"});
+    
+    constructor() {
+        let urlParams = new URLSearchParams(window.location.search);
+        this.viewKey = urlParams.get("viewkey");
+        this.screenId = urlParams.get("screenid");
+        setTimeout(() => this.loadFullScreenData(), 10);
+        
+    }
+
+    setErrMessage(msg : string) : void {
+        mobx.action(() => {
+            this.errMessage.set(msg);
+        })();
+    }
+
+    loadFullScreenData() : void {
+        if (isBlank(this.screenId)) {
+            this.setErrMessage("No ScreenId Specified, Cannot Load.");
+            return;
+        }
+        if (isBlank(this.viewKey)) {
+            this.setErrMessage("No ViewKey Specified, Cannot Load.");
+            return;
+        }
+        let usp = new URLSearchParams({screenid: this.screenId, viewkey: this.viewKey});
+        let url = new URL(getBaseUrl() + "/webshare/screen?" + usp.toString());
+        fetch(url, {method: "GET", mode: "cors", cache: "no-cache"}).then((resp) => handleJsonFetchResponse(url, resp)).then((data) => {
+            console.log("got data", data);
+        }).catch((err) => {
+            this.errMessage.set("Cannot get screen: " + err.message);
+        });
+        
+    }
+}
+
+let WebShareModel : WebShareModelClass = null;
+if ((window as any).WebShareModel == null) {
+    WebShareModel = new WebShareModelClass();
+    (window as any).WebShareModel = WebShareModel;
+}
+
+export {WebShareModel};

webpack.share.dev.js

@@ -20,6 +20,9 @@ var merged = merge.merge(common, {
         headers: {
             'Cache-Control': 'no-store',
         },
+        allowedHosts: "all",
+        hot: false,
+        liveReload: false,
     },
     watchOptions: {
         aggregateTimeout: 200,