next router

@types/graphql.d.ts

@@ -0,0 +1 @@
+declare module "*.graphql";

next.config.js

@@ -1,4 +1,15 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  reactStrictMode: true,
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.(graphql|gql)/,
+      exclude: /node_modules/,
+      loader: "graphql-tag/loader",
+    });
+
+    return config;
+  },
+};
 
 module.exports = nextConfig;

package.json

@@ -8,8 +8,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "shadow:dev": "shadow-cljs watch app api",
-    "shadow:build": "shadow-cljs release app api",
+    "shadow:dev": "shadow-cljs watch app",
+    "shadow:build": "shadow-cljs release app",
     "db:migrate": "pnpm with-env prisma migrate dev --create-only",
     "db:deploy": "pnpm with-env prisma migrate deploy",
     "with-env": "dotenv -e ./.env.local --"
@@ -36,6 +36,7 @@
     "@stripe/stripe-js": "^1.46.0",
     "@tanstack/match-sorter-utils": "^8.7.6",
     "@tanstack/react-table": "^8.7.9",
+    "@types/cookie": "^0.5.3",
     "@vercel/analytics": "^1.0.2",
     "@visx/annotation": "^3.0.1",
     "@visx/axis": "^3.1.0",
@@ -71,6 +72,7 @@
     "framer-motion": "^7.6.2",
     "googleapis": "^109.0.1",
     "graphql": "^16.6.0",
+    "graphql-tag": "^2.12.6",
     "next": "^13.5.5",
     "nodemailer": "^6.8.0",
     "papaparse": "^5.4.0",

shadow-cljs.edn

@@ -1,68 +1,13 @@
 {:source-paths ["src" "resources"]
 
-;;  :nrepl {:port 8777}
-
  :dependencies
  [[reagent "1.1.1"]
   [re-frame "1.2.0"]
   [cljs-bean "1.8.0"]
   [camel-snake-kebab "0.4.3"]
   [funcool/promesa "9.0.489"]
   [com.taoensso/tempura "1.3.0"]
-  [com.github.mainej/headlessui-reagent "1.6.6.71"]
-  [com.teknql/shadow-cljs-tailwind-jit "1.0.0"]]
-
- :builds {:test {:target :node-test
-                 :output-to "out/test.js"
-                 :ns-regexp "tests*"}
-
-          :api {:target :npm-module
-                :output-dir "out/api"
-                :entries [api.core]}
-
-          :app {:target :npm-module
-                :output-dir "out/app"
-                :entries [ui.core]}
-
-          :ui {:target     :browser
-               :output-dir "public/js"
-               :asset-path "/js"
-               :modules {:app {:init-fn ui.core/init}}
-               :module-hash-names true
-
-               :build-hooks [(shadow.html/copy-file
-                              "public/index.src.html"
-                              "public/index.html")]
-
-               :tailwind/output "public/css/main.css"
-               :tailwind/config {:theme
-                                 {:font-family
-                                  {:sans ["Inter"
-                                          "ui-sans-serif"
-                                          "system-ui"
-                                          "-apple-system"
-                                          "BlinkMacSystemFont"
-                                          "Segoe UI"
-                                          "Roboto"
-                                          "Helvetica Neue"
-                                          "Arial"
-                                          "Noto Sans"
-                                          "sans-serif"]}
-                                  :extend {:animation {:tilt "tilt 10s infinite linear"}
-                                           :keyframes {:tilt {"0%, 50%, 100%" {:transform "rotate(0deg)"}
-                                                              "25%" {:transform "rotate(1deg)"}
-                                                              "75%" {:transform "rotate(-1deg)"}}}
-                                           :backgroundImage {:gradient-radial "radial-gradient(var(--tw-gradient-stops))"}}}}
-
-            ;;    :devtools {:after-load ui.core/refresh
-            ;;               :http-root   "public/"
-            ;;               :http-port   8000
-            ;;             ;;   :devtools-url "http://0.0.0.0/shadow-cljs"
-            ;;               }
-
-
-               :dev {:build-hooks
-                     [(teknql.tailwind/start-watch!)]}
+  [com.github.mainej/headlessui-reagent "1.6.6.71"]]
 
-               :release {:compiler-options {:source-map true}
-                         :build-hooks [(teknql.tailwind/compile-release!)]}}}}
+ :builds {:app {:target :npm-module
+                :output-dir "out/cljs"}}}

src/app/[...slugs]/page.tsx

@@ -1,12 +1,7 @@
 "use client";
 
