✨ start basic api client implementation

.env.example

@@ -0,0 +1 @@
+REACT_APP_BASE_URL=

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

craco.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    style: {
+        postcss: {
+            plugins: [
+                require('tailwindcss'),
+                require('autoprefixer'),
+            ],
+        },
+    },
+}

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.1.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -12,9 +13,9 @@
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/App.js

@@ -1,25 +1,21 @@
-import logo from './logo.svg';
-import './App.css';
+import {useEffect} from "react";
+import {getTypes, moblist} from "./api/base";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    useEffect(() => {
+        (async () => {
+            console.log(await moblist())
+        })()
+    })
+
+    return (
+        <div className="min-h-screen flex justify-center items-center">
+            <div>
+                <p>🧛 Blood Night Web</p>
+                <p>{window.location.hash}</p>
+            </div>
+        </div>
+    );
 }
 
 export default App;

src/ErrorUI.js

@@ -0,0 +1,13 @@
+import React, {useEffect, useState} from 'react';
+
+const ErrorUi = () => {
+    const [err, setErr] = useState("");
+
+    return (
+        <div>
+            {err}
+        </div>
+    );
+};
+
+export default ErrorUi;

src/api/base.js

@@ -0,0 +1,24 @@
+import {tokenHeader} from "./util";
+
+export async function getTypes() {
+    return await fetch(process.env.REACT_APP_BASE_URL + "/types")
+        .then(response => response.json())
+}
+
+export async function moblist() {
+    return await fetch(process.env.REACT_APP_BASE_URL + "/moblist", {headers: tokenHeader()})
+        .then(response => response.json())
+}
+
+export async function getMobSettings(identifier) {
+    return await fetch(process.env.REACT_APP_BASE_URL + "/mobsettings/" + identifier, {headers: tokenHeader()})
+        .then(response => response.json())
+}
+
+export async function createMobSettings(identifier) {
+    return await fetch(process.env.REACT_APP_BASE_URL + "/mobsettings/" + identifier, {headers: tokenHeader(), method: "POST"})
+}
+
+export async function deleteMobSettings(identifier) {
+    return await fetch(process.env.REACT_APP_BASE_URL + "/mobsettings/" + identifier, {headers: tokenHeader(), method: "DELETE"})
+}

src/api/index.js

@@ -0,0 +1,3 @@
+import {createMobSettings, deleteMobSettings, getMobSettings, getTypes, moblist} from "./base";
+
+module.exports = [getTypes, moblist, getMobSettings, createMobSettings, deleteMobSettings]

src/api/util.js

@@ -0,0 +1,3 @@
+export function tokenHeader() {
+    return {"token": localStorage.getItem("token")}
+}

src/index.css

@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/index.js

@@ -2,13 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+import ErrorUi from './ErrorUI';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+    <React.StrictMode>
+        <div className="min-h-screen font-mono bg-black text-red-400">
+            <ErrorUi/>
+            <App/>
+        </div>
+    </React.StrictMode>,
+    document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function

tailwind.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  mode: 'jit',
+  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
+  darkMode: 'media', // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}

yarn.lock

@@ -1151,6 +1151,16 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@craco/craco@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@craco/craco/-/craco-6.1.2.tgz#30e45288e4609ac6b8cf828085b34acebdc60e69"
+  integrity sha512-GlQZn+g+yNlaDvIL5m6mcCoBGyFDwO4kkNx3fNFf98wuldkdWyBFoQbtOFOIb4gvkTh4VntOOxtJEoZfKs7XXw==
+  dependencies:
+    cross-spawn "^7.0.0"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    webpack-merge "^4.2.2"
+
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
@@ -11274,6 +11284,13 @@ [email protected]:
     object.entries "^1.1.0"
     tapable "^1.0.0"
 
+webpack-merge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d"
+  integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==
+  dependencies:
+    lodash "^4.17.15"
+
 webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"