From b2b2a91f9ad1d5b9c967b523ac1f6999da729da7 Mon Sep 17 00:00:00 2001 From: lisettevirginia Date: Wed, 14 Aug 2024 10:49:40 -0500 Subject: [PATCH 1/6] =?UTF-8?q?se=20arreglo=20un=20error=20ortogr=C3=A1fic?= =?UTF-8?q?o=20y=20soluci=C3=B3n=20del=20error=20del=20apikey?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 2 +- src/views/chatIndividual.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main.js b/src/main.js index 5e55ce97..34f2a9dd 100644 --- a/src/main.js +++ b/src/main.js @@ -1,2 +1,2 @@ -import { ApiKey } from './views/ApiKey'; +// import { ApiKey } from './views/ApiKey'; //marcia nos dijo que colocaramos el import aquí \ No newline at end of file diff --git a/src/views/chatIndividual.js b/src/views/chatIndividual.js index b1235c49..39910486 100644 --- a/src/views/chatIndividual.js +++ b/src/views/chatIndividual.js @@ -1,6 +1,6 @@ export function ChatIndividual(props) { const viewEl = document.createElement('div'); - viewEl.textContent = '¡Este es el chatINdividual!'; + viewEl.textContent = '¡Este es el chat Individual!'; return viewEl; } From eb149d08a4ea938e62839c17dcaa643a95c9b511 Mon Sep 17 00:00:00 2001 From: lisettevirginia Date: Wed, 14 Aug 2024 22:08:31 -0500 Subject: [PATCH 2/6] correcciones en las paginas de vistas y cambio del nombre del archivo error --- src/index.html | 22 +++++++------ src/index.js | 36 +++++---------------- src/router.js | 63 +++++++++---------------------------- src/views/ApiKey.js | 11 +++++-- src/views/PageError.js | 7 +++++ src/views/chatIndividual.js | 10 ++++-- src/views/error.js | 6 ---- src/views/home.js | 7 +++-- 8 files changed, 62 insertions(+), 100 deletions(-) create mode 100644 src/views/PageError.js delete mode 100644 src/views/error.js diff --git a/src/index.html b/src/index.html index cbbf4283..614df7d7 100644 --- a/src/index.html +++ b/src/index.html @@ -1,11 +1,13 @@ - - - - - - -
- - - + + + + Dataverse Chat + + +
+ +
+ + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e90a3b48..4727c4d1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,16 +1,16 @@ -import { Home } from './views/home'; -import { ApiKey } from './views/ApiKey'; -import { ChatIndividual } from './views/chatIndividual'; -import { Error } from './views/error'; -import { setRootEl, setRoutes, onURLChange } from './router.js'; -import { CharacterList } from './components/CharacterList.js'; -import { Statistics } from './components/Statistics.js'; +import { Home } from './src/views/Home'; +import { ApiKey } from './src/views/ApiKey'; +import { ChatIndividual } from './src/views/ChatIndividual'; +import { ErrorPage } from './src/views/ErrorPage'; +import { setRootEl, setRoutes, onURLChange } from './src/router.js'; + +document.getElementById('root').textContent = 'Prueba de contenido'; const routes = { '/': Home, '/apikey': ApiKey, '/chat': ChatIndividual, - '/error': Error + '/error': ErrorPage }; setRoutes(routes); @@ -24,26 +24,6 @@ window.addEventListener('popstate', () => { onURLChange(window.location); }); -// Function to handle filtering and sorting in SPA -function handleFiltersAndSorting() { - const familyFilter = document.querySelector('#family-filter').value; - const sortFilter = document.querySelector('#alfabetico').value; - - const characterList = CharacterList({ familyFilter, sortFilter }); - document.getElementById('root').appendChild(characterList); -} - -document.querySelector('#family-filter').addEventListener('change', handleFiltersAndSorting); -document.querySelector('#alfabetico').addEventListener('change', handleFiltersAndSorting); - -document.querySelector('#calcularEstadisticas').addEventListener('click', () => { - const characters = getCharacters(); - const stats = Statistics({ characters }); - document.getElementById('resultado-estadisticas').innerHTML = ''; - document.getElementById('resultado-estadisticas').appendChild(stats); -}); - - /* TODO: 1.- Definir rutas en router. diff --git a/src/router.js b/src/router.js index 778e632c..82c04d1c 100644 --- a/src/router.js +++ b/src/router.js @@ -1,58 +1,23 @@ +let rootEl; -let ROUTES = {}; -let rootEl = null; - -// Función para establecer el elemento raíz donde se renderizan las vistas -export const setRootEl = (el) => { +export function setRootEl(el) { rootEl = el; } -// Función para establecer las rutas -export const setRoutes = (routes) => { - if (typeof routes !== 'object') { - throw new Error('Las rutas deben ser un objeto'); - } - if (!routes['/error']) { - throw new Error('Las rutas deben definir una ruta /error'); - } - ROUTES = routes; -}; - -// Función para convertir los parámetros de búsqueda en un objeto -const queryStringToObject = (queryString) => { - const params = new URLSearchParams(queryString); - const obj = {}; - for (const [key, value] of params.entries()) { - obj[key] = value; - } - return obj; -} - -// Función para renderizar la vista basada en la ruta -const renderView = (pathname, props = {}) => { - if (rootEl) { - rootEl.innerHTML = ''; // Limpiar el elemento raíz - // Obtener la vista correspondiente o la vista de error - const View = ROUTES[pathname] || ROUTES['/error']; - // Renderizar la vista pasando los props - const viewEl = View(props); - rootEl.appendChild(viewEl); // Agregar la vista al DOM - } +export function setRoutes(routes) { + window.routes = routes; } -// Función para navegar a una nueva ruta -export const navigateTo = (pathname, props = {}) => { - // Actualizar el historial - window.history.pushState({}, '', pathname); - // Renderizar la vista correspondiente - renderView(pathname, props); +export function onURLChange(location) { + const path = location.pathname; + const route = window.routes[path] || window.routes['/error']; + const view = route(); + + rootEl.innerHTML = ''; // Limpia el contenedor antes de agregar la nueva vista + rootEl.appendChild(view); } -// Función para manejar cambios en la URL -export const onURLChange = (location) => { - const pathname = location.pathname; - // Convertir los parámetros de búsqueda en objeto - const searchParams = queryStringToObject(location.search); - // Renderizar la vista basada en la ruta y los parámetros de búsqueda - renderView(pathname, searchParams); +export function navigateTo(path) { + window.history.pushState({}, path, window.location.origin + path); + onURLChange(window.location); } diff --git a/src/views/ApiKey.js b/src/views/ApiKey.js index 97f65dba..33a6240b 100644 --- a/src/views/ApiKey.js +++ b/src/views/ApiKey.js @@ -1,7 +1,12 @@ //Crea un nuevo elemento div,le asigna texto como su contenido // y devuelve ese div para que se pueda utilizar en otras partes -export function ApiKey(props) { +export function ApiKey() { const viewEl = document.createElement('div'); - viewEl.textContent = '¡Este es el Api Key!'; + viewEl.innerHTML = ` +

