Fixes some crummy code

src/App.tsx

@@ -1,8 +1,9 @@
 import {useEffect, useState} from 'react'
 import './App.css'
+import {Movie} from "./Models.ts";
 
 function App() {
-  const [movies, setMovies] = useState([])
+  const [movies, setMovies] = useState<Movie[]>([])
   const [selectedMovie, setSelectedMovie] = useState("")
   useEffect(() => {
     fetch('http://localhost:8080/movies')
@@ -13,20 +14,20 @@ function App() {
     )
   })
 
-  function sortByYear(a, b): number {
+  function sortByYear(a: Movie, b: Movie): number {
     return a.releaseYear < b.releaseYear ? -1 : 1
   }
 
-  function sortByScreenedDate(a, b): number {
+  function sortByScreenedDate(a: Movie, b: Movie): number {
     return a.screenedDate < b.screenedDate ? -1 : 1
   }
 
-  function sortByTitle(a, b): number {
+  function sortByTitle(a: Movie, b: Movie): number {
     return a.title < b.title ? -1 : 1
   }
   
   function handleMovieSelectionClick() {
-    
+
   }
 
   return (
@@ -45,7 +46,7 @@ function App() {
             );
             return (
                 <>
-                  <div className={"screened"}>{screenedFormatted}</div><div onClick={} className={"title"}>{movie.title} ({movie.releaseYear})</div>
+                  <div className={"screened"}>{screenedFormatted}</div><div onClick={handleMovieSelectionClick} className={"title"}>{movie.title} ({movie.releaseYear})</div>
                 </>
             )
           })}

src/Models.ts

@@ -1,4 +1,4 @@
-interface Movie{
+export interface Movie {
   id: string,
   title: string,
   screenedDate: string,