اذهب إلى المحتوى

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

الأعضاء
 عرض الملف الشخصي  تصفح المحتوى

  • المساهمات

    578

  • تاريخ الانضمام

  • تاريخ آخر زيارة

 نوع المحتوى 

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

كل منشورات العضو محمود_سعداوي

  1. محمود_سعداوي
    السلام عليكم. أريد إضافة favicon في تطبيق next الكود: layout.jsx import React from 'react' import '@/assets/styles/globals.css' export const metadata = { title: 'Property Pulse', description: 'Find your dream rental property', keywords: 'rental, find rentals, property, find properties', icons: { icon: "/assets/images/ico.png", }, } const MainLayout = ({ children }) => { return ( <html lang='en'> <body> <div>{children}</div> </body> </html> ) } export default MainLayout تموضع ملفات المشروع: شكرا
  2. محمود_سعداوي
    السلام عليكم. أواجه مشكل في جلب البيانات من الخادم حيث لايتسنى إظهار هذه البيانات على الواجهة الأمامية إلا بعد تحديث الصفحة. الكود. إضافة كتاب (الواجهة الخلفية) // method POST // route api/books // desc Create new book // access Private | admin const createBook = asyncHandler(async(req, res) => { try{ // Image Validation if (!req.file) { return res.status(400).json({ message: "no image provided" }); } // Upload Photo const imagePath = path.join(__dirname, `../images/${req.file.filename}`); const result = await cloudinaryUploadImage(imagePath); // Save new post in database const book = await Book.create({ title: req.body.title, description: req.body.description, category: req.body.category, user: req.userId, image: { url: result.secure_url, publicId: result.public_id, }, author: req.body.author, language: req.body.language, PublicationDate: req.body.PublicationDate, }); // Send response to the client res.status(201).json(book); // 6. Remove image from the server fs.unlinkSync(imagePath); } catch (err) { console.log(err.message) res.status(500).send('Server error') } }); إضافة كتاب الواجهة الأمامية // bookSlice getBooks(state, action) { state.books = action.payload; }, setBooks(state, action) { state.books = [...state.books, action.payload] }, // bookApiCall export function addBook(newBook) { return async (dispatch, getState) => { try { dispatch(bookActions.setLoading()) const {data} = await axios.post(`${BOOK_URL}`, newBook, { headers: { "authorization": getState().auth.user.accessToken } }); dispatch(bookActions.setBooks(data)); dispatch(bookActions.clearLoading()); } catch (error) { toast.error(error?.response?.data.message); dispatch(bookActions.clearLoading()); } }; } /** * Add New Book */ const [fileName, setFileName] = useState(null); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [category, setCategory] = useState(""); const [author, setAuthor] = useState(""); const [PublicationDate, setPublicationDate] = useState(""); const [language, setLanguage] = useState(""); const formSubmitHandler = (e) => { e.preventDefault(); if (title.trim() === "") return toast.error("Book Title is required"); if (category.trim() === "") return toast.error("Book Category is required"); if (description.trim() === "") return toast.error("Book Description is required"); if (author.trim() === "") return toast.error("Book Author is required"); if (language.trim() === "") return toast.error("Book Language is required"); if (PublicationDate.trim() === "") return toast.error("Book Publication Date is required"); if (!fileName) return toast.error("Book Image is required"); const formData = new FormData(); formData.append("image", fileName); formData.append("title", title); formData.append("description", description); formData.append("category", category); formData.append("author", author); formData.append("language", language); formData.append("PublicationDate", PublicationDate); dispatch(addBook(formData)) setFileName(null) setTitle("") setDescription("") setCategory("") setAuthor("") setPublicationDate("") setLanguage("") }; /** * Fetch All Books With Pagination */ useEffect(() => { dispatch(fetchBooks()); }, [dispatch]); شكرا على المساعدة.
  3. محمود_سعداوي
    السلام عليكم. الرجاء مساعدتي في حل الخطأ التالي react-dom.development.js:86 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. at a Code: import React, { useState } from "react"; import "./header.css"; import { Link, NavLink } from "react-router-dom"; import { CiMenuBurger } from "react-icons/ci"; import { RiCloseFill } from "react-icons/ri"; import logo from "../../images/logo.png"; import { useSelector } from "react-redux"; import { BsThreeDotsVertical } from "react-icons/bs"; import Dropdown from "./Dropdown"; function Header() { const [click, setClick] = useState(false); const { user } = useSelector((state) => state.auth); const handleClick = () => setClick(!click); return ( <> <nav className="navbar"> <div className="nav-container"> <Link to="/" className="nav-logo"> <div className="logo"> <img src={logo} alt="logo" /> </div> <span className="logo-icon">Bookly</span> </Link> <ul className={click ? "nav-menu active" : "nav-menu"}> {user ? ( <> <li className="nav-item"> <NavLink to="/" className={({ isActive }) => isActive ? "active" : "nav-links" } onClick={handleClick} > Home </NavLink> </li> {user.isAdmin && ( <li className="nav-item"> <NavLink to="/admin" className={({ isActive }) => isActive ? "active" : "nav-links" } onClick={handleClick} > Dashboard </NavLink> </li> )} <li className="nav-item"> <NavLink to="/login" className={({ isActive }) => isActive ? "active" : "nav-links nav-dropdown" } onClick={handleClick} > {user.name} <BsThreeDotsVertical /> <Dropdown /> </NavLink> </li> </> ) : ( <> <li className="nav-item"> <NavLink to="/" className={({ isActive }) => isActive ? "active" : "nav-links" } onClick={handleClick} > Home </NavLink> </li> <li className="nav-item"> <NavLink to="/login" className={({ isActive }) => isActive ? "active" : "nav-links" } onClick={handleClick} > Login </NavLink> </li> </> )} </ul> <div className="nav-icon" onClick={handleClick}> {click ? ( <span className="icon"> <RiCloseFill /> </span> ) : ( <span className="icon"> <CiMenuBurger /> </span> )} </div> </div> </nav> </> ); } export default Header; Child Component import React from 'react' import { useDispatch } from 'react-redux' import { logoutUser } from '../../redux/apiCalls/authApiCalls' import { Link } from 'react-router-dom' function Dropdown() { const dispatch = useDispatch() const logout = () => { dispatch(logoutUser()) } return ( <div className='dropdown'> <ul className="dropdown-menu"> <li className="dropdown-item" onClick={logout}> Logout </li> <li className="dropdown-item"> <Link className='dropdown-item-link' to='/favorites'> My Favorites </Link> </li> </ul> </div> ) } export default Dropdown شكرا.
  4. محمود_سعداوي
    السلام عليكم. بعد تقييم منتج محدد أريد إظهار التقييم على الواجهة البرمجية. Slice import { createSlice } from "@reduxjs/toolkit"; const bookSlice = createSlice({ name: "book", initialState: { books: [], reviews: [], error: false, loading: false, }, reducers: { addReviews(state, action) { state.books = action.payload }, getReviews(state, action) { state.reviews = action.payload; }, setLoading(state) { state.loading = true; }, clearLoading(state) { state.loading = false; }, } }) const bookReducer = bookSlice.reducer; const bookActions = bookSlice.actions; export {bookActions, bookReducer} apiCall // Get Book Reviews export function getBookReviews(bookId) { return async (dispatch, getState) => { try { dispatch(bookActions.setLoading()) const {data} = await axios.get(`${BOOK_URL}/${bookId}/reviews`, { headers: { "authorization": getState().auth.user.accessToken } }); dispatch(bookActions.getReviews(data)); dispatch(bookActions.clearLoading()); } catch (error) { toast.error(error?.response?.data.message); dispatch(bookActions.clearLoading()); } }; } // Post Review export function postReview(bookId, review) { return async (dispatch, getState) => { try { dispatch(bookActions.setLoading()) const {data} = await axios.post(`${BOOK_URL}/${bookId}/reviews`, review, { headers: { "authorization": getState().auth.user.accessToken } }); toast.success(data?.message) dispatch(bookActions.addReviews()) dispatch(bookActions.getReviews(review)); dispatch(bookActions.clearLoading()); } catch (error) { toast.error(error?.response?.data.message); dispatch(bookActions.clearLoading()); } }; } React Component // Get Book Reviews export function getBookReviews(bookId) { return async (dispatch, getState) => { try { dispatch(bookActions.setLoading()) const {data} = await axios.get(`${BOOK_URL}/${bookId}/reviews`, { headers: { "authorization": getState().auth.user.accessToken } }); dispatch(bookActions.getReviews(data)); dispatch(bookActions.clearLoading()); } catch (error) { toast.error(error?.response?.data.message); dispatch(bookActions.clearLoading()); } }; } // Post Review export function postReview(bookId, review) { return async (dispatch, getState) => { try { dispatch(bookActions.setLoading()) const {data} = await axios.post(`${BOOK_URL}/${bookId}/reviews`, review, { headers: { "authorization": getState().auth.user.accessToken } }); toast.success(data?.message) dispatch(bookActions.addReviews()) dispatch(bookActions.getReviews(review)); dispatch(bookActions.clearLoading()); } catch (error) { toast.error(error?.response?.data.message); dispatch(bookActions.clearLoading()); } }; } Review.jsx import moment from "moment"; import React from "react"; import Rating from "../rating/Rating"; import { Oval } from "react-loader-spinner"; import { useSelector } from "react-redux"; function Reviews() { const { loading, reviews } = useSelector((state) => state.book); return ( <div className="get-reviews"> <h2 className="get-reviews-title">Reviews ({reviews?.length})</h2> <div className="reviews"> {loading ? ( <Oval height={120} width={120} color="rgb(247, 96, 14)" wrapperStyle={{ height: "90vh", display: "flex", alignItems: "center", justifyContent: "center", }} wrapperClass="" visible={true} ariaLabel="oval-loading" secondaryColor="#E2E2E2" strokeWidth={3} strokeWidthSecondary={3} /> ) : ( Array.isArray(reviews) && reviews.map((el, key) => ( <div className="user-review" key={key}> <p> <span>{el?.username ? el?.username : "Unknown User"}</span>{" "} {`- `} {moment(el?.createdAt).format("DD MMM YYYY")} </p> <Rating rating={el?.rate} /> <p>{el?.comment}</p> </div> )) )} </div> </div> ); } export default Reviews; شكرا
  5. محمود_سعداوي
    السلام عليكم. في المثال التالي، أواجه الأخطاء التالية: عندما أضيف Review معين (بين 1 و 5) فإنه يتم إرسال عدد أكبر من 5 إلى قاعدة البيانات لايتم إضافة التقييم إلى واجهة الصفحة إلا بعد التحديث الكود bookController // method POST // route api/books/:id/reviews // desc Add a book review // access Private | auth const addReview = asyncHandler(async(req, res) => { const { id } = req.params const { comment, rate } = req.body const book = await Book.findById(id) const user = await User.findById(req.userId) if (!book) { return res.status(404).json({ message: "Book Not Found" }) } const isRated = book.reviews.findIndex(m => m.user == req.userId) if (isRated > -1){ return res.status(403).send({ message: "Review Is Already Added" }); } const totalRate = book.reviews.reduce((sum, review) => sum + review.rate ,0) const finalRate = (totalRate + rate) / (book.reviews.length + 1) await Book.updateOne( { _id: id } , { $push: { reviews: { user: req.userId, username: user.name, comment, rate } }, $set: { rate: finalRate } } ) res.status(201).json({ message: "Review added successfully" }) }) Frontend apiCall // Post Review export function postReview(bookId, review) { return async (dispatch, getState) => { try { dispatch(bookActions.setLoading()) const {data} = await axios.post(`${BOOK_URL}/${bookId}/reviews`, review, { headers: { "authorization": getState().auth.user.accessToken } }); toast.success(data?.message) dispatch(bookActions.addReviews()); dispatch(bookActions.clearLoading()); } catch (error) { toast.error(error?.response?.data.message); dispatch(bookActions.clearLoading()); } }; } bookSlice const bookSlice = createSlice({ name: "book", initialState: { books: [], error: false, loading: false, }, reducers: { getBooks(state, action) { state.books = action.payload; }, findBook(state, action) { state.books = action.payload; }, addReviews(state, action) { state.books = action.payload; }, setLoading(state) { state.loading = true; }, clearLoading(state) { state.loading = false; }, setError(state) { state.error = true; }, clearError(state) { state.error = false; }, } } Component const Modal = ({ showModal, handleClose, book }) => { const [rate, setRating] = useState(0); const [comment, setComment] = useState(""); const dispatch = useDispatch(); const navigate = useNavigate(); const submitReview = (e) => { e.preventDefault(); if (comment === "") { return toast.error("Comment is required") } dispatch(postReview(book, { rate, comment })) navigate(`/${book}`) }; return ( <div className={`modal ${showModal ? "show" : ""}`}> <div className="modal-content"> <span className="close" onClick={handleClose}>&times;</span> <h2>Submit Your Review</h2> <form onSubmit={submitReview}> <div className="rating-input"> <label>Rating:</label> <select value={rate} onChange={(e) => setRating(e.target.value)} required> <option value="" disabled>Select a rating</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div className="comment"> <label>Comment:</label> <textarea value={comment} onChange={(e) => setComment(e.target.value)}/> </div> <button className='modal-btn' type="submit">Submit</button> </form> </div> </div> ); }; export default Modal; شكرا على المساعدة
  6. محمود_سعداوي
    السلام عليكم. أقدم طريقتين من كتابة الكود. الكود الأول: import React, { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' import { fetchBooks } from '../../redux/apiCalls/bookApiCall' import { Oval } from "react-loader-spinner"; function Books({ currentPage }) { const dispatch = useDispatch() const {books, loading} = useSelector(state => state.book) useEffect(() => { dispatch(fetchBooks(currentPage)) }, [dispatch, currentPage]) if (loading) { <Oval height={120} width={120} color="rgb(247, 96, 14)" wrapperStyle={{ height: "70vh", display: "flex", alignItems: "center", justifyContent: "center", }} wrapperClass="" visible={true} ariaLabel="oval-loading" secondaryColor="#E2E2E2" strokeWidth={3} strokeWidthSecondary={3} /> } return ( <div className='books'> <h1 className='books-title'>Explore Books</h1> <div className="books-container"> { books.data?.map((book, index) => ( <div className="books-card" key={index}> <img src={book?.image.url} className='books-card-img' alt=''/> <div className="over"> <h2 className="over-title">{book?.title}</h2> <h3 className="over-auth">{book?.author}</h3> <button className="over-btn">SHOW BOOK</button> </div> </div> )) } </div> </div> ) } export default Books الكود الثاني: import React, { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' import { fetchBooks } from '../../redux/apiCalls/bookApiCall' import { Oval } from "react-loader-spinner"; function Books({ currentPage }) { const dispatch = useDispatch() const {books, loading} = useSelector(state => state.book) useEffect(() => { dispatch(fetchBooks(currentPage)) }, [dispatch, currentPage]) return ( <div className='books'> <h1 className='books-title'>Explore Books</h1> <div className="books-container"> { loading ? (<Oval height={120} width={120} color="rgb(247, 96, 14)" wrapperStyle={{ height: "70vh", display: "flex", alignItems: "center", justifyContent: "center", }} wrapperClass="" visible={true} ariaLabel="oval-loading" secondaryColor="#E2E2E2" strokeWidth={3} strokeWidthSecondary={3} /> ) : (books.data?.map((book, index) => ( <div className="books-card" key={index}> <img src={book?.image.url} className='books-card-img' alt=''/> <div className="over"> <h2 className="over-title">{book?.title}</h2> <h3 className="over-auth">{book?.author}</h3> <button className="over-btn">SHOW BOOK</button> </div> </div> ))) } </div> </div> ) } export default Books الكود الثاني يعمل بشكل جيد حيث يتم إستدعاء Loader Component إلى حين جلب البيانات من الخادم. بينما الكود الأول لم يفعل. شخصيا أعتقد أنه لا فرق بينهما. لكن لماذا فعل الكود الثاني ولم يفعل الكود الأول. شكرا.
  7. محمود_سعداوي
    أنا قمت بوضع النقطة و الدليل أن الملف يعمل بصفة جيدة لكن علامة الإعدادات في vs code غالبا ما ترمز إلى ملف مجهول ولا أدري ما سبب هذا التغير السريع لأنه منذ أسبوعين تقريبا كل شيء كان تمام
  8. محمود_سعداوي
    السلام عليكم. لو سمحتم لماذا تحول ملف .env من إلى شكرا
  9. محمود_سعداوي
    السلام عليكم. في المثال التالي: عند الضغط على submit أريد ظهور الpost مباشرة دون إعادة تحديث الصفحة. الكود initialState: { posts: [], error: false, loading: false, }, reducers: { setPosts(state, action) { state.posts = action.payload }, getPosts(state, action) { state.posts = action.payload }, api call // Get All Posts export function getPosts() { return async (dispatch, getState) => { try { dispatch(postActions.setLoading()); const { data } = await axios.get(`${POSTS_URL}`, { headers: { "x-auth-token": getState().auth.user.token, }, }); dispatch(postActions.getPosts(data)) dispatch(postActions.clearLoading()) // console.log(data); } catch (error) { console.log(error); } }; } // Create A Post export function createPost(post) { return async (dispatch, getState) => { try { dispatch(postActions.setLoading()); const data = await axios.post(`${POSTS_URL}`, post, { headers: { "x-auth-token": getState().auth.user.token, }, }); dispatch(postActions.setPosts(data.data)) dispatch(postActions.clearLoading()) console.log(data); } catch (error) { console.log(error); dispatch(postActions.clearLoading()) } }; } postsscreen const dispatch = useDispatch(); const handleCreatePost = () => { dispatch(createPost({ text })); setText(""); dispatch(postActions.getPosts()); }; useEffect(() => { dispatch(getPosts()); }, [dispatch]); شكرا على المساعدة
  10. محمود_سعداوي
    السلام عليكم. ظهرت لي رسائل الخطأ التالية بشكل مفاجئ. في الكونسول: رسالة الخطأ cookie.js:32 Uncaught Error: Cannot find module 'net' at webpackMissingModule (cookie.js:32:1) at ../node_modules/tough-cookie/lib/cookie.js (cookie.js:32:1) at options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:24:1) at fn (hot module replacement:62:1) at ../node_modules/request/lib/cookies.js (cookies.js:3:1) at options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:24:1) at fn (hot module replacement:62:1) at ../node_modules/request/index.js (index.js:18:1) صفحة الويب: ERROR in ../node_modules/sshpk/lib/private-key.js 7:13-30 Module not found: Error: Can't resolve 'crypto' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\sshpk\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false } ERROR in ../node_modules/sshpk/lib/signature.js 7:13-30 Module not found: Error: Can't resolve 'crypto' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\sshpk\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false } ERROR in ../node_modules/sshpk/lib/utils.js 27:13-30 Module not found: Error: Can't resolve 'crypto' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\sshpk\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false } ERROR in ../node_modules/tough-cookie/lib/cookie.js 33:10-24 Module not found: Error: Can't resolve 'net' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\tough-cookie\lib' ERROR in ../node_modules/tough-cookie/lib/cookie.js 34:15-35 Module not found: Error: Can't resolve 'url' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\tough-cookie\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }' - install 'url' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "url": false } ERROR in ../node_modules/tunnel-agent/index.js 3:10-24 Module not found: Error: Can't resolve 'net' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\tunnel-agent' ERROR in ../node_modules/tunnel-agent/index.js 4:8-22 Module not found: Error: Can't resolve 'tls' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\tunnel-agent' ERROR in ../node_modules/tunnel-agent/index.js 5:9-24 Module not found: Error: Can't resolve 'http' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\tunnel-agent' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false } ERROR in ../node_modules/tunnel-agent/index.js 6:10-26 Module not found: Error: Can't resolve 'https' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\tunnel-agent' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false } ERROR in ../node_modules/tunnel-agent/index.js 8:11-28 Module not found: Error: Can't resolve 'assert' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\tunnel-agent' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false } vs code => terminal ERROR in ../node_modules/tunnel-agent/index.js 3:10-24 [1] Module not found: Error: Can't resolve 'net' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\tunnel-agent' [1] [1] ERROR in ../node_modules/tunnel-agent/index.js 4:8-22 [1] Module not found: Error: Can't resolve 'tls' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\tunnel-agent' [1] [1] ERROR in ../node_modules/tunnel-agent/index.js 5:9-24 [1] Module not found: Error: Can't resolve 'http' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\tunnel-agent' [1] [1] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. [1] This is no longer the case. Verify if you need this module and configure a polyfill for it. [1] [1] If you want to include a polyfill, you need to: [1] - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }' [1] - install 'stream-http' [1] If you don't want to include a polyfill, you can use an empty module like this: [1] resolve.fallback: { "http": false } [1] [1] ERROR in ../node_modules/tunnel-agent/index.js 6:10-26 [1] Module not found: Error: Can't resolve 'https' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\tunnel-agent' [1] [1] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. [1] This is no longer the case. Verify if you need this module and configure a polyfill for it. [1] [1] If you want to include a polyfill, you need to: [1] - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }' [1] - install 'https-browserify' [1] If you don't want to include a polyfill, you can use an empty module like this: [1] resolve.fallback: { "https": false } [1] [1] ERROR in ../node_modules/tunnel-agent/index.js 8:11-28 [1] Module not found: Error: Can't resolve 'assert' in 'C:\Users\saadaoui\Desktop\dev_tawassol\node_modules\tunnel-agent' [1] [1] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. [1] This is no longer the case. Verify if you need this module and configure a polyfill for it. [1] [1] If you want to include a polyfill, you need to: [1] - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }' [1] - install 'assert' [1] If you don't want to include a polyfill, you can use an empty module like this: [1] resolve.fallback: { "assert": false } شكرا على المساعدة
  11. محمود_سعداوي
    السلام عليكم. أنا بصدد العمل على مشروع MERN وأستعمل redux toolkit لإدارة حالة التطبيق. في المثال التالي: عند الضغط على زر الحذف، لايتم التفعيل إلا بعد تحديث الصفحة. الكود: slice removeEducation(state, action) { state.profile.education = state.profile.education.filter( (el) => el._id !== action.payload ); }, api call export function deleteEducation(educId) { return async (dispatch, getState) => { try { const { data } = await axios.delete( `${PROFILE_URL}/education/${educId}`, { headers: { "x-auth-token": getState().auth.user.token, }, } ); dispatch(profileActions.removeEducation(data)); // dispatch(profileActions.setProfile()) } catch (error) { const errors = error.response.data.errors; errors?.forEach((err) => { dispatch(alertActions.createAlert(err.msg)); dispatch(alertActions.clearAlert(err.id)); }); dispatch(profileActions.clearLoading()); console.log(error); } }; } المكون Education const handleRemoveEducation = (id) => { dispatch(deleteEducation(id)); }; ********************** {profile?.education.map((educ, index) => ( <tr key={index} className="bg-gray-100 border-b"> <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"> {index + 1} </td> <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"> {educ.school} </td> <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"> {educ.degree} </td> <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"> {educ.current ? `${moment(educ.from).format( "DD MMM YYYY" )} - present` : `${moment(educ.from).format( "DD MMM YYYY" )} - ${moment(educ.to).format("DD MMM YYYY")}`} </td> <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"> <Button dangerBtn type={"button"} onClick={() => handleRemoveEducation(educ._id)} > Delete </Button> </td> </tr> ))} شكرا على المساعدة.
  12. محمود_سعداوي
    السلام عليكم. بعد تسجيل الدخول، يتوجه المستخدم ملفه الشخصي للقيام بإضافة ما يتوجب من معطيات. في هذه الحالة تكون المصفوفة profile فارغة لأنه لاتوجد بداخلها بيانات تتعلق بالملف الشخصي للمستخدم. يقوم المستخدم إذن بإنشاء ملفه الشخصي بواسطة الكود التالي: const profileSlice = createSlice({ name: "profile", initialState: { profile: [], loading: false, isProfileCreated: false, }, reducers: { setProfile(state, action) { state.profile = action.payload }, setLoading(state) { state.loading = true }, clearLoading(state) { state.loading = false }, setIsProfileCreated(state) { state.isProfileCreated = true; state.loading = false }, clearIsProfileCreated(state) { state.isProfileCreated = false; }, }, }); *** export function createProfile(newProfile) { return async(dispatch, getState) => { try { dispatch(profileActions.setLoading()) const { data } = await axios.post(PROFILE_URL, newProfile, { headers: { 'x-auth-token': getState().auth.user.token } }) dispatch(profileActions.setProfile(data)) dispatch(profileActions.setIsProfileCreated()) setTimeout( () => dispatch(profileActions.clearIsProfileCreated()), 2000 ); } catch (error) { const err = error.response?.data.msg if (err) { dispatch(alertActions.createAlert(err)); dispatch(alertActions.clearAlert(err)); } const errors = error.response.data.errors errors?.forEach((err) => { dispatch(alertActions.createAlert(err.msg)); dispatch(alertActions.clearAlert(err.id)); }); dispatch(profileActions.clearLoading()) } } } **** const navigate = useNavigate(); const dispatch = useDispatch(); const { loading, isProfileCreated } = useSelector((state) => state.profile); const { alerts } = useSelector((state) => state.alert); const addNewProfile = (e) => { e.preventDefault(); dispatch( createProfile({ status, company, website, location, skills, githubusername, bio, twitter, facebook, instagram, linkedin, youtube, }) ); alerts.map((alert) => dispatch(alertActions.clearAlert(alert.id))); }; useEffect(() => { if (alerts.length > 0) { setShow(true); setTimeout(() => { setShow(false); }, 3000); } }, [alerts]); useEffect(() => { if (isProfileCreated) { navigate("/dashboard"); } }, [navigate, isProfileCreated]); هنا يتم إنشاء الملف الشخصي، ويتم تسجيل كافة المعطيات بقاعدة البيانات. المشكل الذي أواجهه. في الكود التالي const { profile } = useSelector((state) => state.profile); console.log(profile) عندما أقوم بتحديث الصفحة تصبح profile مصفوفة فارغة. أرجو المساعدة.
  13. محمود_سعداوي
    هذه هي profileSlice const profileSlice = createSlice({ name: "profile", initialState: { profile: [], loading: false, isProfileCreated: false, }, reducers: { setProfile(state, action) { state.profile = action.payload }, setLoading(state) { state.loading = true }, clearLoading(state) { state.loading = false }, setIsProfileCreated(state) { state.isProfileCreated = true; state.loading = false }, clearIsProfileCreated(state) { state.isProfileCreated = false; }, addExperience(state, action) { state.profile.experience = action.payload } }, }); profileApiCall export function createProfile(newProfile) { return async(dispatch, getState) => { try { dispatch(profileActions.setLoading()) const { data } = await axios.post(PROFILE_URL, newProfile, { headers: { 'x-auth-token': getState().auth.user.token } }) dispatch(profileActions.setProfile(data)) dispatch(profileActions.setIsProfileCreated()) setTimeout( () => dispatch(profileActions.clearIsProfileCreated()), 2000 ); } catch (error) { const err = error.response?.data.msg if (err) { dispatch(alertActions.createAlert(err)); dispatch(alertActions.clearAlert(err)); } const errors = error.response.data.errors errors?.forEach((err) => { dispatch(alertActions.createAlert(err.msg)); dispatch(alertActions.clearAlert(err.id)); }); dispatch(profileActions.clearLoading()) } } }
  14. محمود_سعداوي
    السلام عليكم. في الكود التالي: function DashboardScreen() { const { profile } = useSelector((state) => state.profile); return ( <div className="mt-16"> {profile.length === 0 ? ( <> <Title>Dashboard</Title> <div className="mx-4 mb-4 lg:mx-8"> <p className="text-lg text-zinc-800 my-4"> You have not yet setup a profile, please add some info. </p> <Button> <Link to="/dashboard/create-profile">Create Profile</Link> </Button> </div> </> ) : ( <> <MyComponent/> </> )} </div> ); } export default DashboardScreen; في البداية كل شيء تمام. لكن عندما أقوم بتحديث الصفحة يكون طول المصفوفة صفر. الرجاء المساعدة.
  15. محمود_سعداوي
    السلام عليكم وعيد مبارك. هل يوجد امتداد أو برنامج يمكنني بأخذ صورة لصفحة الويب بالطريقة التالية: شكرا.
  16. محمود_سعداوي
    المشكل أن الكود يعمل دون تحريك. يعني لم يتم تفعيل animation
  17. محمود_سعداوي
    السلام عليكم. في الكود التالي لم أعرف لماذا يقع تفعيل التحريك (animation) الكود الأول <div className={`w-20 bg-slate-50 flex flex-col absolute top-14 transition-all duration-500 ease-in-out`} style={{ right: dropdown ? "2px" : "-100%", }} > الكود الثاني <div className={`w-20 bg-slate-50 flex flex-col absolute top-14 transition-all duration-500 ease-in-out ${dropdown ? "right-2" : "right-[-100%]"}`} // style={{ // right: dropdown ? "2px" : "-100%", // }} > شكرا.
  18. محمود_سعداوي
    لكن الكود الأول لم يعمل علما وأني لم أقم بتغيير الشيفرة غير التي أرفقتها تفضل هذا الكود الخاص بتسجيل الدخول وتعديل المستخدم /** * desc Register user * route POST /api/users * access Public */ const registerUser = asyncHandler(async (req, res) => { const { name, email, password } = req.body; const userExist = await User.findOne({ email }); if (userExist) { res.status(400).json({ message: "User Already Exist" }); } const user = await User.create({ name, email, password, }); if (user) { generateToken(res, user._id); res.status(201).json({ _id: user._id, name: user.name, email: user.email, isAdmin: user.isAdmin, }); } else { res.status(400).json({ message: "Invalid User Data" }); } }); /** * desc Update User profile * route PUT /api/users/profile * access Private */ const updateUserProfile = asyncHandler(async (req, res) => { const user = await User.findById(req.user._id); if (user) { user.name = req.body.name || user.name; user.email = req.body.email || user.email; if (req.body.password) { user.password = req.body.password; } const updatedUser = await user.save(); res.json({ _id: updatedUser._id, name: updatedUser.name, email: updatedUser.email, isAdmin: updatedUser.isAdmin, }); } else { res.status(404); throw new Error('User not found'); } });
  19. محمود_سعداوي
    السلام عليكم. لو تسمحوا أود معرفة الإختلاف بين الكودين التاليين. الكود الأول: userSchema.methods.matchPassword = async function (enteredPassword) { return await bcrypt.compare(enteredPassword, this.password); }; // Encrypt password using bcrypt userSchema.pre('save', async function (next) { if (!this.isModified('password')) { next(); } const salt = await bcrypt.genSalt(10); this.password = await bcrypt.hash(this.password, salt); }); الكود الثاني: userSchema.methods.matchPassword = async function (enteredPassword) { return await bcrypt.compare(enteredPassword, this.password) } // Encrypt password using bcrypt userSchema.pre('save', async function (next) { if (!this.isModified('password')) { next(); } const salt = await bcrypt.genSalt(10); const hashedPassword = await bcrypt.hash(this.password, salt); this.password = hashedPassword; }); مع العلم أن الكود الأول لم يقم بتشفير كلمة بينما الكود الثاني قام بتشفير كلمة المرور. شكرا على المساعدة.
  20. محمود_سعداوي
    تفضل
  21. محمود_سعداوي
    لا توجد لدي إضافات remix لم أجد إضافات remix
  22. محمود_سعداوي
    كيف أعرف ذلك
  23. محمود_سعداوي
    نتيجة البحث بدت فارغة. ليس لدي إضافات إذن
  24. محمود_سعداوي
    السلام عليكم ورمضان مبارك عليكم. يبدو أنني قمت بإضافة إمتداد في vs code مثلما توضح الصورة التالية أرجو المساعدة في معرفة هذا الإمتداد قصد حذفه. أعتذر على الجودة الضعيفة للصورة. شكرا.
  25. محمود_سعداوي
    السلام عليكم. أريد إضافة أزرار PayPal كمايلي: قمت بالكود التالي: index.js <PayPalScriptProvider deferLoading={true}> <App /> </PayPalScriptProvider> <> <button className="p-2 bg-slate-700 text-slate-100 rounded" onClick={onApproveTest}>Test Pay Order</button> <div className="bg-slate-100"> <PayPalButtons createOrder={createOrder} onApprove={onApprove} onError={onError} ></PayPalButtons> </div> </> المشكل أنه لم يتم التعرف على العنصر PayPalButtons وبالتالي لم تظهر الأزرار شكرا للمساعدة
×
×
  • أضف...