<repo_name>Ala-de/movie-app<file_sep>/src/films.js
import { getDefaultNormalizer } from '@testing-library/dom';
import React, {useState,useEffect}from 'react'
import {Card,Button } from 'react-bootstrap'
import './film.css'
import Rater from 'react-rater'
import 'react-rater/lib/react-rater.css'


function Film ({input,getFavorie}) {
  const [film, setfilm ]= useState([])
  const getfilm = ()=>{
    
    fetch('film.json').then(
          response => response.json()).then 
                   (film => setfilm(film));
  }
  
  useEffect(()=> {getfilm()
  },[])

  console.log(film)
  return(
    
      film.filter((al)=>{
        if(input===""){
          return al
        }
        else if (al.Title.toLowerCase().includes(input.toLowerCase())){
          return al
        }
      }).map(el=>
        <div className= "navbarrr">
          
      <div className="crd">
      <div className='cwart'>
        <Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src={el.Images} />
  <Card.Body>
    <Card.Title>{el.Title}</Card.Title>

    <Card.Text>
      {el.Plot}
    </Card.Text>
    <Card.Text>
      <Rater total={10} rating={el.imdbRating} />
    </Card.Text>
    <Button variant="primary" className="bbb" >watch</Button>
    <Button variant="primary" className="bbb" onClick={()=>{getFavorie(el)}}>favrie</Button>

  </Card.Body>
  
</Card>
     </div>
     </div> 
     </div>
      )
  
   )

 }

export default Film
<file_sep>/src/Admin.js

import React,{useEffect} from 'react'
import {Form,Button,Modal, Card } from  'react-bootstrap'
import Update from './Update'
import {useState} from 'react';
import axios from 'axios';

import './styleadmin.css'
const Admin = () => {

  // **********get movies************
  
  const [movie, setMovie] = useState([])  
   const getMovie = ()=> {axios.get('http://localhost:3004/posts')
  .then((response )=> {setMovie(response.data)   }) } 
  
  useEffect(()=> {getMovie() },[])
  

  const [input,setInput]=useState(
    {
      title:"",
      desc:""
}
);
//handleChage
const handleChange = e => {
  const { name, value } = e.target;
  //e.target.name=e.target.value
  setInput({
    ...input,
    [name]: value,
  
  });
 
};








// delete function//
 // DELETE request using axios with error handling
 
 const deleteData=(id)=> {  
 axios.delete(`http://localhost:3004/posts/${id}`)   
.then((response) => console.log(response) )  
.catch((err) =>  console.log(err)   )
 }

//post data 
const handlesubmit = (e) => {
e.preventDefault();
axios
  .post("http://localhost:3004/posts",input)
  .then((response) => console.log(response))
  .catch((error) => console.log(error));
  
}


  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return(
<>
    <div className='container md-2'>
    <Button className="buton" variant="primary" onClick={handleShow}>
     Add Film
   </Button>
  
  
  
  

<Modal show={show} onHide={handleClose}>

  
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form onSubmit={handlesubmit}>
<Form.Group controlId="formBasicEmail">
 <Form.Label>Title</Form.Label>
 <Form.Control type="text" placeholder="title" name='title' onChange={handleChange}/>

</Form.Group>

<Form.Group controlId="formBasicPassword">
 <Form.Label>description</Form.Label>
 <Form.Control type="text" placeholder="description"  name='desc' onChange={handleChange} />
</Form.Group>
<Form.Group controlId="formBasicPassword">
 <Form.Label> Rating</Form.Label>
 <Form.Control type="text" placeholder="rating"  name='rating' onChange={handleChange} />
</Form.Group>
<Form.Group controlId="formBasicPassword">
 <Form.Label>image</Form.Label>
 <Form.Control type="text" placeholder="image"  name='image' onChange={handleChange} />
</Form.Group>
<Form.Group controlId="formBasicPassword">
 <Form.Label>type</Form.Label>
 <Form.Control type="text" placeholder="image"  name='type' onChange={handleChange} />
</Form.Group>
<Form.Group controlId="formBasicPassword">
 <Form.Label>year</Form.Label>
 <Form.Control type="text" placeholder="image"  name='year' onChange={handleChange} />
</Form.Group>
<Button variant="secondary" onClick={handleClose}>
 Close
</Button>
<Button type='submit' variant="primary" onClick={handleClose}>
 Save Changes
</Button>
</Form>
</Modal.Body>



</Modal>




 </div>

   { movie.map(el=>
      
      <div className="crd d-flex justify-content-around">
      <div className='cwart'>
        <Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src={el.image} />
  <Card.Body>
    <Card.Title>{el.title}</Card.Title>

    <Card.Text>
      {el.desc}
    </Card.Text>
    <Card.Text>
      {el.rating}<img src="./star.png" className="star"/>
    </Card.Text>
    

     
    
<Update el={el}/>   
  
    
    <Button className="buttonn" variant="primary" onClick={()=>deleteData(el.id)} >
     Supprission
   </Button>
  </Card.Body>
</Card>
     </div> 
     </div>
   )}
    </>
   )
  
 }

export default Admin
<file_sep>/src/Update.js
import React from 'react'
import axios from 'axios';
import {useState} from 'react';
import {Form,Button,Modal, Card }from  'react-bootstrap'

