Skip to content

Commit 117b00f

Browse files
su-equihuasu-equihua
authored
Merge pull request Laboratoria#8 from Susana-equihua/apikey-view
Apikey view completed; unit testing of the apikey storage functions has been completed
2 parents af5dcbf + 01a50df commit 117b00f

File tree

15 files changed

+345
-27
lines changed

15 files changed

+345
-27
lines changed

‎src/icons/home.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/icons/send-button.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎src/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Dataverse Chat</title>
77
<link rel="stylesheet" href="style.css" />
8+
<link rel="stylesheet" href="styles/apikey.css" />
9+
<link rel="stylesheet" href="styles/IndividualChat.css">
810
<link rel="preconnect" href="https://fonts.googleapis.com" />
911
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1012
<link

‎src/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import Home from "./views/Home.js";
22
import { About } from "./views/About.js";
33
import { Error } from "./views/Error.js";
4-
import { ChatIndividual } from "./views/ChatIndividual.js";
4+
import { IndividualChat } from "./views/ChatIndividual.js";
55
import { setRootEl, setRoutes, onURLChange } from "./router.js";
6+
import { ApiKey } from "./views/ViewApikey.js";
67

78
// En este archivo definirás tus rutas e importarás los componentes que vas a renderizar.
89
const routes = {
910
"/": Home,
1011
"/about": About,
1112
"/error": Error,
12-
"/chat": ChatIndividual,
13+
"/chat": IndividualChat,
14+
"/apikey":ApiKey,
1315
};
1416

1517
setRoutes(routes); /* routes are being saved in ROUTES */

‎src/lib/apiKey.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const getApiKey = (key) => {
2+
return localStorage.getItem(key);
3+
// Implementa el código para obtener la API KEY desde Local Storage
4+
};
5+
6+
// Implementa el código para guardar la API KEY en Local Storage
7+
export const setApiKey = (key, value) => {
8+
return localStorage.setItem(key, value);
9+
};

‎src/lib/openAIApi.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/*import { getApiKey } from './apiKey.js';
2+
3+
export const communicateWithOpenAI = (messages) => {
4+
//Aquí es donde debes implementar la petición con fetch o axios
5+
};*/

‎src/router.js‎

Lines changed: 48 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ let rootEl; /* stores the paths of index.js */
33

44
export const setRootEl = (el) => {
55
rootEl = el;
6-
//console.log("Imprimiendo rootEl dentro de la función: ", rootEl);
76
return rootEl;
87
};
98

@@ -18,37 +17,72 @@ export const setRoutes = (routes) => {
1817
}
1918
//*? Assign ROUTES
2019
ROUTES = routes; /* update ROUTES with the "routes" argument of index.js */
21-
/*console.log(
22-
"Imprimendo rutas de ROUTES dentro de la función: ",
23-
ROUTES
24-
);*/
2520
return ROUTES;
2621
};
2722

28-
//const queryStringToObject = (queryString) => {
29-
//*? Convert query string to URLSearchParams
30-
//*? Convert URLSearchParams to an object
31-
//*? Return the object
32-
//};
33-
//console.log("Esta imprimiendo la search actual: ", window.location.search);
23+
const queryStringToObject = (queryString) => {
24+
//*? Convert query string to URLSearchParams
25+
const params = new URLSearchParams(queryString);
26+
//*? Convert URLSearchParams to an object
27+
const objParams = Object.fromEntries(params);
28+
//*? Return the object
29+
return objParams
30+
};
31+
32+
//console.log(queryStringToObject(window.location.search));
3433

35-
const renderView = (pathname/*, props = {}*/) => {
34+
const renderView = (pathname , props = {}) => {
3635
//*?Clear the root element
3736
rootEl.innerHTML = "";
3837
//*?Find the correct view to render
3938
const viewsFunctions= ROUTES[pathname];
4039
//*? In case not found render the error view
4140
if (!viewsFunctions) {
4241
rootEl.appendChild(ROUTES["/error"]()); /* Parentheses are placed to call the function */
43-
} else rootEl.appendChild(viewsFunctions()); /* Parentheses are placed to call the function */
42+
} else rootEl.appendChild(viewsFunctions(props)); /* Parentheses are placed to call the function */
4443
};
4544

4645
export const onURLChange = (location) => {
4746
const path = location.pathname; /* calling the window pathname */
4847
//to-do: search params (objeto)
49-
renderView(path); /* connecting onURLChange to renderView */
48+
const search = queryStringToObject(window.location.search);
49+
renderView(path, search); /* connecting onURLChange to renderView */
5050
};
5151

