From 13b633e23cc40e5fa7c242c31d0d92958c597843 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Mon, 14 Feb 2022 18:05:13 +0100
Subject: [PATCH] feat: add wip placeholder for exp list and stats

---
 app/components/Header.tsx    |  4 +-
 app/routes/expenses/list.tsx | 33 ++++++++++++++++
 app/routes/statistics.tsx    | 74 ++++++++++++++++++++++++++++++++++++
 3 files changed, 109 insertions(+), 2 deletions(-)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index c513ff2..fba8284 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -68,7 +68,7 @@ const Header = ({ user, route }: Props) => {
                 </Link>
               </li>
               <li>
-                <Link to="#" className="btn btn-ghost rounded-btn">
+                <Link to="/statistics" className="btn btn-ghost rounded-btn">
                   <Percentage className="lg:mr-2" />
                   <span
                     className={`hidden lg:inline-block ${
@@ -179,7 +179,7 @@ const Header = ({ user, route }: Props) => {
             </Link>
           </li>
           <li className="items-start">
-            <Link to="#" className="btn btn-ghost rounded-btn">
+            <Link to="/statistics" className="btn btn-ghost rounded-btn">
               <Percentage className="mr-2" />
               <span
                 className={`inline-block ${
diff --git a/app/routes/expenses/list.tsx b/app/routes/expenses/list.tsx
index e69de29..c787b8f 100644
--- a/app/routes/expenses/list.tsx
+++ b/app/routes/expenses/list.tsx
@@ -0,0 +1,33 @@
+import { Link } from "remix";
+
+export default function ListExpensesRoute() {
+  return (
+    <div className="hero py-40 bg-base-200 my-8 rounded-box">
+      <div className="text-center hero-content">
+        <div className="max-w-md">
+          <h1 className="mb-5 text-5xl font-bold">Work in progress</h1>
+          <p className="mb-5">
+            <button className="btn btn-lg loading"></button>
+            This page is under construction.
+          </p>
+          <Link to="/expenses" className="btn btn-primary">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              className="inline-block w-6 h-6 mr-2 stroke-current rotate-180"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 5l7 7-7 7"
+              ></path>
+            </svg>
+            Back
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/routes/statistics.tsx b/app/routes/statistics.tsx
index e69de29..f4f2203 100644
--- a/app/routes/statistics.tsx
+++ b/app/routes/statistics.tsx
@@ -0,0 +1,74 @@
+import type { User, Team } from "@prisma/client";
+import type { LoaderFunction } from "remix";
+import { redirect, Link, useLoaderData, useCatch } from "remix";
+import { getUser } from "~/utils/session.server";
+import Header from "../components/Header";
+
+type LoaderData = {
+  user: (User & { team: Team & { members: User[] } }) | null;
+};
+
+export const loader: LoaderFunction = async ({ request }) => {
+  const user = await getUser(request);
+  if (!user?.id) {
+    return redirect("/login");
+  }
+
+  const data: LoaderData = {
+    user,
+  };
+  return data;
+};
+
+export default function ListExpensesRoute() {
+  const data = useLoaderData<LoaderData>();
+
+  return (
+    <>
+      <Header user={data.user} route="/expenses" />
+      <div className="hero py-40 bg-base-200 my-8 rounded-box">
+        <div className="text-center hero-content">
+          <div className="max-w-md">
+            <h1 className="mb-5 text-5xl font-bold">Work in progress</h1>
+            <p className="mb-5">
+              <button className="btn btn-lg loading"></button>
+              This page is under construction.
+            </p>
+            <Link to="/expenses" className="btn btn-primary">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                className="inline-block w-6 h-6 mr-2 stroke-current rotate-180"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5l7 7-7 7"
+                ></path>
+              </svg>
+              Back
+            </Link>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export function CatchBoundary() {
+  const caught = useCatch();
+
+  if (caught.status === 401) {
+    return redirect("/login");
+  }
+  if (caught.status === 404) {
+    return <div className="error-container">There is no data to display.</div>;
+  }
+  throw new Error(`Unexpected caught response with status: ${caught.status}`);
+}
+
+export function ErrorBoundary() {
+  return <div className="error-container">I did a whoopsies.</div>;
+}