# Implementare interfata utilizator
**Prerequisites:** All past steps
Acum ca avem un endpoint configurat, il putem conecta la o interfata pentru utilizatorii de pe internet.
## 1. Setups:
* In folderul /js adaugam folderul /components, pe acelasi nivel cu folderul /utils
* In folderul /components cream fisierele MainPage.jsx si InsertPage.jsx si initializam un function component pt fiecare
```javascript
// js/components/MainPage.jsx
export default function MainPage() {
return (
)
}
```
```javascript
// js/components/InsertPage.jsx
export default function InsertPage() {
return (
)
}
```
* In folderul /pages, vom modifica index.js si vom adauga componenta insert.jsx. In ele vom importa componentele definite mai sus pentru a fi desenate in pagina pe rutele /, respectiv /insert din aplicatia noastra web
```javascript
// pages/index.js
import MainPage from "@/js/components/MainPage";
export default function Home() {
return (
)
}
```
```javascript
// pages/insert.js
import InsertPage from "@/js/components/InsertPage";
export default function Insert() {
return (
)
}
```
* In fisierul tailwind.config.js mai adaugam o linie ('./js/components/\*\*/\*.{js,ts,jsx,tsx}') in content
```
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./js/components/**/*.{js,ts,jsx,tsx}'
],
.........
}
```
## 2. Pagina principala
Ca exemplu, vom construi o aplicatie care afiseaza curiozitati pe pagina principala (index). Curiozitatile sunt stocate in baza de date din cloud. Pe pagina /insert, utilizatorii pot introduce curiozitati in baza de date prin intermediul unui formular.
Pentru a adauga functionalitati si a stiliza pagina principala, accesam componenta MainPage - MainPage.jsx
* Pentru ca lista de curiozitati va fi adusa asincron din baza de date, definim un state gol in function component
* Accesam API-ul creat anterior si aducem curiozitatile atunci cand un utilizator acceseaza pagina
```javascript
// js/components/MainPage.jsx
import {useEffect, useState} from "react";
export default function MainPage() {
const [records, setRecords] = useState([]);
useEffect(() => {
try{
fetch('/api/records', {
method: 'GET',
})
.then(response => response.json())
.then(json => setRecords(json.data));
}
catch (error) {
console.log(error);
}
}, []);
return (
)
}
```
* Adaugam componente vizuale stilizate cu tailwind si afisam fiecare curiozitate folosind functia map.
* Adaugam si un buton prin care sa stergem o inregistrare din baza de date la click + functionalitatea aferenta
```javascript
// js/components/MainPage.jsx
import {useEffect, useState} from "react";
export default function MainPage() {
.......
const deleteRecord = (event) => {
event.preventDefault();
const id = event.target.id;
try {
fetch(`/api/records?id=${id}`, {
method: 'DELETE',
})
.then(response => response.json())
.then(json => {
setRecords(records.filter(record => record._id !== id));
});
}
catch (error) {
console.log(error);
}
}
return (
)
}
```
* Aplicatia arata acum astfel (dupa ce am introdus manual cateva date in BD):
## 3. Pagina /insert
* In componenta InsertPage introducem un formular cu 2 campuri si un buton de submit
```javascript
// js/components/InsertPage.jsx
export default function InsertPage() {
return (
Fun facts app
This is an app that showcases fun facts
)
}
```
* Introducem logica de introducere a datelor la click pe butonul submit
* La final, componenta InsertPage contine urmatorul cod:
```javascript
// js/components/InsertPage.jsx
export default function InsertPage() {
const insertRecord = (event) => {
event.preventDefault();
const title = document.getElementById("title").value;
const description = document.getElementById("description").value;
const data = {title, description};
fetch("/api/records", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
}).then(() => {
console.log("New record inserted");
document.getElementById("title").value = "";
document.getElementById("description").value = "";
});
}
return (
Fun facts app
This is an app that showcases fun facts
)
}
```
* Pagina /insert arata acum astfel:
* Trimitem totul in repository-ul remote git.
Acum ca avem o aplicatie functionala, o putem lansa pe internet folosing un serviciu in cloud!
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://gurita-alexandru.gitbook.io/cloud-computing-2023-simpre/seminar-2/implementare-interfata-utilizator.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.