Configuración de API Key

+

Ingresa tu clave API para acceder al chat.

+ + + `; return viewEl; -} +} \ No newline at end of file diff --git a/src/views/PageError.js b/src/views/PageError.js new file mode 100644 index 00000000..80ea0a0a --- /dev/null +++ b/src/views/PageError.js @@ -0,0 +1,7 @@ +export function ErrorPage() { // exportamos la función ErrorPage que devuelve un elemento HTML + const viewEl = document.createElement('div'); // Creamos un contenedor para la vista de error + viewEl.innerHTML = '

Error 404

¡Página no encontrada!

'; // Establecemos el contenido de la vista + return viewEl; // Retornamos el elemento creado +} + + diff --git a/src/views/chatIndividual.js b/src/views/chatIndividual.js index 39910486..112e93d6 100644 --- a/src/views/chatIndividual.js +++ b/src/views/chatIndividual.js @@ -1,6 +1,12 @@ -export function ChatIndividual(props) { +export function ChatIndividual() { const viewEl = document.createElement('div'); - viewEl.textContent = '¡Este es el chat Individual!'; + viewEl.innerHTML = ` +

Chat Individual

+

Aquí puedes chatear con un personaje seleccionado.

+
+ +
+ `; return viewEl; } diff --git a/src/views/error.js b/src/views/error.js deleted file mode 100644 index 85933e9a..00000000 --- a/src/views/error.js +++ /dev/null @@ -1,6 +0,0 @@ -export function Error(props) { - const viewEl = document.createElement('div'); - viewEl.textContent = '¡Este es el error!'; - return viewEl; -} - diff --git a/src/views/home.js b/src/views/home.js index 38e2a56f..9beef21d 100644 --- a/src/views/home.js +++ b/src/views/home.js @@ -1,5 +1,8 @@ -export function Home(props) { +export function Home() { const viewEl = document.createElement('div'); - viewEl.textContent = '¡Este es el home!'; + viewEl.innerHTML = ` +

