draft(react): react + vite integration

wanderers-guide · Jan 30, 2023 · a03b362 · a03b362
1 parent 7bd95b0
commit a03b362
Show file tree

Hide file tree

Showing 22 changed files with 3,431 additions and 239 deletions.
diff --git a/app.js b/app.js
@@ -37,6 +37,7 @@ const profileRoutes = require("./routes/profile-routes");
 const mloadsRoutes = require("./routes/mloads/mloads-routes");
 const coreRoutes = require("./routes/core-routes");
 const errorRoutes = require("./routes/error-routes");
+const profileCharacterAPI = require("./routes/api/profile/characters");
 
 const SocketConnections = require("./js/SocketConnections");
 
@@ -225,6 +226,7 @@ app.use(function (req, res, next) {
 });
 
 // Set up Routes
+app.use("/api/profile/characters", profileCharacterAPI);
 app.use("/auth", authRoutes);
 app.use("/profile", profileRoutes);
 app.use("/admin", adminRoutes);

diff --git a/app/App.tsx b/app/App.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import { useState } from "react";
+import { CharacterList } from "./pages/CharacterList";
+
+function App() {
+  // In a full application, this would probably be the page router, but for now
+  // we'll just abstract it as a simple component call
+
+  return <CharacterList />;
+}
+
+export default App;
diff --git a/app/assets/react.svg b/app/assets/react.svg
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+
+export function Button({ children, onClick, href }: any) {
+  if (href) {
+    <a href={href}>{children}</a>;
+  }
+
+  return <button onClick={onClick}>{children}</button>;
+}
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+
+function NavLink({ href, children }: any) {
+  return (
+    <li className="text-zinc-100">
+      <a href={href}>{children}</a>
+    </li>
+  );
+}
+
+export function Header() {
+  return (
+    <nav className="bg-zinc-900 flex justify-between px-4 py-3 border-b-[1px] border-zinc-400">
+      <div className="shrink-0 pr-2">
+        <a href="/">
+          <img
+            src="/images/logo.png"
+            style={{
+              height: 50,
+              width: 282,
+            }}
+            alt="Wanderer's Guide"
+          ></img>
+        </a>
+      </div>
+      <ul className="flex gap-6 items-center">
+        <NavLink>Home</NavLink>
+        <NavLink>Characters</NavLink>
+        <NavLink>Builds</NavLink>
+        <NavLink>Homebrew</NavLink>
+        <NavLink>GM Tools</NavLink>
+        <NavLink>Browse</NavLink>
+        <NavLink>Profile</NavLink>
+      </ul>
+    </nav>
+  );
+}
diff --git a/app/components/index.ts b/app/components/index.ts
@@ -0,0 +1 @@
+export * from "./Header";
diff --git a/app/index.css b/app/index.css
@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.test {
+  color: black;
+}
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Wanderer's Guide</title>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="module">
+      import RefreshRuntime from "http://localhost:5173/@react-refresh";
+      RefreshRuntime.injectIntoGlobalHook(window);
+      window.$RefreshReg$ = () => {};
+      window.$RefreshSig$ = () => (type) => type;
+      window.__vite_plugin_react_preamble_installed__ = true;
+    </script>
+    <script type="module" src="http://localhost:5173/@vite/client"></script>
+    <script type="module" src="http://localhost:5173/app/main.tsx"></script>
+  </body>
+</html>
diff --git a/app/main.tsx b/app/main.tsx
@@ -0,0 +1,12 @@
+import "vite/modulepreload-polyfill";
+
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/app/pages/CharacterList/CharacterListPage.tsx b/app/pages/CharacterList/CharacterListPage.tsx
@@ -0,0 +1,73 @@
+import * as React from "react";
+import { Header } from "../../components";
+import { CharacterCard } from "./components/CharacterCard";
+import { UserPlusIcon, ArrowUpTrayIcon } from "@heroicons/react/24/solid";
+
+export function CharacterList() {
+  const [state, setState] = React.useState<any>({
+    status: "idle",
+    characters: [],
+  });
+
+  console.log("satte: ", state);
+
+  React.useEffect(() => {
+    setState({
+      ...state,
+      status: "loading",
+    });
+
+    fetch("/api/profile/characters")
+      .then((res) => res.json())
+      .then((data) => {
+        console.log("data: ", data);
+        setState({
+          ...state,
+          status: "success",
+          characters: data,
+        });
+      });
+  }, []);
+
+  return (
+    <div className="bg-zinc-900 h-full min-h-screen px-4 text-zinc-200">
+      <Header />
+
+      <main>
+        <section className="flex justify-between border-b border-zinc-600 items-center py-3">
+          <h1 className="text-3xl">Characters</h1>
+
+          <div className="flex gap-2">
+            <a
+              className="is-size-3 is-pulled-right"
+              href="/profile/characters/add"
+            >
+              <UserPlusIcon height={32} />
+            </a>
+            <button>
+              <ArrowUpTrayIcon height={32} />
+            </button>
+          </div>
+        </section>
+
+        <section>
+          {state.status === "loading" && <div>Loading...</div>}
+
+          {state.status === "success" && state.characters.length === 0 && (
+            <div>No characters found</div>
+          )}
+
+          {state.status === "success" && state.characters.length > 0 && (
+            <div className="flex flex-wrap gap-3 py-4">
+              {state.characters.map((character: any) => {
+                return (
+                  <CharacterCard key={character.id} character={character} />
+                );
+              })}
+            </div>
+          )}
+        </section>
+      </main>
+    </div>
+  );
+}
diff --git a/app/pages/CharacterList/components/CharacterCard.tsx b/app/pages/CharacterList/components/CharacterCard.tsx
@@ -0,0 +1,80 @@
+import * as React from "react";
+import {
+  PencilIcon,
+  WrenchIcon,
+  EllipsisHorizontalIcon,
+  TrashIcon,
+} from "@heroicons/react/24/solid";
+
+function CardTab({ href, onClick, children }: any) {
+  if (href) {
+    return (
+      <a
+        href={href}
+        className="flex justify-center flex-1 py-2 px-4 hover:bg-zinc-700"
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      onClick={onClick}
+      className="flex justify-center flex-1 py-2 px-4 hover:bg-zinc-700"
+    >
+      {children}
+    </button>
+  );
+}
+
+export function CharacterCard({ character }: any) {
+  return (
+    <div className="w-full sm:max-w-[300px] bg-neutral-800">
+      <a
+        href={`/profile/characters/${character.id}`}
+        className="flex flex-col p-4 gap-3 hover:bg-zinc-700"
+      >
+        <p className="text-xl">{character.name}</p>
+        <div className="flex items-center gap-2 text-opacity-75 text-sm">
+          <p>Lvl {character.level}</p>
+          {character.heritageName && (
+            <>
+              <span>|</span>
+              <p>{character.heritageName}</p>
+            </>
+          )}
+          {character.className && (
+            <>
+              <span>|</span>
+              <p>{character.className}</p>
+            </>
+          )}
+        </div>
+      </a>
+      <div className="flex bg-neutral-800 border-t border-zinc-700">
+        <CardTab
+          href={`/profile/characters/builder/basics/?id=${character.id}`}
+        >
+          {character.isPlayable ? (
+            <span className="flex gap-2 items-center">
+              <p className="text-sm">Edit</p>
+              <PencilIcon height={16} />
+            </span>
+          ) : (
+            <span className="flex gap-2 items-center">
+              <p className="text-sm">Continue</p>
+              <WrenchIcon height={16} />
+            </span>
+          )}
+        </CardTab>
+        <CardTab onClick={() => {}}>
+          <EllipsisHorizontalIcon height={16} />
+        </CardTab>
+        <CardTab onClick={() => {}}>
+          <TrashIcon height={16} />
+        </CardTab>
+      </div>
+    </div>
+  );
+}
diff --git a/app/pages/CharacterList/index.ts b/app/pages/CharacterList/index.ts
@@ -0,0 +1 @@
+export * from "./CharacterListPage";
diff --git a/app/vite-env.d.ts b/app/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />