feat: Initial (barebone) frontend setup

kajyr · Nov 4, 2021 · c34afd6 · c34afd6
1 parent c1da95e
commit c34afd6
Show file tree

Hide file tree

Showing 12 changed files with 200 additions and 203 deletions.
diff --git a/backend/app.ts b/backend/app.ts
@@ -10,6 +10,7 @@ async function build(opts = {}) {
   app.register(require("fastify-log"));
   app.register(require("fastify-routes"));
 
+  await app.register(require("./config"));
   await app.register(require("./journal"));
 
   // Block other api

diff --git a/backend/config/index.ts b/backend/config/index.ts
@@ -0,0 +1,19 @@
+import { filename } from '../dal';
+
+export default function (fastify, opts, done) {
+  const routes = [
+    {
+      method: "GET",
+      url: `/api/bootstrap`,
+      handler: async function () {
+        return { file: filename };
+      },
+    },
+  ];
+
+  for (const route of routes) {
+    fastify.route(route);
+  }
+
+  done();
+}
diff --git a/backend/dal/index.ts b/backend/dal/index.ts
@@ -0,0 +1,4 @@
+const path = require("path");
+const fullFile = process.env.LEDGER_FILE;
+
+export const filename = path.basename(fullFile);
diff --git a/backend/server.ts b/backend/server.ts
@@ -1,4 +1,4 @@
-require("dotenv").config({ path: "../" });
+require("dotenv");
 
 import colors from 'colors/safe';
 

diff --git a/frontend/package.json b/frontend/package.json
@@ -19,6 +19,7 @@
     "luxon": "^2.0.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-query": "^3.31.0",
     "react-router-dom": "^6.0.0",
     "stream-browserify": "^3.0.0",
     "styled-components": "^5.2.0",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+import { useQuery } from 'react-query';
+import { Route, Routes } from 'react-router-dom';
+
+import Loader from 'atoms/Loader';
+
+import Page from 'templates/Page';
+
+import Dashboard from 'pages/dashboard';
+
+const App: FC = () => {
+  const { isLoading, error, data } = useQuery("bootstrap", () =>
+    fetch("/api/bootstrap").then((res) => res.json())
+  );
+
+  console.log(isLoading, data);
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <>
+      <Page filename={data.file}>
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+        </Routes>
+      </Page>
+    </>
+  );
+};
+
+export default App;
diff --git a/frontend/src/atoms/Loader.tsx b/frontend/src/atoms/Loader.tsx
@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+import { createStyles, Loader as MLoader } from '@mantine/core';
+
+const useStyles = createStyles(() => {
+  return {
+    wrapper: { textAlign: "center", margin: "1em 0" },
+  };
+});
+
+const Loader: FC = () => {
+  const { classes } = useStyles();
+  return (
+    <div className={classes.wrapper}>
+      <MLoader />
+    </div>
+  );
+};
+
+export default Loader;
diff --git a/frontend/src/globalstyle.tsx b/frontend/src/globalstyle.tsx
@@ -13,6 +13,11 @@ const GlobalStyle = createGlobalStyle`
     -webkit-font-smoothing: antialiased;
   }
 
+  body {
+      background: #ecf0f5;  
+      padding: 1em;
+  }
+
   * {
     box-sizing: border-box;
   }

diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -1,7 +1,10 @@
 <html>
   <head>
-    <title>Logbook</title>
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" />
+    <title>kLedger UI</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
+      rel="stylesheet"
+    />
   </head>
 
   <body>

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -1,25 +1,33 @@
 import React from 'react';
 import { render } from 'react-dom';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import Page from 'templates/Page';
 
-import Dashboard from 'pages/dashboard';
-
+import App from './App';
 import GlobalStyle from './globalstyle';
 import FourOhFour from './pages/four-oh-four';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
 render(
   <>
     <GlobalStyle />
-    <Page>
+    <QueryClientProvider client={queryClient}>
       <BrowserRouter>
         <Routes>
           <Route path="/404" element={<FourOhFour />} />
-          <Route path="/" element={<Dashboard />} />
+          <Route path="/*" element={<App />} />
         </Routes>
       </BrowserRouter>
-    </Page>
+    </QueryClientProvider>
   </>,
   document.getElementById("rroot")
 );
diff --git a/frontend/src/templates/Page.tsx b/frontend/src/templates/Page.tsx
@@ -1,21 +1,33 @@
 import React, { FC } from 'react';
 import styled from 'styled-components';
 
-const Main = styled.main`
+const Wrapper = styled.div`
   display: flex;
+  flex-direction: column;
   min-height: 100vh;
+
+  header {
+    margin-bottom: 15px;
+
+    h1 {
+      margin-bottom: 5px;
+    }
+  }
 `;
 
-const Body = styled.div`
-  padding: 1em;
+const Body = styled.main`
   flex: 1;
-  background: #ecf0f5;
 `;
 
-const Page: FC = ({ children }) => (
-  <Main>
+const Page: FC<{ filename: string }> = ({ filename, children }) => (
+  <Wrapper>
+    <header>
+      <h1>kLedger UI</h1>
+      <div>File in use: {filename}</div>
+    </header>
     <Body>{children}</Body>
-  </Main>
+    <footer>github</footer>
+  </Wrapper>
 );
 
 export default Page;