[GREEN] Modified package page to match project artifacts

RevelioStartup · May 6, 2024 · d8d1d07 · d8d1d07
1 parent 40df16f
commit d8d1d07
Show file tree

Hide file tree

Showing 14 changed files with 160 additions and 156 deletions.
diff --git a/__tests__/elements/calendar.tsx b/__tests__/elements/calendar.tsx
@@ -1,32 +1,31 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { useGetTimelinesByEventQuery } from '@/redux/api/timelineApi';
-import Calendar from '@/components/elements/Timeline/Calendar';
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { useGetTimelinesByEventQuery } from '@/redux/api/timelineApi'
+import Calendar from '@/components/elements/Timeline/Calendar'
 
 // Mock the useGetTimelinesByEventQuery hook
 jest.mock('@/redux/api/timelineApi', () => ({
   useGetTimelinesByEventQuery: jest.fn(),
-}));
+}))
 
 jest.mock('@/components/elements/Timeline/Calendar', () => {
-    return {
-      __esModule: true,
-      default: jest.fn(() => (
-        <div>
-          <div data-testid="calendar">Calendar Component</div>
-          <div>Task 1</div>
-          <div>Task 2</div>
-        </div>
-      )),
-    }
-});
-
+  return {
+    __esModule: true,
+    default: jest.fn(() => (
+      <div>
+        <div data-testid="calendar">Calendar Component</div>
+        <div>Task 1</div>
+        <div>Task 2</div>
+      </div>
+    )),
+  }
+})
 
 describe('Calendar', () => {
   beforeEach(() => {
     // Mock the return value of useGetTimelinesByEventQuery
-    (useGetTimelinesByEventQuery as jest.Mock).mockReturnValue({
+    ;(useGetTimelinesByEventQuery as jest.Mock).mockReturnValue({
       data: [
         {
           id: '1',
@@ -42,26 +41,26 @@ describe('Calendar', () => {
         },
       ],
       isLoading: false,
-    });
-  });
+    })
+  })
 
   afterEach(() => {
-    jest.clearAllMocks();
-  });
+    jest.clearAllMocks()
+  })
 
   test('renders the calendar component', () => {
-    render(<Calendar eventId="123" />);
-    expect(screen.getByTestId('calendar')).toBeInTheDocument();
-  });
+    render(<Calendar eventId="123" />)
+    expect(screen.getByTestId('calendar')).toBeInTheDocument()
+  })
 
   test('displays calendar events correctly', () => {
-    render(<Calendar eventId="123" />);
-    expect(screen.getByText('Task 1')).toBeInTheDocument();
-    expect(screen.getByText('Task 2')).toBeInTheDocument();
-  });
+    render(<Calendar eventId="123" />)
+    expect(screen.getByText('Task 1')).toBeInTheDocument()
+    expect(screen.getByText('Task 2')).toBeInTheDocument()
+  })
 
   test('handles event clicks to show details in a modal', async () => {
-    render(<Calendar eventId="123" />);
-    fireEvent.click(screen.getByText('Task 1'));
-  });
-});
+    render(<Calendar eventId="123" />)
+    fireEvent.click(screen.getByText('Task 1'))
+  })
+})
diff --git a/__tests__/package/package-list-free.test.tsx b/__tests__/package/package-list-free.test.tsx
@@ -1,39 +1,39 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import PackageList from '@/app/package/page';
+import PackageList from '@/app/package/page'
 
 jest.mock('@/redux/api/packageApi', () => ({
   useGetPackageDetailQuery: jest.fn((id) => ({
     data: {
-      "name": "Default Package",
-      "price": 5000,
-      "event_planner": true,
-      "event_tracker": true,
-      "event_timeline": true,
-      "event_rundown": true,
-      "ai_assistant": false
-    }
+      name: 'Default Package',
+      price: 5000,
+      event_planner: true,
+      event_tracker: true,
+      event_timeline: true,
+      event_rundown: true,
+      ai_assistant: false,
+    },
   })),
-}));
+}))
 
 jest.mock('@/redux/api/subscriptionApi', () => ({
-    useGetLatestSubscriptionQuery: jest.fn((id) => ({
+  useGetLatestSubscriptionQuery: jest.fn((id) => ({
     data: {
-      "id": 1,
-      "plan": "PREMIUM",
-      "start_date": "2024-05-05T13:30:00.000Z",
-      "end_date": "2025-05-05T13:30:00.000Z",
-      "user": 1,
-      "is_active": false
-    }
+      id: 1,
+      plan: 'PREMIUM',
+      start_date: '2024-05-05T13:30:00.000Z',
+      end_date: '2025-05-05T13:30:00.000Z',
+      user: 1,
+      is_active: false,
+    },
   })),
-}));
+}))
 
 describe('PackageList component', () => {
   it('renders correctly', () => {
-    const { getByTestId } = render(<PackageList />);
-    const packageDetail = getByTestId('package-detail');
-    expect(packageDetail).toBeInTheDocument();
-  });
-});
+    const { getByTestId } = render(<PackageList />)
+    const packageDetail = getByTestId('package-detail')
+    expect(packageDetail).toBeInTheDocument()
+  })
+})
diff --git a/__tests__/package/package-list-premium.test.tsx b/__tests__/package/package-list-premium.test.tsx
@@ -1,39 +1,39 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import PackageList from '@/app/package/page';
+import PackageList from '@/app/package/page'
 
 jest.mock('@/redux/api/packageApi', () => ({
   useGetPackageDetailQuery: jest.fn((id) => ({
     data: {
-      "name": "Default Package",
-      "price": 5000,
-      "event_planner": true,
-      "event_tracker": true,
-      "event_timeline": true,
-      "event_rundown": true,
-      "ai_assistant": false
-    }
+      name: 'Default Package',
+      price: 5000,
+      event_planner: true,
+      event_tracker: true,
+      event_timeline: true,
+      event_rundown: true,
+      ai_assistant: false,
+    },
   })),
-}));
+}))
 
 jest.mock('@/redux/api/subscriptionApi', () => ({
   useGetLatestSubscriptionQuery: jest.fn((id) => ({
     data: {
-      "id": 1,
-      "plan": "PREMIUM",
-      "start_date": "2024-05-05T13:30:00.000Z",
-      "end_date": "2025-05-05T13:30:00.000Z",
-      "user": 1,
-      "is_active": true
-    }
+      id: 1,
+      plan: 'PREMIUM',
+      start_date: '2024-05-05T13:30:00.000Z',
+      end_date: '2025-05-05T13:30:00.000Z',
+      user: 1,
+      is_active: true,
+    },
   })),
-}));
+}))
 
 describe('PackageList component', () => {
   it('renders correctly', () => {
-    const { getByTestId } = render(<PackageList />);
-    const packageDetail = getByTestId('package-detail');
-    expect(packageDetail).toBeInTheDocument();
-  });
-});
+    const { getByTestId } = render(<PackageList />)
+    const packageDetail = getByTestId('package-detail')
+    expect(packageDetail).toBeInTheDocument()
+  })
+})
diff --git a/src/app/package/PackageCard.tsx b/src/app/package/PackageCard.tsx
@@ -1,28 +1,38 @@
 import { PackageDetailResponse } from '@/types/package'
 import { Box } from '@mui/material'
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
-import { capitalizeWords } from '@/utils/capitalizeWords';
+import CheckIcon from '@mui/icons-material/Check'
+import CloseIcon from '@mui/icons-material/Close'
+import { capitalizeWords } from '@/utils/capitalizeWords'
 
 interface PackageDetailProps {
   package_detail: PackageDetailResponse
 }
 
 export const PackageCard = ({ package_detail }: PackageDetailProps) => {
-  const features: (keyof PackageDetailResponse)[] = ['event_planner', 'event_tracker', 'event_timeline', 'event_rundown', 'ai_assistant'];
+  const features: (keyof PackageDetailResponse)[] = [
+    'event_planner',
+    'event_tracker',
+    'event_timeline',
+    'event_rundown',
+    'ai_assistant',
+  ]
 
   return (
     <Box data-testid="package-card-box">
-        <ul className="list-disc list-inside space-y-2">
+      <ul className="list-disc list-inside space-y-2">
         {features.map((feature) => (
-            <li key={feature} className="flex items-center"> 
-                {package_detail[feature] ? 
-                    <CheckIcon className="text-teal-400" /> :
-                    <CloseIcon className="text-red-400" />}
-                <p className='text-sm' style={{ marginLeft: '0.5rem' }}>{capitalizeWords(feature)}</p>
-            </li>
+          <li key={feature} className="flex items-center">
+            {package_detail[feature] ? (
+              <CheckIcon className="text-teal-400" />
+            ) : (
+              <CloseIcon className="text-red-400" />
+            )}
+            <p className="text-sm" style={{ marginLeft: '0.5rem' }}>
+              {capitalizeWords(feature)}
+            </p>
+          </li>
         ))}
-        </ul>
+      </ul>
     </Box>
   )
 }

