Skip to content

Commit 8d13dcb

Browse files
Blue-B-codeBlue-B-code
committed
update post setup
1 parent 1effac6 commit 8d13dcb

File tree

6 files changed

+81
-32
lines changed

6 files changed

+81
-32
lines changed

‎index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React</title>
6+
<title>Twitter</title>
87
</head>
98
<body>
109
<div id="root"></div>

‎src/App.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import "./app.css"
1+
import "./App.css"
22
import Layout from "./pages/Layout"
33
import Home from "./pages/Home"
44
import Login from "./pages/auth/login"
@@ -7,7 +7,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
77
import { useContext } from "react"
88
import { AppContext } from "./context/AppContext"
99
import Create from "./pages/posts/Create"
10-
import Show from "./pages/posts/show"
10+
import Show from "./pages/posts/Show"
1111
import Update from "./pages/posts/Update"
1212
function App() {
1313
const {user} = useContext(AppContext)

‎src/main.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import ReactDOM from "react-dom/client"
22
import AppProvider from "./context/AppContext.jsx"
3-
import './app.css'
3+
import './App.css'
44
import App from './App.jsx'
55

66
ReactDOM.createRoot(document.getElementById("root")).render(

‎src/pages/Home.jsx‎

Lines changed: 75 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,20 @@ import { AppContext } from "../context/AppContext"
33
import { Link } from "react-router-dom"
44

55
export default function Home() {
6-
const { user } = useContext(AppContext)
6+
const { user, token } = useContext(AppContext)
77
const [posts, setPosts] = useState([])
88
const [selectedPostId, setSelectedPostId] = useState(null)
99
const [comments, setComments] = useState([])
10-
const [likesCount, setLikesCount] = useState({})
1110
const [newComment, setNewComment] = useState("")
11+
const [newPost, setNewPost] = useState("")
12+
const [errors, setErrors] = useState({})
1213

1314
// Récupérer tous les posts
1415
async function getPosts() {
1516
const res = await fetch("/api/posts")
1617
const data = await res.json()
1718
setPosts(data)
19+
console.log(data)
1820
}
1921

2022
// Récupérer les likes pour un post donné
@@ -23,7 +25,14 @@ export default function Home() {
2325
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
2426
})
2527
const data = await res.json()
26-
setLikesCount(prev => ({ ...prev, [postId]: data.likes_count }))
28+
console.log(data)
29+
setPosts(prev =>
30+
prev.map(post =>
31+
post.id === postId
32+
? { ...post, likes_count: data.likes_count }
33+
: post
34+
)
35+
);
2736
}
2837

2938
// Liker un post
@@ -66,25 +75,70 @@ export default function Home() {
6675
}
6776
}
6877

78+
function truncateAtWord(text, maxLength = 100) {
79+
if (!text || typeof text !== "string") return "";
80+
81+
const normalized = text
82+
.trim()
83+
.replace(/\s+/g, " ");
84+
85+
if (normalized.length <= maxLength) {
86+
return normalized;
87+
}
88+
89+
let truncated = normalized.slice(0, maxLength);
90+
const lastSpaceIndex = truncated.lastIndexOf(" ");
91+
92+
if (lastSpaceIndex > 0) {
93+
truncated = truncated.slice(0, lastSpaceIndex);
94+
}
95+
96+
return `${truncated}...`;
97+
}
98+
99+
async function handleSubmitPost(e) {
100+
e.preventDefault();
101+
102+
const PostData = {
103+
title: truncateAtWord(newPost, 25),
104+
body: newPost
105+
};
106+
console.log(PostData)
107+
108+
try {
109+
const res = await fetch("/api/posts", {
110+
method: "POST",
111+
headers: {
112+
Authorization: `Bearer ${token}`,
113+
"Content-Type": "application/json"
114+
},
115+
body: JSON.stringify(PostData)
116+
});
117+
118+
const data = await res.json();
119+
setNewPost("")
120+
getPosts()
121+
122+
if (!res.ok || data.errors)
123+
setErrors(data.errors || { general: "Erreur lors de la création du post" });
124+
} catch {
125+
setErrors({ general: "Erreur réseau" });
126+
}
127+
}
128+
69129
useEffect(() => {
70130
getPosts()
71131
}, [])
72132

