Skip to content

Commit 9de6f8e

Browse files
FlorianCohenJolyFlorianCohenJoly
committed
Merge branch 'feat/blog/creation' of https://github.com/Kiks-Note/KiksNote into feat/blog/creation
2 parents 23d73bb + f7994cf commit 9de6f8e

File tree

7 files changed

+91
-72
lines changed

7 files changed

+91
-72
lines changed

‎client/src/components/blog/Card.js

+43-36
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default function ImgMediaCard({
2121
like,
2222
dislike,
2323
id,
24+
type,
2425
}) {
2526
// console.log(id);
2627

@@ -45,41 +46,47 @@ export default function ImgMediaCard({
4546
// }, []);
4647

4748
return (
48-
<Grid item xs={2} sm={4} md={5}>
49-
<Card sx={{ maxWidth: 380, m: 2 }}>
50-
<CardMedia
51-
component="img"
52-
// alt="green iguana"
53-
height="10"
54-
image={image}
55-
// image="https://cdn.code.daypilot.org/image/big/7sca734yufgatkpbudmqro7tga/vue-resource-calendar-open-source.png"
56-
// sx={{maxHeight: 250}}
57-
/>
58-
<CardContent>
59-
<Typography gutterBottom variant="h5" component="div">
60-
{title}
61-
{/*yo*/}
62-
</Typography>
63-
<Typography variant="body2" color="text.secondary">
64-
{description}
65-
{/*sisi*/}
66-
</Typography>
67-
</CardContent>
68-
<CardActions>
69-
{like}
70-
<Checkbox
71-
icon={<ThumbUpOffAltIcon />}
72-
checkedIcon={<ThumbUpIcon />}
73-
/>
74-
{dislike}
75-
<Checkbox
76-
icon={<ThumbDownOffAltIcon />}
77-
checkedIcon={<ThumbDownAltIcon color={"error"} />}
78-
/>
79-
<Comment tutoId={id} />
80-
<Button size="small">Commencer</Button>
81-
</CardActions>
82-
</Card>
83-
</Grid>
49+
<>
50+
{type === "tuto" ? (
51+
<Grid item xs={2} sm={4} md={5}>
52+
<Card sx={{ maxWidth: 380, m: 2 }}>
53+
<CardMedia
54+
component="img"
55+
// alt="green iguana"
56+
height="10"
57+
image={image}
58+
// image="https://cdn.code.daypilot.org/image/big/7sca734yufgatkpbudmqro7tga/vue-resource-calendar-open-source.png"
59+
// sx={{maxHeight: 250}}
60+
/>
61+
<CardContent>
62+
<Typography gutterBottom variant="h5" component="div">
63+
{title}
64+
{/*yo*/}
65+
</Typography>
66+
<Typography variant="body2" color="text.secondary">
67+
{description}
68+
{/*sisi*/}
69+
</Typography>
70+
</CardContent>
71+
<CardActions>
72+
{like}
73+
<Checkbox
74+
icon={<ThumbUpOffAltIcon />}
75+
checkedIcon={<ThumbUpIcon />}
76+
/>
77+
{dislike}
78+
<Checkbox
79+
icon={<ThumbDownOffAltIcon />}
80+
checkedIcon={<ThumbDownAltIcon color={"error"} />}
81+
/>
82+
<Comment tutoId={id} />
83+
<Button size="small">Commencer</Button>
84+
</CardActions>
85+
</Card>
86+
</Grid>
87+
) : (
88+
<h1>Blog</h1>
89+
)}
90+
</>
8491
);
8592
}

‎client/src/components/blog/Comment.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import DialogActions from '@mui/material/DialogActions';
55
import DialogContent from '@mui/material/DialogContent';
66
import DialogContentText from '@mui/material/DialogContentText';
77
import DialogTitle from '@mui/material/DialogTitle';
8-
import {useEffect, useRef, useState} from "react";
8+
import { useEffect, useRef, useState } from "react";
99
import axios from "axios";
1010
import DisplayComment from "./DisplayComment";
1111
import CreateComment from "./CreateComment";
1212

13-
export default function Comment({tutoId}) {
13+
export default function Comment({ tutoId }) {
1414
const [open, setOpen] = useState(false);
1515
const [scroll, setScroll] = useState('paper');
1616
const [allComments, setAllComments] = useState([]);
@@ -35,7 +35,7 @@ export default function Comment({tutoId}) {
3535
useEffect(() => {
3636
if (open) {
3737
getComments();
38-
const {current: descriptionElement} = descriptionElementRef;
38+
const { current: descriptionElement } = descriptionElementRef;
3939
if (descriptionElement !== null) {
4040
descriptionElement.focus();
4141
}
@@ -63,13 +63,13 @@ export default function Comment({tutoId}) {
6363
tabIndex={-1}
6464
>
6565
{allComments.map((comment) => (
66-
<DisplayComment comment={comment}/>
66+
<DisplayComment comment={comment} />
6767
))}
6868

6969
</DialogContentText>
7070
</DialogContent>
7171
<DialogActions>
72-
<CreateComment tutoId={tutoId}/>
72+
<CreateComment tutoId={tutoId} />
7373
<Button variant="outlined" onClick={handleClose}>Fermer</Button>
7474
</DialogActions>
7575
</Dialog>

‎client/src/components/blog/CreateComment.js

+28-11
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,62 @@ import TextField from '@mui/material/TextField';
33
import Dialog from '@mui/material/Dialog';
44
import DialogActions from '@mui/material/DialogActions';
55
import DialogContent from '@mui/material/DialogContent';
6-
import DialogContentText from '@mui/material/DialogContentText';
76
import DialogTitle from '@mui/material/DialogTitle';
8-
import {useState} from "react";
7+
import { useState } from "react";
8+
import axios from "axios";
99

10-
export default function CreateComment() {
10+
export default function CreateComment({ tutoId }) {
1111
const [open, setOpen] = useState(false);
12+
const [message, setMessage] = useState('');
1213

1314
const handleClickOpen = () => {
1415
setOpen(true);
1516
};
1617

18+
const handleTextFieldChange = (e) => {
19+
setMessage(e.target.value)
20+
}
21+
22+
const handlePublish = async () => {
23+
axios.post(`http://localhost:5050/blog/${tutoId}/comments`, {
24+
message
25+
})
26+
.then(function () {
27+
})
28+
.catch(function (error) {
29+
throw error;
30+
});
31+
32+
setOpen(false);
33+
};
34+
1735
const handleClose = () => {
1836
setOpen(false);
1937
};
2038

2139
return (
2240
<div>
23-
<Button variant="outlined" onClick={handleClickOpen} sx={{marginRight: 1}}>
41+
<Button variant="outlined" onClick={handleClickOpen} sx={{ marginRight: 1 }}>
2442
Ajouter un commentaire
2543
</Button>
2644
<Dialog open={open} onClose={handleClose} fullWidth={true} maxWidth={'sm'}>
2745
<DialogTitle>Nouveau commentaire</DialogTitle>
2846
<DialogContent>
29-
<DialogContentText>
30-
Partagez votre avis sur ce tutoriel
31-
</DialogContentText>
3247
<TextField
3348
autoFocus
3449
margin="dense"
35-
id="name"
36-
label="Email Address"
37-
type="email"
50+
id="message"
51+
label="Message"
52+
type="text"
3853
fullWidth
3954
variant="standard"
55+
onChange={handleTextFieldChange}
56+
value={message}
4057
/>
4158
</DialogContent>
4259
<DialogActions>
4360
<Button onClick={handleClose}>Annuler</Button>
44-
<Button onClick={handleClose}>Publier</Button>
61+
<Button onClick={handlePublish}>Publier</Button>
4562
</DialogActions>
4663
</Dialog>
4764
</div>

‎client/src/components/blog/DisplayComment.js

+5-15
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,24 @@ import ListItemAvatar from '@mui/material/ListItemAvatar';
66
import Avatar from '@mui/material/Avatar';
77
import Typography from '@mui/material/Typography';
88

9-
export default function DisplayComment({comment}) {
10-
console.log(comment);
9+
export default function DisplayComment({ comment }) {
1110
return (
12-
<List sx={{width: '100%', bgcolor: 'background.paper'}}>
11+
<List sx={{ width: '100%', bgcolor: 'background.paper' }}>
1312
<ListItem alignItems="flex-start">
1413
<ListItemAvatar>
15-
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg"/>
14+
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
1615
</ListItemAvatar>
1716
<ListItemText
1817
primary="Nom de la personne"
1918
secondary={
2019
<>
2120
<Typography
22-
sx={{display: 'inline'}}
21+
sx={{ display: 'inline' }}
2322
component="span"
2423
variant="body2"
2524
color="text.primary"
2625
>
2726
{comment.content}
28-
— I'll be in your neighborhood doing errands this… Lorem ipsum dolor sit amet,
29-
consectetur
30-
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
31-
enim
32-
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
33-
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
34-
eu
35-
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
36-
officia deserunt mollit anim id est laborum.
3727
</Typography>
3828

3929
<Typography variant="body2" color="text.secondary">
@@ -43,7 +33,7 @@ export default function DisplayComment({comment}) {
4333
}
4434
/>
4535
</ListItem>
46-
<Divider variant="inset" component="li"/>
36+
<Divider variant="inset" component="li" />
4737
</List>
4838
);
4939
}

‎client/src/components/blog/NewTuto.js

Whitespace-only changes.

‎client/src/pages/blog/Tuto.js

+1
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@ function Tuto() {
133133
id={blog.id}
134134
like={blog.like}
135135
dislike={blog.dislike}
136+
type="tuto"
136137
/>
137138
))
138139
: Array.from(new Array(9)).map(() => <TutoSkeleton />)}

‎server/blog_back.js

+9-5
Original file line numberDiff line numberDiff line change
@@ -109,11 +109,15 @@ module.exports = (app, db, ws) => {
109109
res.send(snapshot.docs.map((doc) => doc.data()));
110110
});
111111

112-
// app.post("/blog/:id/comments", async (req, res) => {
113-
// const snapshot = await db.collection('blog_tutos').doc(req.params.id).collection("comment").add(req.body);
114-
// res.send(snapshot.data());
115-
// });
116-
112+
//post a new comment on a tutorial
113+
app.post("/blog/:id/comments", async (req) => {
114+
await db.collection('blog_tutos').doc(req.params.id).collection('comment').add({
115+
'content': req.body.message,
116+
'date': new Date(),
117+
'user_id': 12,
118+
'user_status': 'etudiant'
119+
});
120+
});
117121

118122
app.post("/tutos/newtutos", async (req, res) => {
119123
const { title, description, photo } = req.body;

0 commit comments

Comments
 (0)