a

DEV4.1/tp4/ex1/js/app.js

@@ -0,0 +1,7 @@
+import model from './model'
+import Controller from './controller'
+import View from './view'
+
+const view = new View()
+const app = new Controller(view,model)
+

DEV4.1/tp4/ex1/js/controller.js

@@ -0,0 +1,45 @@
+class   Controller  {
+	constructor(view,model){
+		this.view = view
+		this.model = model
+
+		this.loading = false
+		this.lastSearch = null
+		this.error = null
+		this.results = []
+
+		this.view.setLoading(false)
+		this.view.bindSearch(this.search.bind(this))
+	}
+	reset() {
+		this.loading = false
+		this.error = null
+		this.results = []
+	}
+
+	async search(searchMovie) {
+		try {
+            this.reset();
+            this.loading = true;
+            this.view.setLoading(true);
+            
+            const movies = await this.model.getMovies(searchMovie);
+            
+            if (movies && movies.length > 0) {
+                this.results = movies;
+            } else {
+                this.error = "No movies found.";
+            }
+        } catch (error) {
+            console.error('Error occurred during search:', error);
+            this.error = "An error occurred during search.";
+        } finally {
+            this.loading = false;
+            this.view.setLoading(false);
+            this.view.renderResults(this.results, this.error);
+        }
+	}
+} 
+
+export default Controller
+

DEV4.1/tp4/ex1/js/helpers.js

@@ -0,0 +1,12 @@
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds.
+function debounce(fn, wait) {
+	let timeout
+
+	return (...args) => {
+		clearTimeout(timeout)
+		timeout = setTimeout(() => fn(...args), wait)
+	}
+}
+export default debounce

DEV4.1/tp4/ex1/js/model.js

@@ -0,0 +1,23 @@
+let apiKey = 'a776e2df'
+
+let model = {
+	getMovies(search){
+		return new Promise((resolve, reject) => {
+            fetch(`http://www.omdbapi.com/?apikey=${apiKey}&s=${search}`)
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    resolve(data.Search);
+                })
+                .catch(error => {
+                    console.error('There was a problem with the fetch operation:', error);}
+				)
+		})
+	}
+}
+
+export default model

DEV4.1/tp4/ex1/js/view.js

@@ -0,0 +1,54 @@
+import debounce from "./helpers.js"
+
+class View {
+	constructor(){
+		this.listMovies = document.querySelector("#list-movies")
+		this.inputSearch = document.querySelector("input")
+		this.loader = document.querySelector(".loader")
+		this.message = document.querySelector("p.error")
+	}
+
+	_getInput(){
+		return this.inputSearch.value
+	}
+
+	setLoading(loading){
+		if (loading)
+			this.loader.style.display = "block"
+		else
+			this.loader.style.display = "none"
+	}
+
+	renderMessage(error){
+		this.message.style.display = "block"
+		this.message.textContent = error
+	}
+
+	renderList(movies){
+		let ul = document.createElement("ul")
+		movies.forEach((movie)=>{
+			let li = document.createElement("li")
+			let a = document.createElement("a")
+			let span = document.createElement("span")
+			a.href = `http://www.imdb.com/title/${movie.imdbID}`
+			a.target="_blank"
+			a.textContent = movie.Title
+			span.textContent = movie.Year
+
+
+			li.appendChild(a)
+			li.appendChild(span)
+			ul.appendChild(li)
+		})
+
+		this.listMovies.replaceChildren(ul)
+	}
+
+	bindSearch(handler){
+		this.inputSearch.addEventListener("input",debounce((e)=>{
+			handler(this._getInput())	
+		},500))
+	}
+}
+
+export default View