Skip to content

Commit 23d73bb

Browse files
FlorianCohenJolyFlorianCohenJoly
committed
start create blog
1 parent eefe5ae commit 23d73bb

File tree

4 files changed

+252
-20
lines changed

4 files changed

+252
-20
lines changed

‎client/src/Routes.js

+22-19
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,35 @@ import Navbar from "./components/navbar/Navbar";
55

66
import Home from "./pages/home/Home.js";
77
import Tuto from "./pages/blog/Tuto";
8+
import Blog from "./pages/blog/Blog";
9+
810

911
function RoutesProvider() {
10-
return (
11-
<BrowserRouter>
12-
<Routes>
13-
{/* EXAMPLES */}
14-
15-
{/* <Route path="/login" element={<Login />} /> */}
16-
{/* <Route path="/register" element={<Register />} /> */}
17-
{/* To Use the Navbar change Test by your page
12+
return (
13+
<BrowserRouter>
14+
<Routes>
15+
{/* EXAMPLES */}
16+
17+
{/* <Route path="/login" element={<Login />} /> */}
18+
{/* <Route path="/register" element={<Register />} /> */}
19+
{/* To Use the Navbar change Test by your page
1820
<Route path="/test" element={<Navbar element={<Test />} />} /> */}
1921

20-
{/*<Route path="/" element={<Navbar element={<Test/>}/>}/>*/}
21-
{/*<Route path="/test" element={<Navbar element={<Test/>}/>}/>*/}
22+
{/*<Route path="/" element={<Navbar element={<Test/>}/>}/>*/}
23+
{/*<Route path="/test" element={<Navbar element={<Test/>}/>}/>*/}
2224

23-
{/* Write here route that you don't need to be login*/}
25+
{/* Write here route that you don't need to be login*/}
2426

25-
<Route element={<PrivateRoutes />}>
26-
{/* Write here route that you need to be login*/}
27+
<Route element={<PrivateRoutes />}>
28+
{/* Write here route that you need to be login*/}
2729

28-
<Route path="/" element={<Home />} />
29-
<Route path="/tuto" element={<Tuto />} />
30-
</Route>
31-
</Routes>
32-
</BrowserRouter>
33-
);
30+
<Route path="/" element={<Home />} />
31+
<Route path="/tuto" element={<Tuto />} />
32+
<Route path="/blog" element={<Blog />} />
33+
</Route>
34+
</Routes>
35+
</BrowserRouter>
36+
);
3437
}
3538

