feat: Working local dev solidjs with routing w/o cors problems

.editorconfig

@@ -0,0 +1,23 @@
+# Some docs: https://EditorConfig.org
+
+root = true # top-most EditorConfig file
+
+[*]
+end_of_line = lf # unix style line endings
+insert_final_newline = false # newline at end of file
+charset = utf-8 # encoding
+max_line_length = 90 # Suggested maximum of 90 characters per line
+
+[*.{js,ts,jsx,tsx}]
+indent_style = space
+indent_size = 2
+quote_type = single
+
+[*.py]
+indent_style = space
+indent_size = 4
+quote_type = single
+
+[*.json]
+indent_style = space
+indent_size = 2

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "printWidth": 90,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "jsxSingleQuote": true
+}

rust_solid_cassandra/frontend/package.json

@@ -10,11 +10,15 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.19",
+    "tailwindcss": "^3.2.4",
     "typescript": "^4.8.2",
     "vite": "^3.0.9",
     "vite-plugin-solid": "^2.3.0"
   },
   "dependencies": {
+    "@solidjs/router": "^0.5.1",
     "solid-js": "^1.5.1"
   }
 }

rust_solid_cassandra/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

rust_solid_cassandra/frontend/src/App.tsx

@@ -1,26 +1,17 @@
-import type { Component } from 'solid-js';
+import { Route, Routes } from "@solidjs/router";
-
+import { Component, lazy } from "solid-js";
-import logo from './logo.svg';
+// Only load the components if we are navigating to them
-import styles from './App.module.css';
+const Home = lazy(() => import("./pages/Home"));
+const Login = lazy(() => import("./pages/Login"));
 
 const App: Component = () => {
   return (
-    <div class={styles.App}>
+    <>
-      <header class={styles.header}>
+      <Routes>
-        <img src={logo} class={styles.logo} alt="logo" />
+        <Route path={["login", "register"]} component={Login} />
-        <p>
+        <Route path={["/", "*"]} component={Home} />
-          Edit <code>src/App.tsx</code> and save to reload.
+      </Routes>
-        </p>
+    </>
-        <a
-          class={styles.link}
-          href="https://github.com/solidjs/solid"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn Solid
-        </a>
-      </header>
-    </div>
   );
 };
 

rust_solid_cassandra/frontend/src/api/RestClient.ts

@@ -0,0 +1,58 @@
+/**
+ * Author: phga
+ * Date: 2022-11-23T23:57
+ * Description: This is a rudimentary REST Client created while
+ * evaluating different technologies for GLOU
+ */
+
+const BACKEND_SERVER_URL = 'localhost:6969';
+// Helper function to do the actual fetching from our backend
+// For now we always send/receive json -> For a real world example make this more variable
+const do_fetch = async (
+  method: string,
+  path: string,
+  payload?: string
+): Promise<unknown | string> => {
+  try {
+    const req = await fetch(`https://${BACKEND_SERVER_URL}${path}`, {
+      method,
+      credentials: 'include',
+      headers: {
+        'Access-Control-Allow-Origin': `${BACKEND_SERVER_URL}`,
+        'Access-Control-Allow-Credentials': 'true',
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: payload,
+    });
+
+    const res = await req.text();
+    return JSON.parse(res);
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+const GET = async (path: string): Promise<unknown | string> => {
+  return do_fetch('GET', path);
+};
+const POST = async (path: string, payload?: string): Promise<unknown | string> => {
+  return do_fetch('POST', path, payload);
+};
+const PUT = async (path: string, payload?: string): Promise<unknown | string> => {
+  return do_fetch('PUT', path, payload);
+};
+const DELETE = async (path: string): Promise<unknown | string> => {
+  return do_fetch('DELETE', path);
+};
+
+// The actual RestClient we will use in our frontend
+// It does not support all REST methods for this evaluation
+const RestClient = {
+  GET,
+  POST,
+  PUT,
+  DELETE,
+};
+
+export default RestClient;

rust_solid_cassandra/frontend/src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

rust_solid_cassandra/frontend/src/index.tsx

@@ -1,7 +1,15 @@
 /* @refresh reload */
-import { render } from 'solid-js/web';
+import { render } from "solid-js/web";
+import { Router } from "@solidjs/router";
 
-import './index.css';
+import "./index.css";
-import App from './App';
+import App from "./App";
 
-render(() => <App />, document.getElementById('root') as HTMLElement);
+render(
+  () => (
+    <Router>
+      <App />
+    </Router>
+  ),
+  document.getElementById("root") as HTMLElement
+);

rust_solid_cassandra/frontend/src/pages/Home.tsx

@@ -0,0 +1,11 @@
+import { Component } from "solid-js";
+
+const Home: Component = () => {
+  return (
+    <>
+      <h1 class="text-4xl">Home</h1>
+    </>
+  );
+};
+
+export default Home;

rust_solid_cassandra/frontend/src/pages/Login.tsx

@@ -0,0 +1,31 @@
+import { Component } from 'solid-js';
+import RestClient from '../api/RestClient';
+
+const Login: Component = () => {
+  const TEST_USER = {
+    id: '310c0d24-cc2e-4798-a259-0d49bf2e3a5a',
+    hash: 'MEIN_HASH',
+    login: 'phga',
+    salt: 'MEIN_SALZ',
+  };
+
+  const btnPrimary =
+    'inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out';
+
+  return (
+    <>
+      <h1 class='text-4xl'>Login</h1>
+      <button class={btnPrimary} onClick={() => RestClient.GET('/')}>
+        GET_HOME
+      </button>
+      <button
+        class={btnPrimary}
+        onClick={() => RestClient.POST('/login', JSON.stringify(TEST_USER))}
+      >
+        POST_LOGIN
+      </button>
+    </>
+  );
+};
+
+export default Login;

rust_solid_cassandra/frontend/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};