-import { useEffect } from "react";
-import { react_app as ReactApp, init } from "../../../out/app/ui.core";
+import { Views } from "~/ui.core";
 
 export default function Home() {
-  useEffect(() => {
-    init();
-  }, []);
-
-  return <ReactApp />;
+  return <Views />;
 }

src/app/api/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest } from "next/server";
 import { startServerAndCreateNextHandler } from "@as-integrations/next";
 
-import { server, prisma } from "../../../out/api/api.core";
+import { server, prisma } from "~/api.core";
 
 const handler = startServerAndCreateNextHandler<NextRequest>(server, {
   context: async (req) => {

src/ui/views/landing.cljs → src/app/landing/page.cljs

@@ -1,5 +1,6 @@
-(ns ui.views.landing
+(ns app.landing.page
   (:require ["@faker-js/faker" :refer (faker)]
+            [reagent.core :as r]
             [ui.subs :refer (listen)]
             [ui.lib.router :refer (link)]
             [ui.utils.date :as d]
@@ -16,6 +17,8 @@
             [ui.components.visualizations.area-chart :refer (area-chart)]
             [ui.components.forms.shipment :refer (shipment-form)]))
 
+(r/set-default-compiler! (r/create-compiler {:function-components true}))
+
 (defn landing-header []
   [:header {:class "p-6 flex justify-between items-center"}
    [:div {:class "flex items-center"}
@@ -147,3 +150,5 @@
    [landing-ai]
    [landing-constraints]
    [landing-task]])
+
+(def ^:export LandingView (r/reactify-component landing-view))

src/app/landing/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { LandingView } from "~/app.landing.page";
+
+export default function LandingPage() {
+  return <LandingView />;
+}

src/ui/views/login_confirm.cljs → src/app/login/confirm/page.cljs

@@ -1,8 +1,11 @@
-(ns ui.views.login-confirm
-  (:require [ui.lib.router :refer (link)]
+(ns app.login.confirm.page
+  (:require [reagent.core :as r]
+            [ui.lib.router :refer (link)]
             [ui.utils.i18n :refer (tr)]
             [ui.components.forms.login-confirm :refer (login-confirm-form)]))
 
+(r/set-default-compiler! (r/create-compiler {:function-components true}))
+
 (defn view []
   [:div {:class "flex flex-col justify-center items-center w-full h-full"}
    [:h1 {:class "mb-2 text-lg"}
@@ -11,3 +14,5 @@
    [:div {:class "pt-2 text-center"}
     [:p {:class "text-sm"} (tr [:view.login-confirm.return-link/title]) " "
      [link {:to "/login" :class "underline"} (tr [:view.login-confirm.return-link/link])]]]])
+
+(def ^:export LoginConfirmView (r/reactify-component view))

src/app/login/confirm/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { LoginConfirmView } from "~/app.login.confirm.page";
+
+export default function LoginConfirmPage() {
+  return <LoginConfirmView />;
+}

src/ui/views/login.cljs → src/app/login/page.cljs

@@ -1,8 +1,11 @@
-(ns ui.views.login
-  (:require [ui.lib.router :refer (link)]
+(ns app.login.page
+  (:require [reagent.core :as r]
+            [ui.lib.router :refer (link)]
             [ui.utils.i18n :refer (tr)]
             [ui.components.forms.login :refer (login-form)]))
 
+(r/set-default-compiler! (r/create-compiler {:function-components true}))
+
 (defn view []
   [:div {:class "flex flex-col justify-center items-center w-full h-full"}
    [:h1 {:class "mb-2 text-lg"}
@@ -11,3 +14,5 @@
    [:div {:class "pt-2 text-center"}
     [:p {:class "text-sm"} (tr [:view.login.register-link/title]) " "
      [link {:to "/register" :class "underline"} (tr [:view.login.register-link/link])]]]])
+
+(def ^:export LoginView (r/reactify-component view))

src/app/login/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { LoginView } from "~/app.login.page";
+
+export default function LoginPage() {
+  return <LoginView />;
+}

src/app/logout/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import React, { useLayoutEffect } from "react";
+import { redirect } from "next/navigation";
+
+import { BaseLoader } from "~/ui.components.loaders.base";
+import { useApolloClient } from "@apollo/client";
+
+export default function LogoutPage() {
+  const client = useApolloClient();
+
+  useLayoutEffect(() => {
+    client.resetStore();
+
+    document.cookie =
+      "sessionId=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+
+    return redirect("/login");
+  });
+
+  return <BaseLoader />;
+}

src/app/not-found.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { NotFound } from "~/app.not_found";
+
+export default function NotFoundPage() {
+  return <NotFound />;
+}

src/ui/views/not_found.cljs → src/app/not_found.cljs

@@ -1,12 +1,17 @@
-(ns ui.views.not-found
+(ns app.not-found
   (:require ["react-feather" :rename {AlertTriangle AlertIcon
-                                    ArrowLeft ArrowLeftIcon}]
+                                      ArrowLeft ArrowLeftIcon}]
+            [reagent.core :as r]
             [ui.lib.router :refer (link)]
             [ui.utils.i18n :refer (tr)]))
 
+(r/set-default-compiler! (r/create-compiler {:function-components true}))
+
 (defn view []
   [:div {:class "flex flex-col justify-center items-center w-full h-full"}
    [:> AlertIcon {:class "w-8 h-8 text-neutral-500"}]
    [:p {:class "my-2 text-xl"} (tr [:view/not-found])]
    [link {:to "/" :class "flex items-center text-sm underline"}
     [:> ArrowLeftIcon {:class "mr-2 w-4 h-4"}] (tr [:misc/back-to-home])]])
+
+(def ^:export NotFound (r/reactify-component view))

src/app/organization/agents/[agent]/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { OrganizationAgentsDetailView } from "~/app.organization.agents.detail";
+
+export default function OrganizationAgentsDetailPage() {
+  return <OrganizationAgentsDetailView />;
+}

src/ui/views/organization/agent/create.cljs → src/app/organization/agents/create.cljs

@@ -1,9 +1,12 @@
-(ns ui.views.organization.agent.create
-  (:require [ui.utils.i18n :refer (tr)]
+(ns app.organization.agents.create
+  (:require [reagent.core :as r]
+            [ui.utils.i18n :refer (tr)]
             [ui.components.layout.map :refer (map-layout)]
             [ui.components.forms.agent :refer (agent-form)]))
 
 (defn view []
   [map-layout {:title (tr [:view.agent.create/title])}
    [:div {:class "p-4 overflow-y-auto"}
     [agent-form]]])
+
+(def ^:export OrganizationAgentsCreateView (r/reactify-component (fn [] [:f> view])))

src/app/organization/agents/create/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { OrganizationAgentsCreateView } from "~/app.organization.agents.create";
+
+export default function OrganizationAgentsCreatePage() {
+  return <OrganizationAgentsCreateView />;
+}

src/ui/views/organization/agent/detail.cljs → src/app/organization/agents/detail.cljs

@@ -1,5 +1,6 @@
-(ns ui.views.organization.agent.detail
-  (:require [shadow.resource :refer (inline)]
+(ns app.organization.agents.detail
+  (:require [reagent.core :as r]
+            [shadow.resource :refer (inline)]
             [common.utils.date :refer (parse-date)]
             [ui.lib.apollo :refer (gql use-query)]
             [ui.lib.router :refer (use-params use-search-params)]
@@ -26,6 +27,8 @@
         {:keys [tasks]} (some-> data :user :organization :agent)
         {:keys [name location]} (some-> (or data previousData) :user :organization :agent)
         {:keys [createdAt]} location]
+
+    (prn name)
 
     (use-map-items
      loading
@@ -43,3 +46,6 @@
                                      (dissoc search-params :status)
                                      (assoc search-params :status %)))}]
      [task-list {:tasks tasks :loading loading}]]))
+
+(def ^:export OrganizationAgentsDetailView (r/reactify-component (fn [props]
+                                                                   [:f> view props])))

src/ui/views/organization/agent/list.cljs → src/app/organization/agents/list.cljs

@@ -1,5 +1,6 @@
-(ns ui.views.organization.agent.list
-  (:require [shadow.resource :refer (inline)]
+(ns app.organization.agents.list
+  (:require [reagent.core :as r]
+            [shadow.resource :refer (inline)]
             [ui.lib.apollo :refer (gql use-query)]
             [ui.lib.router :refer (use-search-params)]
             [ui.utils.string :refer (filter-text)]
@@ -23,10 +24,13 @@
      [agents text])
 
     [map-layout {:title (tr [:view.agent.list/title])
-                 :create-link "create"}
+                 :create-link "agents/create"}
      [filters {:search text
                :on-search-change #(set-search-params
                                    (if (empty? %)
                                      (dissoc search-params :text)
                                      (assoc search-params :text %)))}]
      [agent-list {:agents filtered-agents :loading loading}]]))
+
+(def ^:export OrganizationAgentsView (r/reactify-component (fn [props]
+                                                             [:f> view props])))

src/app/organization/agents/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { OrganizationAgentsView } from "~/app.organization.agents.list";
+
+export default function OrganizationAgentsPage() {
+  return <OrganizationAgentsView />;
+}