from course, placeholder files

http-sw/src/App.js

@@ -1,64 +1,73 @@
-import React, { useState } from "react"
+import React, { useState, useEffect, useCallback } from 'react';
 
-import MoviesList from "./components/MoviesList"
-import "./App.css"
+import MoviesList from './components/MoviesList';
+import AddMovie from './components/AddMovie';
+import './App.css';
 
 function App() {
-    const [movies, setMovies] = useState([])
-    const [isLoading, setIsLoading] = useState(false)
-    const [error, setError] = useState(null)
+  const [movies, setMovies] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
 
-    const fetchMoviesHandler = async () => {
-        setIsLoading(true)
-        setError(null)
+  const fetchMoviesHandler = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch('https://swapi.dev/api/films/');
+      if (!response.ok) {
+        throw new Error('Something went wrong!');
+      }
 
-        try {
-            const response = await fetch("https://swapi.dev/api/films/")
-            if (!response.ok) {
-                throw new Error(`something went wrong ${response.status}`)
-            }
-            const data = await response.json()
+      const data = await response.json();
 
-            setIsLoading(false)
-
-            const transformedMovies = data.results.map((movieData) => {
-                return {
-                    id: movieData.episode_id,
-                    title: movieData.title,
-                    openingText: movieData.opening_crawl,
-                    releaseDate: movieData.release_date,
-                }
-            })
-
-            setMovies(transformedMovies)
-        } catch (error) {
-            setError(error.message)
-        }
-        setIsLoading(false)
+      const transformedMovies = data.results.map((movieData) => {
+        return {
+          id: movieData.episode_id,
+          title: movieData.title,
+          openingText: movieData.opening_crawl,
+          releaseDate: movieData.release_date,
+        };
+      });
+      setMovies(transformedMovies);
+    } catch (error) {
+      setError(error.message);
     }
+    setIsLoading(false);
+  }, []);
 
-    let content = <p>Found no movies.</p>
-    if (movies.length > 0) {
-        content = <MoviesList movies={movies} />
-    }
-    if (error) {
-        content = <p>{error}</p>
-    }
+  useEffect(() => {
+    fetchMoviesHandler();
+  }, [fetchMoviesHandler]);
 
-    if (isLoading) {
-        content = <p>Loading...</p>
-    }
+  function addMovieHandler(movie) {
+    console.log(movie);
+  }
 
-    return (
-        <React.Fragment>
-            <section>
-                <button onClick={fetchMoviesHandler}>Fetch Movies</button>
-            </section>
-            <section>
-                {content}
-            </section>
-        </React.Fragment>
-    )
+  let content = <p>Found no movies.</p>;
+
+  if (movies.length > 0) {
+    content = <MoviesList movies={movies} />;
+  }
+
+  if (error) {
+    content = <p>{error}</p>;
+  }
+
+  if (isLoading) {
+    content = <p>Loading...</p>;
+  }
+
+  return (
+    <React.Fragment>
+      <section>
+        <AddMovie onAddMovie={addMovieHandler} />
+      </section>
+      <section>
+        <button onClick={fetchMoviesHandler}>Fetch Movies</button>
+      </section>
+      <section>{content}</section>
+    </React.Fragment>
+  );
 }
 
-export default App
+export default App;

http-sw/src/components/AddMovie.js

@@ -0,0 +1,43 @@
+import React, { useRef } from 'react';
+
+import classes from './AddMovie.module.css';
+
+function AddMovie(props) {
+  const titleRef = useRef('');
+  const openingTextRef = useRef('');
+  const releaseDateRef = useRef('');
+
+  function submitHandler(event) {
+    event.preventDefault();
+
+    // could add validation here...
+
+    const movie = {
+      title: titleRef.current.value,
+      openingText: openingTextRef.current.value,
+      releaseDate: releaseDateRef.current.value,
+    };
+
+    props.onAddMovie(movie);
+  }
+
+  return (
+    <form onSubmit={submitHandler}>
+      <div className={classes.control}>
+        <label htmlFor='title'>Title</label>
+        <input type='text' id='title' ref={titleRef} />
+      </div>
+      <div className={classes.control}>
+        <label htmlFor='opening-text'>Opening Text</label>
+        <textarea rows='5' id='opening-text' ref={openingTextRef}></textarea>
+      </div>
+      <div className={classes.control}>
+        <label htmlFor='date'>Release Date</label>
+        <input type='text' id='date' ref={releaseDateRef} />
+      </div>
+      <button>Add Movie</button>
+    </form>
+  );
+}
+
+export default AddMovie;

http-sw/src/components/AddMovie.module.css

@@ -0,0 +1,26 @@
+.control {
+  margin: 1rem 0;
+}
+
+.control label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+  text-align: left;
+}
+
+.control input,
+.control textarea {
+  display: block;
+  width: 100%;
+  font: inherit;
+  padding: 0.2rem;
+  border-radius: 12px;
+  border: 1px solid #ccc;
+}
+
+.control input:focus,
+.control textarea:focus {
+  outline: none;
+  border-color: #230052;
+}