Skip to content
Snippets Groups Projects
Commit 570d0a54 authored by Antoine Gaudron-Desjardins's avatar Antoine Gaudron-Desjardins
Browse files

implement post request for comment

parent 166fb93a
No related branches found
No related tags found
1 merge request!27implement post request for comment
Pipeline #43881 passed
from fastapi import APIRouter, Depends
from fastapi import APIRouter, Body, Depends
from sqlalchemy.orm import Session
from typing import List
......@@ -15,7 +15,7 @@ async def get_comments(place: str, page: int = 1, db: Session = Depends(get_db))
@router.post('/{place}/comments', response_model=schemas.Comment)
async def create_comment(place: str, comment: schemas.CommentBase, db: Session = Depends(get_db)):
async def create_comment(place: str, comment: schemas.CommentBase = Body(...), db: Session = Depends(get_db)):
return crud.create_comment(place, comment, db)
......
import React, { useEffect, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import axios from "axios";
import "../styles/Comments.css";
export default function Comments({ place }) {
const [comments, setComments] = useState([]);
const [newComment, setNewComment] = useState("");
const input = useRef();
const chat = useRef();
const Submit = (ev) => {
if (newComment.replace(/\s/g, "").length) {
ev.preventDefault();
axios
.post(`${process.env.REACT_APP_BASE_URL_BACK}/${place}/comments`, {
comment: newComment,
})
.then((res) => {
let update = comments.map((_, index) => (index ? comments[index - 1] : res.data));
update.push(comments[comments.length - 1]);
setComments(update);
updateValue("");
})
.catch((e) => {
console.log(e);
updateValue("");
});
}
};
const updateValue = (value) => {
setNewComment(value);
if (input.current) {
input.current.style.height = "";
input.current.style.height = `${input.current.scrollHeight + 5}px`;
}
};
useEffect(() => {
axios
......@@ -11,16 +44,41 @@ export default function Comments({ place }) {
setComments(res.data);
})
.catch((e) => console.log(e));
});
}, []);
useEffect(() => {
if (chat.current) {
let position = chat.current.scrollHeight - chat.current.clientHeight;
chat.current.scrollTop = position;
}
}, [chat.current]);
return (
<div style={{ width: "25%", overflowY: "scroll" }}>
<div id="comments-side-bar">
<div ref={chat} id="comments-scroll-bar">
{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} className="comment">
<div className="comment-content">{comment.comment}</div>
<div className="comment-date">
{comment.date
.split("T")
.reduce((date, hours) => ${hours.substring(0, 5)} le ${date}`)}
</div>
</div>
))}
</div>
<div id="comment-input-container">
<textarea
id="comments-input"
ref={input}
value={newComment}
onChange={(ev) => updateValue(ev.target.value)}
placeholder="Ajouter un commentaire..."
/>
<button id="comment-input-button" onClick={Submit}>
Envoyer
</button>
</div>
</div>
);
}
#comments-input {
resize: none;
display : block;
height: 2.4rem;
width: 100%;
max-height: 10rem;
overflow-x: hidden;
overflow-y: auto;
padding: 0.2rem;
border-radius: 0.5rem;
}
#comments-side-bar {
width: 25%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#comments-scroll-bar {
flex: 1;
display: flex;
flex-direction: column-reverse;
overflow-y: scroll;
}
.comment {
display: flex;
flex-direction: column;
border: 1px solid black;
border-radius: 0.5rem;
margin: 1rem;
padding: 0.5rem;
}
.comment-content {
margin-bottom: 0.5rem;
text-align: left;
word-wrap: break-word;
}
.comment-date {
font-size: 0.7rem;
align-self: flex-start;
margin-left: 0.2rem;
}
#comment-input-container {
display: flex;
width: 100%;
background-color: rgb(59, 137, 255);
}
#comment-input-button {
background-color: rgb(17, 2, 145);
color: white;
height: 2.4rem;
border-radius: 0.5rem;
padding: 0.2rem;
}
#comment-input-button:hover {
background-color: rgb(20, 0, 196);
}
\ No newline at end of file
.eiffel-container {
display: flex;
height: 100%;
justify-content: space-between;
}
#eiffel-main-page {
width: 75%;
width: 70%;
flex-direction: column;
justify-content: space-between;
align-content: center;
padding-left: 2rem
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment