[RAB-4] Separate transactions into TransactionHistory

apps/next-app/package.json

@@ -26,7 +26,6 @@
     "@types/react": "18.0.37",
     "@types/react-dom": "18.0.11",
     "autoprefixer": "10.4.14",
-    "axios": "^1.3.6",
     "date-fns": "^2.29.3",
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",

apps/next-app/src/pages/profile/index.tsx

@@ -6,10 +6,7 @@ import { AvatarChanger } from 'shared/components/profile/AvatarChanger';
 import { EditProfileForm } from 'shared/components/profile/EditProfileForm';
 import { getApolloServerClient } from 'shared/services/apollo';
 import { EDGE_FUNCTION_NAMES } from 'constants/EDGE_FUNCTION_NAMES';
-import { Checkmark } from 'shared/components/Checkmark';
-import { Crossmark } from 'shared/components/Crossmark';
-import { getSubscriptionPrice } from 'utils/getSubscriptionPrice';
-import { format, fromUnixTime } from 'date-fns';
+import { TransactionHistory } from 'shared/components/subscriptions/TransactionHistory';
 
 interface ProfileProps {
   profile: GetProfileQuery['profilesCollection'];
@@ -25,30 +22,7 @@ const Profile = ({ profile, charges }: ProfileProps) => {
 
       <AvatarChanger profileAvatarSrc={userProfile?.node.avatar_url} />
       <EditProfileForm fullName={userProfile?.node.full_name!} />
-      <div className="max-w-xl w-full">
-        <h2 className="mt-8 text-2xl">Transaction history</h2>
-        <div className="flex flex-col">
-          {charges.charges.data.map(
-            ({ id, created, description, amount, currency, status }: any) => (
-              <div
-                key={id}
-                className="flex justify-between w-full border-b-2 border-slate-800 py-6"
-              >
-                <div>
-                  {description}{' '}
-                  <span className="text-slate-400">
-                    ({format(fromUnixTime(created), 'Pp')})
-                  </span>
-                </div>
-                <div>
-                  {getSubscriptionPrice(amount)} {currency.toUpperCase()}
-                </div>
-                {status === 'succeeded' ? <Checkmark /> : <Crossmark isError />}
-              </div>
-            )
-          )}
-        </div>
-      </div>
+      <TransactionHistory transactions={charges} />
     </div>
   );
 };

apps/next-app/src/shared/components/subscriptions/TransactionHistory/index.ts

@@ -0,0 +1 @@
+export { TransactionHistory } from './transactionHistory.component';

apps/next-app/src/shared/components/subscriptions/TransactionHistory/transactionHistory.component.tsx

@@ -0,0 +1,39 @@
+import { format, fromUnixTime } from 'date-fns';
+import { Checkmark } from 'shared/components/Checkmark';
+import { Crossmark } from 'shared/components/Crossmark';
+import { getSubscriptionPrice } from 'utils/getSubscriptionPrice';
+
+interface TransactionHistoryProps {
+  transactions: any;
+}
+
+export const TransactionHistory = ({
+  transactions,
+}: TransactionHistoryProps) => {
+  return (
+    <div className="max-w-xl w-full">
+      <h2 className="mt-8 text-2xl">Transaction history</h2>
+      <div className="flex flex-col">
+        {transactions.charges.data.map(
+          ({ id, created, description, amount, currency, status }: any) => (
+            <div
+              key={id}
+              className="flex justify-between w-full border-b-2 border-slate-800 py-6"
+            >
+              <div>
+                {description}{' '}
+                <span className="text-slate-400">
+                  ({format(fromUnixTime(created), 'Pp')})
+                </span>
+              </div>
+              <div>
+                {getSubscriptionPrice(amount)} {currency.toUpperCase()}
+              </div>
+              {status === 'succeeded' ? <Checkmark /> : <Crossmark isError />}
+            </div>
+          )
+        )}
+      </div>
+    </div>
+  );
+};