✨ Make the SPA load for home and register

Link to legacy routes

README.md

@@ -1,4 +1,5 @@
 # Getting started
+
 Before starting, make sure you have a working python and nodejs setup with pyenv and nvm.
 
 ```bash
@@ -15,12 +16,19 @@ npm install
 npm start
 ```
 
-## References:
+## References
- - We use JS code generation to work with queries/mutations in our graphql API: https://github.com/dotansimha/graphql-typed-document-node
 
-# TODO-old
+- We use JS code generation to work with queries/mutations in our graphql API: https://github.com/dotansimha/graphql-typed-document-node
- * Larger pictures
+
- * Compact GUI for max 768 vertical pixels
+## TODO
-     * Search right of in title
+
- * Light on dark colors
+- Log view
+- Remove everything facebook related. Use gravatars.
+- Light on dark colors
+
+## TODO-old
+
+- Larger pictures
+- Compact GUI for max 768 vertical pixels
+  - Search right of in title
 

frontend/package.json

@@ -60,4 +60,4 @@
     "node": ">=16",
     "npm": ">=7"
   }
-}
+}

frontend/src/App.tsx

@@ -10,11 +10,9 @@ import { Header } from "./components/Header";
 import { Toast } from "./components/Toast";
 import { ToastProvider } from "./components/ToastProvider";
 
-const baseUrl = import.meta.env.BASE_URL;
-
 const App: React.FC = () => (
   <ApolloProvider client={client}>
-    <Router basename={baseUrl.replace("/static", "")}>
+    <Router>
       <ToastProvider>
         <Header />
         <div className={styles.app}>

frontend/src/components/Header.tsx

@@ -44,20 +44,20 @@ export const Header: React.FC = () => {
               </NavLink>
             </li>
             <li className="nav-item">
-              <NavLink to="/log" className="nav-link" activeClassName="active">
+              <a href="/log" className="nav-link">
                 <span className={styles.navIcon}>
                   <CardList />
                 </span>{" "}
                 Logg
-              </NavLink>
+              </a>
             </li>
             <li className="nav-item">
-              <NavLink to="/stats" className="nav-link" activeClassName="active">
+              <a href="/stats" className="nav-link">
                 <span className={styles.navIcon}>
                   <BarChart />
                 </span>{" "}
                 Statistikk
-              </NavLink>
+              </a>
             </li>
           </ul>
         </div>

frontend/vite.config.js

@@ -10,5 +10,5 @@ export default defineConfig({
     __DEV__: process.env.NODE_ENV !== "production",
   },
   envDir: "..",
-  build: { outDir: "../static/modern" },
+  build: { outDir: "../static/modern", emptyOutDir: true },
 });

main/urls.py

@@ -1,6 +1,6 @@
 from django.conf.urls import url
 from django.contrib.staticfiles.views import serve
-from django.urls import path
+from django.urls import include, path
 from rest_framework.routers import DefaultRouter
 
 from main.api.views import ProductViewSet
@@ -17,10 +17,17 @@ from main.views.stats import (
 )
 from main.views.users import create_user, profile
 
+spa_kwargs = {"path": "modern/index.html"}
+
+legacy_patterns = [
+    path("", register, name="home-legacy"),
+    path("deposit", deposit, name="deposit-legacy"),
+]
+
 urlpatterns = [
-    url(r"^$", register, name="home"),
+    path("", serve, kwargs=spa_kwargs, name="home"),
-    url(r"^register/$", register, name="register"),
+    path("deposit", serve, kwargs=spa_kwargs, name="deposit"),
-    url(r"^deposit/$", deposit, name="deposit"),
+    # TODO: migrate to SPA
     url(r"^log/$", log, name="log"),
     url(r"^log/all$", log, kwargs={"limit": None}, name="log-all"),
     # Users
@@ -30,9 +37,9 @@ urlpatterns = [
     url(r"^inventory/$", inventory, name="inventory"),
     url(r"^inventory/add/$", inventory_add, name="inventory-add"),
     url(r"^report$", report, name="report"),
-    # FIXME: Serve the modern stack from here until rest of views are ported
+    path("legacy/", include(legacy_patterns)),
-    url(r"^modern/", serve, kwargs={"path": "modern/index.html"}, name="modern"),
 ]
+
 # Stats
 urlpatterns += [
     url(r"^stats/$", stats_list, name="stats"),

templates/base.html

@@ -26,8 +26,8 @@
             <!-- Collect the nav links, forms, and other content for toggling -->
             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                 <ul class="nav navbar-nav">
-                    <li class="{% block active_register %}{% endblock %}"><a href="/register"><i class="glyphicon glyphicon-home white"></i> Kjøp drikke</a></li>
+                    <li class="{% block active_register %}{% endblock %}"><a href="{% url "home" %}"><i class="glyphicon glyphicon-home white"></i> Kjøp drikke</a></li>
-                    <li class="{% block active_deposit %}{% endblock %}"><a href="/deposit">Sett inn penger</a></li>
+                    <li class="{% block active_deposit %}{% endblock %}"><a href="{% url "deposit" %}">Sett inn penger</a></li>
                     <li class="{% block active_log %}{% endblock %}"><a href="/log"><i class="glyphicon glyphicon-list-alt"></i> Logg</a></li>
                     <li class="{% block active_stats %}{% endblock %}"><a href="/stats"><i class="glyphicon glyphicon-stats"></i> Statistikk</a></li>
                 </ul>

templates/deposit.html

@@ -73,7 +73,7 @@
         <div class="row">
             <div class="col-md-12">
                 <button type="submit" class="btn btn-lg btn-primary" name="submit_order">Sett inn</button>
-               <a href="{% url 'register' %}" class="btn btn-default">Avbryt</a>
+               <a href="{% url 'home' %}" class="btn btn-default">Avbryt</a>
             </div>
         </div>
     </form>

templates/registration/create_user.html

@@ -31,7 +31,7 @@
                         <label for="id_email">{{ form.email.label }}</label>{{ form.email}}{{ form.email.errors }}
                     </div>
                     <input type="submit" value="Legg til" class="btn btn-primary btn-lg" />
-                    <a href="{% url 'register' %}" class="btn btn-default">Tilbake</a>
+                    <a href="{% url 'home' %}" class="btn btn-default">Tilbake</a>
                 </form>
             </div>
         </section>