Find out whether your favourite actor is still with us.
+
+
+
+
+
+
+
+
+
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
diff --git a/public/js/rip.js b/public/js/rip.js
index 0597e05..4f45037 100644
--- a/public/js/rip.js
+++ b/public/js/rip.js
@@ -2,38 +2,107 @@
import { apiKey } from "./the_config.js";
function anazitisi() {
- // Let's cache elements we access frequently for performance
- var $btnS = $("#btnS");
- var $actor = $("#actor");
- var $list_group = $(".list-group");
+ // Cache frequently accessed elements
+ const searchButton = $("#btnS");
+ const actorInput = $("#actor");
+ const listGroup = $(".list-group");
// Disable search button and change the text
- $btnS.attr("disabled", true);
- $btnS.text("Searching...");
+ searchButton.prop("disabled", true).text("Searching...");
// Empty the list
- $list_group.hide().empty();
+ listGroup.hide().empty();
+
+ // Get the search query, sanitize the input and empty the field
+ const actor = actorInput.val().trim();
+ actorInput.val("");
+
+ // Perform the search and handle the results
+ performSearch(actor, listGroup, searchButton)
+ .then(() => {
+ // Enable search button again after a delay
+ setTimeout(() => {
+ searchButton.prop("disabled", false).text("Search");
+ }, 5000);
+ })
+ .catch((error) => {
+ // Handle errors
+ console.error(error);
+ searchButton.prop("disabled", false).text("Search");
+ });
+}
+
+// Function to perform the search
+async function performSearch(actor, listGroup, searchButton, page = 1, pageSize = 10) {
+ // Declare the API URL
+ const apiUrl = `https://api.themoviedb.org/3/search/person?api_key=${apiKey}&query=${actor}&page=${page}`;
+
+ try {
+ // Fetch the search results from the API
+ const data = await fetchJson(apiUrl);
- //get the search query, sanitize the input and empty the field
- const actor = $actor.val();
- $actor.val("");
+ // Get the actor data for each search result
+ const actors = await getActors(data.results.slice(0, pageSize));
- performSearch(actor, $list_group, $btnS);
+ // Create an actor card for each actor
+ const actorCards = actors.map(createActorCard);
+
+ // Append the actor cards to the list group and show it
+ appendActorCards(actorCards, listGroup);
+ listGroup.show();
+
+ // Check if there are more pages and add a "Load More" button
+ if (data.total_pages > page) {
+ addLoadMoreButton(actor, listGroup, searchButton, page + 1, pageSize);
+ }
+
+ } catch (error) {
+ // Handle errors
+ console.error(error);
+ } finally {
+ // Enable search button again
+ searchButton.prop("disabled", false).text("Search");
+ }
+}
+
+// Function to fetch JSON data from a URL
+async function fetchJson(url) {
+ const response = await fetch(url);
+ return response.json();
+}
+
+
+// Function to get the actor data for each search result
+async function getActors(actorArray) {
+ // Map each search result to a Promise that resolves to the actor data
+ const promises = actorArray.map(async (actorInfo) => {
+ const id = actorInfo.id;
+ const actor = await getActor(id);
+ return actor;
+ });
+ // Wait for all Promises to resolve and return the actor data
+ return Promise.all(promises);
+}
- //enable search button again, wait for 10 sec and change the text
- setTimeout(function () {
- document.getElementById("btnS").disabled = false;
- document.getElementById("btnS").innerHTML = "Search";
- }, 5000);
+// Function to get the actor data for a single actor ID
+async function getActor(actorId) {
+ // Declare the API URL
+ const apiUrl = `https://api.themoviedb.org/3/person/${actorId}?api_key=${apiKey}`;
+
+ // Fetch the actor data from the API and return the relevant properties
+ const data = await fetchJson(apiUrl);
+ return {
+ id: data.id,
+ name: data.name,
+ deathday: data.deathday ? data.deathday : "N/A",
+ birthday: data.birthday ? data.birthday : "N/A",
+ image: data.profile_path ? "https://image.tmdb.org/t/p/w185" + data.profile_path : "https://via.placeholder.com/185x278?text=No+Image",
+ };
}
-// Θα προσπαθήσω να γράψω την performSearch με promises αντι για callbacks
-// τελικά χρησιμοποίησα το async/await γιατί είναι πιο εύκολο και κατανοητό
-async function performSearch(actor, $list_group, $btnS) {
- /* declare api url */
- const url = `https://api.themoviedb.org/3/search/person?api_key=${apiKey}&query=${actor}`;
- console.log(url);
- /* declare icons */
+// Function to create an actor card HTML string
+function createActorCard(actor) {
+ // Declare icons
const icon_heart = '
-