Merge branch 'main' into QueryParams

frontend/src/App.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useState } from 'react'
+import './App.css'
+import q from 'qjuul'
+import { MovieForm, Pagination, MovieTable, MovieModal } from './components'
+import type { movieObject } from './types/movie'
+import { fetchMovie } from './api/fetchMovie'
+import { useLocation } from 'react-router-dom'
+import { useNavigateToPage } from './util/navigate'
+
+function App() {
+  const [movies, setMovies] = useState<movieObject[]>([])
+  const [loading, setLoading] = useState(true)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [totalPages, setTotalPages] = useState(0)
+  const [modalOpen, setModalOpen] = useState(false)
+  const [modalMovie, setModalMovie] = useState<movieObject | null>(null)
+  const navigateToPage = useNavigateToPage()
+  const searchParams = new URLSearchParams(window.location.search)
+  const [movieTitle, setMovieTitle] = useState(searchParams.get('title') || '')
+  const [movieYear, setMovieYear] = useState(searchParams.get('year') || '')
+  const [movieType, setMovieType] = useState(searchParams.get('type') || '')
+  const [sortAscending, setSortAscending] = useState(true)
+  const location = useLocation()
+
+  useEffect(() => {
+    const handleFetchMovie = async () => {
+      const response = await fetchMovie(title, page, type, year)
+      console.log(year)
+      if (response.Response == 'True') {
+        setMovies(response.Search)
+        setTotalPages(Number(response.totalResults))
+        setCurrentPage(Number(page))
+        setLoading(false)
+      }
+    }
+    const searchParams = new URLSearchParams(location.search)
+    const title = searchParams.get('title') || ''
+    const page = searchParams.get('page') || ''
+    const type = searchParams.get('type') || ''
+    const year = searchParams.get('year') || ''
+
+    if (title) {
+      handleFetchMovie()
+    } else {
+      setLoading(false)
+    }
+  }, [location.search])
+
+  const calculatePages = (totalResults: number): number => {
+    return Math.round(totalResults / 10)
+  }
+
+  const handlePageChange = (pageNumber: number) => {
+    setCurrentPage(pageNumber)
+    navigateToPage(movieTitle, movieType, movieYear, pageNumber.toString())
+  }
+
+  const handleModalOpen = (movie: movieObject) => {
+    setModalOpen(true)
+    setModalMovie(movie)
+  }
+
+  const sortHandler = (sortType: string) => {
+    let sortedMovies: movieObject[] = []
+
+    if (sortType === 'title') {
+      sortedMovies = [...movies].sort((m1, m2) =>
+        sortAscending
+          ? m1.Title.localeCompare(m2.Title)
+          : m2.Title.localeCompare(m1.Title)
+      )
+    }
+    if (sortType === 'year') {
+      sortedMovies = [...movies].sort((m1, m2) =>
+        sortAscending
+          ? m1.Year.localeCompare(m2.Year)
+          : m2.Year.localeCompare(m1.Year)
+      )
+    }
+
+    setSortAscending(!sortAscending)
+    setMovies(sortedMovies)
+  }
+
+  return (
+    <>
+      <q.div className="flex flex-col justify-center items-center mx-auto  w-3/4 md:w-3/5 lg:w-2/4">
+        <MovieModal {...{ setModalOpen, modalMovie, modalOpen }} />
+        <q.div className="flex flex-col w-full items-center">
+          <q.h1
+            onClick={() => navigateToPage()}
+            className="py-8 hover:cursor-pointer text-red-800 text-5xl font-bold"
+            co="rgb(220 38 38)"
+          >
+            Cinemateket
+          </q.h1>
+          <MovieForm
+            {...{
+              movieTitle,
+              movieType,
+              movieYear,
+              setMovieTitle,
+              setMovieType,
+              setMovieYear,
+            }}
+          />
+          <q.div className="flex pt-10">
+            {!loading && movies.length > 0 && (
+              <Pagination
+                currentPage={currentPage}
+                totalPages={calculatePages(totalPages)}
+                handlePageChange={handlePageChange}
+              />
+            )}
+          </q.div>
+          {loading ? (
+            <q.h1>Loading...</q.h1>
+          ) : movies.length > 0 ? (
+            <MovieTable {...{ handleModalOpen, sortHandler, movies }} />
+          ) : (
+            <q.h2>Find a list of movies by searching above ☝️ </q.h2>
+          )}
+        </q.div>
+      </q.div>
+    </>
+  )
+}
+
+export default App