Module 05 | Next.JS | SSR | SSG

.env

@@ -1,2 +1,2 @@
-VITE_API_URL=https://www.omdbapi.com/
-VITE_API_KEY=dbb72d83
+NEXT_PUBLIC_API_URL=https://www.omdbapi.com/
+NEXT_PUBLIC_API_KEY=dbb72d83

.eslintrc.cjs

@@ -10,9 +10,10 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:import/recommended',
     'prettier',
+    'next/core-web-vitals'
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts', 'prettier.config.js', '@typescript-eslint', 'node_modules', 'tailwind.config.js'],
-  plugins: ['react', 'react-refresh', 'simple-import-sort', 'import', 'prettier'],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'prettier.config.js', 'node_modules', 'tailwind.config.js', 'next.config.js', 'environment.d.ts'],
+  plugins: ['react', 'react-refresh', 'simple-import-sort', 'import', 'prettier', '@typescript-eslint'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
@@ -34,14 +35,7 @@ module.exports = {
     'no-void': 0,
     'no-param-reassign': 0,
     'import/no-extraneous-dependencies': 0,
-    'import/extensions': [
-      'error',
-      'ignorePackages',
-      {
-        'ts': 'always',
-        'tsx': 'always'
-      }
-    ],
+    'import/extensions': 0,
     'import/namespace': 0,
     'sort-imports': ['error', {ignoreCase: true, ignoreDeclarationSort: true}],
     'import/order': [
@@ -60,7 +54,7 @@ module.exports = {
             position: 'before',
           },
           {
-            pattern: '@src/**',
+            pattern: '*',
             group: 'internal',
           },
         ],
@@ -77,6 +71,7 @@ module.exports = {
     'import/resolver': {
       typescript: {
         alwaysTryTypes: true,
+        project: './tsconfig.json',
       },
       node: {
         extensions: ['.js','.jsx','.ts','.tsx']

.github/pull_request_template.md

@@ -0,0 +1,25 @@
+1. Task: [click](https://github.com/rolling-scopes-school/tasks/tree/master/react/modules/module04)
+2. Screenshot:
+3. Deploy: [click](https://quiddlee.github.io/Cinemania/)
+4. Done 14.11.2023 / deadline 20.11.2023
+5. Score: 100 / 100
+
+## Functional requirements 🍿
+- [x] 📥 Redux is integrated to the app with the help of Redux Toolkit - 25 points
+- [x] 🔍 Search is saved in the store - 5 points
+- [x] 🔢 Items per page is saved in the store - 5 points
+- [x] 🪟 View mode is saved in the store - 10 points
+- [x] 🔃 Loading indicators are shown, loading flags are saved in the store, - 10 points
+- [x] 📞 When either search or items per page is changed, application makes a new call using RTK Query to fetch the data - 25 points
+- [x] 🧪 Tests had been modified to test the functionality using Redux and RTK Query - 20 points
+
+## Penalties 👎
+- [ ] 😥 TypeScript isn't used: -95 points
+- [ ] 😱 Usage of any: -20 points per each
+- [ ] 🙀 Usage of ts-ignore: -20 points per each
+- [ ] 🧃 Direct DOM manipulations inside the React components: -50 points per each
+- [ ] 🪝 React hooks are used to get access to either state, or to the component lifecycle: -70 points
+- [ ] 💨 Presence of code-smells (God-object, chunks of duplicate code), commented code sections: -10 points per each
+- [ ] 📚 Usage of component libraries, e.g. Material UI, Ant Design: -100 points
+- [ ] 📔 Test coverage is less than 80%: -30 points
+- [ ] 📛 Commits after the deadline: -40 points

.gitignore

@@ -1,26 +1,37 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+.idea
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-coverage
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-#*.env
+
+# local env files
+#.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -1 +1 @@
-# react-components
+# Cinemania 🍿

app/model/slice.test.tsx

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest';
+
+import { appReducer, dataFetched, initialState } from './slice';
+
+describe('appSlice', () => {
+  it("should change app's slice dataFetched state", () => {
+    const state = appReducer(initialState, dataFetched(true));
+
+    expect(state).toEqual({
+      isFetching: true,
+    });
+  });
+});

app/model/slice.ts

@@ -0,0 +1,23 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface IInitialState {
+  isFetching: boolean;
+}
+
+export const initialState: IInitialState = {
+  isFetching: false,
+};
+
+export const appSlice = createSlice({
+  name: 'app',
+  initialState,
+  reducers: {
+    dataFetched: (state, action: PayloadAction<boolean>) => {
+      state.isFetching = action.payload;
+    },
+  },
+});
+
+export const { dataFetched } = appSlice.actions;
+
+export const appReducer = appSlice.reducer;

src/app/store/store.ts → app/store/store.ts

@@ -1,8 +1,9 @@
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
 
-import { movieApi } from '../../entities/movie/api/movieApi.ts';
-import { searchReducer } from '../../features/Search/model/slice.ts';
-import { appReducer } from '../model/slice.ts';
+import { movieApi } from '@entities/movie/api/movieApi';
+import { createWrapper } from 'next-redux-wrapper';
+
+import { appReducer } from '../model/slice';
 
 export type AppStore = ReturnType<typeof setupStore>;
 export type RootState = ReturnType<typeof rootReducer>;
@@ -11,7 +12,6 @@ export type PreloadState = Partial<RootState>;
 
 const rootReducer = combineReducers({
   [movieApi.reducerPath]: movieApi.reducer,
-  searchReducer,
   appReducer,
 });
 
@@ -22,3 +22,5 @@ export const setupStore = (preloadedState?: PreloadState) =>
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware().concat(movieApi.middleware),
   });
+
+export const wrapper = createWrapper<AppStore>(() => setupStore());

entities/movie/Movie.test.tsx

@@ -0,0 +1,73 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import * as useGetMovieList from '@shared/hooks/useGetMovieList';
+import renderWithRouter from '@test/helpers/RenderWithRouter';
+import { mockMovieItem, mockMovies } from '@test/mocks/data';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import Movie from './ui/Movie';
+
+const mockedUseGetMovieList = vi.spyOn(useGetMovieList, 'default');
+
+describe('Movie', () => {
+  afterEach(() => void vi.clearAllMocks());
+
+  it('should render the relevant movie data', () => {
+    renderWithRouter(
+      <Movie
+        onMouseMove={vi.fn()}
+        onMouseOut={vi.fn()}
+        data={mockMovieItem}
+        delay={0}
+      />,
+    );
+
+    const poster = screen.getByTestId<HTMLImageElement>('movie-poster');
+    const title = screen.getByTestId('movie-title');
+    const year = screen.getByTestId('movie-year');
+
+    const mockPosterPath = mockMovieItem.Poster.slice(
+      mockMovieItem.Poster.lastIndexOf('/') + 1,
+    );
+    const match = poster.src.match(mockPosterPath);
+    const renderedPath = match?.at(0);
+
+    expect(poster).toBeInTheDocument();
+    expect(title).toBeInTheDocument();
+    expect(year).toBeInTheDocument();
+
+    expect(renderedPath).toBe(mockPosterPath);
+    expect(title).toHaveTextContent(mockMovieItem.Title);
+    expect(year).toHaveTextContent(mockMovieItem.Year);
+  });
+
+  it('should open a detailed card component when clicking on a card', async () => {
+    mockedUseGetMovieList.mockReturnValue({
+      movieList: mockMovies,
+      totalResults: mockMovies.length,
+    });
+
+    const router = renderWithRouter(
+      <Movie
+        data={mockMovieItem}
+        delay={0}
+        onMouseMove={vi.fn()}
+        onMouseOut={vi.fn()}
+      />,
+    );
+
+    const movie = screen.getByTestId('movie-item');
+    await userEvent.click(movie);
+
+    expect(router.push).toHaveBeenCalledWith(
+      `/${mockMovieItem.imdbID}`,
+      `/${mockMovieItem.imdbID}`,
+      {
+        locale: undefined,
+        scroll: true,
+        shallow: undefined,
+      },
+    );
+  });
+});

src/entities/movie/api/movieApi.test.tsx → entities/movie/api/movieApi.test.tsx

@@ -1,17 +1,21 @@
 import { ReactNode } from 'react';
 
 import { renderHook, waitFor } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { describe, it } from 'vitest';
 
-import { useGetMovieListQuery, useGetMovieQuery } from './movieApi.ts';
-import { setupStore } from '../../../app/store/store.ts';
+import {
+  useGetMovieListQuery,
+  useGetMovieQuery,
+} from '@entities/movie/api/movieApi';
 import {
   DEFAULT_PAGE,
   MOVIES_PER_PAGE,
   QUERY_FALLBACK,
-} from '../../../shared/const/const.ts';
-import { mockMovieDetails, mockMovies } from '../../../test/mocks/data.ts';
+} from '@shared/const/const';
+import { mockMovieDetails, mockMovies } from '@test/mocks/data';
+import { Provider } from 'react-redux';
+import { describe, expect, it } from 'vitest';
+
+import { setupStore } from '../../../app/store/store';
 
 function wrapper({ children }: { children: ReactNode }) {
   const store = setupStore();

src/entities/movie/api/movieApi.ts → entities/movie/api/movieApi.ts

@@ -1,11 +1,11 @@
-import { IInitialState } from '../../../features/Search/types/types.ts';
-import rootApi from '../../../shared/api/rootApi.ts';
-import { QUERY_FALLBACK } from '../../../shared/const/const.ts';
 import {
   ApiErrorResponse,
   ApiMovieListResponse,
   ApiMovieResponse,
-} from '../../../shared/types/types.ts';
+} from '@customTypes/types';
+import { IInitialState } from '@features/Search/types/types';
+import rootApi from '@shared/api/rootApi';
+import { QUERY_FALLBACK } from '@shared/const/const';
 
 interface IMovieListParams {
   query: IInitialState['query'];
@@ -17,13 +17,13 @@ export const movieApi = rootApi.injectEndpoints({
   endpoints: (build) => ({
     getMovieList: build.query<ApiMovieListResponse, IMovieListParams>({
       query: ({ query, page, moviesPerPage }) =>
-        `?apikey=${import.meta.env.VITE_API_KEY}&s=${
+        `?apikey=${process.env.NEXT_PUBLIC_API_KEY}&s=${
           query || QUERY_FALLBACK || moviesPerPage
         }&page=${page}`,
     }),
 
     getMovie: build.query<ApiErrorResponse | ApiMovieResponse, string>({
-      query: (id) => `?apikey=${import.meta.env.VITE_API_KEY}&i=${id}`,
+      query: (id) => `?apikey=${process.env.NEXT_PUBLIC_API_KEY}&i=${id}`,
     }),
   }),
 });