Funciones de los botones y botones de chat

package.json

@@ -9,7 +9,8 @@
     "pretest": "npm run eslint && npm run htmlhint",
     "test": "jest --verbose --coverage test/",
     "open-coverage-report": "opener ./coverage/lcov-report/index.html",
-    "start": "serve src/ -s"
+    "start": "serve src/ -s",
+    "build": "npm run build"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",
@@ -18,12 +19,14 @@
     "babel-jest": "^27.0.1",
     "css": "^3.0.0",
     "eslint": "^8.3.0",
+    "eslint-plugin-import": "^2.29.1",
     "gh-pages": "^3.1.0",
     "htmlhint": "^1.0.0",
     "jest": "^27.0.1",
     "jsdom": "^22.1.0",
     "opener": "^1.5.1",
-    "serve": "^14.2.1"
+    "serve": "^14.2.1",
+    "supertest": "^6.3.4"
   },
   "engines": {
     "node": ">=16.x"
@@ -35,5 +38,8 @@
     "createdAt": "2024-01-24T14:12:42.297Z",
     "version": "8.0.0",
     "commit": "df14b61576f0321119b1906ba3544ab94fc2b1a1"
+  },
+  "dependencies": {
+    "axios": "^1.6.8"
   }
 }

src/Components/ApiModal.js

@@ -0,0 +1,53 @@
+import { navigateTo } from "../router.js";
+import { setApiKey, removeApiKey } from "../lib/apiKey.js";
+
+export const ApiModal = (redirectUrl) => {
+  //console.log(element)
+  const modalApiKey = document.createElement("dialog");
+  modalApiKey.id = "modalApiKey";
+  const modalContent = document.createElement("div");
+  modalApiKey.innerHTML = `
+
+        <input type="text" id="ApiKey" name="ApiKey" placeholder="Ingresa tu API KEY" />
+        <button data-testid="button-send" id="button-send">Enviar</button>
+        <button data-testid="button-back-home" id="button-back-home">Cerrar</button>
+        <button data-testid="button-clear" id="button-clear">Limpiar</button>
+    `;
+  modalApiKey.appendChild(modalContent);
+
+  const buttonSendChat = modalApiKey.querySelector("#button-send");
+  const buttonBackHome = modalApiKey.querySelector("#button-back-home");
+
+  buttonSendChat.addEventListener("click", () => {
+    //console.log("enviar funciona");
+    //const nameUser = modalApiKey.querySelector("#nameUser").value;
+    const apiKeyValue = modalApiKey.querySelector("#ApiKey").value;
+    //console.log(ApiKey)
+
+    if (apiKeyValue === "" || apiKeyValue.length <= 50 || apiKeyValue.length >= 55) {   
+      alert("Ingrese una clave válida");
+      return;
+    }
+
+    setApiKey(apiKeyValue);
+    navigateTo(redirectUrl);
+    modalApiKey.style.display = 'none';
+    modalApiKey.close();
+  }
+  );
+
+  buttonBackHome.addEventListener("click", () => {
+    //console.log ("regresar funcionando");
+    modalApiKey.close();
+    modalApiKey.style.display = 'none';
+  });
+
+  const buttonClear = modalApiKey.querySelector("#button-clear")
+  //console.log("funciona");
+  buttonClear.addEventListener("click", () => {
+    removeApiKey();
+    modalApiKey.querySelector("#ApiKey").value = '';
+  })
+
+  return modalApiKey;
+};

src/Components/ButtonChat.js

@@ -0,0 +1,17 @@
+import { ApiModal } from "./ApiModal.js";
+
+export const createBtnChat = () => {
+  const btnChat = document.createElement("button");
+  btnChat.id = "button-chat";
+  btnChat.className = "button-chat";
+  btnChat.textContent = "CHAT";
+  btnChat.addEventListener("click", () => {
+    //console.log("funciona");
+    const modalApiKey = ApiModal();
+    document.body.appendChild(modalApiKey);
+    modalApiKey.showModal();
+  });
+  return btnChat;
+};
+
+

src/Components/Footer.js

@@ -0,0 +1,9 @@
+export const footer = () => {
+  const footer = document.createElement("footer");
+  footer.id = "footer"
+  footer.innerHTML = `
+      <h4> Desarrolladoras: Raiza Gatica y Elizabeth Patiño/ Laboratoria </h4>
+      `;
+
+  return footer;
+};

src/Components/Header.js

@@ -0,0 +1,11 @@
+export const header = () => {
+  const header = document.createElement("header");
+  header.id = "header"
+  header.innerHTML = `
+  <img src="./data/img/banner_escritoras.png">
+    <h1>EL MUNDO A TRAVÉS DE GRANDES ESCRITORAS</h1>
+      `;
+
+  return header;
+};
+

src/Components/Individual.js

