Skip to content

Making progress #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ModupeD wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Making progress #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions client/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,64 @@
import React, { useEffect, useState } from "react";

import { Route, Switch, Redirect } from "react-router-dom";
import MovieList from './components/MovieList';
import Movie from './components/Movie';
import MovieList from "./components/MovieList";
import Movie from "./components/Movie";

import MovieHeader from './components/MovieHeader';
import MovieHeader from "./components/MovieHeader";

import EditMovieForm from './components/EditMovieForm';
import FavoriteMovieList from './components/FavoriteMovieList';
import EditMovieForm from "./components/EditMovieForm";
import FavoriteMovieList from "./components/FavoriteMovieList";

import axios from 'axios';
import axios from "axios";

const App = (props) => {
const [movies, setMovies] = useState([]);
const [favoriteMovies, setFavoriteMovies] = useState([]);

useEffect(()=>{
axios.get('http://localhost:5000/api/movies')
.then(res => {
useEffect(() => {
axios
.get("http://localhost:5000/api/movies")
.then((res) => {
setMovies(res.data);
})
.catch(err => {
.catch((err) => {
console.log(err);
});
}, []);

const deleteMovie = (id)=> {
}
const deleteMovie = (id) => {};

const addToFavorites = (movie) => {

}
const addToFavorites = (movie) => {};

return (
<div>
<nav className="navbar navbar-dark bg-dark">
<span className="navbar-brand" ><img width="40px" alt="" src="./Lambda-Logo-Red.png"/> HTTP / CRUD Module Project</span>
<span className="navbar-brand">
<img width="40px" alt="" src="./Lambda-Logo-Red.png" /> HTTP / CRUD
Module Project
</span>
</nav>

<div className="container">
<MovieHeader/>
<MovieHeader />
<div className="row ">
<FavoriteMovieList favoriteMovies={favoriteMovies}/>
<FavoriteMovieList favoriteMovies={favoriteMovies} />

<Switch>
<Route path="/movies/edit/:id">
<EditMovieForm setMovies={setMovies} />
</Route>

<Route path="/movies/:id">
<Movie/>
<Movie />
</Route>

<Route path="/movies">
<MovieList movies={movies}/>
<MovieList movies={movies} />
</Route>

<Route path="/">
<Redirect to="/movies"/>
<Redirect to="/movies" />
</Route>
</Switch>
</div>
Expand All @@ -65,6 +67,4 @@ const App = (props) => {
);
};


export default App;

177 changes: 114 additions & 63 deletions client/src/components/EditMovieForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,121 @@
import React, { useState, useEffect } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import { Link } from 'react-router-dom';
import React, { useState, useEffect } from "react";
import { useParams, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";

import axios from 'axios';
import axios from "axios";

const EditMovieForm = (props) => {
const { push } = useHistory();
const { id } = useParams();
const { push } = useHistory();

const [movie, setMovie] = useState({
title:"",
director: "",
genre: "",
metascore: 0,
description: ""
});

const handleChange = (e) => {
setMovie({
...movie,
[e.target.name]: e.target.value
});
}
const [movie, setMovie] = useState({
title: "",
director: "",
genre: "",
metascore: 0,
description: "",
});

const handleSubmit = (e) => {
e.preventDefault();
}

const { title, director, genre, metascore, description } = movie;
const handleChange = (e) => {
setMovie({
...movie,
[e.target.name]: e.target.value,
});
};
useEffect(() => {
axios
.get(`http://localhost:5000/api/movies/${id}`)
.then((res) => {
setMovie(res.data);
})
.catch((err) => {
console.log(err.response);
});
}, []);
const handleSubmit = (e) => {
e.preventDefault();
axios
.put(`http://localhost:5000/api/movies/${id}`, movie)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err.response);
});
};

return (
<div className="col">
<div className="modal-content">
<form onSubmit={handleSubmit}>
<div className="modal-header">
<h4 className="modal-title">Editing <strong>{movie.title}</strong></h4>
</div>
<div className="modal-body">
<div className="form-group">
<label>Title</label>
<input value={title} onChange={handleChange} name="title" type="text" className="form-control"/>
</div>
<div className="form-group">
<label>Director</label>
<input value={director} onChange={handleChange} name="director" type="text" className="form-control"/>
</div>
<div className="form-group">
<label>Genre</label>
<input value={genre} onChange={handleChange} name="genre" type="text" className="form-control"/>
</div>
<div className="form-group">
<label>Metascore</label>
<input value={metascore} onChange={handleChange} name="metascore" type="number" className="form-control"/>
</div>
<div className="form-group">
<label>Description</label>
<textarea value={description} onChange={handleChange} name="description" className="form-control"></textarea>
</div>

</div>
<div className="modal-footer">
<input type="submit" className="btn btn-info" value="Save"/>
<Link to={`/movies/1`}><input type="button" className="btn btn-default" value="Cancel"/></Link>
</div>
</form>
</div>
</div>);
}
const { title, director, genre, metascore, description } = movie;

export default EditMovieForm;
return (
<div className="col">
<div className="modal-content">
<form onSubmit={handleSubmit}>
<div className="modal-header">
<h4 className="modal-title">
Editing <strong>{movie.title}</strong>
</h4>
</div>
<div className="modal-body">
<div className="form-group">
<label>Title</label>
<input
value={title}
onChange={handleChange}
name="title"
type="text"
className="form-control"
/>
</div>
<div className="form-group">
<label>Director</label>
<input
value={director}
onChange={handleChange}
name="director"
type="text"
className="form-control"
/>
</div>
<div className="form-group">
<label>Genre</label>
<input
value={genre}
onChange={handleChange}
name="genre"
type="text"
className="form-control"
/>
</div>
<div className="form-group">
<label>Metascore</label>
<input
value={metascore}
onChange={handleChange}
name="metascore"
type="number"
className="form-control"
/>
</div>
<div className="form-group">
<label>Description</label>
<textarea
value={description}
onChange={handleChange}
name="description"
className="form-control"
></textarea>
</div>
</div>
<div className="modal-footer">
<input type="submit" className="btn btn-info" value="Save" />
<Link to={`/movies/1`}>
<input type="button" className="btn btn-default" value="Cancel" />
</Link>
</div>
</form>
</div>
</div>
);
};

export default EditMovieForm;