3639
export default RoutesProvider;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default function SideBarModify({ open, toggleDrawerModify, deviceId }) {
3838
};
3939
try {
4040
const response = await axios.post(
41-
`http://localhost:5050/tutos/newtutos`,
41+
`http://localhost:5050/blog/newblog`,
4242
blog
4343
);
4444

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

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import { useEffect, useState } from "react";
2+
import axios from "axios";
3+
import ImgMediaCard from "../../components/blog/Card";
4+
import Box from "@mui/material/Box";
5+
import Grid from "@mui/material/Grid";
6+
import TutoSkeleton from "../../components/blog/TutoSkeleton";
7+
import TagFilter from "../../components/blog/TagFilter";
8+
import SearchBar from "../../components/blog/SearchBar";
9+
import { w3cwebsocket } from "websocket";
10+
import Button from "@mui/material/Button";
11+
import SideBarModify from "../../components/blog/NewBlog.js";
12+
import { Toaster } from "react-hot-toast";
13+
14+
function Blog() {
15+
const [blog, setBlog] = useState([]);
16+
const [blogId, setBlogId] = useState([]);
17+
const [loading, setLoading] = useState(true);
18+
const [openModify, setOpenModify] = useState(false);
19+
20+
useEffect(() => {
21+
(async () => {
22+
const ws = new w3cwebsocket("ws://localhost:5050");
23+
ws.onmessage = (message) => {
24+
const dataFromServer = JSON.parse(message.data);
25+
console.log("Got message from server ", dataFromServer);
26+
setBlog(dataFromServer);
27+
setLoading(false);
28+
};
29+
})();
30+
}, []);
31+
32+
// const getTutos = async () => {
33+
// const response = await axios.get("http://localhost:5050/tutos");
34+
// setTutos(response.data);
35+
// // console.log(response.data);
36+
// };
37+
38+
const toggleDrawerModify = (event, open) => {
39+
if (
40+
event &&
41+
event.type === "keydown" &&
42+
(event.key === "Tab" || event.key === "Shift")
43+
) {
44+
return;
45+
}
46+
setOpenModify(open);
47+
};
48+
49+
// const getTutosId = async () => {
50+
// const response = await axios.get("http://localhost:5050/tutos/id");
51+
// setTutosId(response.data);
52+
// // console.log(response.data);
53+
// };
54+
55+
// useEffect(() => {
56+
// getTutos();
57+
// getTutosId();
58+
// }, []);
59+
// <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
60+
// <Grid item xs={4}>
61+
// <Item>1</Item>
62+
// </Grid>
63+
// <Grid item xs={8}>
64+
// <Item>2</Item>
65+
// </Grid>
66+
//
67+
// </Grid>
68+
69+
return (
70+
<>
71+
<Toaster />
72+
<Box
73+
sx={
74+
{
75+
// display: 'flex', flexWrap: 'wrap', justifyContent: 'center'
76+
}
77+
}
78+
>
79+
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
80+
<Grid item xs={2}>
81+
<TagFilter />
82+
</Grid>
83+
<Grid
84+
item
85+
xs={10}
86+
// justifyContent="center" alignItems="flex-start"
87+
// spacing={2} columns={{xs: 4, sm: 8, md: 12}}
88+
>
89+
<Grid
90+
container
91+
direction={"column"}
92+
rowSpacing={1}
93+
columnSpacing={{ xs: 1, sm: 2, md: 3 }}
94+
>
95+
<Grid container item>
96+
<Grid item xs={10}>
97+
<SearchBar title={blog} />
98+
</Grid>
99+
<Grid item xs={2}>
100+
<Button
101+
variant="contained"
102+
color="primary"
103+
onClick={(e) => toggleDrawerModify(e, true)}
104+
>
105+
New blog
106+
</Button>
107+
<SideBarModify
108+
open={openModify}
109+
toggleDrawerModify={toggleDrawerModify}
110+
/>
111+
</Grid>
112+
</Grid>
113+
114+
<Grid
115+
container
116+
item
117+
xs={10}
118+
justifyContent="center"
119+
alignItems="flex-start"
120+
// spacing={2} columns={{xs: 4, sm: 8, md: 12}}
121+
>
122+
{/*{tutosId.length > 0*/}
123+
{/* ? tutosId.map((blogId) => <ImgMediaCard id={blogId} />)*/}
124+
{/* : Array.from(new Array(9)).map(() => <TutoSkeleton />)}*/}
125+
126+
{!loading
127+
? blog.map((blog) => (
128+
<ImgMediaCard
129+
image={blog.photo}
130+
title={blog.title}
131+
description={blog.description}
132+
key={blog.id}
133+
id={blog.id}
134+
like={blog.like}
135+
dislike={blog.dislike}
136+
/>
137+
))
138+
: Array.from(new Array(9)).map(() => <TutoSkeleton />)}
139+
140+
{/*<ImgMediaCard/>*/}
141+
{/*<ImgMediaCard/>*/}
142+
{/*<ImgMediaCard/>*/}
143+
{/*<ImgMediaCard/>*/}
144+
{/*<ImgMediaCard/>*/}
145+
{/*<ImgMediaCard/>*/}
146+
{/*<ImgMediaCard/>*/}
147+
{/*<ImgMediaCard/>*/}
148+
{/*<ImgMediaCard/>*/}
149+
{/*<ImgMediaCard/>*/}
150+
{/*<ImgMediaCard/>*/}
151+
{/*<TutoSkeleton/>*/}
152+
</Grid>
153+
</Grid>
154+
</Grid>
155+
</Grid>
156+
</Box>
157+
</>
158+
);
159+
}
160+
161+
export default Blog;

‎server/blog_back.js

+68
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,41 @@ module.exports = (app, db, ws) => {
2323
ws.on("request", (request) => {
2424
const connection = request.accept(null, request.origin);
2525

26+
connection
27+
? console.log("connection ok")
28+
: console.log("connection failed");
29+
30+
db.collection("blog_evenements").onSnapshot(
31+
(snapshot) => {
32+
const documents = snapshot.docs.map((doc) => ({
33+
id: doc.id,
34+
...doc.data(),
35+
}));
36+
connection.sendUTF(JSON.stringify(documents));
37+
},
38+
(err) => {
39+
console.log(err);
40+
}
41+
);
42+
43+
// db.collection("blog_evenements").onSnapshot(
44+
// (snapshot) => {
45+
// const documents = snapshot.docs.map((doc) => ({
46+
// id: doc.id,
47+
// ...doc.data(),
48+
// }));
49+
// connection.sendUTF(JSON.stringify(documents));
50+
// },
51+
// (err) => {
52+
// console.log(err);
53+
// }
54+
// );
55+
});
56+
57+
58+
ws.on("blogRequest", (request) => {
59+
const connection = request.accept(null, request.origin);
60+
2661
connection
2762
? console.log("connection ok")
2863
: console.log("connection failed");
@@ -39,8 +74,11 @@ module.exports = (app, db, ws) => {
3974
console.log(err);
4075
}
4176
);
77+
4278
});
4379

80+
81+
4482
// get all tutos
4583
// app.get("/tutos", async (req, res) => {
4684
// const snapshot = await db.collection("blog_tutos").get();
@@ -108,4 +146,34 @@ module.exports = (app, db, ws) => {
108146
});
109147

110148

149+
app.post("/blog/newblog", async (req, res) => {
150+
const { title, description, photo } = req.body;
151+
152+
153+
if (title == null || title == "") {
154+
return res.status(400).send("Title is required");
155+
}
156+
if (description == null || description == "") {
157+
return res.status(400).send("Description is required");
158+
}
159+
if (photo == null || photo == "") {
160+
return res.status(400).send("Photo is required");
161+
}
162+
163+
164+
try {
165+
await db.collection("blog_evenements").doc().set({
166+
167+
title: title,
168+
description: description,
169+
photo: photo,
170+
171+
});
172+
res.send("Document successfully written!");
173+
174+
} catch (err) {
175+
res.status(500).send(err);
176+
}
177+
});
178+
111179
};

0 commit comments

Comments
 (0)