Bienvenido al Dataverse Chat

+

Explora y conéctate con otros personajes.

+ `; return viewEl; } From 80053e36f5d81860dda97a3b36b7faa728aa5f37 Mon Sep 17 00:00:00 2001 From: lisettevirginia Date: Wed, 14 Aug 2024 23:08:32 -0500 Subject: [PATCH 3/6] creando nueva rama --- src/main.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 34f2a9dd..c0aa9918 100644 --- a/src/main.js +++ b/src/main.js @@ -1,2 +1,3 @@ // import { ApiKey } from './views/ApiKey'; -//marcia nos dijo que colocaramos el import aquí \ No newline at end of file +//marcia nos dijo que colocaramos el import aquí +//se creo una rama nueva y debo actualizar \ No newline at end of file From 045cc50c81e4c1f9bbc68b9cef16bd4dc733646e Mon Sep 17 00:00:00 2001 From: lisettevirginia Date: Thu, 15 Aug 2024 12:00:13 -0500 Subject: [PATCH 4/6] solucionado el error en index :) ya esta configurado el router y el spa y con esto culminamos hito 1 --- src/data/dataset.js | 2 +- src/index.html | 4 ++-- src/index.js | 24 ++++++++++++------------ src/lib/dataFunction.js | 11 +++++++++++ src/main.js | 3 +-- src/views/ApiKey.js | 3 ++- src/views/PageError.js | 4 ++-- src/views/chatIndividual.js | 4 ++-- src/views/home.js | 3 ++- 9 files changed, 35 insertions(+), 23 deletions(-) diff --git a/src/data/dataset.js b/src/data/dataset.js index 632aabb3..9a0d6bd6 100644 --- a/src/data/dataset.js +++ b/src/data/dataset.js @@ -1,4 +1,4 @@ -export const characters = [ +export default [ { "id": "daphne-bridgerton", "name": "Daphne Bridgerton", diff --git a/src/index.html b/src/index.html index 614df7d7..56d4b312 100644 --- a/src/index.html +++ b/src/index.html @@ -3,11 +3,11 @@ Dataverse Chat - +
- + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 4727c4d1..391b970c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,26 +1,26 @@ -import { Home } from './src/views/Home'; -import { ApiKey } from './src/views/ApiKey'; -import { ChatIndividual } from './src/views/ChatIndividual'; -import { ErrorPage } from './src/views/ErrorPage'; -import { setRootEl, setRoutes, onURLChange } from './src/router.js'; +import home from './views/home.js'; +import ApiKey from './views/ApiKey.js'; +import chatIndividual from './views/chatIndividual.js'; +import PageError from './views/PageError.js'; +import { setRootEl, setRoutes, onURLChange } from './router.js'; -document.getElementById('root').textContent = 'Prueba de contenido'; +const prueba = document.getElementById('root'); const routes = { - '/': Home, - '/apikey': ApiKey, - '/chat': ChatIndividual, - '/error': ErrorPage + "/": home, + "/ApiKey": ApiKey, + "/chatIndividual": chatIndividual, + "/PageError": PageError, }; setRoutes(routes); window.addEventListener("DOMContentLoaded", () => { - setRootEl(document.getElementById('root')); + setRootEl(prueba); onURLChange(window.location); }); -window.addEventListener('popstate', () => { +window.addEventListener("popstate", () => { onURLChange(window.location); }); diff --git a/src/lib/dataFunction.js b/src/lib/dataFunction.js index e69de29b..6b193fa6 100644 --- a/src/lib/dataFunction.js +++ b/src/lib/dataFunction.js @@ -0,0 +1,11 @@ +export const filterData = (data, filterBy, value) => { + return 'example'; +}; + +export const sortData = (data, sortBy, sortOrder) => { + return []; +}; + +export const computeStats = (data) => { + return []; +}; \ No newline at end of file diff --git a/src/main.js b/src/main.js index c0aa9918..34f2a9dd 100644 --- a/src/main.js +++ b/src/main.js @@ -1,3 +1,2 @@ // import { ApiKey } from './views/ApiKey'; -//marcia nos dijo que colocaramos el import aquí -//se creo una rama nueva y debo actualizar \ No newline at end of file +//marcia nos dijo que colocaramos el import aquí \ No newline at end of file diff --git a/src/views/ApiKey.js b/src/views/ApiKey.js index 33a6240b..b0406605 100644 --- a/src/views/ApiKey.js +++ b/src/views/ApiKey.js @@ -9,4 +9,5 @@ export function ApiKey() { `; return viewEl; -} \ No newline at end of file +} +export default ApiKey; \ No newline at end of file diff --git a/src/views/PageError.js b/src/views/PageError.js index 80ea0a0a..5470a990 100644 --- a/src/views/PageError.js +++ b/src/views/PageError.js @@ -1,7 +1,7 @@ -export function ErrorPage() { // exportamos la función ErrorPage que devuelve un elemento HTML +export function PageError() { // exportamos la función ErrorPage que devuelve un elemento HTML const viewEl = document.createElement('div'); // Creamos un contenedor para la vista de error viewEl.innerHTML = '

Error 404

¡Página no encontrada!

'; // Establecemos el contenido de la vista return viewEl; // Retornamos el elemento creado } - +export default PageError; diff --git a/src/views/chatIndividual.js b/src/views/chatIndividual.js index 112e93d6..1068278b 100644 --- a/src/views/chatIndividual.js +++ b/src/views/chatIndividual.js @@ -1,4 +1,4 @@ -export function ChatIndividual() { +export function chatIndividual() { const viewEl = document.createElement('div'); viewEl.innerHTML = `

Chat Individual

@@ -9,4 +9,4 @@ export function ChatIndividual() { `; return viewEl; } - +export default chatIndividual; diff --git a/src/views/home.js b/src/views/home.js index 9beef21d..7ae0f41a 100644 --- a/src/views/home.js +++ b/src/views/home.js @@ -1,4 +1,4 @@ -export function Home() { +export function home() { const viewEl = document.createElement('div'); viewEl.innerHTML = `

Bienvenido al Dataverse Chat

@@ -6,3 +6,4 @@ export function Home() { `; return viewEl; } +export default home; \ No newline at end of file From 298a55d3f183a2170414df8633e15b05a18207d5 Mon Sep 17 00:00:00 2001 From: lisettevirginia Date: Thu, 15 Aug 2024 12:05:56 -0500 Subject: [PATCH 5/6] solucionado el error en index :) ya esta configurado el router y el spa y con esto culminamos hito 1 --- src/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 34f2a9dd..7888c01a 100644 --- a/src/main.js +++ b/src/main.js @@ -1,2 +1,2 @@ // import { ApiKey } from './views/ApiKey'; -//marcia nos dijo que colocaramos el import aquí \ No newline at end of file +//marcia nos dijo que colocaramos el import aquí... \ No newline at end of file From 6a5e3166abb447cf36c25df64d4c4657ce576d46 Mon Sep 17 00:00:00 2001 From: lisettevirginia Date: Mon, 19 Aug 2024 13:53:58 -0500 Subject: [PATCH 6/6] Se agregaron las funciones del dataverse, y se hicieron las pruebas unitarias, todo funciona ok --- src/index.html | 12 +++++----- src/lib/dataFunction.js | 47 +++++++++++++++++++++++++++++++++--- test/dataFunction.spec.js | 50 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 100 insertions(+), 9 deletions(-) create mode 100644 test/dataFunction.spec.js diff --git a/src/index.html b/src/index.html index 56d4b312..4e89d607 100644 --- a/src/index.html +++ b/src/index.html @@ -1,12 +1,12 @@ - - - Dataverse Chat - - + + + + Dataverse Chat + +
-
diff --git a/src/lib/dataFunction.js b/src/lib/dataFunction.js index 6b193fa6..81bbbcfb 100644 --- a/src/lib/dataFunction.js +++ b/src/lib/dataFunction.js @@ -1,11 +1,52 @@ export const filterData = (data, filterBy, value) => { - return 'example'; + return data.filter(character => + character.facts[filterBy].toLowerCase() === value.toLowerCase() + ); }; + export const sortData = (data, sortBy, sortOrder) => { - return []; + // exportamos la función para ordenar personajes por nombre + //data:array de objeto(personajes),sortBy:campo del objeto,sortOrder: asc-des + const sortedCharacters = [...data]; + //crea un nuevo array(copia)que contiene todos los elementos del array + return sortedCharacters.sort((a, b) => { + //compara cada par de elementos y luego retorna el array ordenado. + if (sortOrder === 'asc') { + //si es excatamente igual se ordena de forma ascendente + return a[sortBy].localeCompare(b[sortBy]); + //método de las cadenas de texto en JS que compara dos cadenas de texto + } else if (sortOrder === 'des') { + //ademas si ... + return b[sortBy].localeCompare(a[sortBy]); + //comparacion a la inversa (desendente) + + } + }); }; export const computeStats = (data) => { - return []; + return data.reduce((estadisticas, character) => { + // Función para calcular estadísticas usando reduce + const sitSentimental = character.facts.sitSentimental.toLowerCase(); + //accede a la propiedad sitSentimental de un objeto character + //y almacena el resultado en la constante sitSentimental + + if (sitSentimental.includes("casad")) { + estadisticas.casados++; + } else if (sitSentimental.includes("solter")) { + estadisticas.solteros++; + } else if (sitSentimental.includes("viud")) { + estadisticas.viudos++; + } else if (sitSentimental.includes("amante")) { + estadisticas.amantes++; + } + return estadisticas; + }, { + casados: 0, + solteros: 0, + viudos: 0, + amantes: 0 + //contador con el que inicializan los contadores + }); }; \ No newline at end of file diff --git a/test/dataFunction.spec.js b/test/dataFunction.spec.js new file mode 100644 index 00000000..c69983c9 --- /dev/null +++ b/test/dataFunction.spec.js @@ -0,0 +1,50 @@ +// test/dataFunctions.spec.js +import data from '../src/data/dataset.js'; //importamos el dataset +import { filterData } from '../src/lib/dataFunction.js'; +import { sortData } from '../src/lib/dataFunction.js'; +import { computeStats } from '../src/lib/dataFunction.js'; + +describe('filterData', () => { + it('returns characters from the Bridgerton family', () => { + const result = filterData(data, 'familia', 'Bridgerton'); // Filtra la familia "Bridgerton": Utiliza filterData para obtener todos los personajes que pertenecen a la familia "Bridgerton". + const expectedCharacters = data.filter(character => character.facts.familia === 'Bridgerton'); // Esto filtra el dataset original para obtener el array de personajes que coinciden con la familia "Bridgerton" y compara con el resultado de filterData + expect(result).toEqual(expectedCharacters); // Compara ambos resultados + }); + + it('returns an empty array if no characters match the family', () => { //Filtra la familia "Featherington": Similar a la primera prueba, pero busca personajes de la familia "Featherington". + const result = filterData(data, 'familia', 'Featherington'); + const expectedCharacters = data.filter(character => character.facts.familia === 'Featherington'); //Si ningún personaje coincide con la familia, se espera que la función retorne un array vacío. + + expect(result).toEqual(expectedCharacters); + }); +}); + +const getExpectedSortedData = (data, order) => { + return [...data].sort((a, b) => { + if (order === 'asc') return a.name.localeCompare(b.name); + if (order === 'des') return b.name.localeCompare(a.name); + }); +}; + +describe('sortData', () => { + test('should sort data by name in ascending order', () => { + expect(sortData(data, 'name', 'asc')).toEqual(getExpectedSortedData(data, 'asc')); + }); + + test('should sort data by name in descending order', () => { + expect(sortData(data, 'name', 'des')).toEqual(getExpectedSortedData(data, 'des')); + }); +}); + +describe('computeStats', () => { + test('should compute correct statistics for sentiment status', () => { + const result = computeStats(data); + const expected = { + casados: 13, + solteros: 5, + viudos: 4, + amantes: 2, + }; + expect(result).toEqual(expected); + }); +}); \ No newline at end of file