diff --git a/src/app/package/page.tsx b/src/app/package/page.tsx
@@ -1,5 +1,4 @@
 'use client'
-
 import { Box, Table, TableBody, TableCell, TableContainer, TableRow } from '@mui/material'
 import { useGetPackageDetailQuery } from '@/redux/api/packageApi'
 import PackageCard from './PackageCard'
@@ -11,7 +10,7 @@ import { formatRupiah } from '@/utils/formatRupiah'
 import { formatDate } from '@/utils/formatDate'
 
 
-export const PackageList = () => {
+export default function PackageList() {
     const { data: free_package = {} as PackageDetailResponse } = useGetPackageDetailQuery(1);
     const { data: premium_package = {} as PackageDetailResponse } = useGetPackageDetailQuery(2);
     const { data: latest_subscription = {} as LatestSubscriptionResponse } = useGetLatestSubscriptionQuery();
@@ -77,5 +76,3 @@ export const PackageList = () => {
         </Box>
     );
 };
-
-export default PackageList;
diff --git a/src/components/elements/Timeline/Calendar.tsx b/src/components/elements/Timeline/Calendar.tsx
@@ -51,14 +51,12 @@ const DemoApp: React.FC<DemoAppProps> = ({ eventId }) => {
     p: 4,
   }
 
-
-
   if (isLoading) {
     return (
       <div className="flex flex-col justify-center items-center min-h-[90vh]">
         <div data-testid="loader" className="loader"></div>
       </div>
-    );
+    )
   }
 
   return (

diff --git a/src/redux/api/baseApi.ts b/src/redux/api/baseApi.ts
@@ -28,4 +28,4 @@ export const baseApi = createApi({
     },
   }),
   endpoints: (builder) => ({}),
