From 5f33b1da1efd1576c514464c419fa87bd1c68fa7 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Mon, 14 Aug 2023 22:01:25 +0000
Subject: [PATCH] chore: format date

---
 .../app/(marketing)/open/funding-raised.tsx   |  8 ++++-
 .../src/app/(marketing)/open/gh-stars.tsx     | 29 ++-----------------
 packages/lib/client-only/format-month.ts      | 18 ++++++++++++
 3 files changed, 27 insertions(+), 28 deletions(-)
 create mode 100644 packages/lib/client-only/format-month.ts

diff --git a/apps/marketing/src/app/(marketing)/open/funding-raised.tsx b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
index 50f9452ee..c6601f547 100644
--- a/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
+++ b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
@@ -4,6 +4,7 @@ import { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
+import { formatMonth } from '@documenso/lib/client-only/format-month';
 import { cn } from '@documenso/ui/lib/utils';
 
 import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
@@ -11,13 +12,18 @@ import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
 export type FundingRaisedProps = HTMLAttributes<HTMLDivElement>;
 
 export const FundingRaised = ({ className, ...props }: FundingRaisedProps) => {
+  const formattedData = FUNDING_RAISED.map((item) => ({
+    amount: Number(item.amount),
+    date: formatMonth(item.date),
+  }));
+
   return (
     <div className={cn('flex flex-col', className)} {...props}>
       <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
 
       <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-4 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
-          <BarChart data={FUNDING_RAISED} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
+          <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
             <XAxis dataKey="date" />
             <YAxis
               tickFormatter={(value) =>
diff --git a/apps/marketing/src/app/(marketing)/open/gh-stars.tsx b/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
index 4d5137a6a..1eff5bd07 100644
--- a/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
+++ b/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
@@ -4,35 +4,10 @@ import { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
+import { formatMonth } from '@documenso/lib/client-only/format-month';
 import { cn } from '@documenso/ui/lib/utils';
 
-type StargazersType = {
-  [key: string]: {
-    stars?: number;
-    forks?: number;
-    mergedPRs?: number;
-    openIssues?: number;
-  };
-};
-
-function formatMonth(monthStr: string) {
-  const [year, month] = monthStr.split('-');
-  const monthNames = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-  return `${monthNames[parseInt(month, 10) - 1]} ${year}`;
-}
+import { StargazersType } from './page';
 
 export type GithubStarsProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
 
diff --git a/packages/lib/client-only/format-month.ts b/packages/lib/client-only/format-month.ts
new file mode 100644
index 000000000..cda27163d
--- /dev/null
+++ b/packages/lib/client-only/format-month.ts
@@ -0,0 +1,18 @@
+export const formatMonth = (monthStr: string) => {
+  const [year, month] = monthStr.split('-');
+  const monthNames = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  return `${monthNames[parseInt(month, 10) - 1]} ${year}`;
+};