73-
useEffect(() => {
74-
posts.forEach(post => {
75-
fetchLikes(post.id)
76-
})
77-
}, [posts])
78-
79133
return (
80134
<div className="flex">
81135
{/* Contenu principal */}
82136
<div className="w-3/4 pr-4">
83137

84-
<form onSubmit={handleCommentSubmit} className="flex items-end gap-2 mb-4 bg-transparent px-3 py-2 ">
138+
<form onSubmit={handleSubmitPost} className="flex items-end gap-2 mb-4 bg-transparent px-3 py-2 ">
85139
<textarea
86-
value={newComment}
87-
onChange={(e) => setNewComment(e.target.value)}
140+
value={newPost}
141+
onChange={(e) => setNewPost(e.target.value)}
88142
placeholder={user ? `Alors, ${user.name}, quoi de neuf ?...` : "Connectez-vous pour publier un post..."}
89143
rows={2}
90144
className="flex-1 mx-3 resize-none bg-transparent text-gray-600 rounded-3xl placeholder-gray-400 overflow-hidden min-h-[32px] max-h-[120px] text-sm"
@@ -97,7 +151,7 @@ export default function Home() {
97151
{/* Bouton d'envoi (flèche) */}
98152
<button
99153
type="submit"
100-
disabled={!newComment.trim()}
154+
disabled={!newPost.trim()}
101155
className="text-gray-400 hover:text-white transition disabled:opacity-30 disabled:cursor-not-allowed pb-1"
102156
title="Envoyer"
103157
>
@@ -135,17 +189,13 @@ export default function Home() {
135189
</div>
136190
</div>
137191
<p className="break-words overflow-hidden">{post.body}</p>
138-
<div className="mt-2 text-sm text-gray-600 flex items-center gap-2">
139-
<button
140-
onClick={(e) => {
141-
e.stopPropagation()
142-
handleLike(post.id)
143-
}}
144-
className="text-red-500 hover:scale-105 transition"
145-
>
146-
❤️
147-
</button>
148-
<span>{likesCount[post.id] ?? 0}</span>
192+
<div className="group mt-2 text-sm text-gray-600 flex items-center gap-2"
193+
onClick={(e) => {
194+
e.stopPropagation()
195+
handleLike(post.id)
196+
}}>
197+
<span className="group-hover:scale-200 transition">❤️</span>
198+
<span>{post.likes_count ?? 0}</span>
149199
</div>
150200
</div>
151201
))
@@ -169,7 +219,7 @@ export default function Home() {
169219
<textarea
170220
value={newComment}
171221
onChange={(e) => setNewComment(e.target.value)}
172-
placeholder={user ? `${user.name}, laissez un commentaire...` : "Connectez-vous pour commenter..."}
222+
placeholder={user ? `${user.name}, Commentez...` : "Connectez-vous pour commenter..."}
173223
rows={2}
174224
className="flex-1 mx-3 resize-none bg-transparent text-gray-600 rounded-3xl placeholder-gray-400 outline-none border-none overflow-hidden min-h-[32px] max-h-[120px] text-sm"
175225
onInput={(e) => {

‎src/pages/Layout.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import "../app.css"
1+
import "../App.css"
22
import { Link, Outlet } from "react-router-dom"
33
import { useContext } from "react"
44
import { AppContext } from "../context/AppContext"

‎vite.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default defineConfig({
77
server: {
88
proxy: {
99
'/api': {
10-
target: 'http://127.0.0.1:8000',
10+
target: 'http://127.0.0.1:8001',
1111
changeOrigin: true,
1212
headers: {
1313
Accept: 'application/json',

0 commit comments

Comments
 (0)