From 51a192ccbace22571ba9112945003afad4ae9f7a Mon Sep 17 00:00:00 2001
From: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
Date: Wed, 6 Sep 2023 07:33:28 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20sorting=20by=20Title/Year=20impleme?=
 =?UTF-8?q?nted?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: haraldnilsen <harald_998@hotmail.com>
---
 src/App.tsx | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 899ab31..5b32157 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,7 @@ import Modal from 'react-modal'
 
 function App() {
   const API_MOVIE_KEY = 'd92949d8'
-  const [movies, setMovies] = useState([])
+  const [movies, setMovies] = useState<movieObject[]>([])
   const [loading, setLoading] = useState(true)
   const [currentPage, setCurrentPage] = useState(1)
   const [totalPages, setTotalPages] = useState(0)
@@ -16,6 +16,7 @@ function App() {
   const [movieType, setMovieType] = useState('')
   const [movieYear, setMovieYear] = useState('')
   const [movieTitle, setMovieTitle] = useState('')
+  const [sortAscending, setSortAscending] = useState(true)
 
   console.log('App mounted')
 
@@ -61,6 +62,28 @@ function App() {
       .catch((error) => console.log(error))
   }
 
+  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-2/4">
@@ -117,12 +140,12 @@ function App() {
                 <q.thead>
                   <q.tr>
                     <q.th>Poster</q.th>
-                    <q.th>Title</q.th>
-                    <q.th>Year</q.th>
+                    <q.th onClick={() => sortHandler('title')}>Title</q.th>
+                    <q.th onClick={() => sortHandler('year')}>Year</q.th>
                   </q.tr>
                 </q.thead>
                 <q.tbody>
-                  {movies.map((movie: any) => (
+                  {movies.map((movie: movieObject) => (
                     <MovieTableRow
                       movie={movie}
                       key={movie.imdbID}