From 53ba5a05a12ea4ff7e16a882a52f31d13724ba00 Mon Sep 17 00:00:00 2001
From: Nikolai R Kristiansen <nikolaik@gmail.com>
Date: Sun, 6 Mar 2022 21:16:53 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20credits?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 Fix navigating below page zero
---
 frontend/src/App.tsx                      |  2 ++
 frontend/src/components/Footer.module.css | 22 ++++++++++++++++++++++
 frontend/src/components/Footer.tsx        | 15 +++++++++++++++
 frontend/src/components/Header.tsx        |  1 -
 frontend/src/features/log/Log.tsx         | 16 ++++++++--------
 5 files changed, 47 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/Footer.module.css
 create mode 100644 frontend/src/components/Footer.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a4d9d02..8727b14 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import { BrowserRouter as Router } from "react-router-dom";
 import styles from "./App.module.css";
 import { Routes } from "./Routes";
 import client from "./client";
+import { Footer } from "./components/Footer";
 import { Header } from "./components/Header";
 import { Splash as Splash } from "./components/Splash";
 import { Toast } from "./components/Toast";
@@ -18,6 +19,7 @@ const App: React.FC = () => (
         <div className={styles.app}>
           <Routes />
         </div>
+        <Footer />
         <Toast />
       </ToastProvider>
     </Router>
diff --git a/frontend/src/components/Footer.module.css b/frontend/src/components/Footer.module.css
new file mode 100644
index 0000000..ce35f90
--- /dev/null
+++ b/frontend/src/components/Footer.module.css
@@ -0,0 +1,22 @@
+.footer {
+  position: absolute;
+  right: 0;
+  bottom: 1rem;
+  left: 0;
+  height: 20px;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+.heart {
+  color: var(--brand);
+}
+
+.brick {
+  position: relative;
+  top: 7px;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
new file mode 100644
index 0000000..3916750
--- /dev/null
+++ b/frontend/src/components/Footer.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+import { ReactComponent as Brick } from "../assets/brick.svg";
+import styles from "./Footer.module.css";
+
+export const Footer: React.FC = () => {
+  return (
+    <footer className={styles.footer}>
+      Made with <span className={styles.heart}>❤</span> by{" "}
+      <span title="EDB-gjengen">
+        <Brick className={styles.brick} />
+      </span>
+    </footer>
+  );
+};
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 8356c21..0bf2996 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -2,7 +2,6 @@ import clsx from "clsx";
 import React from "react";
 import { NavLink } from "react-router-dom";
 
-import { ReactComponent as Logo } from "../assets/brick.svg";
 import styles from "./Header.module.css";
 
 const ADMIN_URL = `${import.meta.env.VITE_API_URL}/admin/`;
diff --git a/frontend/src/features/log/Log.tsx b/frontend/src/features/log/Log.tsx
index 8f9a797..22611cc 100644
--- a/frontend/src/features/log/Log.tsx
+++ b/frontend/src/features/log/Log.tsx
@@ -67,10 +67,10 @@ export const Log = () => {
                 href="#"
                 onClick={(e) => {
                   e.preventDefault();
-                  setParams({ orderOffset: orderOffset - PAGE_SIZE });
+                  setParams({ orderOffset: Math.max(0, orderOffset - PAGE_SIZE) });
                 }}
               >
-                Previous
+                ⬅
               </a>
             </li>
             <li>
@@ -78,10 +78,10 @@ export const Log = () => {
                 href="#"
                 onClick={(e) => {
                   e.preventDefault();
-                  setParams({ orderOffset: orderOffset + PAGE_SIZE });
+                  setParams({ orderOffset: Math.max(0, orderOffset + PAGE_SIZE) });
                 }}
               >
-                Next
+                ➡
               </a>
             </li>
           </ul>
@@ -116,10 +116,10 @@ export const Log = () => {
                 href="#"
                 onClick={(e) => {
                   e.preventDefault();
-                  setParams({ transactionOffset: transactionOffset - PAGE_SIZE });
+                  setParams({ transactionOffset: Math.max(0, transactionOffset - PAGE_SIZE) });
                 }}
               >
-                Previous
+                ⬅
               </a>
             </li>
             <li>
@@ -127,10 +127,10 @@ export const Log = () => {
                 href="#"
                 onClick={(e) => {
                   e.preventDefault();
-                  setParams({ transactionOffset: transactionOffset + PAGE_SIZE });
+                  setParams({ transactionOffset: Math.max(transactionOffset + PAGE_SIZE) });
                 }}
               >
-                Next
+                ➡
               </a>
             </li>
           </ul>