export default function Update({el}) {


    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

//EDit======================================================================
// edit//
const [edit, setEdit]=useState({
  title: el.title,
  desc: el.Plot,
  rating: el.Rated,
  image: el.Poster,
  type: el.Genre,
  year: el.Year
})

const handleEdit = e => {
    const {name, value} = e.target
    setEdit({...edit, [name]:value})
  }


const Edit  = async (id) => {
  console.log(edit)
  await axios.put(`http://localhost:3004/posts/${id}`, edit)
    .then((response) => {console.log(response.data)
        setEdit(response.data)})
    .catch((error) => console.log(error));
  }


    return (
        <div>

<Button className="buton" variant="primary" onClick={handleShow}>
     edit
   </Button>

            <Modal show={show} onHide={handleClose}>

  
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="formBasicEmail">
 <Form.Label>Title</Form.Label>
<Form.Control type="text" placeholder="title" defaultValue={el.title} name='title' onChange={handleEdit}/>

</Form.Group>

<Form.Group controlId="formBasicPassword">
 <Form.Label>description</Form.Label>
 <Form.Control type="text" placeholder="description" defaultValue={el.Plot} name='desc' onChange={handleEdit} />
</Form.Group>
<Form.Group controlId="formBasicPassword">
 <Form.Label> Rating</Form.Label>
 <Form.Control type="text" placeholder="rating"  defaultValue={el.Rated} name='rating' onChange={handleEdit} />
</Form.Group>
<Form.Group controlId="formBasicPassword">
 <Form.Label>image</Form.Label>
 <Form.Control type="text" placeholder="image" defaultValue={el.Poster} name='image' onChange={handleEdit} />
</Form.Group>
<Form.Group controlId="formBasicPassword">
 <Form.Label>type</Form.Label>
 <Form.Control type="text" placeholder="image"  defaultValue={el.Genre} name='type' onChange={handleEdit} />
</Form.Group>
<Form.Group controlId="formBasicPassword">
 <Form.Label>year</Form.Label>
 <Form.Control type="text" placeholder="image"    defaultValue={el.Year}  name='year' onChange={handleEdit} />
</Form.Group>
<Button variant="secondary" onClick={handleClose}>
 Close
</Button>
<Button variant="primary" onClick={()=>Edit(el.id)}>
 Save Changes
</Button>
</Form>
</Modal.Body>



</Modal>

            
        </div>
    )
}
<file_sep>/src/navgation.js
import React from 'react'
import {Navbar,Nav,Form,FormControl } from 'react-bootstrap';
import {Link, Route, Router} from 'react-router-dom'
import './film.css'
export default function Navgation({handelchange}) {
    return (
        <div>
<Navbar className="azaz" expand="lg">
  <Navbar.Brand href="#home">MOVIES</Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
   
    <Nav className="links">
     
    <Link to="/"><li>Home</li></Link>
      
      <Link to="/"><li>Films</li></Link>

        <Link to="/favorie"><li>Favorie</li></Link>
        <Link to="/Contact"><li>contact</li></Link>
        
      
    </Nav>
   
    <Form inline className="limine ml-auto">
      <FormControl type="text" placeholder="Search" className="mr-sm-2" onChange={handelchange} />
  
    </Form>
  </Navbar.Collapse>
</Navbar>
        </div>
    )
}
<file_sep>/src/App.js

import './App.css';
import Navgation from'./navgation'
import 'bootstrap/dist/css/bootstrap.min.css';
import Footer from'./footer'
import Apropos  from './apropo'
import Favorie from './favorie'
import { BrowserRouter, Route } from 'react-router-dom';
import Home from './home'
import Contact from './contact'
import Admin from './Admin'
import {useState} from "react"
import Film from './films';

function App() {
  const [favorie,setFavorie]=useState([])
  const getFavorie=(el)=>{
    favorie.push(el);
    console.log (favorie);

  };

  return (
    <div className="App">
      <BrowserRouter>
      <Navgation/>
          <Route   exact path="/"  component={Home}  />
          <Route  path="/favorie" component={Favorie} favorie={favorie}  />
          <Route path ="/a propos" component={Apropos}/>
          <Route path ="/Contact" component={Contact}/>
          <Route  path="/Admin"component={Admin}/>  
          <Route   path="/films"  component={Film} getFavorie={getFavorie}/>
         <Footer/>
      
      
      </BrowserRouter>
    
     
        </div>
    
  );
}

export default App;
<file_sep>/src/favorie.js
import React from 'react'
import Navgation from './navgation'
import {Button,Card} from 'react-bootstrap'
import Rater from 'react-rater'
import 'react-rater/lib/react-rater.css'

 const Favorie = ({favorie}) => {
    return (
       <div className='cwart'>
      
          
      {favorie.map((el)=>
  <Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src={el.Images} />
  <Card.Body>
    <Card.Title>{el.Title}</Card.Title>
    <Card.Text>
      {el.Plot}
    </Card.Text>
    <Card.Text>
      <Rater total={10} rating={el.imdbRating} />
    </Card.Text>
    <Button variant="primary" className="bbb">watch</Button>

  </Card.Body>
  
</Card>      
         )   }
        
        </div>
        
    )
}
export default Favorie<file_sep>/src/home.js
import {React,useState} from 'react'
import Film  from './films'
import './film.css'
import Navgation from './navgation'
import { Container } from "react-bootstrap";

 function Home() {
     const  [input,setInput]=useState("")
     const handelchange=(e)=>{
         setInput(e.target.value)
         
     }

    return (
        <div>
                  

             <Container className="d-flex flex-wrap">
           <Film  input={input}/>
           </Container>

        </div>
    )
}
export default Home<file_sep>/src/footer.js
import React from 'react'
import './film.css'
export default function Footer() {
    return (
        <div>
           <footer class="text-footer" >
  
  <div class="container p-4"></div>
  

  
  <div class="text-center p-3">
    © 2021 Copyright:
    <a class="text-white" href="https://mdbootstrap.com/">Movie.TN:</a>
  </div>
  
</footer> 
        </div>
    )
}
