feat: introduce browser history and some fixes

Author: DNR500

README.md

@@ -33,6 +33,12 @@ NEXT_PUBLIC_CLIENT_SIDE_MOVIE_REVALIDATE_TIME=3600
 NEXT_PUBLIC_SITE_URL=http://localhost:3000
 ```
 
+The project uses npm. Run the follow to get set up.
+
+```
+npm i
+```
+
 ### Production build of the app
 
 To see the app running optimally you can do a production build of the app and see that working locally.
@@ -44,6 +50,8 @@ npm run start
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
+I would advise testing with the production build and using an incognito browser window.
+
 ### Local development run
 
 To benefit from hot reloading while working on the app you can run..
@@ -178,11 +186,12 @@ I had limited time so here are a few other things I would look at..
 - Storybook for individual components - this would actually make working on the components a breeze.
 - Better display for small screens - I would love to put more time into this, I think the search page could be optimised quite nicely for smaller screens
   - You could even add additional image sizes to the api endpoint and use different image sizes for different media queries
-- Optimise our endpoints but reducing the payload size - that is currently data we send to the frontend that isn't used
-- It's not the prettiest web app (I'm not really a designer) again with a bit more time it would be good to put a bit more polish on it terms of looks
+- Optimise our endpoints but reducing the payload size - there is currently data we send to the frontend that isn't used
+- It's not the prettiest web app (I'm not really a designer) again with a bit more time it would be good to put more polish on it terms of looks
 - Add husky to get checks running on push
 - Start to move the components into their own folders and using barrel files. The folders would contain tests, storybook files and other sub-components
 - There is still some opportunity for code reuse in the endpoints and some of the components (such as MovieListItem and MovieDetailsView)
+- Set up a pipeline using github actions and establish a live environment
 
 ### What I would have done differently 
 

src/app/api/movies/[movieId]/route.ts

@@ -4,7 +4,7 @@ import { fetchTMDB } from '@/lib/tmdb';
 import type { TMDBMovieDetail } from '@/types/tmdb';
 import type { APIResponse, MovieDetailResponse } from '@/types/api';
 import { ApiError } from '@/lib/apiError';
-import { enrichWithPosterUrl, getTMDBImageConfig } from '@/lib/tmdb-utls';
+import { enrichWithPosterUrl, getTMDBImageConfig } from '@/lib/tmdbUtils';
 
 const paramsSchema = z.object({
   movieId: z.string().regex(/^\d+$/, 'movieId must be a number'),

src/app/api/movies/route.ts

@@ -3,7 +3,7 @@ import { z } from 'zod';
 import { fetchTMDB } from '@/lib/tmdb';
 import type { TMDBSearchResponse, TMDBMovie } from '@/types/tmdb';
 import type { APIResponse, MovieSearchResponse } from '@/types/api';
-import { enrichWithPosterUrl, getTMDBImageConfig } from '@/lib/tmdb-utls';
+import { enrichWithPosterUrl, getTMDBImageConfig } from '@/lib/tmdbUtils';
 import { ApiError } from '@/lib/apiError';
 
 const querySchema = z.object({

src/app/page.tsx

@@ -23,7 +23,7 @@ export default async function HomePage({ searchParams }: HomePageProps) {
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <HomeSearchSection />
+      <HomeSearchSection initialSearch={search} initialPage={parsedPage} />
     </HydrationBoundary>
   );
 }

src/components/LoadingIndicator.tsx

@@ -2,11 +2,7 @@ import { AiOutlineLoading3Quarters } from 'react-icons/ai';
 
 export function LoadingIndicator() {
   return (
-    <span
-      role="status"
-      aria-live="polite"
-      className="absolute right-3 animate-spin text-emerald-950"
-    >
+    <span role="status" aria-live="polite" className="absolute right-3 animate-spin text-cyan-950">
       <AiOutlineLoading3Quarters aria-hidden="true" className="w-4 h-4" />
       <span className="sr-only">Loading...</span>
     </span>

src/components/MovieDetailsView.tsx

@@ -18,7 +18,7 @@ export function MovieDetailsView({ movie }: Props) {
               alt={formatPostImageAlt(movie.title)}
               width={342}
               height={513}
-              className="rounded-md"
+              className="rounded-md border border-cyan-100 object-contain"
               priority
             />
           </div>

src/components/MovieListItem.tsx

@@ -17,22 +17,27 @@ export function MovieListItem({ movie, search, page }: Props) {
   const slug = createMovieSlug(movie.id, movie.original_title);
 
   return (
-    <div className="flex gap-4 bg-white rounded-xl p-3 h-[255px] border border-cyan-200">
+    <div className="flex gap-4 bg-white rounded-xl p-3 min-h-[255px] border border-cyan-200">
       <div
-        className={`w-[154px] flex justify-center ${movie.poster_url.default ? 'items-start' : 'bg-stone-100 items-center h-[231px] rounded-md'}`}
+        className={`w-[154px] h-[231px] flex justify-center rounded-md ${
+          movie.poster_url.default
+            ? 'items-start'
+            : 'border border-cyan-100 bg-stone-100 items-center'
+        }`}
       >
         {movie.poster_url.default ? (
           <Image
             src={movie.poster_url.default}
             alt={formatPostImageAlt(movie.title)}
             width={154}
             height={231}
-            className="rounded-md w-[154px] h-auto max-h-[231px] object-contain"
+            className="border border-cyan-500 rounded-md object-contain"
           />
         ) : (
           <AiOutlineFileImage className="text-stone-400 text-4xl" />
         )}
       </div>
+
       <div className="flex-1">
         <h3>
           <Link

src/components/MovieListSkeleton.tsx

@@ -1,8 +1,6 @@
-export function MovieListItemSkeleton() {
+function MovieListItemSkeleton() {
   return (
-    <div className="flex gap-4 bg-white rounded-xl p-3 h-[255px] border border-cyan-100 animate-pulse">
-      <div className="w-[154px] h-[231px] bg-stone-100 rounded-md" />
-    </div>
+    <div className="flex gap-4 bg-white rounded-xl p-3 h-[255px] border border-cyan-100 animate-pulse"></div>
   );
 }
 
@@ -12,7 +10,7 @@ interface Props {
 
 export function MovieListSkeleton({ itemNumber }: Props) {
   return (
-    <div className="space-y-4 mt-8">
+    <div className="space-y-4">
       {Array.from({ length: itemNumber }).map((_, index) => (
         <MovieListItemSkeleton key={index} />
       ))}

src/components/Pagination.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { AiFillCaretLeft, AiFillCaretRight } from 'react-icons/ai';
-import { MouseEventHandler, useEffect, useState } from 'react';
+import { MouseEventHandler } from 'react';
 
 interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   currentPage: number;
   totalPages: number;
-  search: string;
   onPageChange: (page: number) => void;
+  readonly?: boolean;
 }
 
 const getPageRange = (currentPage: number, totalPages: number): number[] => {
@@ -16,34 +16,44 @@ const getPageRange = (currentPage: number, totalPages: number): number[] => {
   );
 };
 
-export function Pagination({ currentPage, totalPages, onPageChange, ...rest }: PaginationProps) {
-  const [page, setPage] = useState(currentPage);
+export function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  readonly = false,
+  ...rest
+}: PaginationProps) {
+  const buttonBase = 'px-2 py-1 rounded transition text-purple-800 hover:underline focus:underline';
+  const buttonCursor = readonly ? 'cursor-not-allowed' : 'cursor-pointer';
 
-  useEffect(() => {
-    setPage(currentPage);
-  }, [currentPage]);
+  const readonlyProps = {
+    disabled: readonly || undefined,
+    tabIndex: readonly ? -1 : undefined,
+  };
 
   const createPageHandler: (page: number) => MouseEventHandler<HTMLButtonElement> =
     (page) => (e) => {
       e.preventDefault();
-      onPageChange(page);
-      setPage(page);
+      if (!readonly) onPageChange(page);
     };
 
-  const pageRange = getPageRange(page, totalPages);
+  const pageRange = getPageRange(currentPage, totalPages);
 
   return (
     <nav
       aria-label="Pagination"
-      className="flex gap-2 mt-4 flex-wrap justify-between items-center"
+      className={`flex gap-2 flex-wrap justify-between items-center transition-opacity ${
+        readonly ? 'opacity-60 select-none' : ''
+      }`}
       {...rest}
     >
       <div className="w-4 flex justify-start">
-        {page > 1 && (
+        {currentPage > 1 && (
           <button
-            onClick={createPageHandler(page - 1)}
-            className="text-purple-800 hover:underline focus:underline cursor-pointer"
+            onClick={createPageHandler(currentPage - 1)}
+            className={`${buttonBase} ${buttonCursor}`}
             aria-label="Previous page"
+            {...readonlyProps}
           >
             <AiFillCaretLeft aria-hidden="true" />
           </button>
@@ -52,13 +62,13 @@ export function Pagination({ currentPage, totalPages, onPageChange, ...rest }: P
 
       <div className="flex gap-1 items-center">
         {pageRange.map((p) =>
-          p === page ? (
+          p === currentPage ? (
             <button
               key={`${currentPage}-${p}`}
               aria-current="page"
               disabled
               tabIndex={-1}
-              className="px-2 py-1 rounded bg-purple-950 text-white pointer-events-none"
+              className="px-2 py-1 rounded bg-purple-950 text-white pointer-events-none cursor-not-allowed"
             >
               {p}
             </button>
@@ -67,7 +77,8 @@ export function Pagination({ currentPage, totalPages, onPageChange, ...rest }: P
               key={`${currentPage}-${p}`}
               onClick={createPageHandler(p)}
               aria-label={`Page ${p}`}
-              className="px-2 py-1 rounded transition text-purple-800 hover:underline focus:underline cursor-pointer"
+              className={`${buttonBase} ${buttonCursor}`}
+              {...readonlyProps}
             >
               {p}
             </button>
@@ -79,8 +90,9 @@ export function Pagination({ currentPage, totalPages, onPageChange, ...rest }: P
             <span aria-hidden="true">…</span>
             <button
               onClick={createPageHandler(totalPages)}
-              className="text-purple-800 hover:underline focus:underline cursor-pointer"
+              className={`${buttonBase} ${buttonCursor}`}
               aria-label={`Page ${totalPages}`}
+              {...readonlyProps}
             >
               {totalPages}
             </button>
@@ -89,11 +101,12 @@ export function Pagination({ currentPage, totalPages, onPageChange, ...rest }: P
       </div>
 
       <div className="w-4 flex justify-end">
-        {page < totalPages && (
+        {currentPage < totalPages && (
           <button
-            onClick={createPageHandler(page + 1)}
-            className="text-purple-800 hover:underline focus:underline cursor-pointer"
+            onClick={createPageHandler(currentPage + 1)}
+            className={`${buttonBase} ${buttonCursor}`}
             aria-label="Next page"
+            {...readonlyProps}
           >
             <AiFillCaretRight aria-hidden="true" />
           </button>

src/features/home/HomeSearchSection.test.tsx

@@ -6,23 +6,11 @@ import { http, HttpResponse } from 'msw';
 import { server } from '@/test/server';
 import { createTestQueryClient } from '@/test/utils';
 
-vi.mock('next/navigation', () => {
-  const searchParams = new URLSearchParams();
-
-  return {
-    useSearchParams: () => searchParams,
-    useRouter: () => ({
-      replace: vi.fn(),
-    }),
-    usePathname: () => '/',
-  };
-});
-
-function renderWithClient() {
+function renderWithClient(initialSearch = '', initialPage = 1) {
   const queryClient = createTestQueryClient();
   render(
     <QueryClientProvider client={queryClient}>
-      <HomeSearchSection />
+      <HomeSearchSection initialSearch={initialSearch} initialPage={initialPage} />
     </QueryClientProvider>
   );
 }
@@ -52,7 +40,9 @@ function setupPaginatedMock(totalPages: number) {
 }
 
 async function triggerSearch(query: string) {
-  await userEvent.type(screen.getByPlaceholderText(/Search movies.../i), query);
+  const input = screen.getByPlaceholderText(/Search movies.../i);
+  await userEvent.clear(input);
+  await userEvent.type(input, query);
   await waitFor(() => {
     expect(screen.getByText(`Movie Page 1`)).toBeInTheDocument();
   });
@@ -93,7 +83,9 @@ describe('HomeSearchSection', () => {
 
     renderWithClient();
 
-    await userEvent.type(screen.getByPlaceholderText(/Search movies.../i), 'matrix');
+    const input = screen.getByPlaceholderText(/Search movies.../i);
+    await userEvent.clear(input);
+    await userEvent.type(input, 'matrix');
 
     expect(await screen.findByRole('status')).toBeInTheDocument();
 
@@ -107,7 +99,9 @@ describe('HomeSearchSection', () => {
 
     renderWithClient();
 
-    await userEvent.type(screen.getByPlaceholderText(/Search movies.../i), 'nothing');
+    const input = screen.getByPlaceholderText(/Search movies.../i);
+    await userEvent.clear(input);
+    await userEvent.type(input, 'nothing');
 
     await waitFor(() => {
       expect(screen.getByText(/No results match your search/i)).toBeInTheDocument();
@@ -130,7 +124,9 @@ describe('HomeSearchSection', () => {
 
     renderWithClient();
 
-    await userEvent.type(screen.getByPlaceholderText(/Search movies.../i), 'fail');
+    const input = screen.getByPlaceholderText(/Search movies.../i);
+    await userEvent.clear(input); // Defensive, makes sure field is blank
+    await userEvent.type(input, 'fail');
 
     await waitFor(() => {
       expect(screen.getByRole('alert')).toHaveTextContent(