More updates

src/App.css

@@ -1,9 +0,0 @@
-#root {
-  min-height: 100vh;
-}
-
-.AppContainer {
-  display: flex;
-  flex-direction: column;
-  margin: 20px 40px;
-}

src/App.tsx

@@ -4,8 +4,8 @@ const { Text, Title } = Typography;
 
 export function App() {
   return (
-    <div className="AppContainer">
-      <Title level={2}>Web development interview</Title>
+    <div>
+      <Title level={3}>Web development interview</Title>
       <Text>Your app goes here</Text>
     </div>
   );

src/Server.ts

@@ -1,63 +1,33 @@
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import type { Movie } from "./Types";
 import { MovieData } from "./MovieData";
 
-let MovieDb: Movie[] = MovieData;
-
 export interface GetMoviesResult {
   data: Movie[] | null; // null if loading or error
   loading: boolean;
   error: boolean;
-  reload: () => void;
 }
 
-export interface GetMoviesOptions {
-  max?: number /* max number of movies to return */;
-  longLoading?: boolean /* true will force a 2sec loading time */;
-  withError?: boolean /* true will cause an error to occur */;
-}
+export type TestState = "loading" | "error" | "empty";
 
 // loads movie data when the component mounts
 // reload() may be used to reload data at any time
-export function useGetMovies(options?: GetMoviesOptions): GetMoviesResult {
+// optional testState can be used for testing
+export function useGetMovies(testState?: TestState): GetMoviesResult {
   const [data, setData] = useState<Movie[] | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
 
-  const reload = useCallback(() => {
+  const loadData = () => {
     setLoading(true);
-    setTimeout(
-      () => {
-        console.log("movies loaded from the server");
-        setError(options?.withError ?? false);
-        setData(
-          options?.max === undefined ? MovieDb : MovieDb.slice(0, options.max)
-        );
-        setLoading(false);
-      },
-      options?.longLoading ? 2000 : 500
-    );
-  }, [options]);
-
-  if (data === null && !loading) reload();
+    setTimeout(() => {
+      setError(testState === "error");
+      setData(testState === "empty" ? [] : MovieData);
+      if (testState !== "loading") setLoading(false);
+    }, 500);
+  };
 
-  return { data, loading, error, reload };
-}
-
-export interface UpdateMoviesResult {
-  removeMovies: (titlesToRemove: string[]) => void;
-  resetMovies: () => void;
-}
+  if (data === null && !loading) loadData();
 
-// provides methods for updatin the movie list:
-// removeMovies: removes a list of movies (by title) from the movie list
-// resetMovies: reset the list of movies to the original (without any removed)
-export function useUpdateMovies(): UpdateMoviesResult {
-  const removeMovies = useCallback((titlesToRemove: string[]) => {
-    MovieDb = MovieDb.filter((movie) => !titlesToRemove.includes(movie.title));
-  }, []);
-  const resetMovies = useCallback(() => {
-    MovieDb = MovieData;
-  }, []);
-  return { removeMovies, resetMovies };
+  return { data, loading, error };
 }

src/index.css

@@ -15,3 +15,7 @@ ul {
   margin: 0;
   padding: 0;
 }
+
+#root {
+  height: 100vh;
+}