محمود سعداوي2

تفضل ملفات المشروع hsoub.zip

السلام عليكم. أريد بإظهار جميع النبيهات عند عملية تسجيل الدخول. هذه التنبيهات قمت بتجسيدها في شكل مصفوفة alertsالتي تحتوي كائن alert ب: id المعرف الوحيد، msg: يوضح رسالة الخطأ، type: نوع التنبيه (error, success, warning...) أرجو مساعدتي في الكود الذي قمت به const alertSlice = createSlice({ name: "alert", initialState: { alerts: [], alert: { id: null, type: '', msg: '' } }, reducers: { setAlert(state, action) { state.alert = action.payload }, setAlerts(state) { state.alerts.push(alert) } }, }); const alertReducer = alertSlice.reducer; const alertActions = alertSlice.actions; export {alertActions, alertReducer} ********************************** const onSubmit = async e => { e.preventDefault() if (password.length < 6) { dispatch(alertActions.setAlert("Passwords must be more than 6")) } if (password !== password2) { dispatch(alertActions.setAlert("Passwords do not match")) } console.log("success") } شكرا لكم.

السلام عليكم. بعد متابعتي لدورات full Stack صار بإمكاني برمجة و تطوير متجر إلكتروني من البداية (الواجهة الأمامية و الخلفية). كيف يمكنني عرض هذا المشروع على منصات التجارة الإلكتونية مثل شوبيفاي و سلة، و كسب أرباح من خلاله. شكرا لكم.

السلام عليكم. كيف يمكنني ربط حدث محدد برسالة او تحذير أو إشعار ينبهني لموعد هذا الحدث. مثال: في اليوم كذا لدي موعد، كيف يمكن أن أظهر إشعارات يعلمني بأن الموعد تبقى له يوم أو ساعة ... اللغة البرمجية: react و node. شكرا.

السلام عليكم. في الكود التالي تظهر لي رسالة خطأ { "message": "Invalid Id" } الكود /**----------------------------------------------- * @desc Get Posts Count * @route /api/posts/count * @method GET * @access public ------------------------------------------------*/ const getPostCountCtrl = asyncHandler(async (req, res) => { const countPosts = await Post.count(); console.log(countPosts) res.status(200).json(countPosts); }); ********************************************************** // /api/posts/count router.get("/count", getPostCountCtrl) رسالة الخطأ التي سبق أن ذكرتها تظهر فقط عند إستعمال الوسيط التالي (validateObjectId) module.exports = (req, res, next) => { if (!mongoose.Types.ObjectId.isValid(req.params.id)) { return res.status(400).json({message: "Invalid Id"}) } next() } لم أفهم سبب الخطأ لأني لم أستعمل الوسيط و لم أفهم كيف ظهرت رسالة الخطأ. شكرا على المساعدة.

السلام عليكم. ماهو node envirement و ماهو الفرق بين production و developement شكرا

السلام عليكم. في المثال التالي. // Post Schema const PostSchema = new mongoose.Schema( { title: { type: String, required: true, trim: true, minlength: 2, maxlength: 200, }, description: { type: String, required: true, trim: true, minlength: 10, }, user: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true, }, category: { type: String, required: true, }, image: { type: Object, default: { url: "", publicId: null, }, }, likes: [ { type: mongoose.Schema.Types.ObjectId, ref: "User", }, ], }, { timestamps: true, } ); // Post Model const Post = mongoose.model("Post", PostSchema); الموجه // /api/posts/:id router.get('/:id', validateObjectId, getSinglePostCtr) الطبقة الوسيطة module.exports = (req, res, next) => { if (!mongoose.Types.ObjectId.isValid(req.params.id)) { return res.status(400).json({message: "Invalid Id"}) } next() } الدالة const getSinglePostCtr = asyncHandler(async (req, res) => { const post = await Post.findById(req.params.id) .populate("user", ["-password"]); console.log(post) if (!post) { return res.status(404).json({ msg: "Post Not Found" }) } res.status(200).json(post); }); لماذا قيمة user تساوي null شكرا على المساعدة

