From d358d4cd035773cfa7227e80c4cf38a01c17750e Mon Sep 17 00:00:00 2001 From: behnam Date: Fri, 1 Nov 2024 18:14:29 +0300 Subject: [PATCH] Update card wrapper to follow controller based architecture --- src/app/dashboard/(overview)/page.tsx | 2 +- .../components/card/card-controller.ts | 19 ++ src/app/dashboard/components/card/card.tsx | 29 +++ src/app/dashboard/components/cards.tsx | 57 ------ .../components/cards/cards-controller.ts | 5 + src/app/dashboard/components/cards/cards.tsx | 20 ++ src/app/lib/placeholder-data.js | 188 ------------------ src/app/lib/utils.ts | 6 - src/bootstrap/helpers/global-helpers.ts | 0 src/feature/common/feature-helpers.ts | 6 + .../data/repo/customer-invoice-db-repo.ts | 2 +- .../customer/data/repo/customer-db-repo.ts | 3 +- .../core/invoice/data/repo/invoice-db-repo.ts | 2 +- 13 files changed, 83 insertions(+), 256 deletions(-) create mode 100644 src/app/dashboard/components/card/card-controller.ts create mode 100644 src/app/dashboard/components/card/card.tsx delete mode 100644 src/app/dashboard/components/cards.tsx create mode 100644 src/app/dashboard/components/cards/cards-controller.ts create mode 100644 src/app/dashboard/components/cards/cards.tsx delete mode 100644 src/app/lib/placeholder-data.js create mode 100644 src/bootstrap/helpers/global-helpers.ts create mode 100644 src/feature/common/feature-helpers.ts diff --git a/src/app/dashboard/(overview)/page.tsx b/src/app/dashboard/(overview)/page.tsx index 6d632b5..463edbb 100644 --- a/src/app/dashboard/(overview)/page.tsx +++ b/src/app/dashboard/(overview)/page.tsx @@ -1,5 +1,5 @@ import { LatestInvoicesSkeleton, RevenueChartSkeleton } from "@/app/components/skeleton/skeletons"; -import CardWrapper from "@/app/dashboard/components/cards"; +import CardWrapper from "@/app/dashboard/components/cards/cards"; import LatestInvoices from "@/app/dashboard/components/latest-invoices"; import RevenueChart from "@/app/dashboard/components/revenue-chart"; import { Suspense } from "react"; diff --git a/src/app/dashboard/components/card/card-controller.ts b/src/app/dashboard/components/card/card-controller.ts new file mode 100644 index 0000000..43c40f7 --- /dev/null +++ b/src/app/dashboard/components/card/card-controller.ts @@ -0,0 +1,19 @@ +import { + BanknotesIcon, + ClockIcon, + UserGroupIcon, + InboxIcon, +} from '@heroicons/react/24/outline'; + +export default function cardController(props: { type: 'invoices' | 'customers' | 'pending' | 'collected'; }) { + const { type } = props + const iconMap = { + collected: BanknotesIcon, + customers: UserGroupIcon, + pending: ClockIcon, + invoices: InboxIcon, + }; + return { + Icon: iconMap[type] + } +} \ No newline at end of file diff --git a/src/app/dashboard/components/card/card.tsx b/src/app/dashboard/components/card/card.tsx new file mode 100644 index 0000000..5494f4f --- /dev/null +++ b/src/app/dashboard/components/card/card.tsx @@ -0,0 +1,29 @@ +import cardController from "@/app/dashboard/components/card/card-controller"; + + + +export function Card({ + title, + value, + type, +}: { + title: string; + value: number | string; + type: 'invoices' | 'customers' | 'pending' | 'collected'; +}) { + const { Icon } = cardController({type}) + + return ( +
+
+ {Icon ? : null} +

{title}

+
+

+ {value} +

+
+ ); +} \ No newline at end of file diff --git a/src/app/dashboard/components/cards.tsx b/src/app/dashboard/components/cards.tsx deleted file mode 100644 index 5060f9f..0000000 --- a/src/app/dashboard/components/cards.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import fetchSummaryInfoUsecase from '@/feature/core/summary-info/domain/usecase/fetch-summary-info-usecase'; -import { - BanknotesIcon, - ClockIcon, - UserGroupIcon, - InboxIcon, -} from '@heroicons/react/24/outline'; - -const iconMap = { - collected: BanknotesIcon, - customers: UserGroupIcon, - pending: ClockIcon, - invoices: InboxIcon, -}; - -export default async function CardWrapper() { - const {customersNumber, invoicesNumber, invoicesSummary } = await fetchSummaryInfoUsecase(); - - return ( - <> - - - - - - ); -} - -export function Card({ - title, - value, - type, -}: { - title: string; - value: number | string; - type: 'invoices' | 'customers' | 'pending' | 'collected'; -}) { - const Icon = iconMap[type]; - - return ( -
-
- {Icon ? : null} -

{title}

-
-

- {value} -

-
- ); -} diff --git a/src/app/dashboard/components/cards/cards-controller.ts b/src/app/dashboard/components/cards/cards-controller.ts new file mode 100644 index 0000000..b8aaf19 --- /dev/null +++ b/src/app/dashboard/components/cards/cards-controller.ts @@ -0,0 +1,5 @@ +import fetchSummaryInfoUsecase from "@/feature/core/summary-info/domain/usecase/fetch-summary-info-usecase"; + +export default function cardsController() { + return fetchSummaryInfoUsecase(); +} \ No newline at end of file diff --git a/src/app/dashboard/components/cards/cards.tsx b/src/app/dashboard/components/cards/cards.tsx new file mode 100644 index 0000000..c39a4fe --- /dev/null +++ b/src/app/dashboard/components/cards/cards.tsx @@ -0,0 +1,20 @@ +import { Card } from '@/app/dashboard/components/card/card'; +import cardsController from '@/app/dashboard/components/cards/cards-controller'; + + +export default async function CardWrapper() { + const {customersNumber, invoicesNumber, invoicesSummary } = await cardsController(); + + return ( + <> + + + + + + ); +} \ No newline at end of file diff --git a/src/app/lib/placeholder-data.js b/src/app/lib/placeholder-data.js deleted file mode 100644 index 15a4156..0000000 --- a/src/app/lib/placeholder-data.js +++ /dev/null @@ -1,188 +0,0 @@ -// This file contains placeholder data that you'll be replacing with real data in the Data Fetching chapter: -// https://nextjs.org/learn/dashboard-app/fetching-data -const users = [ - { - id: '410544b2-4001-4271-9855-fec4b6a6442a', - name: 'User', - email: 'user@nextmail.com', - password: '123456', - }, -]; - -const customers = [ - { - id: '3958dc9e-712f-4377-85e9-fec4b6a6442a', - name: 'Delba de Oliveira', - email: 'delba@oliveira.com', - image_url: '/customers/delba-de-oliveira.png', - }, - { - id: '3958dc9e-742f-4377-85e9-fec4b6a6442a', - name: 'Lee Robinson', - email: 'lee@robinson.com', - image_url: '/customers/lee-robinson.png', - }, - { - id: '3958dc9e-737f-4377-85e9-fec4b6a6442a', - name: 'Hector Simpson', - email: 'hector@simpson.com', - image_url: '/customers/hector-simpson.png', - }, - { - id: '50ca3e18-62cd-11ee-8c99-0242ac120002', - name: 'Steven Tey', - email: 'steven@tey.com', - image_url: '/customers/steven-tey.png', - }, - { - id: '3958dc9e-787f-4377-85e9-fec4b6a6442a', - name: 'Steph Dietz', - email: 'steph@dietz.com', - image_url: '/customers/steph-dietz.png', - }, - { - id: '76d65c26-f784-44a2-ac19-586678f7c2f2', - name: 'Michael Novotny', - email: 'michael@novotny.com', - image_url: '/customers/michael-novotny.png', - }, - { - id: 'd6e15727-9fe1-4961-8c5b-ea44a9bd81aa', - name: 'Evil Rabbit', - email: 'evil@rabbit.com', - image_url: '/customers/evil-rabbit.png', - }, - { - id: '126eed9c-c90c-4ef6-a4a8-fcf7408d3c66', - name: 'Emil Kowalski', - email: 'emil@kowalski.com', - image_url: '/customers/emil-kowalski.png', - }, - { - id: 'CC27C14A-0ACF-4F4A-A6C9-D45682C144B9', - name: 'Amy Burns', - email: 'amy@burns.com', - image_url: '/customers/amy-burns.png', - }, - { - id: '13D07535-C59E-4157-A011-F8D2EF4E0CBB', - name: 'Balazs Orban', - email: 'balazs@orban.com', - image_url: '/customers/balazs-orban.png', - }, -]; - -const invoices = [ - { - customer_id: customers[0].id, - amount: 15795, - status: 'pending', - date: '2022-12-06', - }, - { - customer_id: customers[1].id, - amount: 20348, - status: 'pending', - date: '2022-11-14', - }, - { - customer_id: customers[4].id, - amount: 3040, - status: 'paid', - date: '2022-10-29', - }, - { - customer_id: customers[3].id, - amount: 44800, - status: 'paid', - date: '2023-09-10', - }, - { - customer_id: customers[5].id, - amount: 34577, - status: 'pending', - date: '2023-08-05', - }, - { - customer_id: customers[7].id, - amount: 54246, - status: 'pending', - date: '2023-07-16', - }, - { - customer_id: customers[6].id, - amount: 666, - status: 'pending', - date: '2023-06-27', - }, - { - customer_id: customers[3].id, - amount: 32545, - status: 'paid', - date: '2023-06-09', - }, - { - customer_id: customers[4].id, - amount: 1250, - status: 'paid', - date: '2023-06-17', - }, - { - customer_id: customers[5].id, - amount: 8546, - status: 'paid', - date: '2023-06-07', - }, - { - customer_id: customers[1].id, - amount: 500, - status: 'paid', - date: '2023-08-19', - }, - { - customer_id: customers[5].id, - amount: 8945, - status: 'paid', - date: '2023-06-03', - }, - { - customer_id: customers[2].id, - amount: 8945, - status: 'paid', - date: '2023-06-18', - }, - { - customer_id: customers[0].id, - amount: 8945, - status: 'paid', - date: '2023-10-04', - }, - { - customer_id: customers[2].id, - amount: 1000, - status: 'paid', - date: '2022-06-05', - }, -]; - -const revenue = [ - { month: 'Jan', revenue: 2000 }, - { month: 'Feb', revenue: 1800 }, - { month: 'Mar', revenue: 2200 }, - { month: 'Apr', revenue: 2500 }, - { month: 'May', revenue: 2300 }, - { month: 'Jun', revenue: 3200 }, - { month: 'Jul', revenue: 3500 }, - { month: 'Aug', revenue: 3700 }, - { month: 'Sep', revenue: 2500 }, - { month: 'Oct', revenue: 2800 }, - { month: 'Nov', revenue: 3000 }, - { month: 'Dec', revenue: 4800 }, -]; - -module.exports = { - users, - customers, - invoices, - revenue, -}; diff --git a/src/app/lib/utils.ts b/src/app/lib/utils.ts index c3184af..b7b6e70 100644 --- a/src/app/lib/utils.ts +++ b/src/app/lib/utils.ts @@ -1,11 +1,5 @@ import Revenue from "@/feature/core/revenue/domain/entity/revenue"; -export const formatCurrency = (amount: number) => { - return (amount / 100).toLocaleString('en-US', { - style: 'currency', - currency: 'USD', - }); -}; export const generateYAxis = (revenue: Revenue[]) => { // Calculate what labels we need to display on the y-axis diff --git a/src/bootstrap/helpers/global-helpers.ts b/src/bootstrap/helpers/global-helpers.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/feature/common/feature-helpers.ts b/src/feature/common/feature-helpers.ts new file mode 100644 index 0000000..4269137 --- /dev/null +++ b/src/feature/common/feature-helpers.ts @@ -0,0 +1,6 @@ +export const formatCurrency = (amount: number) => { + return (amount / 100).toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + }); +}; \ No newline at end of file diff --git a/src/feature/core/customer-invoice/data/repo/customer-invoice-db-repo.ts b/src/feature/core/customer-invoice/data/repo/customer-invoice-db-repo.ts index 18f7db1..ba6eff5 100644 --- a/src/feature/core/customer-invoice/data/repo/customer-invoice-db-repo.ts +++ b/src/feature/core/customer-invoice/data/repo/customer-invoice-db-repo.ts @@ -1,5 +1,5 @@ -import { formatCurrency } from "@/app/lib/utils"; import { sql } from "@/bootstrap/db/db"; +import { formatCurrency } from "@/feature/common/feature-helpers"; import CustomerInvoice from "@/feature/core/customer-invoice/domain/entity/customer-invoice"; import CustomerInvoiceRepo from "@/feature/core/customer-invoice/domain/i-repo/customer-invoice-repo"; import postgres from "postgres"; diff --git a/src/feature/core/customer/data/repo/customer-db-repo.ts b/src/feature/core/customer/data/repo/customer-db-repo.ts index ad6705f..f1239a4 100644 --- a/src/feature/core/customer/data/repo/customer-db-repo.ts +++ b/src/feature/core/customer/data/repo/customer-db-repo.ts @@ -1,8 +1,7 @@ -import { formatCurrency } from "@/app/lib/utils"; import { sql } from "@/bootstrap/db/db"; +import { formatCurrency } from "@/feature/common/feature-helpers"; import Customer from "@/feature/core/customer/domain/entity/customer"; import CustomerRepo from "@/feature/core/customer/domain/i-repo/customer-repo"; -import { connection } from "next/server"; import postgres from "postgres"; type customerDbResponse = { diff --git a/src/feature/core/invoice/data/repo/invoice-db-repo.ts b/src/feature/core/invoice/data/repo/invoice-db-repo.ts index c9bf5e9..66c0998 100644 --- a/src/feature/core/invoice/data/repo/invoice-db-repo.ts +++ b/src/feature/core/invoice/data/repo/invoice-db-repo.ts @@ -1,5 +1,5 @@ -import { formatCurrency } from "@/app/lib/utils"; import { sql } from "@/bootstrap/db/db"; +import { formatCurrency } from "@/feature/common/feature-helpers"; import InvoiceRepo from "@/feature/core/invoice/domain/i-repo/invoice-repo"; import InvoiceStatusSummary from "@/feature/core/invoice/domain/value-object/invoice-status"; import postgres from "postgres";