from course, placeholder files

This commit is contained in:
Tyrel Souza 2022-09-26 16:44:24 -04:00
parent 982d8d4393
commit 398290cd9e
No known key found for this signature in database
GPG Key ID: F3614B02ACBE438E
3 changed files with 130 additions and 52 deletions

View File

@ -1,25 +1,24 @@
import React, { useState } from "react" import React, { useState, useEffect, useCallback } from 'react';
import MoviesList from "./components/MoviesList" import MoviesList from './components/MoviesList';
import "./App.css" import AddMovie from './components/AddMovie';
import './App.css';
function App() { function App() {
const [movies, setMovies] = useState([]) const [movies, setMovies] = useState([]);
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null) const [error, setError] = useState(null);
const fetchMoviesHandler = async () => {
setIsLoading(true)
setError(null)
const fetchMoviesHandler = useCallback(async () => {
setIsLoading(true);
setError(null);
try { try {
const response = await fetch("https://swapi.dev/api/films/") const response = await fetch('https://swapi.dev/api/films/');
if (!response.ok) { 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) => { const transformedMovies = data.results.map((movieData) => {
return { return {
@ -27,38 +26,48 @@ function App() {
title: movieData.title, title: movieData.title,
openingText: movieData.opening_crawl, openingText: movieData.opening_crawl,
releaseDate: movieData.release_date, releaseDate: movieData.release_date,
} };
}) });
setMovies(transformedMovies);
setMovies(transformedMovies)
} catch (error) { } 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) { if (movies.length > 0) {
content = <MoviesList movies={movies} /> content = <MoviesList movies={movies} />;
} }
if (error) { if (error) {
content = <p>{error}</p> content = <p>{error}</p>;
} }
if (isLoading) { if (isLoading) {
content = <p>Loading...</p> content = <p>Loading...</p>;
} }
return ( return (
<React.Fragment> <React.Fragment>
<section> <section>
<button onClick={fetchMoviesHandler}>Fetch Movies</button> <AddMovie onAddMovie={addMovieHandler} />
</section> </section>
<section> <section>
{content} <button onClick={fetchMoviesHandler}>Fetch Movies</button>
</section> </section>
<section>{content}</section>
</React.Fragment> </React.Fragment>
) );
} }
export default App export default App;

View File

@ -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;

View File

@ -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;
}