From b39ae69ac039c68df451eae71f3740f6cc80bbdc Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Tue, 9 Apr 2024 18:46:01 -0700
Subject: [PATCH] Convert app to use new app pattern (#239)

* Move app to every.app pattern

* fmt

* fix merge conflict

---------

Co-authored-by: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
---
 apps/builddao/widget/Proposals.jsx      |   2 +-
 apps/builddao/widget/Router.jsx         |  73 +++++++
 apps/builddao/widget/app.jsx            | 169 +++++++++------
 apps/builddao/widget/app.old.jsx        | 275 ++++++++++++++++++++++++
 apps/builddao/widget/app/view.jsx       | 105 +++++++++
 apps/builddao/widget/page/feed.jsx      |   8 +-
 apps/builddao/widget/page/projects.jsx  |  10 +
 apps/builddao/widget/page/resources.jsx |   8 +-
 8 files changed, 578 insertions(+), 72 deletions(-)
 create mode 100644 apps/builddao/widget/Router.jsx
 create mode 100644 apps/builddao/widget/app.old.jsx
 create mode 100644 apps/builddao/widget/app/view.jsx

diff --git a/apps/builddao/widget/Proposals.jsx b/apps/builddao/widget/Proposals.jsx
index c6665bf7..dda124f5 100644
--- a/apps/builddao/widget/Proposals.jsx
+++ b/apps/builddao/widget/Proposals.jsx
@@ -355,7 +355,7 @@ return (
           </div>
         </div>
       </Header>
-      <NotificationModal />
+      {showNotificationModal && <NotificationModal />}
       <div className="d-flex flex-column gap-4">{proposalsComponent}</div>
       {!proposalId && (
         <div className="d-flex justify-content-center my-4">
diff --git a/apps/builddao/widget/Router.jsx b/apps/builddao/widget/Router.jsx
new file mode 100644
index 00000000..67311b49
--- /dev/null
+++ b/apps/builddao/widget/Router.jsx
@@ -0,0 +1,73 @@
+const { href } = VM.require("buildhub.near/widget/lib.url") || {
+  href: () => "/",
+};
+
+const Content = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+function findDefaultRoute(routesObject) {
+  const routeKey =
+    routesObject &&
+    Object.keys(routesObject).find((key) => {
+      const route = routesObject[key];
+      return route.default === true;
+    });
+
+  if (routeKey) {
+    return routesObject[routeKey];
+  } else {
+    return null;
+  }
+}
+
+function Router({ config, ...passProps }) {
+  const { routes, PageNotFound, debug, param } = config;
+
+  if (!param) param = "page";
+
+  const defaultRoute =
+    findDefaultRoute(routes) ??
+    (routes && Object.keys(routes).length && routes[Object.keys(routes)[0]]);
+  const activeRoute =
+    (routes &&
+      routes.hasOwnProperty(passProps[param]) &&
+      routes[passProps[param]]) ||
+    defaultRoute;
+
+  if (!PageNotFound) PageNotFound = () => <p>404 Not Found</p>;
+
+  if (!activeRoute) {
+    // Handle 404 or default case for unknown routes
+    return <PageNotFound />;
+  }
+
+  // An improvement may be to "lazy load", e.g. load all widgets at once and only "display" the active one
+  // potentionally add a "lazy: true" prop to the route object
+
+  // for each route, if lazy, load the widget and store it in a map
+  // set display for the active route
+
+  // we may want to convert this to a widget for that purpose, to manage state?
+  if (debug) {
+    return (
+      <div key={JSON.stringify(activeRoute)}>
+        <pre>{JSON.stringify(activeRoute, null, 2)}</pre>
+        <pre>{JSON.stringify(props, null, 2)}</pre>
+      </div>
+    );
+  } else {
+    return (
+      <Content key={param + JSON.stringify(activeRoute)}>
+        <Widget
+          src={activeRoute.path}
+          props={{ ...activeRoute.init, ...passProps }}
+          loading={<div style={{ height: "100%", width: "100%" }} />}
+        />
+      </Content>
+    );
+  }
+}
+
+return { Router };
diff --git a/apps/builddao/widget/app.jsx b/apps/builddao/widget/app.jsx
index a44f65e0..785dfc31 100644
--- a/apps/builddao/widget/app.jsx
+++ b/apps/builddao/widget/app.jsx
@@ -1,17 +1,103 @@
-const { page, tab, ...passProps } = props;
-
-const { routes } = VM.require("${config_account}/widget/config.app") ?? {
-  routes: {},
-};
-
-const { AppLayout } = VM.require(
-  "${config_account}/widget/template.AppLayout",
-) || {
-  AppLayout: () => <></>,
+const config = {
+  theme: {
+    // add key values to define colors
+    "--main-color": "black",
+    "--secondary-color": "white",
+    background: "var(--main-color)",
+    color: "var(--secondary-color)",
+  },
+  layout: {
+    src: "devs.near/widget/Layout",
+    props: {
+      variant: "standard",
+    },
+  },
+  blocks: {
+    // these get passed to the layout and children
+    Header: () => (
+      // customize your header
+      <Widget
+        src="${config_account}/widget/components.Navbar"
+        props={{ routes: config.router.routes, ...passProps }}
+      />
+    ),
+    Footer: () => <></>, // customize your footer
+  },
+  router: {
+    param: "page",
+    routes: {
+      home: {
+        path: "${config_account}/widget/page.home",
+        blockHeight: "final",
+        init: {
+          name: "Home",
+        },
+        default: true,
+      },
+      feed: {
+        path: "${config_account}/widget/page.feed",
+        blockHeight: "final",
+        init: {
+          name: "Feed",
+        },
+      },
+      proposal: {
+        path: "${config_account}/widget/page.projects",
+        blockHeight: "final",
+        init: {
+          name: "Projects",
+        },
+      },
+      resources: {
+        path: "${config_account}/widget/page.resources",
+        blockHeight: "final",
+        init: {
+          name: "Resources",
+        },
+      },
+      library: {
+        path: "${config_account}/widget/page.library",
+        blockHeight: "final",
+        init: {
+          name: "Library",
+        },
+      },
+      profile: {
+        path: "${config_account}/widget/page.profile",
+        blockHeight: "final",
+        init: {
+          name: "Profile",
+        },
+        hide: true,
+      },
+      inspect: {
+        path: "${config_account}/widget/page.inspect",
+        blockHeight: "final",
+        init: {
+          name: "Inspect",
+        },
+        hide: true,
+      },
+      projects: {
+        path: "${config_account}/widget/page.project-feed",
+        blockHeight: "final",
+        init: {
+          name: "Project Feed",
+        },
+        hide: true,
+      },
+      project: {
+        path: "${config_account}/widget/page.project",
+        blockHeight: "final",
+        init: {
+          name: "Project Page",
+        },
+        hide: true,
+      },
+    },
+  },
 };
 
-if (!page) page = Object.keys(routes)[0] || "home";
-
 const Root = styled.div`
   --stroke-color: rgba(255, 255, 255, 0.2);
   --bg-1: #000;
@@ -214,62 +300,11 @@ const Root = styled.div`
   }
 `;
 
-function Router({ active, routes }) {
-  // this may be converted to a module at devs.near/widget/Router
-  const routeParts = active.split(".");
-
-  let currentRoute = routes;
-  let src = "";
-  let defaultProps = {};
-
-  for (let part of routeParts) {
-    if (currentRoute[part]) {
-      currentRoute = currentRoute[part];
-      src = currentRoute.path;
-
-      if (currentRoute.init) {
-        defaultProps = { ...defaultProps, ...currentRoute.init };
-      }
-    } else {
-      // Handle 404 or default case for unknown routes
-      return <p>404 Not Found</p>;
-    }
-  }
-
-  return (
-    <div key={active}>
-      <Widget
-        src={src}
-        props={{
-          currentPath: `/${config_account}/widget/app?page=${page}`,
-          page: tab,
-          ...passProps,
-          ...defaultProps,
-        }}
-      />
-    </div>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  height: 100%;
-  font-family: InterVariable, sans-serif;
-`;
-
-const Content = styled.div`
-  width: 100%;
-  height: 100%;
-`;
-
 return (
   <Root>
-    <Container>
-      <AppLayout page={page} routes={routes} {...props}>
-        <Content>
-          <Router active={page} routes={routes} />
-        </Content>
-      </AppLayout>
-    </Container>
+    <Widget
+      src="${config_account}/widget/app.view"
+      props={{ config, ...props }}
+    />
   </Root>
 );
diff --git a/apps/builddao/widget/app.old.jsx b/apps/builddao/widget/app.old.jsx
new file mode 100644
index 00000000..a44f65e0
--- /dev/null
+++ b/apps/builddao/widget/app.old.jsx
@@ -0,0 +1,275 @@
+const { page, tab, ...passProps } = props;
+
+const { routes } = VM.require("${config_account}/widget/config.app") ?? {
+  routes: {},
+};
+
+const { AppLayout } = VM.require(
+  "${config_account}/widget/template.AppLayout",
+) || {
+  AppLayout: () => <></>,
+};
+
+if (!page) page = Object.keys(routes)[0] || "home";
+
+const Root = styled.div`
+  --stroke-color: rgba(255, 255, 255, 0.2);
+  --bg-1: #000;
+  --bg-1-hover: #010002;
+  --bg-1-hover-transparent: rgba(13, 2, 15, 0);
+  --bg-2: #23242b;
+  --label-color: #fff;
+  --font-color: #fff;
+  --font-muted-color: #cdd0d5;
+  --black: #000;
+  --system-red: #fd2a5c;
+  --yellow: #eca227;
+
+  --compose-bg: #23242b;
+
+  --post-bg: #23242b;
+  --post-bg-hover: #1d1f25;
+  --post-bg-transparent: rgba(23, 24, 28, 0);
+
+  --button-primary-bg: #eca227;
+  --button-outline-bg: transparent;
+  --button-default-bg: #23242b;
+
+  --button-primary-color: #000;
+  --button-outline-color: #fff;
+  --button-default-color: #fff;
+
+  --button-primary-hover-bg: #e49b48;
+  --button-outline-hover-bg: rgba(255, 255, 255, 0.2);
+  --button-default-hover-bg: #17181c;
+
+  /* Poppins Font */
+  @font-face {
+    font-family: "Poppins";
+    font-weight: 100;
+    font-style: normal;
+    src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.eot");
+    src:
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.eot?#iefix")
+        format("embedded-opentype"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.woff2")
+        format("woff2"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.woff")
+        format("woff"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.ttf")
+        format("truetype");
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Poppins";
+    font-weight: 200;
+    font-style: normal;
+    src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.eot");
+    src:
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.eot?#iefix")
+        format("embedded-opentype"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.woff2")
+        format("woff2"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.woff")
+        format("woff"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.ttf")
+        format("truetype");
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Poppins";
+    font-weight: 300;
+    font-style: normal;
+    src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.eot");
+    src:
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.eot?#iefix")
+        format("embedded-opentype"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.woff2")
+        format("woff2"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.woff")
+        format("woff"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.ttf")
+        format("truetype");
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Poppins";
+    font-weight: 400;
+    font-style: normal;
+    src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.eot");
+    src:
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.eot?#iefix")
+        format("embedded-opentype"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.woff2")
+        format("woff2"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.woff")
+        format("woff"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.ttf")
+        format("truetype");
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Poppins";
+    font-weight: 500;
+    font-style: normal;
+    src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.eot");
+    src:
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.eot?#iefix")
+        format("embedded-opentype"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.woff2")
+        format("woff2"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.woff")
+        format("woff"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.ttf")
+        format("truetype");
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Poppins";
+    font-weight: 600;
+    font-style: normal;
+    src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.eot");
+    src:
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.eot?#iefix")
+        format("embedded-opentype"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.woff2")
+        format("woff2"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.woff")
+        format("woff"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.ttf")
+        format("truetype");
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Poppins";
+    font-weight: 700;
+    font-style: normal;
+    src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.eot");
+    src:
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.eot?#iefix")
+        format("embedded-opentype"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.woff2")
+        format("woff2"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.woff")
+        format("woff"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.ttf")
+        format("truetype");
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Poppins";
+    font-weight: 800;
+    font-style: normal;
+    src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.eot");
+    src:
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.eot?#iefix")
+        format("embedded-opentype"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.woff2")
+        format("woff2"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.woff")
+        format("woff"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.ttf")
+        format("truetype");
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Poppins";
+    font-weight: 900;
+    font-style: normal;
+    src: url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.eot");
+    src:
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.eot?#iefix")
+        format("embedded-opentype"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.woff2")
+        format("woff2"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.woff")
+        format("woff"),
+      url("https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.ttf")
+        format("truetype");
+    font-display: swap;
+  }
+
+  /* Inter Font */
+  @font-face {
+    font-family: InterVariable;
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("https://rsms.me/inter/font-files/InterVariable.woff2?v=4.0")
+      format("woff2");
+  }
+  @font-face {
+    font-family: InterVariable;
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.0")
+      format("woff2");
+  }
+
+  /* Typeahead Fix */
+  .rbt-token-removeable {
+    background: #007bff;
+    color: #fff;
+  }
+`;
+
+function Router({ active, routes }) {
+  // this may be converted to a module at devs.near/widget/Router
+  const routeParts = active.split(".");
+
+  let currentRoute = routes;
+  let src = "";
+  let defaultProps = {};
+
+  for (let part of routeParts) {
+    if (currentRoute[part]) {
+      currentRoute = currentRoute[part];
+      src = currentRoute.path;
+
+      if (currentRoute.init) {
+        defaultProps = { ...defaultProps, ...currentRoute.init };
+      }
+    } else {
+      // Handle 404 or default case for unknown routes
+      return <p>404 Not Found</p>;
+    }
+  }
+
+  return (
+    <div key={active}>
+      <Widget
+        src={src}
+        props={{
+          currentPath: `/${config_account}/widget/app?page=${page}`,
+          page: tab,
+          ...passProps,
+          ...defaultProps,
+        }}
+      />
+    </div>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  height: 100%;
+  font-family: InterVariable, sans-serif;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+return (
+  <Root>
+    <Container>
+      <AppLayout page={page} routes={routes} {...props}>
+        <Content>
+          <Router active={page} routes={routes} />
+        </Content>
+      </AppLayout>
+    </Container>
+  </Root>
+);
diff --git a/apps/builddao/widget/app/view.jsx b/apps/builddao/widget/app/view.jsx
new file mode 100644
index 00000000..ebe66ef1
--- /dev/null
+++ b/apps/builddao/widget/app/view.jsx
@@ -0,0 +1,105 @@
+const { Router } = VM.require("${config_account}/widget/Router") || {
+  Router: () => <></>,
+};
+
+const { config, ...passProps } = props;
+
+if (!config) {
+  // TODO: get from settings (or default)
+  config = {
+    router: {
+      param: "page",
+      routes: {
+        home: {
+          default: true,
+          path: "efiz.near/widget/Tree",
+          blockHeight: "final",
+          init: {
+            name: "Home",
+          },
+        },
+      },
+    },
+    blocks: {
+      Header: () => <></>, // customize your header
+      Footer: () => <></>, // customize your footer
+    },
+  };
+} else {
+  // config may be a VM require string
+  if (typeof config !== "object") {
+    config = VM.require(config) || {};
+  }
+}
+
+console.log("config", config);
+
+if (!config) {
+  return (
+    <p>
+      unable to load config:{" "}
+      {typeof config === object ? JSON.stringify(config) : config}
+    </p>
+  );
+}
+
+const { Layout } = VM.require(
+  config.layout?.src ?? "devs.near/widget/Layout",
+) || {
+  Layout: () => <></>,
+};
+
+// While something like Theme should be in the parent...
+const CSS = styled.div`
+  .container {
+    border: 1px solid red;
+  }
+
+  .button {
+  }
+
+  .input {
+  }
+
+  .layout {
+    border: 4px solid var(--main-color);
+  }
+
+  .header {
+    border: 1px solid blue;
+  }
+
+  .content {
+  }
+
+  .footer {
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  height: 100%;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+// const Template = config.Template ?? (({children}) => <>{children}</>);
+console.log("view props", passProps);
+
+return (
+  <CSS style={config.theme}>
+    <Container>
+      <Layout
+        {...(config.layout?.props ?? { variant: "standard" })}
+        blocks={config.blocks}
+      >
+        <Content>
+          <Router config={config.router} {...passProps} />
+        </Content>
+      </Layout>
+    </Container>
+  </CSS>
+);
diff --git a/apps/builddao/widget/page/feed.jsx b/apps/builddao/widget/page/feed.jsx
index 18a7d65c..a8115268 100644
--- a/apps/builddao/widget/page/feed.jsx
+++ b/apps/builddao/widget/page/feed.jsx
@@ -1,4 +1,4 @@
-const { currentPath, page, ...passProps } = props;
+const { currentPath, tab: page, ...passProps } = props;
 
 const { routes } = VM.require("${config_account}/widget/config.feed") ?? {
   routes: {},
@@ -56,7 +56,11 @@ const Content = styled.div`
 return (
   <Root>
     <Container>
-      <SidebarLayout currentPath={currentPath} page={page} routes={routes}>
+      <SidebarLayout
+        currentPath={"/${config_account}/widget/app?page=feed"}
+        page={page}
+        routes={routes}
+      >
         <Content>
           <Router active={page} routes={routes} />
         </Content>
diff --git a/apps/builddao/widget/page/projects.jsx b/apps/builddao/widget/page/projects.jsx
index 4aaa9f22..ce43e442 100644
--- a/apps/builddao/widget/page/projects.jsx
+++ b/apps/builddao/widget/page/projects.jsx
@@ -1,3 +1,13 @@
+const { currentPath, tab: page, ...passProps } = props;
+
+const { routes } = VM.require("${config_account}/widget/config.projects") ?? {
+  routes: {},
+};
+
+const { theme } = VM.require("${config_account}/widget/config.theme") ?? {
+  theme: {},
+};
+
 const { Button } = VM.require("${config_account}/widget/components") || {
   Button: () => <></>,
 };
diff --git a/apps/builddao/widget/page/resources.jsx b/apps/builddao/widget/page/resources.jsx
index 2237ed9f..be7f2e39 100644
--- a/apps/builddao/widget/page/resources.jsx
+++ b/apps/builddao/widget/page/resources.jsx
@@ -1,4 +1,4 @@
-const { currentPath, page, ...passProps } = props;
+const { currentPath, tab: page, ...passProps } = props;
 
 const { routes } = VM.require("${config_account}/widget/config.resources") ?? {
   routes: {},
@@ -60,7 +60,11 @@ const Content = styled.div`
 return (
   <Root>
     <Container>
-      <SidebarLayout currentPath={currentPath} page={page} routes={routes}>
+      <SidebarLayout
+        currentPath={"/${config_account}/widget/app?page=resources"}
+        page={page}
+        routes={routes}
+      >
         <Content>
           <Router active={page} routes={routes} />
         </Content>