master
Noan07 2 years ago
parent 2c0442b045
commit f05a1a0d14

@ -19,10 +19,13 @@ export const getPostsDisc = (num) => {
return axios return axios
.get(`${process.env.REACT_APP_API_URL}api/post/`) .get(`${process.env.REACT_APP_API_URL}api/post/`)
.then((res) => { .then((res) => {
console.log("test"); let currentTime = new Date().getTime();
let array = res.data.sort((a, b) => b.likers.length - a.likers.length); let array = res.data.filter(post => {
let postTime = new Date(post.createdAt);
return (currentTime - postTime) / (1000 * 60 * 60) < 24
});
array = array.sort((a, b) => b.likers.length - a.likers.length);
array = array.slice(0, num); array = array.slice(0, num);
console.log(array);
dispatch(setPostData(array)); dispatch(setPostData(array));
}) })
.catch((err) => console.log(err)) .catch((err) => console.log(err))

@ -10,33 +10,43 @@ const AjoutLien = () => {
const [displayAdd, setDisplayAdd] = useState(false); const [displayAdd, setDisplayAdd] = useState(false);
const [lien, setLien] = useState(""); const [lien, setLien] = useState("");
const [description, setDescription] = useState(""); const [description, setDescription] = useState("");
const [tag, setTag] = useState('');
const [tags, setTags] = useState([]);
const dispatch = useDispatch(); const dispatch = useDispatch();
const handleSubmit = (e) => {
e.preventDefault();
setTags([...tags, tag]);
setTag('');
}
const handlePost = async () => { const handlePost = async () => {
if(isValidUrl(lien)) if(isValidUrl(lien)){
if ((description || lien) ){ if ((description || lien) && tags.length > 0){
putData(); putData();
dispatch(getPosts()); dispatch(getPosts());
cancelPost(); cancelPost();
setDisplayAdd(false); setDisplayAdd(false);
window.location.reload(); window.location.reload();
}else { }else {
alert("Veuillez compléter tous les champs.") alert("Veuillez compléter tous les champs et ajouter au moins un tag.")
}
}else{
alert("Veuillez saisir un lien valide.")
} }
else{
alert("Ce n'est pas lien!")
}
}; };
const cancelPost = () => { const cancelPost = () => {
setDescription(""); setDescription("");
setLien(""); setLien("");
setTags([]);
}; };
const putData = async() => { const putData = async() => {
axios axios
.post(`${process.env.REACT_APP_API_URL}api/post/`, { postedId: userData._id, message: description, lien: lien} .post(`${process.env.REACT_APP_API_URL}api/post/`, { postedId: userData._id, message: description, lien: lien, tags: tags}
) )
.then((res) => { .then((res) => {
// if (res.data.errors) { // if (res.data.errors) {
@ -95,6 +105,19 @@ const AjoutLien = () => {
/> />
</div> </div>
<input
type="text"
value={tag}
onChange={e => setTag(e.target.value)}
/>
<i type="submit" onClick={handleSubmit}>Add Tag</i>
<ul>
{tags.map(t => (
<li key={t}>{t}</li>
))}
</ul>
<div id="newPoste-buttonForm"> <div id="newPoste-buttonForm">
<div> <div>
<button onClick={() => setDisplayAdd(false)} className="newPoste-btn-cancel" >retour</button> <button onClick={() => setDisplayAdd(false)} className="newPoste-btn-cancel" >retour</button>

@ -11,55 +11,6 @@ import { addPost, getPosts } from "../actions/post.actions";
const Navbar = () => { const Navbar = () => {
const uid = useContext( UidContext ); const uid = useContext( UidContext );
const userData = useSelector((state) => state.user.user);
const [displayAdd, setDisplayAdd] = useState(false);
const [lien, setLien] = useState("");
const [description, setDescription] = useState("");
const dispatch = useDispatch();
const handlePost = () => {
if ((description || lien) ){
const data = new FormData();
data.append('postedId', userData._id);
data.append('message', description);
data.append('lien', lien);
//console.log("test",data);
putData(data);
console.log(data);
cancelPost();
setDisplayAdd(false)
}else {
alert("Veuillez compléter tous les champs.")
}
};
const putData = async(data) => {
axios
.post(`${process.env.REACT_APP_API_URL}api/post/`, { postedId: userData._id, message: description, lien: lien}
)
.then((res) => {
console.log(data,"test");
// if (res.data.errors) {
// dispatch(setPostError({payload: res.data.errors }));
// } else {
// dispatch(setPostError({payload: "" }));
// }
})};
const cancelPost = () => {
setDescription("");
setLien("");
};
const isValidUrl = (url) => {
try {
new URL(url);
return true;
}catch {
return false;
}
}
const removeCookie = (key) => { const removeCookie = (key) => {
if(window !== "undefined"){ if(window !== "undefined"){
@ -111,7 +62,7 @@ const Navbar = () => {
<li className="navbar-item"> <li className="navbar-item">
<NavLink to={`/Profil/${uid}`} className="navbar-link"> <NavLink to={`/Profil/${uid}`} className="navbar-link">
<i className="fas fa-user navbar-icon"></i> <i className="fas fa-user navbar-icon"></i>
<span className="navbar-title">Me</span> <span className="navbar-title">Profil</span>
</NavLink> </NavLink>
</li> </li>
<li className="navbar-item"> <li className="navbar-item">

@ -10,17 +10,14 @@ const NewPoste = ({ post }) => {
<div className="newPoste-form-popup" id="newPoste-popupFormulaireCreationPoste"> <div className="newPoste-form-popup" id="newPoste-popupFormulaireCreationPoste">
<form action="/action_page.php" className="newPoste-form-container"> <form action="/action_page.php" className="newPoste-form-container">
<div className="newPoste-input"> <div className="newPoste-input">
{/* <label for="lien">Lien:</label> */}
<input type="text" name="lien" required /> <input type="text" name="lien" required />
</div> </div>
<div className="newPoste-input"> <div className="newPoste-input">
{/* <label for="description">Description:</label> */}
<textarea name="description" row="250"></textarea> <textarea name="description" row="250"></textarea>
</div> </div>
<div id="newPoste-buttonForm"> <div id="newPoste-buttonForm">
<div> <div>
{/* <button type="button" className="newPoste-btn-cancel" onclick="closeForm()">retour</button> */}
<button type="button" className="newPoste-btn-cancel" >retour</button> <button type="button" className="newPoste-btn-cancel" >retour</button>
</div> </div>
<div> <div>

@ -6,35 +6,40 @@ import CoeurPlein from '../../assets/img/coeursPlein.png';
import { likePost, unlikePost } from '../../actions/post.actions'; import { likePost, unlikePost } from '../../actions/post.actions';
const ButtonLike = ( { post } ) => { const ButtonLike = ( { post } ) => {
const [liked, setLiked] = useState(false); const [liked, setLiked] = useState(false);
const uid = useContext(UidContext); const uid = useContext(UidContext);
const dispatch = useDispatch(); const dispatch = useDispatch();
const like = () => {
dispatch(likePost(post._id, uid))
setLiked(true);
};
const unlike = () => {
dispatch(unlikePost(post._id, uid))
setLiked(false);
};
useEffect(() => {
if (post.likers.includes(uid)) setLiked(true);
else setLiked(false);
}, [uid, post.likers, liked]);
return ( const like = (e) => {
<div> e.preventDefault();
{uid && liked === false && ( dispatch(likePost(post._id, uid));
<img src={Coeur} onClick={like} alt="like" /> setLiked(true);
)} };
{uid && liked && (
<img src={CoeurPlein} onClick={unlike} alt="unlike" /> const unlike = (e) => {
)} e.preventDefault();
</div> dispatch(unlikePost(post._id, uid));
); setLiked(false);
};
useEffect(() => {
if (post.likers.includes(uid)) {
setLiked(true);
} else {
setLiked(false);
}
}, [uid, post.likers, liked]);
return (
<div>
{uid && liked === false && (
<img src={Coeur} onClick={like} alt="like" />
)}
{uid && liked && (
<img src={CoeurPlein} onClick={unlike} alt="unlike" />
)}
</div>
);
}; };
export default ButtonLike; export default ButtonLike;

@ -13,13 +13,11 @@ const DisplayPosts = ( {type} ) => {
const loadMore = () => { const loadMore = () => {
if (window.innerHeight + document.documentElement.scrollTop + 1 > document.scrollingElement.scrollHeight){ if (window.innerHeight + document.documentElement.scrollTop + 1 > document.scrollingElement.scrollHeight){
setLoadPost(true); setLoadPost(true);
setCount(count + 5);
} }
} }
useEffect(() => { useEffect(() => {
while(postsData== null){
}
if (loadPost) { if (loadPost) {
if(type === "discover"){ if(type === "discover"){
dispatch(getPostsDisc(count)); dispatch(getPostsDisc(count));
@ -28,7 +26,6 @@ const DisplayPosts = ( {type} ) => {
dispatch(getPosts(count)); dispatch(getPosts(count));
} }
setLoadPost(false); setLoadPost(false);
setCount(count + 5);
} }
window.addEventListener('scroll', loadMore); window.addEventListener('scroll', loadMore);
return () => window.removeEventListener('scroll',loadMore); return () => window.removeEventListener('scroll',loadMore);
@ -37,7 +34,7 @@ const DisplayPosts = ( {type} ) => {
return ( return (
<div> <div>
<ul> <ul>
{!isEmpty(postsData[0]) && {!isEmpty(postsData) && !isEmpty(postsData[0]) &&
postsData.map((post) => { postsData.map((post) => {
return <Post post={post} key={post._id}/> return <Post post={post} key={post._id}/>
})} })}

@ -35,7 +35,6 @@ const LinkPreview = ({ link }) => {
</a> </a>
</div> </div>
<p>{preview.description}</p>
</> </>
); );
} }
@ -46,8 +45,6 @@ const Post = ( { post } ) => {
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const usersData = useSelector((state) => state.users.users); const usersData = useSelector((state) => state.users.users);
const userData = useSelector((state) => state.user.user); const userData = useSelector((state) => state.user.user);
const [updated,setUpdate] = useState(false);
const [message, setMessage] = useState(null);
const [comments, setComments] = useState(false); const [comments, setComments] = useState(false);
@ -78,7 +75,6 @@ const Post = ( { post } ) => {
<div id="basPoste"> <div id="basPoste">
<div id="like"> <div id="like">
<ButtonLike post={post}/> <ButtonLike post={post}/>
{/* <img src="coeurs.png"/> */}
<div>{post.likers.length}</div> <div>{post.likers.length}</div>
</div> </div>
<div id="commentaire"> <div id="commentaire">

@ -11,7 +11,6 @@ const FollowHandler = ( { idToFollow , type } ) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const handleFollow = (e) => { const handleFollow = (e) => {
axios.patch(`${process.env.REACT_APP_API_URL}api/user/follow/` + userData._id, {idToFollow: idToFollow}) axios.patch(`${process.env.REACT_APP_API_URL}api/user/follow/` + userData._id, {idToFollow: idToFollow})
.then((res) => { .then((res) => {
//dispatch(setUserToFollowData({payload: {idToFollow}})); //dispatch(setUserToFollowData({payload: {idToFollow}}));
@ -19,10 +18,10 @@ const FollowHandler = ( { idToFollow , type } ) => {
.catch((err) => console.log(err)); .catch((err) => console.log(err));
setIsFollowed(true); setIsFollowed(true);
e.preventDefault(); e.preventDefault();
//window.location.reload();
}; };
const handleUnFollow = (e) => { const handleUnFollow = (e) => {
axios.patch(`${process.env.REACT_APP_API_URL}api/user/unfollow/` + userData._id, {idToUnFollow: idToFollow}) axios.patch(`${process.env.REACT_APP_API_URL}api/user/unfollow/` + userData._id, {idToUnFollow: idToFollow})
.then((res) => { .then((res) => {
// dispatch(setUserToUnFollowData({payload: {idToFollow}})); // dispatch(setUserToUnFollowData({payload: {idToFollow}}));

@ -1,43 +1,52 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import Navbar from '../components/Navbar'; import Navbar from '../components/Navbar';
import Post from '../components/Post/Post';
import { isEmpty } from '../components/Utils';
const SearchBar = () => { const SearchBar = () => {
const [searchValue, setSearchValue] = useState(""); const [searchValue, setSearchValue] = useState("");
const [searchUsers, setSearchUsers] = useState(true); const [searchUsers, setSearchUsers] = useState(true);
const [searchPosts, setSearchPosts] = useState(false); const [searchPosts, setSearchPosts] = useState(false);
const [searchResults, setSearchResults] = useState([]); const [searchResults, setSearchResults] = useState([]);
const postsData = useSelector((state) => state.post.post); const posts = useSelector((state) => state.post.post);
const usersData = useSelector((state) => state.users.users); const users = useSelector((state) => state.users.users);
function handleSearch() {
const input = searchValue.toLowerCase();
console.log("Recherche pour : " + input);
const filteredResultsUsers = usersData.filter(function(item) { const filteredResultsPosts = posts.filter(function(item) {
return item.pseudo.toLowerCase().indexOf(input) !== -1; return item.tags.some(function(tag) {
return tag.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
}); });
});
const filteredResultsPosts = postsData.filter(function(item) { const filteredResultsUsers = users.filter(function(item) {
return item.message.toLowerCase().indexOf(input) !== -1; return item.pseudo.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
}); });
if(searchUsers)
setSearchResults(filteredResultsUsers);
if(searchPosts) function handleSearch() {
setSearchResults(filteredResultsPosts);
console.log(searchResults);
const input = searchValue.toLowerCase();
console.log("Recherche pour : " + input);
if(searchUsers && searchValue !== "")
setSearchResults(filteredResultsUsers);
else if(searchPosts && searchValue !== "")
setSearchResults(filteredResultsPosts);
} }
const handleModals = (e) => { const handleModals = (e) => {
if (e.target.id === "Users") { if (e.target.id === "Users") {
setSearchUsers(true); setSearchUsers(true);
setSearchPosts(false); setSearchPosts(false);
if(searchValue !== "")
setSearchResults(filteredResultsUsers);
} else { } else {
setSearchPosts(true); setSearchPosts(true);
setSearchUsers(false); setSearchUsers(false);
if(searchValue !== "")
setSearchResults(filteredResultsPosts);
} }
}; };
@ -45,36 +54,38 @@ const SearchBar = () => {
<div> <div>
<Navbar /> <Navbar />
<main> <main>
<div className="search-main">
<form> <form>
<input type="text" value={searchValue} onChange={(e) => setSearchValue(e.target.value)} placeholder="Rechercher..." /> <input type="text" value={searchValue} onChange={(e) => setSearchValue(e.target.value)} placeholder="Rechercher..." />
<button type="button" onClick={handleSearch}>Rechercher</button> <button type="button" onClick={handleSearch}>Rechercher</button>
</form> </form>
<div class="divMenu"> <div className="divMenuSearch">
<nav role="navigation" class="navProfil"> <nav role="navigation" className="navProfil">
<ul class="navItemsProfil"> <ul className="navItemsProfil">
<li class="navItemProfil"> <li className="navItemProfil">
<a class="navLinkProfil" onClick={handleModals} id="Users" >Utilisateur</a> <a className="navLinkProfil" onClick={handleModals} id="Users" >Utilisateur</a>
</li> </li>
<li class="navItemProfil"> <li className="navItemProfil">
<a class="navLinkProfil" onClick={handleModals} id="Posts" >Postes</a> <a className="navLinkProfil" onClick={handleModals} id="Posts" >Postes</a>
</li> </li>
</ul>
</nav>
{ searchUsers &&
<ul className='listUsers'>
{searchResults.map((result) => (
<li key={result.pseudo}>{result.pseudo}</li>
))}
</ul>
}
{ searchPosts &&
<ul className='listUsers'>
{searchResults.length !== 0 && searchResults.map((result) => (
<Post post={result} key={result._id}/>
))}
</ul> </ul>
</nav> }
</div>
</div> </div>
{ searchUsers &&
<ul>
{searchResults.map((result) => (
<li key={result.pseudo}>{result.pseudo}</li>
))}
</ul>
}
{ searchPosts &&
<ul>
{searchResults.map((result) => (
<li key={result.message}>{result.message}</li>
))}
</ul>
}
</main> </main>
</div> </div>
); );

@ -3,7 +3,8 @@ import { createSlice } from "@reduxjs/toolkit";
export const postSlice = createSlice({ export const postSlice = createSlice({
name: "post", name: "post",
initialState: { initialState: {
post : null, post : {
},
}, },
reducers: { reducers: {
setPostData: (state,action) => { setPostData: (state,action) => {
@ -11,14 +12,13 @@ export const postSlice = createSlice({
console.log(state.post) console.log(state.post)
}, },
setPostLikeData: (state,action) => { setPostLikeData: (state,action) => {
console.log(...state.post);
if (state.post._id === action.payload.postId) { if (state.post._id === action.payload.postId) {
return { state.post = {
...state.post, ...state.post,
likers: [action.payload.userId, ...state.post.likers], likers: [action.payload.userId, ...state.post.likers],
}; };
} }
return state.post; console.log(state.post)
}, },
setPostUnLikeData: (state,action) => { setPostUnLikeData: (state,action) => {
console.log(state); console.log(state);

@ -26,6 +26,7 @@ $color-10:#dddddd;
padding: 0; padding: 0;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
max-height: 100%;
} }
body{ body{

@ -12,7 +12,7 @@
@import'./component/postNouvelleAffichage'; @import'./component/postNouvelleAffichage';
@import './pages/searchBar';
@import './component/notif'; @import './component/notif';
@import './pages/trends'; @import './pages/trends';

@ -172,6 +172,7 @@
.navLinkProfil, .navLinkProfil,
.navLinkProfil:link, .navLinkProfil:link,
.navLinkProfil:visited, .navLinkProfil:visited,

@ -0,0 +1,23 @@
.search-main{
width: 75%;
display: flex;
align-items: center;
flex-direction: column;
}
.divMenuSearch {
background-color: #cccaca;
width: 100%;
height: 500px;
border-radius: 25px;
}
.listUsers{
padding-top: 20px;
li {
list-style: none;
padding-left: 10%;
padding-bottom: 15px;
}
}

@ -91,18 +91,14 @@ module.exports.signIn = async (req, res) => {
console.log("signin: ",req.body); console.log("signin: ",req.body);
const {email, password} = req.body const {email, password} = req.body
try { try {
console.log("test user1 ");
const user = await UserModel.login({email, password}); const user = await UserModel.login({email, password});
console.log("test user2 ");
//creation d'un token //creation d'un token
const token = createToken(user._id); const token = createToken(user._id);
console.log("test user3 ");
res.cookie('jwt', token, { httpOnly: true, maxAge}); res.cookie('jwt', token, { httpOnly: true, maxAge});
console.log("test user4 ");
res.status(200).json({ user: user._id}); res.status(200).json({ user: user._id});
} }

@ -24,6 +24,7 @@ module.exports.createPost = async (req, res) => {
message: req.body.message, message: req.body.message,
lien: req.body.lien, lien: req.body.lien,
likers: [], likers: [],
tags: req.body.tags,
comments: [], comments: [],
}); });

@ -16,11 +16,9 @@ module.exports.getNotif = async (req, res) => {
module.exports.userInfo = (req, res) => { module.exports.userInfo = (req, res) => {
if (!ObjectID.isValid(req.params.id)) if (!ObjectID.isValid(req.params.id))
return res.status(400).send("ID unknown : " + req.params.id); return res.status(400).send("ID unknown : " + req.params.id);
console.log('userinfo:',req.params.id)
UserModel.findById(req.params.id, (err, docs) => { UserModel.findById(req.params.id, (err, docs) => {
if (!err) { if (!err) {
console.log('doc:',docs)
res.send(docs); res.send(docs);
} }
else else

@ -21,6 +21,10 @@ const postSchema = new mongoose.Schema(
type: [String], type: [String],
required: true required: true
}, },
tags: {
type: [String],
required: true
},
comments: { comments: {
type: [ type: [
{ {
@ -31,7 +35,7 @@ const postSchema = new mongoose.Schema(
} }
], ],
required: true, required: true,
}, }
}, },
{ {
timestamps: true, timestamps: true,

@ -84,7 +84,6 @@ userSchema.pre("save", async function(next) {
userSchema.statics.login = async function({email, password}) { userSchema.statics.login = async function({email, password}) {
const user = await this.findOne( {email} ); const user = await this.findOne( {email} );
console.log(user);
if (user) { if (user) {
const auth = await bcrypt.compare(password, user.password); const auth = await bcrypt.compare(password, user.password);
if (auth) { if (auth) {

Loading…
Cancel
Save