شيماء راشد

أريد تخزين ref of DOM element في redux slice ولكن اواجه مشكلة تخزين non-serializable data في slice فحاولت حلها ب json.stringify ولكنها فشلت. فهل من حل؟

"use client"; import React, { useEffect } from "react"; import { Formik, Field, Form, ErrorMessage } from "formik"; import * as Yup from "yup"; import { LoadingView } from "../common"; import { useGetProductZoneQuery, useUpdateProductZoneMutation, useAddProductZoneMutation, useGetAllZoneMutation, useGetAllDeliveryTypesQuery, useGetAllProductsMutation, } from "@/services"; import { useRouter } from "next/navigation"; import Swal from "sweetalert2"; import { cloneDeep } from "lodash"; const EditProductZone = ({ id }) => { const router = useRouter(); const { data: { data = {} } = {}, isFetching: isFetchingProductZone } = useGetProductZoneQuery(id, { skip: isNaN(id), refetchOnMountOrArgChange: true, }); const [getAllZones, { isLoading: isFetchingZones, data: zones }] = useGetAllZoneMutation(); const [getAllProducts, { isLoading: isFetchingProducts, data: products }] = useGetAllProductsMutation(); const { data: deliveryTypes, isFetching: isFetchingDeliveryTypes } = useGetAllDeliveryTypesQuery(); const [updateProductZone, { isLoading: isUpdatingProductZone }] = useUpdateProductZoneMutation(); const [addProductZone, { isLoading: isAddingProductZone }] = useAddProductZoneMutation(); useEffect(() => { const getZones = async () => { const { data: { items = [] } = {} } = await getAllZones({ body: {} }); }; getZones(); }, []); useEffect(() => { const getProducts = async () => { const { data: { items = [], itemsCount, pageNumber, pageSize } = {} } = await getAllProducts({ body: {} }); let noOfPages = Math.ceil(itemsCount / pageSize); let currentPage = pageNumber; let productOptions = cloneDeep(items); while (currentPage < noOfPages - 1) { currentPage += 1; const { data: { items: additionalItems = [] } = {} } = await getAllProducts({ body: { pageNumber: currentPage }, }); productOptions.push(...additionalItems); } console.log("All products:", productOptions); }; getProducts(); }, []); const validationSchema = Yup.object({ productId: Yup.number().required("product is required"), zoneId: Yup.number().required("zone is required"), deliveryMethodId: Yup.number().required("delivery type is required"), }); const initialValues = { productId: data?.productId || "", zoneId: data?.zoneId || "", deliveryMethodId: data?.deliveryMethodId || "", }; const onResponse = (response, type) => { if (!response.error) { Swal.fire({ icon: "success", title: "Success.", text: type == "add" ? "ProductZone has been created" : "ProductZone has been updated", showConfirmButton: false, timer: 1000, }); router.push("/home/productZones"); } if (response?.error) { Swal.fire({ icon: "error", title: "Oops...", text: "Something went wrong!", }); } }; const onSubmit = async (values, { setSubmitting }) => { setSubmitting(true); if (!isNaN(id)) { const response = await updateProductZone({ id: data?.id, body: { id: data?.id, ...values, productId: Number(values.productId), zoneId: Number(values.zoneId), deliveryMethodId: Number(values.deliveryMethodId), }, }); onResponse(response, "update"); } else if (id === "add") { const response = await addProductZone({ body: { ...values, productId: Number(values.productId), zoneId: Number(values.zoneId), deliveryMethodId: Number(values.deliveryMethodId), }, }); onResponse(response, "add"); } setSubmitting(false); }; return ( <LoadingView isLoading={isFetchingProductZone || isUpdatingProductZone || isAddingProductZone || isFetchingZones || isFetchingProducts || isFetchingDeliveryTypes} > <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={onSubmit} > <Form className="w-full"> <div className="flex flex-wrap -mx-3 mb-6"> <div className="w-full md:w-1/3 px-3 mb-6 md:mb-0"> <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="zoneId" > Zone </label> <Field as="select" id="zoneId" name="zoneId" className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" > <option value="">Select a Zone</option> {zones && zones.items.map((zone) => ( <option key={zone.id} value={zone.id}> {zone.name} </option> ))} </Field> <ErrorMessage name="zoneId" component="div" className="text-[red]" /> </div> <div className="w-full md:w-1/3 px-3 mb-6 md:mb-0"> <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="productId" > Product </label> <Field as="select" id="productId" name="productId" className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" > <option value="">Select a Product</option> {products && products.items.map((product) => ( <option key={product.id} value={product.id}> {product.name} </option> ))} </Field> <ErrorMessage name="productId" component="div" className="text-[red]" /> </div> <div className="w-full md:w-1/3 px-3 mb-6 md:mb-0"> <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="deliveryMethodId" > Delivery Type </label> <Field as="select" id="deliveryMethodId" name="deliveryMethodId" className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" > <option value="">Select a Delivery type</option> {deliveryTypes && deliveryTypes.map((dt) => ( <option key={dt.value} value={dt.value}> {dt.label} </option> ))} </Field> <ErrorMessage name="deliveryMethodId" component="div" className="text-[red]" /> </div> </div> <div className="flex justify-center items-center mb-[2rem]"> <button type="submit" className="bg-[#005CE6] py-[0.5rem] px-[1rem] w-[30%] text-[white] transition-all hover:bg-[green]" > Submit </button> </div> </Form> </Formik> </LoadingView> ); }; export default EditProductZone; المشكلة ان products.items يرجع بها data في اخر page of pagination فقط وانا اريد data في كل الصفحات!!

هل في دورة javascript هنا بالأكاديمية ما يشرح stripe؟ وان لم يكن، هل يدلني احد على افضل فيديو او documentation (و يفضل فيديو) افهم منه شكرا

مشروعي ليس next هو reactjs & expressjs

هل اقوم فقط بانشاء ملف index.js وكتابة هذا الكود فيه؟ وكيف يتم الربط مع frontend موجود أيضاً على vercel؟

السلام عليكم لا استطيع نشر expressjs app على vercel وربطه ب react app منشور على vercel ليكون الواجهة البرمجية الخلفية له!!

جزء الواجهة الخلفية هو express app

@Mustafa Suleiman قمت بنشر كل من backend & frontend of the same project على vercel frontend part تظهر صفحاته، بينما backend يظهر به خطأ 404 كما انني لا استطيع الربط بينهما!!!

ايهم افضل، وهل تدلني على فيديو توضيحي لطريقة نشر تطبيقي؟ شكراً جزيلاً @Mustafa Suleiman

السلام عليكم لنشر تطبيق لي على heroku، قمت باتباع الخطوات الموجودة في ولكنني توقفت عند هذه الخطوة!!!

هل يوجد library بها component عندما امرر له رقم rating يرسم النجوم المقابلة لهذا الرقم؟ شكراً

اذا كان لدي picker اريد ان ارسل notification تحوي ما اخترته من picker، كيف ذلك؟!!

ولكن م./ مصطفى يبقى token مخزن حتى بعد غلق emulator؟ @Mustafa Suleiman و كيف اقوم ب clear cache من داخل emulator بدلاً من تعديل الكود حتى يكون العادي هو دخول المستخدم مباشرة إذا قام بالتسجيل مسبقاً؟

انشأت مشروع react native مع express و بعدما عمل على emulator و اضفت مستخدم و اغلقت emulator واوقفت كل من الواجهة الامامية و الخلفية بقي token موجود وعلمت ذلك لان مع وجود token تظهر buttons معينة وقد ظهرت عندما شغلت البرنامج مرة اخرى. فكيف ازيل token؟!!

ليس سؤال بل اقتراح. الشرح باللغة العربية شئ جيد للمساعدة على الفهم ولكن المصطلحات البرمجية تُقال مرة واحدة in English وبعد ذلك بالعربية طول الشرح مع أن المصطلح بالانجليزية اهم لانه الدارج في سوق العمل كما ان من عنده خلفية برمجية يتوه في الشرح مع تغير المصطلحات السائدة و المعروفة!!!