connexion a l'api d'avis

This commit is contained in:
2023-02-12 14:58:39 +01:00
parent 4e807430d1
commit 096f056e41
12 changed files with 195 additions and 83 deletions

View File

@@ -3,7 +3,8 @@ import { Card, Col, Row, Table } from 'react-bootstrap';
import { BsPersonFill } from 'react-icons/bs';
import styles from '../styles/Avis.module.css'
export default function Avis({ age, sex, text, date, grade, gradeOther }) {
export default function Avis({review}) {
const {date, note_principale,notes_autres, commentaire, sexe_auteur, nom_source, age_auteur} = review;
return (
<Card>
<Card.Title>Avis</Card.Title>
@@ -14,9 +15,10 @@ export default function Avis({ age, sex, text, date, grade, gradeOther }) {
<BsPersonFill className={styles.personIcon} />
</Col>
<Col className='d-flex flex-column'>
<p>Age : {age}</p>
<p>Sexe : {sex}</p>
<p>Age : {age_auteur}</p>
<p>Sexe : {sexe_auteur}</p>
<p>Date de publication : {date}</p>
<p>Source : {nom_source}</p>
</Col>
</Row>
<Row>
@@ -31,12 +33,12 @@ export default function Avis({ age, sex, text, date, grade, gradeOther }) {
<tbody>
<tr>
<td>Général</td>
<td>{grade} / 10</td>
<td>{note_principale} / 10</td>
</tr>
{gradeOther.map(({ title, grade }) => {
return <tr key={title}>
<td>{title}</td>
<td>{grade}/10</td>
{notes_autres && notes_autres.map(({ critere, note }) => {
return <tr key={critere}>
<td>{critere}</td>
<td>{note}/10</td>
</tr>
})}
</tbody>
@@ -46,7 +48,7 @@ export default function Avis({ age, sex, text, date, grade, gradeOther }) {
<Card>
<Card.Header>Commentaire</Card.Header>
<Card.Body>
{text}
{commentaire}
</Card.Body>
</Card>
</Row>

View File

@@ -16,14 +16,16 @@ export default function AvisList({ avis }) {
<th>Date</th>
<th>Note globale</th>
<th>Commentaire</th>
<th>Source</th>
</tr>
</thead>
<tbody>
{avis.map(({ id, grade, comment, date }) => {
{avis.map(({ id, note_principale, commentaire, date, nom_source }) => {
return <tr onClick={() => handleClick(id)} key={id} className={styles.row}>
<td>{date}</td>
<td>{grade} / 10</td>
<td>{comment}</td>
<td>{note_principale} / 10</td>
<td>{commentaire}</td>
<td>{nom_source}</td>
</tr>
})}
</tbody>

View File

@@ -0,0 +1,3 @@
export const api = {
HOST: 'localhost:8080'
}

View File

@@ -0,0 +1,32 @@
import { useEffect, useState } from "react";
import { api } from "../config/reviewsApi";
function useReview(reviewId) {
const [review, setReview] = useState({});
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
async function fetchData(id) {
const response = await fetch('http://' + api.HOST + `/borne/get_review?id=${id}`)
if (response.ok) {
const jsonData = await response.json();
setReview(jsonData);
setLoading(false);
setError(false);
} else {
setError(true);
setLoading(false);
}
}
useEffect(() => {
if (reviewId) {
fetchData(reviewId);
}
}, [reviewId])
return { review, loading, error }
}
export default useReview;

View File

@@ -0,0 +1,30 @@
import { useEffect, useState } from "react";
import { api } from "../config/reviewsApi";
export default function useReviews() {
const [reviews, setReviews] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
async function fetchLastReviews(limit=100) {
setLoading(true);
const response = await fetch('http://' + api.HOST + '/borne/get_last_reviews', {
method: 'GET'
})
if(response.ok) {
let json = await response.json()
setReviews(json);
setError(false);
setLoading(false);
}else {
setLoading(false);
setError(true);
}
}
useEffect(() => {
fetchLastReviews();
}, [])
return {reviews, error, loading, fetchLastReviews};
}

View File

@@ -1,10 +1,12 @@
import { useRouter } from 'next/router';
import React from 'react'
import Avis from '../../components/Avis';
import useReview from '../../hooks/review';
export default function AvisPage() {
const router = useRouter();
const {id} = router.query;
const {review, loading, error} = useReview(id);
return (
<Avis age={20} sex={"f"} text={"dfjlkmksgflkgsjmdf"} grade={9} date={"2023-10-12 12:34"} gradeOther={[{title: "Propreté", grade: 8},{title: "Lorem ipsum", grade: 8}]}/>
!loading && !error && <Avis review={review}/>
)
}

View File

@@ -1,11 +1,13 @@
import React, { useEffect, useState } from 'react'
import { Card, Container, Form, Row, Table } from 'react-bootstrap'
import AvisList from '../../components/AvisList';
import useReviews from '../../hooks/reviews';
import styles from '../../styles/AvisListPage.module.css'
export default function AvisListPage() {
const [minGrade, setMinGrade] = useState(0);
const [maxGrade, setMaxGrade] = useState(10);
const {reviews, error, loading} = useReviews();
useEffect(() => {
if(minGrade > maxGrade) {
@@ -18,12 +20,6 @@ export default function AvisListPage() {
}
}, [minGrade])
const [avis, setAvis] = useState([
{ id: 0, date: "2023-02-11", grade: 10, comment: "lorem ipsum lorem ipsum" },
{ id: 1, date: "2023-02-11", grade: 10, comment: "Lorem ipsum lorem ipsum" },
{ id: 2, date: "2023-02-11", grade: 10, comment: "Lorem ipsum lorem ipsum" },
{ id: 3, date: "2023-02-11", grade: 10, comment: "Lorem ipsum lorem ipsum" }
])
return (
<Container fluid>
@@ -57,7 +53,7 @@ export default function AvisListPage() {
</Form>
</Row>
<Row>
<AvisList avis={avis} />
{!loading && !error && <AvisList avis={reviews} />}
</Row>
</Card.Body>
</Card>