mirror of
https://git.roussel.pro/telecom-paris/pact.git
synced 2026-02-09 10:30:17 +01:00
connexion a l'api d'avis
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
3
code/interface_admin/config/reviewsApi.js
Normal file
3
code/interface_admin/config/reviewsApi.js
Normal file
@@ -0,0 +1,3 @@
|
||||
export const api = {
|
||||
HOST: 'localhost:8080'
|
||||
}
|
||||
32
code/interface_admin/hooks/review.js
Normal file
32
code/interface_admin/hooks/review.js
Normal 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;
|
||||
30
code/interface_admin/hooks/reviews.js
Normal file
30
code/interface_admin/hooks/reviews.js
Normal 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};
|
||||
}
|
||||
@@ -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}/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user