@@ -0,0 +1,119 @@
+import { communicateWithOpenAI } from "./../lib/openAIApi.js";
+import data from "../data/dataset.js";
+import { navigateTo } from "../router.js";
+
+export const individual = (element) => {
+  // console.log(element);
+  // Filtrar datos basados en el elemento pasado como argumento
+  const writer = data.find(item => item.id === element.id);
+  //console.log(writer);
+
+  const individualView = document.createElement('div');
+  const individualChat = document.createElement("div");
+
+  individualView.appendChild(individualChat);
+
+  const genMess = document.createElement("div");
+  genMess.className = "genMess";
+
+  individualChat.innerHTML = `
+    <div class="container-chat-ind">
+      <div class="credentialWriter">
+        <div class="writer-img">
+          <img src="${writer.imageUrl}"/>
+        </div>
+        <div class="nameWriter"> 
+          <h1 class="nameWriterc">${writer.name}</h1>
+        </div>
+        <div class="description-writer">
+          <p>${writer.description}</p>
+        </div>
+      </div>
+
+      <div class="chatI"></div>
+    </div>
+
+    <div class="container-Buttoms-chat">
+      <button id="buttonchatGrupalI">Chat grupal</button>
+      <button id="buttonBackHomeChatI">Regresar</button>
+    </div>
+  `;
+
+  const chat = individualChat.querySelector(".chatI");
+  chat.appendChild(genMess);
+
+  const chatInput = document.createElement("div");
+  chatInput.className = "chat-inputI";
+  chatInput.innerHTML = `
+    <textarea id="userInputI" placeholder="Escribe tu mensaje..."></textarea>
+    <button id="SendButtomChatI">Enviar</button>
+  `;
+  chat.appendChild(chatInput);
+
+  function messageUser() {
+    const newMess = individualChat.querySelector("#userInputI");
+    const newMessTxt = newMess.value;
+
+    if (newMessTxt !== "") {
+      const userNameContainer = document.createElement("div");
+      userNameContainer.className = "userNameContainer";
+      const userName = document.createElement("div");
+      userName.className = "userNameI";
+      userName.innerHTML = "Usuaria:";
+      userNameContainer.appendChild(userName);
+      genMess.appendChild(userName);
+
+      const containernewMess = document.createElement("div");
+      containernewMess.className = "messUserI";
+      const viewMess = document.createElement("p");
+      viewMess.className = "messageI";
+      viewMess.innerHTML = newMessTxt;
+      containernewMess.appendChild(viewMess);
+      genMess.appendChild(containernewMess);
+      newMess.value = "";
+
+      //llamada a OpenAi
+      communicateWithOpenAI(newMessTxt, writer)
+        .then(response => {
+          const nameSystem = document.createElement("div");
+          nameSystem.className = "nameSystem";
+          nameSystem.innerHTML = `${writer.name}:`;
+
+          const systemMessage = document.createElement("div");
+          systemMessage.className = "systemMessage";
+          systemMessage.innerHTML = response.choices[0].message.content;
+          genMess.appendChild(nameSystem);
+          genMess.appendChild(systemMessage);
+        })
+        /* .catch(error => {
+          console.error("error al comunicarse con la IA", error)
+        }); */
+    }
+  }
+
+  const SendButtomChat = chatInput.querySelector("#SendButtomChatI");
+  SendButtomChat.addEventListener("click", () => {
+    messageUser();
+    //console.log("funciona");
+  })
+
+  const userInput = chatInput.querySelector("#userInputI");
+  userInput.addEventListener("keydown", (event) => {
+    if (event.key === 'Enter') {
+      messageUser();
+    }
+  })
+
+  const buttonBackHomeChat = individualChat.querySelector("#buttonBackHomeChatI");
+  buttonBackHomeChat.addEventListener("click", () => {
+    window.location.href = "index.html";
+  });
+
+  const buttonchatGrupal = individualChat.querySelector("#buttonchatGrupalI");
+  buttonchatGrupal.addEventListener("click", () => {
+    navigateTo('/group');
+  })
+
+  return individualView;
+}
+

src/Components/NotFound.js

@@ -0,0 +1,16 @@
+export const notFound = () => {
+  const notFoundElement = document.createElement("div");
+  notFoundElement.id = "notFound";
+  notFoundElement.innerHTML = `
+    <h1> NOT FOUND </h1>
+    <img class="error-image" src="./data/img/error_404.jpeg"> <br>
+    <button id="button-goHome">Regresar</button> <br>
+  `;
+
+  const buttonGoHome = notFoundElement.querySelector("#button-goHome");
+  buttonGoHome.addEventListener("click", () => {
+    window.location.href = "index.html";
+  });
+
+  return notFoundElement;
+};

src/Components/RenderItems.js

@@ -0,0 +1,37 @@
+import { ApiModal } from "./ApiModal.js";
+
+export const renderItems = (data) => {
+
+  const list = document.createElement("ul");
+  data.forEach(element => {
+    const itemList = document.createElement("li");
+    const itemContainer = document.createElement("dl");
+    itemList.classList.add("card");
+
+    itemContainer.innerHTML = `
+        <img src=${element.imageUrl} alt=${element.name}/><br>
+        <dd itemprop="name">${element.name}</dd><br>
+        <dd itemprop="DescripciónC"> ${element.shortDescription}</dd><br>
+        <dt> Nacionalidad:</dt><dd itemprop="country">${element.facts.countryNacimiento}</dd>
+        <dt>Género literario:</dt><dd itemprop="genero">${element.facts.mainField}</dd> <br>
+     `;
+
+    itemContainer.setAttribute("itemscope", "");
+    itemContainer.setAttribute("itemtype", "escritoras");
+    itemList.setAttribute("itemtype", "https://schema.org/Person");
+    list.setAttribute("itemtype", "https://schema.org/Person");
+
+    itemList.appendChild(itemContainer);
+    list.appendChild(itemList);
+
+    itemList.addEventListener("click", () => {
+      const redirectUrl = `/escritoras?id=${element.id}`;
+      const apiModal = ApiModal(redirectUrl);
+      document.body.appendChild(apiModal);
+      apiModal.showModal();
+    });
+
+  });
+
+  return list;
+};