أعمل على تطوير موقع تواصل بين المبرمجين من خلاله يتم يتم عرض صورة المبرمج و بقية المعلومات كعنوان الإيميل و الموقع الشخصي. لإظهار الصورة لا أريد جلبها كملف (file) و إنما إظهارها بصفة تلقائية (أن تكون نفسها الصورة المستعملة في الموقع الشخصي أو عنوان الإيميل) تطبيق gravater بإمكانه القيام بهذا الفعل (إظهار صورة المبرمج بصفة تلقائية) لكن بعد أن تقوم بإنشاء حساب gravatar. ما أريده هو هل توجد تطبيقات أو حزم بإمكانها القيام بهذا الشيء مباشرة.

السلام عليكم. في node js هل يمكن جلب الصورة الخاصة بمستخدم معين من خلال موقع الويب الشخصي أو الإيميل مثلا. جربت gravatar و لكن أظن أنه غير مناسب لأنه يجب أن يكون لديك حساب gravatar حتى يتمكن من جلب الصورة من الإيميل. شكرا.

جرب json.parse

إذا أردت تحديث البيانات كتغيير الصورة مثلا فيتوجب علي حذف الصورة القديمة من الملف `/upload` كيف يكون ذلك. شكرا.

في طرف العميل لم يتم التحقق بيانات المستخدم. المستخدم الذي سيرسل الطلب handlesubmit ليست لديه الصلاحية. عليك إضافة ترويسة الطلب ( request headers) بالتوفيق

السلام عليكم. صحيح تجربتي في تطوير المواقع ضعيفة جدا و لكن أرى أنه خلال التعامل مع الملفات في node js هو أن الموجه الخاص بالملفات منفصل عن الموجه الخاص بجسم الكائن. يعني عزل req.file عن req.boby مثال: إذا كانت المعلومات الخاصة بالمستخدم تحتوي صورة و إسم و ... ، من الأفضل أن يكون الموجه الخاص بصورة المستخدم و الموجه الخاص بالإسم و بقية المعطيات منفصلين. أنتظر آراءكم.

شكرا نفس المشكل أخي لا شيء تغير.

السلام عليكم. في الكود التالي المتغير buttonColor حالته دائما true عند تحديث الصفحة الكود function ImageCard(props) { const navigate = useNavigate(); const [error, setError] = useState(""); const [like, setLike] = useState([]); const { photo, title, author, createdAt, avatar, imageId, likes, edit_remove, handleRemove, userId, } = props; const user = JSON.parse(localStorage.getItem("user")); const imgSrc = photo && require(`../../assets/images/${photo}`); const avatarSrc = avatar ? require(`../../assets/profile/${avatar}`) : defaultUser; const [numLikes, setNumLikes] = useState(likes?.length); const [buttonColor, setButtonColor] = useState(likes.some((item) => item.user === userId)); /** * HandleLike An Image */ const handleLikeImage = async (id) => { if (!user) { navigate("/login"); return; } await axios .put(`/api/images/like/${id}`, like, { headers: { "Content-Type": "application/json", "x-auth-token": user.data.token, }, }) .then((res) => { setLike(res.data); setNumLikes(res.data.likes.length); setButtonColor(!buttonColor); }) .catch((err) => { setError(err.response.data.msg); setTimeout(() => { setError(null); }, 1500); }); }; console.log(buttonColor) return ( <div className="menu"> {edit_remove ? ( <> <div className="delete change" onClick={() => handleRemove(imageId)}> <i className="fa-solid fa-trash"></i> </div> <div className="edit change"> <Link to={`/edit-photo/${imageId}`}> <i className="fa-solid fa-pen-to-square"></i> </Link> </div> </> ) : ( "" )} <div className="menu-img"> <img src={imgSrc} alt={`${title}`} className="img" /> <span className="read-more"> <Link to={`/${imageId}`}> <i className="fa-regular fa-square-plus"></i> </Link> </span> </div> <div className="menu-description"> <img src={avatarSrc} alt="avatar" className="avatar" /> <div className="menu-info"> <h3 className="title">{title}</h3> <p className="date"> created by: <span>{author}</span> at: <span>{moment(createdAt).format("DD-MM-YYYY")}</span> </p> </div> </div> <div className="menu-like"> <div className={buttonColor ? "like isLike" : "like"} onClick={() => { handleLikeImage(imageId); }} > <i className="fa-solid fa-thumbs-up"></i> </div> {numLikes === 0 ? "" : <div className="dislike">{numLikes}</div>} </div> </div> ); } يعني حتى و إن كانت قيمة likes.some((item) => item.user === userId) تساوي false فعند تحديث الصفحة تتحول قيمة buttonColor إلى true شكرا على المساعدة

