react

2A/S4/Complement_web/code/etudiants/partie02_react/exercices/exercice02_modale/assets/js/App.js

-//TODO
+
+
+function Modal(props) {
+    return(
+        <div id="myModal" className={props.class}>
+            <div className="modal-content">
+                <span onClick={props.onClick} className="close">&times;</span>
+                <img alt="" src="assets/images/image01.jpg"/>
+                <p> une belle image </p>
+            </div>
+        </div>
+    )
+}
+class App extends React.Component{
+    constructor(props) {
+        super(props);
+        this.state = {
+            openModal : false
+        };
+    }
+    handleClick(bool) {
+        this.setState({
+            openModal : bool
+        });
+    }
+    renderModal(){
+        return(
+            <Modal class={"modal" + (this.state.openModal ? "displayBlock" : "")} onClick={() => this.handleClick(false)}/>
+        )
+    }
+    render() {
+        return (
+            <div>
+                <button id="myBtn" onClick={() => this.handleClick(true)}>Open Modal</button>
+                {this.renderModal()}
+            </div>
+        )
+    }
+}
 
 const root = ReactDOM.createRoot(document.querySelector('#app_container'));
-//TODO
\ No newline at end of file
+root.render(<App/>)
\ No newline at end of file

2A/S4/Complement_web/code/etudiants/partie02_react/exercices/exercice03_site/assets/js/home.mjs

-const key = 'XXX'
+const key = 'b116821a3811b251e489968a5b45422b'
 const baseURL = 'https://api.themoviedb.org/3'
 const imgURL = 'https://image.tmdb.org/t/p/w1280'
 
 const movieDAO = {
-    getPopulars : async (page=1) => {
+    getPopulars: async (page = 1) => {
         const suffix = `/movie/popular?api_key=${key}&language=en-US&page=${page}`
-        const res  = await fetch(baseURL+suffix)
+        const res = await fetch(baseURL + suffix)
         const data = await res.json()
         return data
     },
-    find : async (term, page=1) =>
-    {
+    find: async (term, page = 1) => {
         const suffix = `/search/movie?api_key=${key}&language=en-US&query=${term}&page=${page}&include_adult=false`
         const res = await fetch(baseURL + suffix)
         const data = await res.json()
         return data
     }
 }
-//TODO
+
+
+
+function Movie(props) {
+    return (
+        <article>
+            <a href={"movie.html?id=" + props.id}>
+                <img alt={props.title} src={props.img}/>
+                <div>
+                    <div>{props.date}</div>
+                    <div>{props.title}</div>
+                    <div>{props.rate}</div>
+                </div>
+            </a>
+        </article>
+    )
+}
+
+class App extends React.Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            query: "",
+            movies: []
+        }
+        this.doUpdate = this.doUpdate.bind(this)
+    }
+
+    componentDidMount() {
+        this.doUpdate()
+    }
+
+    doUpdate(query) {
+        if (query != undefined)
+            this.setState({query: query})
+        if (this.state.query == "")
+            movieDAO.getPopulars()
+                .then(data => {
+                    this.setState({movies: data.results})
+                })
+        else
+            movieDAO.find(this.state.query)
+                .then(data => {
+                    this.setState({movies: data.results})
+                })
+    }
+
+
+
+    renderMovie() {
+        return (
+            this.state.movies.map((movie)=>
+                <Movie title={movie.original_title} id={movie.id.toString()} img={imgURL + movie.poster_path} rate={movie.vote_average} date={movie.release_date}/>
+            )
+        )
+    }
+
+    render() {
+        return (
+            <div className="container">
+                <header>
+                    <button onClick={() => this.doUpdate()} id="refreshPopular"> Popular movies</button>
+                    <input id="search"  onChange={e => this.doUpdate(e.target.value)}/>
+                </header>
+                <section className="content">
+                    {this.renderMovie()}
+                </section>
+                <footer/>
+            </div>
+        )
+    }
+}
 
 const root = ReactDOM.createRoot(document.querySelector('#app_container'));
-//TODO
\ No newline at end of file
+root.render(<App/>)
+

2A/S4/Complement_web/code/etudiants/partie02_react/exercices/exercice03_site/assets/js/movie.mjs

-const key = 'XXXX'
+const key = 'b116821a3811b251e489968a5b45422b'
 const baseURL = 'https://api.themoviedb.org/3'
 const imgURL = 'https://image.tmdb.org/t/p/w1280'
 
@@ -12,7 +12,70 @@ const movieDAO = {
     }
 }
 
-//TODO
+function Search(props) {
+    return (
+        <header>
+            <button onClick={props.onClick} id="refreshPopular"> Popular movies</button>
+        </header>
+    )
+}
+
+function Movie(props) {
+    return (
+        <div className="movie">
+                <img alt={props.title} src={props.img}/>
+                <div>
+                    <div>{props.date}</div>
+                    <div>{props.title}</div>
+                    <div>{props.rate}</div>
+                </div>
+        </div>
+    )
+}
+
+class App extends React.Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            movie: []
+        }
+        const url = new URLSearchParams(window.location.search)
+        const idURL = parseInt(url.get("id"))
+        movieDAO.getById(idURL)
+            .then(data => {
+                console.log(data)
+                this.setState({movie: [data]})
+            })
+    }
+
+
+    renderSearch() {
+        return (
+            <Search onClick={() => location.href = "home.html"}/>
+        )
+    }
+
+    renderMovie() {
+        return (
+            this.state.movie.map((movie) =>
+                <Movie title={movie.original_title} id={movie.id.toString()} img={imgURL + movie.poster_path} rate={movie.vote_average} date={movie.release_date}/>
+            )
+        )
+    }
+
+    render() {
+        return (
+            <div className="container">
+                {this.renderSearch()}
+                <section className="content">
+                    {this.renderMovie()}
+                </section>
+                <footer/>
+            </div>
+        )
+    }
+}
 
 const root = ReactDOM.createRoot(document.querySelector('#app_container'));
-//TODO
\ No newline at end of file
+root.render(<App/>)
\ No newline at end of file