-})
+})
diff --git a/src/redux/api/packageApi.ts b/src/redux/api/packageApi.ts
@@ -1,22 +1,16 @@
-import {
-    PackageDetailRequest,
-    PackageDetailResponse
-  } from '@/types/package'
-  import { baseApi } from './baseApi'
-
-  export const packageApi = baseApi.injectEndpoints({
-    endpoints: (builder) => ({
-      getPackageDetail: builder.query<PackageDetailResponse, number>({
-        query: (id) => ({
-          url: `/packages/${id}/`,
-          method: 'GET',
-        }),
-        providesTags: (result) => [{ type: 'Package', id: result?.id }],
+import { PackageDetailRequest, PackageDetailResponse } from '@/types/package'
+import { baseApi } from './baseApi'
+
+export const packageApi = baseApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getPackageDetail: builder.query<PackageDetailResponse, number>({
+      query: (id) => ({
+        url: `/packages/${id}/`,
+        method: 'GET',
       }),
+      providesTags: (result) => [{ type: 'Package', id: result?.id }],
     }),
-  })
-
-  export const {
-    useGetPackageDetailQuery,
-  } = packageApi
-
+  }),
+})
+
+export const { useGetPackageDetailQuery } = packageApi
diff --git a/src/redux/api/subscriptionApi.ts b/src/redux/api/subscriptionApi.ts
@@ -1,5 +1,8 @@
 import { baseApi } from './baseApi'
-import { LatestSubscriptionResponse, SubscriptionHistoryResponse } from '@/types/subscription'
+import {
+  LatestSubscriptionResponse,
+  SubscriptionHistoryResponse,
+} from '@/types/subscription'
 
 export const subscriptionApi = baseApi.injectEndpoints({
   endpoints: (builder) => ({
@@ -24,13 +27,13 @@ export const subscriptionApi = baseApi.injectEndpoints({
         url: '/subscriptions/latest/',
         method: 'GET',
       }),
-      providesTags: (result) => [{ type: 'LatestSubscription', id: result?.id }, 'LatestSubscription'],
+      providesTags: (result) => [
+        { type: 'LatestSubscription', id: result?.id },
+        'LatestSubscription',
+      ],
     }),
-
   }),
 })
 
-export const { 
-  useGetSubscriptionsQuery, 
-  useGetLatestSubscriptionQuery 
-} = subscriptionApi
+export const { useGetSubscriptionsQuery, useGetLatestSubscriptionQuery } =
+  subscriptionApi