أعتقد أن النتيجة صحيحة و لا تحتوي أخطاء {isLiked.length > 0: false, likes: Array(2), userId: '654b804c1157c8dc408a4aec', isLiked: Array(0)} isLiked : [] isLiked.length > 0 : false likes : Array(2) 0 : {user: '654aabf3aab1f445eab9faf1', _id: '6552486f570a319a6442a77b'} 1 : {user: '654bef88849d21ff857fb57f', _id: '654bf1f2849d21ff857fb726'} length : 2 [[Prototype]] : Array(0) userId : "654b804c1157c8dc408a4aec" [[Prototype]] : Object ImageCard.jsx:65 {isLiked.length > 0: true, likes: Array(1), userId: '654b804c1157c8dc408a4aec', isLiked: Array(1)} isLiked : Array(1) 0 : {user: '654b804c1157c8dc408a4aec', _id: '654be81ff7cc95c50a0e74fe'} length : 1 [[Prototype]] : Array(0) isLiked.length > 0 : true likes : Array(1) 0 : {user: '654b804c1157c8dc408a4aec', _id: '654be81ff7cc95c50a0e74fe'} length : 1 [[Prototype]] : Array(0) userId : "654b804c1157c8dc408a4aec" [[Prototype]] : Object ImageCard.jsx:65 {isLiked.length > 0: false, likes: Array(2), userId: '654aabf3aab1f445eab9faf1', isLiked: Array(0)} isLiked : [] isLiked.length > 0 : false likes : Array(2) 0 : {user: '654cab8448ef64412386c076', _id: '654cace048ef64412386c0cf'} 1 : {user: '654bef88849d21ff857fb57f', _id: '654bf207849d21ff857fb74c'} length : 2 [[Prototype]] : Array(0) userId : "654aabf3aab1f445eab9faf1" [[Prototype]] : Object ImageCard.jsx:65 {isLiked.length > 0: false, likes: Array(0), userId: '654aabf3aab1f445eab9faf1', isLiked: Array(0)} isLiked : [] isLiked.length > 0 : false likes : [] userId : "654aabf3aab1f445eab9faf1" [[Prototype]] : Object تفضل ملفات المشروع hsoub.zip

