Merge pull request #4 from molgenis/refactor/bump_solid_router

bump solid router 0.9.1 to 0.13.1

vip-web-backend/pom.xml

@@ -5,7 +5,7 @@
     <parent>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-parent</artifactId>
-        <version>3.2.3</version>
+        <version>3.2.4</version>
         <relativePath/> <!-- lookup parent from repository -->
     </parent>
     <groupId>org.molgenis</groupId>

vip-web-frontend/.gitattributes

@@ -1 +1,2 @@
-*.* text eol=lf
+*.* text eol=lf
+*.png -text

vip-web-frontend/package.json

@@ -49,7 +49,7 @@
     "@creativebulma/bulma-tagsinput": "^1.0.3",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@solidjs/router": "^0.9.1",
+    "@solidjs/router": "^0.13.1",
     "axios": "^1.6.8",
     "bulma": "^0.9.4",
     "solid-js": "^1.8.15"

vip-web-frontend/src/App.tsx

@@ -1,20 +1,17 @@
-import { Component, createSignal, onMount, Show } from "solid-js";
-import { Route, Routes, useNavigate } from "@solidjs/router";
-import { Home } from "./views/Home";
-import { Jobs } from "./views/Jobs.tsx";
-import { JobCreateForm } from "./views/JobCreateForm.tsx";
-import VcfData from "./views/data/VcfData.tsx";
-import JobData from "./views/data/JobData.tsx";
-import { JobCloneForm } from "./views/JobCloneForm.tsx";
-import { LoginModal } from "./components/LoginModal.tsx";
+import { createSignal, onMount, ParentComponent, Show } from "solid-js";
+import { useNavigate } from "@solidjs/router";
 import { useStore } from "./store/store.tsx";
 import { User } from "./api/Api.ts";
-import { VcfCreate } from "./views/VcfCreate.tsx";
 import { Navbar } from "./components/Navbar.tsx";
-import { Error, ErrorNotification } from "./components/ErrorNotification.tsx";
+import Notification from "./components/bulma/notification.tsx";
 import api from "./api/ApiClient.ts";
+import LoginModal from "./components/LoginModal.tsx";
 
