[#26][#9][#10][#13] As a user, when I am authenticated I can see the paginated Survey List page

package.json

@@ -13,6 +13,7 @@
     "react-router-dom": "6.3.0",
     "react-scripts": "5.0.1",
     "sass": "1.49.11",
+    "swiper": "9.1.0",
     "web-vitals": "2.1.4"
   },
   "scripts": {
@@ -84,6 +85,9 @@
     ],
     "coverageReporters": [
       "json"
+    ],
+    "transformIgnorePatterns": [
+      "!node_modules/"
     ]
   },
   "nyc": {

src/App.tsx

@@ -10,7 +10,7 @@ const App = (): JSX.Element => {
 
   return (
     <div>
-      <main className="m-0 flex h-screen flex-col items-center justify-center p-0">{appRoutes}</main>
+      <main className="m-0 flex h-screen w-full flex-col items-center justify-center p-0">{appRoutes}</main>
     </div>
   );
 };

src/adapters/authAdapter.test.ts → src/adapters/surveyAdapter.test.ts

@@ -1,6 +1,6 @@
 import nock from 'nock';
 
-import AuthAdapter, { OauthParams } from './authAdapter';
+import SurveyAdapter, { OauthParams } from './surveyAdapter';
 
 /* eslint-disable camelcase */
 const mockLoginCredentials = {
@@ -20,7 +20,7 @@ const commonUserProfileResponse = {
   },
 };
 
-describe('AuthAdapter', () => {
+describe('SurveyAdapter', () => {
   afterAll(() => {
     nock.cleanAll();
     nock.restore();
@@ -41,12 +41,12 @@ describe('AuthAdapter', () => {
         .reply(200);
 
       expect(scope.isDone()).toBe(false);
-      await AuthAdapter.loginWithEmailPassword({ ...mockLoginCredentials });
+      await SurveyAdapter.loginWithEmailPassword({ ...mockLoginCredentials });
       expect(scope.isDone()).toBe(true);
     });
   });
 
-  describe('loginWithRefreshToken', () => {
+  describe('refreshAccessToken', () => {
     test('The refresh token endpoint is called with refresh token from the request', async () => {
       const scope = nock(`${process.env.REACT_APP_API_ENDPOINT}`)
         .defaultReplyHeaders({
@@ -61,7 +61,7 @@ describe('AuthAdapter', () => {
         .reply(200);
 
       expect(scope.isDone()).toBe(false);
-      await AuthAdapter.loginWithRefreshToken('refresh_token');
+      await SurveyAdapter.refreshAccessToken('refresh_token');
       expect(scope.isDone()).toBe(true);
     });
   });
@@ -77,7 +77,7 @@ describe('AuthAdapter', () => {
         .reply(200, { ...commonUserProfileResponse });
 
       expect(scope.isDone()).toBe(false);
-      expect(await AuthAdapter.getUser()).toEqual({ ...commonUserProfileResponse });
+      expect(await SurveyAdapter.getUser()).toEqual({ ...commonUserProfileResponse });
       expect(scope.isDone()).toBe(true);
     });
   });
@@ -95,7 +95,7 @@ describe('AuthAdapter', () => {
         .reply(200);
 
       expect(scope.isDone()).toBe(false);
-      expect(await AuthAdapter.logout(token));
+      expect(await SurveyAdapter.logout(token));
       expect(scope.isDone()).toBe(true);
     });
   });
@@ -111,7 +111,7 @@ describe('AuthAdapter', () => {
         .reply(200);
 
       expect(scope.isDone()).toBe(false);
-      expect(await AuthAdapter.resetPassword(mockLoginCredentials.email));
+      expect(await SurveyAdapter.resetPassword(mockLoginCredentials.email));
       expect(scope.isDone()).toBe(true);
     });
   });

src/adapters/authAdapter.ts → src/adapters/surveyAdapter.ts

@@ -11,7 +11,7 @@ export const OauthParams = {
   client_secret: process.env.REACT_APP_API_CLIENT_SECRET,
 };
 /* eslint-enable camelcase */
-class AuthAdapter extends BaseAdapter {
+class SurveyAdapter extends BaseAdapter {
   static loginWithEmailPassword(authParams: LoginAuthType) {
     /* eslint-disable camelcase */
     const requestParams = {
@@ -24,7 +24,7 @@ class AuthAdapter extends BaseAdapter {
     return this.prototype.postRequest('oauth/token', { data: requestParams });
   }
 
-  static loginWithRefreshToken(refreshToken: string) {
+  static refreshAccessToken(refreshToken: string) {
     /* eslint-disable camelcase */
     const requestParams = {
       ...OauthParams,
@@ -59,6 +59,10 @@ class AuthAdapter extends BaseAdapter {
   static getUser() {
     return this.prototype.getRequest('me', {});
   }
+
+  static list(page: number) {
+    return this.prototype.getRequest(`surveys?page[number]=${page}`, {});
+  }
 }
 
-export default AuthAdapter;
+export default SurveyAdapter;

src/assets/stylesheets/application.scss

@@ -18,7 +18,6 @@
 }
 
 html {
-  width: 100%;
   height: 100%;
   margin: 0 auto;
 
@@ -34,3 +33,32 @@ html {
 body {
   height: 100%;
 }
+
+.survey-swiper {
+  .swiper-pagination-bullet {
+    width: 0.5rem;
+
+    opacity: 0.2;
+    background-color: #fff !important;
+  }
+
+  .swiper-pagination-bullet-active {
+    opacity: 1;
+  }
+
+  &.swiper-pagination {
+    bottom: 2rem !important;
+  }
+}
+
+.arrow-button {
+  width: 56px;
+  height: 56px;
+
+  border-radius: 9999px;
+
+  background-color: #fff;
+  background-image: url('../images/arrow.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+}

src/components/PrivateRoute/index.test.tsx

@@ -41,7 +41,5 @@ describe('PrivateRoute', () => {
     render(<PrivateRoute />, { wrapper: MemoryRouter });
 
     expect(screen.getByTestId('loading')).toHaveTextContent('Loading');
-
-    // expect(screen.getByTestId('loading')).not.toBeVisible();
   });
 });

src/components/Sidebar/index.test.tsx

@@ -4,7 +4,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import AuthAdapter from 'adapters/authAdapter';
+import SurveyAdapter from 'adapters/surveyAdapter';
 import { User } from 'types/User';
 
 import Sidebar from '.';
@@ -37,7 +37,7 @@ describe('Sidebar', () => {
   });
 
   test('renders a sidebar on the page with a logout button that when clicked, calls Logout adapter and removes storage', async () => {
-    const mockLogout = jest.spyOn(AuthAdapter, 'logout');
+    const mockLogout = jest.spyOn(SurveyAdapter, 'logout');
 
     // const mockClearToken = jest.spyOn(myStorage, 'clearItem');
 

src/components/Sidebar/index.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 
-import AuthAdapter from 'adapters/authAdapter';
+import SurveyAdapter from 'adapters/surveyAdapter';
 import { getItem, clearItem } from 'helpers/localStorage';
 import { User } from 'types/User';
 
@@ -18,7 +18,7 @@ function Sidebar({ user }: SidebarProps) {
     e.stopPropagation();
 
     const accessToken = getItem('UserProfile')?.auth.access_token;
-    await AuthAdapter.logout(accessToken);
+    await SurveyAdapter.logout(accessToken);
     clearItem('UserProfile');
     navigate(LOGIN_URL);
   };

src/components/Survey/index.tsx

@@ -0,0 +1,25 @@
+type SurveyProps = {
+  title: string;
+  description: string;
+  coverImageUrl: string;
+};
+
+function Survey({ title, description, coverImageUrl }: SurveyProps) {
+  return (
+    <div>
+      <img className="my-4 max-h-80 w-full rounded-xl" src={coverImageUrl} alt="cover" />
+      <div className="mt-8 flex items-center justify-between">
+        <div>
+          <p className="text-white"> {title}</p>
+          <p className="text-white opacity-60"> {description}</p>
+        </div>
+        <div>
+          {/* TODO: Convert to Link for Survey Detail page */}
+          <button className="arrow-button"></button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Survey;

src/components/SurveyList/index.tsx

@@ -0,0 +1,36 @@
+import { Pagination } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/swiper-bundle.min.css';
+
+import SurveyComponent from 'components/Survey';
+import { Survey } from 'types/Survey';
+
+type SurveyListProps = { surveys: Survey[]; onPageChange: () => void };
+
+function SurveyList({ surveys, onPageChange }: SurveyListProps) {
+  return (
+    <>
+      <Swiper
+        className="survey-swiper"
+        modules={[Pagination]}
+        speed={800}
+        spaceBetween={100}
+        pagination={{ el: '.swiper-pagination', clickable: true, dynamicBullets: true }}
+        slidesPerView={1}
+        onReachEnd={onPageChange}
+      >
+        {surveys.map((survey) => {
+          return (
+            <SwiperSlide key={survey.id}>
+              <SurveyComponent {...survey} />
+            </SwiperSlide>
+          );
+        })}
+      </Swiper>
+      <div className="survey-swiper swiper-pagination"></div>
+    </>
+  );
+}
+
+export default SurveyList;

src/lib/requestManager.test.ts

@@ -221,7 +221,7 @@ describe('createResponseErrorInterceptor', () => {
         JSON.stringify({ auth: mockTokenData, user: mockUserProfileData })
       );
 
-      // 4 I can not expect storage to set the new token here as it seems to hit the catch block in the authAdapter
+      // 4 I can not expect storage to set the new token here as it seems to hit the catch block in the SurveyAdapter
       // on the fetching of new access token
     }
 

src/lib/requestManager.ts

@@ -1,6 +1,6 @@
 import axios, { Method as HTTPMethod, ResponseType, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
 
-import AuthAdapter from 'adapters/authAdapter';
+import SurveyAdapter from 'adapters/surveyAdapter';
 import { setItem, getItem, clearItem } from 'helpers/localStorage';
 
 import { LOGIN_URL } from '../constants';
@@ -29,7 +29,7 @@ export function createResponseErrorInterceptor() {
 
       if (userProfile?.auth?.refresh_token) {
         try {
-          const response = await AuthAdapter.loginWithRefreshToken(userProfile.auth.refresh_token);
+          const response = await SurveyAdapter.refreshAccessToken(userProfile.auth.refresh_token);
 
           const { attributes: authInfo } = await response.data;
 

src/screens/Home/index.test.tsx

@@ -6,9 +6,9 @@ describe('HomeScreen', () => {
   test('renders learn react link', () => {
     render(<HomeScreen />);
 
-    const mainHeadingElement = screen.getByTestId('app-main-heading');
+    const surveyLoadingElement = screen.getByTestId('loading-surveys');
 
-    expect(mainHeadingElement).toBeInTheDocument();
-    expect(mainHeadingElement).toHaveTextContent('Home Screen');
+    expect(surveyLoadingElement).toBeInTheDocument();
+    expect(surveyLoadingElement).toHaveTextContent('Loading Surveys');
   });
 });