From 00d9b2c9fa55c3e0926b456eb76b17b94ad9d45a Mon Sep 17 00:00:00 2001 From: Aymeric Chaumont <aymeric.chaumont@student-cs.fr> Date: Fri, 8 Jul 2022 17:04:37 +0200 Subject: [PATCH] udpated waiting time component to be time-dependent --- frontend/src/components/Comments.js | 22 ++++++++++++++++++---- frontend/src/components/WaitingTime.js | 24 ++++++++++++++---------- 2 files changed, 32 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/Comments.js b/frontend/src/components/Comments.js index 638e600..e22a023 100644 --- a/frontend/src/components/Comments.js +++ b/frontend/src/components/Comments.js @@ -11,14 +11,28 @@ export default function Comments({ place }) { 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 + 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> diff --git a/frontend/src/components/WaitingTime.js b/frontend/src/components/WaitingTime.js index 4d466ee..7c3bf24 100644 --- a/frontend/src/components/WaitingTime.js +++ b/frontend/src/components/WaitingTime.js @@ -5,26 +5,30 @@ import "../styles/WaitingTime.css"; export default function WaitingTime({ place }) { const url = process.env.REACT_APP_BASE_URL_BACK + "/" + place + "/waiting_time"; - const [post, setPost] = React.useState(null); + const [post, setPost] = React.useState([null, null]); React.useEffect(() => { - axios.get(url).then((response) => { - if (response.data < 60) { - setPost(0); - } else { - setPost(Math.round(response.data / 60)); - } + axios.get(url).then((res) => { + setPost(res.data); }); }, [url]); return ( <div className="parent"> - {post ? ( + {post[1] ? ( <div className="waiting-time"> - Temps d'attente estimé à <b>{post} minutes</b>. + Le RU ouvre aujourd'hui à{" "} + <b> + {String(post[0]).padStart(2, "0")}h{String(post[1]).padStart(2, "0")} + </b> + . + </div> + ) : post[0] ? ( + <div className="waiting-time"> + Le temps d'attente est estimé à <b>{post[0]} minutes.</b> </div> ) : ( - <div>Pas de données...</div> + <div className="waiting-time">Le RU est fermé pour aujourd'hui.</div> )} </div> ); -- GitLab