تفضل import React, { useState, useEffect } from "react"; import './views.css' import { Link, useNavigate, useParams } from 'react-router-dom'; import moment from 'moment' import axios from "axios"; import Alert from "../alert/Alert"; import defaultUser from "../../assets/photaty/avatar-profile.png" function ImageCard(props) { const navigate = useNavigate(); const [error, setError] = useState(""); const [like, setLike] = useState([]); const { photo, title, author, createdAt, avatar, imageId, likes, edit_remove, handleRemove, userId, } = props; const user = JSON.parse(localStorage.getItem("user")); const imgSrc = photo && require(`../../assets/images/${photo}`); const avatarSrc = avatar ? require(`../../assets/profile/${avatar}`) : defaultUser; const [numLikes, setNumLikes] = useState(likes?.length); const [likedColor, setLikedColor] = useState(false); const [key, setKey] = useState(null); /** * HandleLike An Image */ const handleLikeImage = async (id) => { if (!user) { navigate("/login"); return; } await axios .put(`/api/images/like/${id}`, like, { headers: { "Content-Type": "application/json", "x-auth-token": user.data.token, }, }) .then((res) => { setLike(res.data); setNumLikes(res.data.likes.length); handleLikedColor() // setKey(id) }) .catch((err) => { setError(err.response.data.msg); setTimeout(() => { setError(null); }, 1500); }); }; // console.log(likes) /** * Handle Change Icon Color */ const handleLikedColor = (id) => { const isLiked = likes.filter((item) => item.user === userId); if (isLiked.length > 0) { setLikedColor(true); } else { setLikedColor(false) } }; useEffect(() => { handleLikedColor(); }, [likes, userId]); return ( <div className="menu"> {edit_remove ? ( <> <div className="delete change" onClick={() => handleRemove(imageId)}> <i className="fa-solid fa-trash"></i> </div> <div className="edit change"> <Link to={`/edit-photo/${imageId}`}> <i className="fa-solid fa-pen-to-square"></i> </Link> </div> </> ) : ( "" )} <div className="menu-img"> <img src={imgSrc} alt={`${title}`} className="img" /> <span className="read-more"> <Link to={`/${imageId}`}> <i className="fa-regular fa-square-plus"></i> </Link> </span> </div> <div className="menu-description"> <img src={avatarSrc} alt="avatar" className="avatar" /> <div className="menu-info"> <h3 className="title">{title}</h3> <p className="date"> created by: <span>{author}</span> at: <span>{moment(createdAt).format("DD-MM-YYYY")}</span> </p> </div> </div> <div className="menu-like"> <div className={likedColor ? "like isLike" : "like"} onClick={() => { handleLikeImage(imageId); // console.log(key) }} > <i className="fa-regular fa-thumbs-up"></i> </div> {numLikes === 0 ? "" : <div className="dislike">{numLikes}</div>} </div> </div> ); } export default ImageCard لدي أربع عناصر. في الأولين لم ينجح الكود. أما في البقية فقد نجح الكود.

السلام عليكم. أريد تغيير لون زر الإعجاب عند النقر. إذا كان المعجبين الحاليين بالعنصر يحتوي معرف المستخدم يقع تغيير اللون للأحمر. عند النقر في المرة الثانية يقع حذف المستخدم من قائمة المعجبين و يعود اللون لحاله الأول. في الكود التالي توصلت إلى تحديد عدد المعجبين لكن أواجه مشكل في تغيير اللون عند الإعجاب. الكود /** * HandleLike An Image */ const handleLikeImage = async (id) => { if (!user) { navigate("/login"); return; } await axios .put(`/api/images/like/${id}`, like, { headers: { "Content-Type": "application/json", "x-auth-token": user.data.token, }, }) .then((res) => { setLike(res.data); setNumLikes(res.data.likes.length); handleLikedColor() // setKey(id) }) .catch((err) => { setError(err.response.data.msg); setTimeout(() => { setError(null); }, 1500); }); }; ******************** /** * Handle Change Icon Color */ const handleLikedColor = (id) => { const isLiked = likes.filter((item) => item.user === userId); if (isLiked.length > 0) { setLikedColor(true); } else { setLikedColor(false) } }; useEffect(() => { handleLikedColor(); }, [likes, userId]); ****** <div className="menu-like"> <div className={likedColor ? "like isLike" : "like"} onClick={() => { handleLikeImage(imageId); // console.log(key) }} > <i className="fa-regular fa-thumbs-up"></i> </div> {numLikes === 0 ? "" : <div className="dislike">{numLikes}</div>} </div> شكرا على المساعدة

شكرا. عندما أعدت تشغيل البرنامج صار كل شيء على مايرام شكرا

تفضل أخي الكريمhsoub.zip

السلام عليكم. أواجه مشكل في إرسال بيانات تحتوي صورة بعد تعديلها إلى الخادم. الكود في طرف العميل /** * Update Image Informations */ const [image, setImage] = useState(imageSrc) const [imagePhoto, setImagePhoto] = useState(null) const [title, setTitle] = useState("") const [description, setDescription] = useState("") // console.log(imagePhoto?.name) useEffect(() => { if (current_photo) { setTitle(current_photo?.title || ""); setDescription(current_photo?.description || ""); setImage(imageSrc || ""); } }, [current_photo, imageSrc]); // Handle Change Photo const handleFileChange = (e) => { if (e.target.files && e.target.files[0]) { setImage(URL.createObjectURL(e.target.files[0])); setImagePhoto(e.target.files[0]); } }; const updateImg = (e) => { e.preventDefault(); const formData = new FormData(); formData.append("title", title); formData.append("description", description); if (imagePhoto) { formData.append("photo", imagePhoto, imagePhoto?.name); } // formData.append("photo", imagePhoto) axios .post(`/api/images/user_images/${current_photo?._id}`, formData, { headers: { "Content-Type": "multipart/form-data", "x-auth-token": user.data?.token, }, }) .then((res) => { console.log(res.data); navigate("/"); }) .catch((error) => console.error(error)); }; في طرف الخادم // router router.post("/user_images/:photoId", [upload.single('photo'), protect], editImg); // controller const editImg = async (req, res) => { try { const post = await Image.findById(req.params.photoId) post.title = req.file.title post.description = req.file.description post.photo = req.file ? req.file.filename : post.photo; const updatedPost = await post.save() res.status(200).json(updatedPost); } catch (error) { res.status(500).send("Server error" + error.message); } }; شكرا على المساعدة.

في الكود التالي لا يتم إرسال البيانات في طرف الخادم /** * Update Image Informations */ const [image, setImage] = useState(imageSrc) const [imagePhoto, setImagePhoto] = useState(null) const [title, setTitle] = useState("") const [description, setDescription] = useState("") // console.log(imagePhoto?.name) useEffect(() => { if (current_photo) { setTitle(current_photo?.title || ""); setDescription(current_photo?.description || ""); setImage(imageSrc || ""); } }, [current_photo, imageSrc]); // Handle Change Photo const handleFileChange = (e) => { if (e.target.files && e.target.files[0]) { setImage(URL.createObjectURL(e.target.files[0])); setImagePhoto(e.target.files[0]); } }; const updateImg = (e) => { e.preventDefault(); const formData = new FormData(); formData.append("title", title); formData.append("description", description); if (imagePhoto) { formData.append("photo", imagePhoto, imagePhoto?.name); } // formData.append("photo", imagePhoto) axios .post(`/api/images/user_images/${current_photo?._id}`, formData, { headers: { "Content-Type": "multipart/form-data", "x-auth-token": user.data?.token, }, }) .then((res) => { console.log(res.data); navigate("/"); }) .catch((error) => console.error(error)); }; في طرف العميل // router router.post("/user_images/:photoId", [upload.single('photo'), protect], editImg); // controller const editImg = async (req, res) => { try { const post = await Image.findById(req.params.photoId) post.title = req.file.title post.description = req.file.description post.photo = req.file ? req.file.filename : post.photo; const updatedPost = await post.save() res.status(200).json(updatedPost); } catch (error) { res.status(500).send("Server error" + error.message); } }; شكرا على المساعدة

السلام عليكم. أواجه مشكل في تعديل البيانات بحيث يجب أن تظهر البيانات القديمة للمستخدم داخل حقول الأدخال وأن لاتكون فارغة. في المثال التالي: يجب أن تظهر صورة المستخدم و بقية المعطيات داخل قاعدة البيانات يجب أن تظهر في حقول اإدخال. الكود التالي الذي قمت به يقوم بتعديل البيانات و لكن لا يظهر البيانات القديمة داخل الحقول الخاصة بها. الكود: function PhotoProfile({profile}) { const user = JSON.parse(localStorage.getItem("user")); let profilePhoto = profile?.avatar ? require(`../../assets/profile/${profile.avatar}`) : avatar const [profileAvatar, setProfileAvatar] = useState( null) let [profileImage, setProfileImage] = useState(profilePhoto) const [data, setData] = useState([]) let [name, setName] = useState(profile.name || "") let [bio, setBio] = useState(profile.bio || "") let [status, setStatus] = useState(profile.status || "") const [error, setError] = useState("") const navigate = useNavigate() const handleFileChange = (e) => { if (e.target.files && e.target.files[0]) { setProfileImage(URL.createObjectURL(e.target.files[0])); setProfileAvatar(e.target.files[0]); } }; const handleSave = (e) => { e.preventDefault() const formData = new FormData() formData.append('name', name) formData.append('bio', bio) formData.append('status', status) if (profileAvatar) { formData.append('avatar', profileAvatar, profileAvatar?.name) } axios .post("/api/users/profile", formData, { headers: { "Content-Type": "multipart/form-data", "x-auth-token": user.data?.token, }, }) .then((res) => { setData(res.data) navigate('/') }) .catch((error) => setError(error.response.data.msg)); }; console.log(data) return ( <div className="photo-profile"> <HeaderProfile title="Public profile" paragraphe="Add information about yourself." /> <div className="photo-profile-img"> <img alt="" src={profileImage}/> </div> <form encType="multipart/form-data" className='form-container' onSubmit={handleSave} > {error && <Alert error={error}/>} <input className="photo-profile-input" type="file" name="avatar" accept="image/*" onChange={handleFileChange} /> <input type="text" className="profile-iput-info" placeholder="name" value={name} name="name" onChange={(e)=> setName(e.target.value)} required /> <input type="text" className="profile-iput-info" placeholder="bio" value={bio} name="bio" onChange={(e)=> setBio(e.target.value)} required /> <input type="text" className="profile-iput-info" placeholder="status" value={status} name="status" onChange={(e)=> setStatus(e.target.value)} required /> <button className="submit" type="submit"> Save </button> </form> </div> ); } شكرا للمساعدة.

السلام عليكم. متى يحبك إستعمال cloudinary. و متى يكون إستعمالها عبء على المشروع. شكرا.

السلام عليكم. أواجه مشكل في حساب اللايكات حيث يقع تفعيل الدالة إلا من المرة الثانية const likeImage = async (id) => { if (!user) { navigate("/login"); return; } await axios .put(`/api/images/like/${id}`, like, { headers: { "Content-Type": "application/json", "x-auth-token": user.data.token, }, }) .then((res) => { setLike(res.data) }) .catch((err) => setError(err.response.data.msg)); }; ************************** const unLikeImage = async(id) => { if (!user) { navigate("/login"); return; }; await axios .put(`/api/images/unlike/${id}`, like, { headers: { "Content-Type": "application/json", "x-auth-token": user.data.token, }, }) .then((res) => { setLike(res.data) }) .catch((err) => setError(err.response.data.msg)); }; **************************************** <div className="menu-like"> {/* {error && <Alert error={error} />} */} <div className="like" onClick={() => likeImage(imageId)}> <i className="fa-regular fa-thumbs-up"></i> {likes.length === 0 ? "" : likes.length} </div> <div className="dislike" onClick={() => unLikeImage(imageId)}> <i className="fa-regular fa-thumbs-down"></i> </div> </div> أما بالنسبة لعدد الإعجابات {likes.length === 0 ? "" : likes.length} فلا يظهر إلا بعد تحديث الصفحة. شكرا لكم.