52+
export const navigateTo = (pathname, props={}) => {
53+
// update window history with pushState
54+
const newPush = new window.history.pushState(props)
55+
// render the view with the pathname and props
56+
return renderView(pathname, props)
57+
}
58+
59+
60+
61+
/*export const navigateTo = (pathname, props={}) => { //navogateTo tiene 3 propósitos: Recibir una ruta, evía un nuevo estado histórico y representa la nueva vista
62+
// Agrega una nueva vista al historial
63+
const nuevaVista = new window.history.pushState(props)
64+
// new es una palabra reservada para crear algo nuevo
65+
// render the view with the pathname and props
66+
return renderView(pathname, props)
67+
}*/
68+
69+
70+
71+
72+
73+
74+
75+
76+
77+
78+
79+
80+
81+
82+
83+
84+
85+
5286
//TODO: Testing the conditional for error throwing
5387
/* const hola = 'Good morning'
5488
try {

‎src/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ h2 {
4545
margin: auto;
4646
}
4747
/*ENCABEZADO */
48-
header {
48+
.homeHeader {
4949
height: 100vh;
5050
background: radial-gradient(
5151
92.68% 92.68% at 50% 69.48%,
@@ -98,7 +98,7 @@ header .text-header {
9898
}
9999

100100
/*MAIN*/
101-
main {
101+
.mainContenidoPrincipal {
102102
width: 100%;
103103
background-color: #e4f3ff;
104104
}

‎src/styles/IndividualChat.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
#headerChat {
2+
background-color: black;
3+
color: white;
4+
width: 20em;
5+
height: 30em;
6+
}

‎src/styles/apikey.css‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
.apikeyContainer{
2+
width: 100vw;
3+
height: 100vh;
4+
display: flex;
5+
flex-direction: column;
6+
align-items: center;
7+
margin: 0;
8+
background: radial-gradient(
9+
92.68% 92.68% at 50% 69.48%,
10+
#12bbf0 17%,
11+
#0180cb 66%,
12+
#01387f 100%
13+
);
14+
}
15+
.apikeyHeader{
16+
margin: 2.3em;
17+
width: 100vw;
18+
display: flex;
19+
flex-direction: row;
20+
justify-content: space-around;
21+
/*border: 2px dashed red;*/
22+
margin-bottom: 10em;
23+
}
24+
.containerLogo{
25+
/*border: 2px dashed red;*/
26+
display: flex;
27+
flex-direction: row-reverse;
28+
align-items: center;
29+
gap: 0.7em;
30+
}
31+
.containerLogo h1{
32+
font-size: 1em;
33+
margin: 0;
34+
padding: 0;
35+
}
36+
#logoDisney{
37+
height: 2.188em ;
38+
}
39+
.btnHome{
40+
width: 2.6em;
41+
height: 2.6em;
42+
border: none;
43+
border-radius: 2em;
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
cursor: pointer;
48+
background: linear-gradient(90deg, #FF891B 17%, #FF9900 74%);
49+
}
50+
.apikeyForm{
51+
/*border: 2px dashed red;*/
52+
width: 100%;
53+
height: 40vh;
54+
display: flex;
55+
flex-direction: column;
56+
justify-content: space-around;
57+
align-items: center;
58+
}
59+
.tittleContainer{
60+
display: flex;
61+
justify-content: center;
62+
}
63+
.apikeyForm h1{
64+
width: 60%;
65+
font-size: 1.25em;
66+
text-align: center;
67+
}
68+
#inputApikey{
69+
width: 19.25em;
70+
height: 2.75em;
71+
padding: 0.8em;
72+
border-radius: 0.75em;
73+
border: 1px solid #D1D1D1;
74+
background: #FFFFFF;
75+
}
76+
.infoApi{
77+
text-align: center;
78+
color: #fff;
79+
font-size: 0.75em;
80+
}
81+
.infoApi a{
82+
color: #fff;
83+
font-size: 1em;
84+
}
85+
#apiClear{
86+
font-family: Poppins;
87+
font-size: 0.87em;
88+
font-weight: 600;
89+
color: #fff;
90+
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
91+
background: rgba(0, 71, 136, 1);
92+
width: 9.1em;
93+
height: 2.75em;
94+
padding: 10px 20px 10px 20px;
95+
border-radius: 0.93em;
96+
border: none;
97+
margin: 1em;
98+
cursor: pointer;
99+
100+
}
101+
#continue{
102+
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
103+
font-family: Poppins;
104+
font-size: 0.87em;
105+
font-weight: 600;
106+
color: #fff;
107+
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
108+
background: linear-gradient(90deg, #FF1658 20%, #EA3659 70%);
109+
width: 9.1em;
110+
height: 2.75em;
111+
padding: 10px 20px 10px 20px;
112+
border-radius: 0.93em;
113+
border: none;
114+
margin: 1em;
115+
cursor: pointer;
116+
}
117+
118+
119+
120+
/*PC*/
121+
@media (min-width: 1024px) {
122+
.containerLogo h1{
123+
font-size: 1.45em;
124+
}
125+
#logoDisney{
126+
height: 2.6em ;
127+
}
128+
.apikeyForm{
129+
height: 60vh;
130+
131+
}
132+
.apikeyHeader{
133+
margin-bottom: 3em;
134+
}
135+
.infoApi{
136+
font-size: 0.9em;
137+
}
138+
.infoApi a{
139+
font-size: 1em;
140+
}
141+
}

0 commit comments

Comments
 (0)