nzambello/explit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: add wip placeholder for exp list and stats

Browse source
This commit is contained in:
Nicola Zambello 2022-02-14 18:05:13 +01:00
parent caaefa72c5
commit 13b633e23c
3 changed files with 109 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/components/Header.tsx
View file

@ -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 ${

33
app/routes/expenses/list.tsx
View file

@ -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>
);
}

74
app/routes/statistics.tsx
View file

@ -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>;
}