from course, placeholder files

http-sw/src/App.js

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