-const App: Component = () => {
+export type Error = {
+  message: string;
+};
+
+export const App: ParentComponent = (props) => {
   const navigate = useNavigate();
   const [, actions] = useStore();
   const [isModalOpen, setIsModalOpen] = createSignal<boolean>(false);
@@ -54,28 +51,16 @@ const App: Component = () => {
     <>
       <Navbar onLogin={() => setIsModalOpen(true)} onLogout={() => void handleLogout()} />
       <Show when={error()} keyed>
-        {(error) => <ErrorNotification error={error} onClose={() => setError()} />}
+        {(error) => (
+          <Notification type="danger" onClose={() => setError()}>
+            {error.message}
+          </Notification>
+        )}
+      </Show>
+      <div class="container is-fluid">{props.children}</div>
+      <Show when={isModalOpen()}>
+        <LoginModal onClose={() => setIsModalOpen(false)} onLogIn={(user: User) => handleLogin(user)} />
       </Show>
-      <div class="container is-fluid">
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/vcf">
-            <Route path="/create" element={<VcfCreate />} />
-          </Route>
-          <Route path="/jobs">
-            <Route path="/" element={<Jobs />} />
-            <Route path="/create/:vcfId" data={VcfData} element={<JobCreateForm />} />
-            <Route path="/clone/:jobId" data={JobData} element={<JobCloneForm />} />
-          </Route>
-        </Routes>
-      </div>
-      <LoginModal
-        active={isModalOpen()}
-        onClose={() => setIsModalOpen(false)}
-        onLogIn={(user: User) => handleLogin(user)}
-      />
     </>
   );
 };
-
-export default App;

vip-web-frontend/src/components/LoginModal.tsx

@@ -2,9 +2,9 @@ import { Component, createSignal, Show } from "solid-js";
 import { Login, User } from "../api/Api.ts";
 import api from "../api/ApiClient.ts";
 import { createStore } from "solid-js/store";
+import Modal from "./bulma/modal.tsx";
 
-export const LoginModal: Component<{
-  active: boolean;
+const LoginModal: Component<{
   onClose: () => void;
   onLogIn: (user: User) => void;
 }> = (props) => {
@@ -30,73 +30,72 @@ export const LoginModal: Component<{
   };
 
   return (
-    <div classList={{ modal: true, "is-active": props.active }}>
-      <div class="modal-background" onClick={handleCancel} />
-      <div class="modal-content">
-        <div class="box">
-          {/* username */}
-          <div class="field is-horizontal">
-            <div class="field-label is-normal">
-              <label class="label">Username</label>
-            </div>
-            <div class="field-body">
-              <div class="field">
-                <div class="control">
-                  <input
-                    classList={{ input: true }}
-                    type="text"
-                    value={fields.username}
-                    onInput={(e) => {
-                      setFields("username", e.target.value);
-                    }}
-                  />
-                </div>
+    <Modal onClose={() => handleCancel()}>
+      <div class="box">
+        {/* username */}
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+            <label class="label">Username</label>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <div class="control">
+                <input
+                  classList={{ input: true }}
+                  type="text"
+                  value={fields.username}
+                  onInput={(e) => {
+                    setFields("username", e.target.value);
+                  }}
+                />
               </div>
             </div>
           </div>
-          {/* password */}
-          <div class="field is-horizontal">
-            <div class="field-label is-normal">
-              <label class="label">Password</label>
-            </div>
-            <div class="field-body">
-              <div class="field">
-                <div class="control">
-                  <input
-                    classList={{ input: true }}
-                    type="password"
-                    value={fields.password}
-                    onInput={(e) => {
-                      setFields("password", e.target.value);
-                    }}
-                  />
-                </div>
-                <Show when={help()} keyed>
-                  {(help) => <p class="help is-danger">{help}</p>}
-                </Show>
+        </div>
+        {/* password */}
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+            <label class="label">Password</label>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <div class="control">
+                <input
+                  classList={{ input: true }}
+                  type="password"
+                  value={fields.password}
+                  onInput={(e) => {
+                    setFields("password", e.target.value);
+                  }}
+                />
               </div>
+              <Show when={help()} keyed>
+                {(help) => <p class="help is-danger">{help}</p>}
+              </Show>
             </div>
           </div>
-          {/* buttons */}
-          <div class="field is-horizontal">
-            <div class="field-label" />
-            <div class="field-body">
-              <div class="field is-grouped is-grouped-right">
-                <div class="control">
-                  <button class="button is-link is-light" onClick={handleCancel}>
-                    Cancel
-                  </button>
-                </div>
-                <div class="control">
-                  <button class="button is-link" onClick={() => void handleLogin()}>
-                    Log in
-                  </button>
-                </div>
+        </div>
+        {/* buttons */}
+        <div class="field is-horizontal">
+          <div class="field-label" />
+          <div class="field-body">
+            <div class="field is-grouped is-grouped-right">
+              <div class="control">
+                <button class="button is-link is-light" onClick={handleCancel}>
+                  Cancel
+                </button>
+              </div>
+              <div class="control">
+                <button class="button is-link" onClick={() => void handleLogin()}>
+                  Log in
+                </button>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </Modal>
   );
 };
+
+export default LoginModal;

vip-web-frontend/src/components/Navbar.tsx

@@ -1,6 +1,5 @@
 import { Component, Show } from "solid-js";
-import { Link } from "@solidjs/router";
-import logoImgUrl from "../assets/img/molgenis_logo_white.png";
+import logoImgUrl from "../assets/img/logo.png";
 import { useStore } from "../store/store.tsx";
 
 export const Navbar: Component<{
@@ -12,9 +11,9 @@ export const Navbar: Component<{
   return (
     <nav class="navbar is-fixed-top is-info" role="navigation" aria-label="main navigation">
       <div class="navbar-brand">
-        <Link class="navbar-item" href="/">
+        <a class="navbar-item" href="/">
           <img src={logoImgUrl} alt="Logo" />
-        </Link>
+        </a>
       </div>
       <div class="navbar-menu">
         <div class="navbar-start">

vip-web-frontend/src/components/bulma/modal.tsx

@@ -0,0 +1,14 @@
+import { ParentComponent } from "solid-js";
+
+const Modal: ParentComponent<{
+  onClose: () => void;
+}> = (props) => {
+  return (
+    <div class="modal is-active">
+      <div class="modal-background" onClick={() => props.onClose()} />
+      <div class="modal-content">{props.children}</div>
+    </div>
+  );
+};
+
+export default Modal;

vip-web-frontend/src/components/bulma/notification.tsx

@@ -0,0 +1,17 @@
+import { ParentComponent } from "solid-js";
+
+type type = "primary" | "link" | "info" | "success" | "warning" | "danger";
+
+const Notification: ParentComponent<{
+  type: type;
+  onClose: () => void;
+}> = (props) => {
+  return (
+    <div class={`notification is-${props.type} is-light`}>
+      <button class="delete" onClick={() => props.onClose()} />
+      {props.children}
+    </div>
+  );
+};
+
+export default Notification;

vip-web-frontend/src/index.tsx

@@ -1,12 +1,18 @@
 /* @refresh reload */
-import { render } from "solid-js/web";
-
 import "./assets/sass/main.scss";
-import App from "./App";
-
+import { lazy } from "solid-js";
+import { render } from "solid-js/web";
+import { HashRouter, Route } from "@solidjs/router";
+import { App } from "./App";
 import { dom, library } from "@fortawesome/fontawesome-svg-core";
 import { faClone, faDownload, faTrash, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { Provider } from "./store/store.tsx";
+import Home from "./views/Home.tsx";
+
+const Jobs = lazy(() => import("./views/Jobs.tsx"));
+const JobCloneForm = lazy(() => import("./views/JobCloneForm.tsx"));
+const JobCreateForm = lazy(() => import("./views/JobCreateForm.tsx"));
+const VcfCreate = lazy(() => import("./views/VcfCreate.tsx"));
 
 library.add(faClone, faDownload, faUpload, faTrash);
 
@@ -24,7 +30,17 @@ if (document.readyState === "complete") {
 render(
   () => (
     <Provider>
-      <App />
+      <HashRouter root={App}>
+        <Route path="/" component={Home} />
+        <Route path="/vcf">
+          <Route path="/create" component={VcfCreate} />
+        </Route>
+        <Route path="/jobs">
+          <Route path="/" component={Jobs} />
+          <Route path="/create/:vcfId" component={JobCreateForm} />
+          <Route path="/clone/:jobId" component={JobCloneForm} />
+        </Route>
+      </HashRouter>
     </Provider>
   ),
   document.body,

vip-web-frontend/src/store/store.tsx

@@ -1,4 +1,3 @@
-import { hashIntegration, Router } from "@solidjs/router";
 import { Context, createContext, ParentComponent, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 import { User } from "../api/Api.ts";
@@ -36,11 +35,7 @@ export const Provider: ParentComponent = (props) => {
   };
   const store: AppStore = [state, actions];
 
-  return (
-    <Router source={hashIntegration()}>
-      <StoreContext.Provider value={store}>{props.children}</StoreContext.Provider>
-    </Router>
-  );
+  return <StoreContext.Provider value={store}>{props.children}</StoreContext.Provider>;
 };
 
 export function useStore() {