From 8afc80539bd12ea9e5b2d234aa45238cb5527a74 Mon Sep 17 00:00:00 2001 From: nzambello Date: Mon, 14 Feb 2022 20:48:34 +0100 Subject: [PATCH] feat: add expense detail ui --- app/components/Header.tsx | 163 ++++++++++++++++------------- app/routes/expenses/$expenseId.tsx | 116 ++++++++++++++++---- app/routes/expenses/index.tsx | 57 +++++----- 3 files changed, 214 insertions(+), 122 deletions(-) diff --git a/app/components/Header.tsx b/app/components/Header.tsx index fba8284..1e57fbc 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -42,44 +42,46 @@ const Header = ({ user, route }: Props) => {
- + {user && ( + + )}
{user ? ( @@ -154,42 +156,57 @@ const Header = ({ user, route }: Props) => { Explit -
  • - - - +
  • + + + + Expenses + + +
    • +
  • + + + + Your team + + +
    • +
  • + + + + Statistics + + +
    • + + ) : ( +
  • + - Expenses - - -
    • -
  • - - - - Your team - - -
    • -
  • - - - - Statistics - - -
    • + + Login + + + )}
    diff --git a/app/routes/expenses/$expenseId.tsx b/app/routes/expenses/$expenseId.tsx index 2d59447..ae8164c 100644 --- a/app/routes/expenses/$expenseId.tsx +++ b/app/routes/expenses/$expenseId.tsx @@ -11,7 +11,7 @@ import type { Expense, User } from "@prisma/client"; import { db } from "~/utils/db.server"; import { requireUserId, getUserId } from "~/utils/session.server"; -type LoaderData = { expense: Expense; user: User; isOwner: boolean }; +type LoaderData = { expense: Expense & { user: User }; isOwner: boolean }; export const meta: MetaFunction = ({ data, @@ -38,23 +38,17 @@ export const loader: LoaderFunction = async ({ request, params }) => { const expense = await db.expense.findUnique({ where: { id: params.expenseId }, + include: { + user: true, + }, }); if (!expense) { throw new Response("What an expense! Not found.", { status: 404, }); } - const expenseUser = await db.user.findUnique({ - where: { id: expense.userId }, - }); - if (!expenseUser) { - throw new Response("Oupsie! Not found.", { - status: 500, - }); - } const data: LoaderData = { expense, - user: expenseUser, isOwner: userId === expense.userId, }; return data; @@ -84,18 +78,96 @@ export default function ExpenseRoute() { const data = useLoaderData(); return ( -
    -

    Description: {data.expense.description}

    -

    Amount: {data.expense.amount}€

    -

    User: {data.user.username}

    - {data.isOwner && ( -
    - - -
    - )} +
    +
    +
    + + + + + Back + +

    Expense details

    +
    +
    +
    +
    Description
    +
    + {data.expense.description} +
    +
    +
    +
    Amount
    +
    + {data.expense.amount} € +
    +
    +
    +
    User
    +
    +
    + {data.expense.user.icon ?? data.expense.user.username[0]} +
    + {data.expense.user.username} +
    +
    +
    +
    Date
    +
    + {new Intl.DateTimeFormat("it", { + dateStyle: "short", + timeStyle: "short", + }).format(new Date(data.expense.createdAt))} +
    +
    +
    + {data.isOwner && ( + <> +
    + +
    + +
    +
    +

    + Do you really want to delete your expense? Its data will be + permanently deleted. +

    +
    +
    + + +
    + +
    +
    +
    + + )} +
    ); } diff --git a/app/routes/expenses/index.tsx b/app/routes/expenses/index.tsx index 23ac13b..72b27ae 100644 --- a/app/routes/expenses/index.tsx +++ b/app/routes/expenses/index.tsx @@ -78,7 +78,7 @@ export const loader: LoaderFunction = async ({ request }) => { return data; }; -export default function JokesIndexRoute() { +export default function ExpensesIndexRoute() { const data = useLoaderData(); return ( @@ -88,28 +88,33 @@ export default function JokesIndexRoute() {

    Last expenses

      {data.lastExpenses?.map((exp) => ( -
    • -
      - {exp.user.icon ?? exp.user.username[0]} -
      -
      - 0 ? "text-error" : "text-success" - }`} - > - {-exp.amount} € - -
      -
      - - {new Intl.DateTimeFormat("it", { - dateStyle: "short", - timeStyle: "short", - }).format(new Date(exp.createdAt))} - - {exp.description} -
      +
    • + +
      + {exp.user.icon ?? exp.user.username[0]} +
      +
      + 0 ? "text-error" : "text-success" + }`} + > + {-exp.amount} € + +
      +
      + + {new Intl.DateTimeFormat("it", { + dateStyle: "short", + timeStyle: "short", + }).format(new Date(exp.createdAt))} + + {exp.description} +
      +
      • ))}
    @@ -125,7 +130,7 @@ export default function JokesIndexRoute() { {data.teamCounts?.map((user) => (
    -
    +
    {user.icon ?? user.username[0]}
    @@ -140,9 +145,7 @@ export default function JokesIndexRoute() {
    {user.dueAmount > 0 ? `${user.id === data.user.id ? "You owe" : "Owes"} others` - : `Others owe ${ - user.id === data.user.id ? "you" : "him/her" - }`} + : `Others owe ${user.id === data.user.id ? "you" : ""}`}
    ))}