clean css

backend/routers/comments.py

@@ -6,19 +6,19 @@ from db import schemas, crud
 from db.database import get_db
 
 
-router = APIRouter(prefix="/api/comments", tags=["comments"])
+router = APIRouter(prefix="/api", tags=["comments"])
 
 
-@router.get('/{place}', response_model=List[schemas.Comment])
+@router.get('/{place}/comments', response_model=List[schemas.Comment])
 async def get_comments(place: str, page: int = 1, db: Session = Depends(get_db)):
     return crud.get_comments(place, page, db)
 
 
-@router.post('/{place}', response_model=schemas.Comment)
+@router.post('/{place}/comments', response_model=schemas.Comment)
 async def create_comment(place: str, comment: schemas.CommentBase, db: Session = Depends(get_db)):
     return crud.create_comment(place, comment, db)
 
 
-@router.delete('/{id}', response_model=None)
+@router.delete('/comments/{id}', response_model=None)
 async def delete_comment(id: int, db: Session = Depends(get_db)):
     return crud.delete_comment(id, db)

backend/routers/news.py

@@ -6,19 +6,19 @@ from db import schemas, crud
 from db.database import get_db
 
 
-router = APIRouter(prefix="/api/news", tags=["news"])
+router = APIRouter(prefix="/api", tags=["news"])
 
 
-@router.get('/{place}', response_model=List[schemas.News])
+@router.get('/{place}/news', response_model=List[schemas.News])
 async def get_news(place: str, db: Session = Depends(get_db)):
     return crud.get_news(place, db)
 
 
-@router.post('/{place}', response_model=schemas.News)
+@router.post('/{place}/news', response_model=schemas.News)
 async def create_news(place: str, news: schemas.NewsBase, db: Session = Depends(get_db)):
     return crud.create_news(place, news, db)
 
 
-@router.delete('/{id}', response_model=None)
+@router.delete('/news/{id}', response_model=None)
 async def delete_news(id: int, db: Session = Depends(get_db)):
     return crud.delete_news(id, db)

frontend/.prettierrc

@@ -5,6 +5,7 @@
     "tabWidth": 2,
     "useTabs": false,
     "printWidth": 100,
-    "bracketSpacing": true
+    "bracketSpacing": true,
+    "endOfLine": "auto"
 }
  
\ No newline at end of file

frontend/src/components/Comments.js

+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+export default function Comments({ place }) {
+  const [comments, setComments] = useState([]);
+
+  useEffect(() => {
+    axios
+      .get(`${process.env.REACT_APP_BASE_URL_BACK}/${place}/comments`)
+      .then((res) => {
+        setComments(res.data);
+      })
+      .catch((e) => console.log(e));
+  });
+
+  return (
+    <div style={{ width: "25%", overflowY: "scroll" }}>
+      {comments.map((comment, index) => (
+        <div key={index} style={{ display: "flex", flexDirection: "column", border: "solid black 1px", borderRadius: "0.5rem", margin: "1rem", padding: "0.5rem" }}>
+          <div style={{marginBottom: "0.5rem", textAlign: "left"}}>{comment.comment}</div>
+          <div style={{fontSize: "0.7rem", alignSelf: "flex-start", marginLeft: "0.2rem"}}>{comment.date.split("T").reduce((date, hours) => `À ${hours.substring(0,5)} le ${date}`)}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/components/Footer.js

@@ -5,7 +5,7 @@ import "../styles/Footer.css";
 export default function Footer() {
   return (
     <footer className="footer">
-      <div className="py-4 bg-dark flex-shrink-0">
+      <div className="py-2 bg-dark">
         <div className="container text-center">
           Fait par{" "}
           <a href="https://viarezo.fr" className="VR-link">

frontend/src/components/Graph.js

@@ -57,16 +57,13 @@ export default function DailyGraph({
   };
 
   return (
-    <div>
+    <>
       <div className="graph-title">
         Temps d&apos;attente pour le prochain créneau d&apos;ouverture
       </div>
-      <div className="parent">
       <div className="graph">
         <ResponsiveContainer width="100%" height="100%">
           <AreaChart
-              width={500}
-              height={300}
             data={data}
             margin={{
               top: 5,
@@ -113,7 +110,6 @@ export default function DailyGraph({
           </AreaChart>
         </ResponsiveContainer>
       </div>
-      </div>
-    </div>
+    </>
   );
 }

frontend/src/components/WaitingTime.js

@@ -17,12 +17,15 @@ export default function WaitingTime({ place }) {
     });
   }, [url]);
 
-  if (!post) return null;
   return (
     <div className="parent">
+      {post ? (
         <div className="waiting-time">
           Temps d&apos;attente estimé à <b>{post} minutes</b>.
         </div>
+      ) : (
+        <div>Pas de données...</div>
+      )}
     </div>
   );
 }

frontend/src/components/index.js

@@ -3,3 +3,4 @@ export { default as Footer } from "./Footer";
 export { default as Timetable } from "./Timetable";
 export { default as WaitingTime } from "./WaitingTime";
 export { default as DailyGraph } from "./Graph";
+export { default as Comments } from "./Comments";

frontend/src/index.js

@@ -10,7 +10,7 @@ import "./styles/index.css";
 
 export default function App() {
   return (
-    <div className="App">
+    <div className="app">
       <Router>
         <Header />
         <div className="page">

frontend/src/styles/Footer.css

 .footer{
     width: 100%;
-    margin-top: 100px;
 }
 
 .VR-link{

frontend/src/styles/Graph.css

-.parent{
-    display: flex;
-    justify-content: center
-}
-
-
 .graph-title{
     display: inline-block;
     text-align: center;
 }
 
 .graph{
-    height: 20em;
-    width: 40em;
+    height: 100%;
+    width: 100%;
     display: inline-block;
 }
\ No newline at end of file

frontend/src/styles/Timetable.css

 .timetable{
     display: inline-block;
     border-radius: 5px;
-    width: 500px;
     text-align: center;
-    margin-top: 50px;
 }
\ No newline at end of file

frontend/src/styles/eiffel.css

+.eiffel-container {
+    display: flex;
+    height: 100%;
+}
+
+#eiffel-main-page {
+    width: 75%;
+    flex-direction: column;
+    justify-content: space-between;
+    align-content: center;
+}
\ No newline at end of file

frontend/src/styles/index.css

@@ -9,10 +9,10 @@ body, html {
   flex-direction: column;
   justify-content: space-between;
   width: 100vw;
-  min-height: 100%;
+  height: 100vh;
 }
 
 .page{
-  height: 100vh;
   flex: 1;
+  overflow: hidden;
 }

frontend/src/views/Eiffel.js

 import React from "react";
 
-import { DailyGraph, Timetable, WaitingTime } from "../components";
+import { DailyGraph, Timetable, WaitingTime, Comments } from "../components";
+
+import "../styles/eiffel.css";
 
 export default function Eiffel() {
   return (
-    <div>
+    <div className="eiffel-container">
+      <div className="eiffel-container" id="eiffel-main-page">
         <h2>RU Eiffel</h2>
         <WaitingTime place="eiffel" />
         <DailyGraph
@@ -31,5 +34,7 @@ export default function Eiffel() {
           }}
         />
       </div>
+      <Comments place={"eiffel"} />
+    </div>
   );
 }