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

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

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

  • المساهمات

    604

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

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

 نوع المحتوى 

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

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

  1. محمود سعداوي2
    السلام عليكم. أود الإستفادة من ملاحظاتكم وتقييمكم محتوا وتصميما لموقعي الشخصي https://personal-portfolio-git-main-mahmouds-projects-1d23a688.vercel.app/en شكرا لكم
  2. محمود سعداوي2
    السلام عليكم بالإعتماد على تجاربكم أود آراءكم في أفضل المكتبات التي تساعد العملاء في في إرال إيميلات عند الإطلاع على الموقعالشخصي شكرا
  3. محمود سعداوي2
    السلام عليكم. أواجه مشكلة في استخدام next-intl مع Next.js 15 حيث يظهر لي خطأ متعلق بـ Hydration وآخر متعلق بالترويسات المسؤولة عن تحديد اللغة المحلية. الخطأ الأول: الخطأ الثاني: الخطأ يحدث عند محاولة استخدام الترويسة headers() بدون انتظار النتيجة بشكل صحيح. الخطأ الثالث: ملاحظات: لتوضيح أكثر، هذه هي تفاصيل الكود الذي أستخدمه: next.config.js: const nextConfig = { timeZone: "Africa/Tunis", }; const withNextIntl = require("next-intl/plugin")("./i18n.js"); module.exports = withNextIntl(nextConfig); i18n.js: import { getRequestConfig } from "next-intl/server"; export default getRequestConfig(async ({ locale }) => ({ // locale مشطبة messages: (await import(`./messages/${locale}.json`)).default, timeZone: "Africa/Tunis", })); middleware.js: import createMiddleware from "next-intl/middleware"; export default createMiddleware({ locales: ["en", "fr", "ar"], defaultLocale: "en", }); export const config = { matcher: ["/((?!api|_next|.*\\..*).*)"], }; app/[locale]/layout.js import { NextIntlClientProvider } from "next-intl"; import { AppProvider } from "@/context/AppContext"; import { Tajawal } from "next/font/google"; import { getLocale, getMessages } from "next-intl/server"; const tajawal = Tajawal({ subsets: ["arabic"], weight: ["300", "400", "500", "700"], }); export default async function RootLayout({ children }) { const locale = await getLocale(); const messages = getMessages() const direction = locale === "ar" ? "rtl" : "ltr"; const fontClassName = tajawal.className; return ( <html lang={locale} dir={direction}> <body className={fontClassName}> <NextIntlClientProvider locale={locale} messages={messages}> <AppProvider>{children}</AppProvider> </NextIntlClientProvider> </body> </html> ); } ملاحظات إضافية: لتجنب مشكلة الـ Hydration قمت بتجربة استخدام useEffect ولكن لم يعمل الكود كما يجب. شكرا
  4. محمود سعداوي2
    السلام عليكم. أواجه مشكل في إستخدام next-intel مع nextjs15 حيث يظهر لي خطأ hydration وآخر حول الترويسات المسؤولة عن تحديد اللغة المحلية. الخطأ الأول Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used - A server/client branch `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. See more info here: https://nextjs.org/docs/messages/react-hydration-error - lang="en" - dir="ltr" - className="__className_f09b3f" الخطأ الثاني Error: Route "/[locale]" used `headers().get('X-NEXT-INTL-LOCALE')`. `headers()` should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at apply (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.react-server.development.js:888:26) at locale (webpack:///i18n.js?938b:3:41) at apply (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.react-server.development.js:888:26) at apply (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.react-server.development.js:888:26) at apply (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.react-server.development.js:888:26) at getLocale (webpack:///app/[locale]/layout.js?3ae2:12:33) 1 | import { getRequestConfig } from "next-intl/server"; 2 | > 3 | export default getRequestConfig(async ({ locale }) => ({ | ^ 4 | messages: (await import(`./messages/${locale}.json`)).default, 5 | timeZone: "Africa/Tunis", 6 | })); Error: INVALID_KEY: Namespace keys can not contain the character "." as this is used to express nesting. Please remove it or replace it with another character. Invalid keys: (app-pages-browser)/./context/AppContext.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next-intl/dist/esm/shared/NextIntlClientProvider.js (at _response._bundlerConfig), (app-pages-browser)/./app/[locale]/page.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/client-page.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/client-segment.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/lib/metadata/metadata-boundary.js (at _response._bundlerConfig) If you're migrating from a flat structure, you can convert your messages as follows: import {set} from "lodash"; const input = { "one.one": "1.1", "one.two": "1.2", "two.one.one": "2.1.1" }; const output = Object.entries(input).reduce( (acc, [key, value]) => set(acc, key, value), {} ); // Output: // // { // "one": { // "one": "1.1", // "two": "1.2" // }, // "two": { // "one": { // "one": "2.1.1" // } // } // } at nextCreate (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:3911:19) at useMemo (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.development.js:1495:33) { code: 'INVALID_KEY', originalMessage: 'Namespace keys can not contain the character "." as this is used to express nesting. Please remove it or replace it with another character.\n' + '\n' + 'Invalid keys: (app-pages-browser)/./context/AppContext.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next-intl/dist/esm/shared/NextIntlClientProvider.js (at _response._bundlerConfig), (app-pages-browser)/./app/[locale]/page.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/client-page.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/client-segment.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/lib/metadata/metadata-boundary.js (at _response._bundlerConfig)\n' + '\n' + "If you're migrating from a flat structure, you can convert your messages as follows:\n" + '\n' + 'import {set} from "lodash";\n' + '\n' + 'const input = {\n' + ' "one.one": "1.1",\n' + ' "one.two": "1.2",\n' + ' "two.one.one": "2.1.1"\n' + '};\n' + '\n' + 'const output = Object.entries(input).reduce(\n' + ' (acc, [key, value]) => set(acc, key, value),\n' + ' {}\n' + ');\n' + '\n' + '// Output:\n' + '//\n' + '// {\n' + '// "one": {\n' + '// "one": "1.1",\n' + '// "two": "1.2"\n' + '// },\n' + '// },\n' + '// "two": {\n' + '// "one": {\n' + '// "one": "2.1.1"\n' + '// }\n' + '// }\n' + '// }\n' } للتوضيح أكثر هذا الكود كاملا next.config.js const nextConfig = { timeZone: "Africa/Tunis", }; const withNextIntl = require("next-intl/plugin")("./i18n.js"); module.exports = withNextIntl(nextConfig); i18n.js import { getRequestConfig } from "next-intl/server"; export default getRequestConfig(async ({ locale }) => ({ messages: (await import(`./messages/${locale}.json`)).default, timeZone: "Africa/Tunis", })); middleware.js import createMiddleware from "next-intl/middleware"; export default createMiddleware({ locales: ["en", "fr", "ar"], defaultLocale: "en", }); export const config = { matcher: ["/((?!api|_next|.*\\..*).*)"], }; app/[locale]/layout.js import { NextIntlClientProvider } from "next-intl"; import { AppProvider } from "@/context/AppContext"; import { Tajawal } from "next/font/google"; import { getLocale, getMessages } from "next-intl/server"; const tajawal = Tajawal({ subsets: ["arabic"], weight: ["300", "400", "500", "700"], }); export default async function RootLayout({ children }) { const locale = await getLocale(); const messages = getMessages() const direction = locale === "ar" ? "rtl" : "ltr"; const fontClassName = tajawal.className; return ( <html lang={locale} dir={direction}> <body className={fontClassName}> <NextIntlClientProvider locale={locale} messages={messages}> <AppProvider>{children}</AppProvider> </NextIntlClientProvider> </body> </html> ); } ملاحظة لتفادي hydration قمت بتجربة الخطاف useEffect إلا أنه لم يتم تفعيل الكود بتاتا. شكرا لكم.
  5. محمود سعداوي2
    شكرا ولكن ظهر هذا الخطأ node_modules\next-intl\dist\development\shared\NextIntlClientProvider.js (23:11) @ NextIntlClientProvider ⨯ Error: Failed to determine locale in `NextIntlClientProvider`, please provide the `locale` prop explicitly. See https://next-intl-docs.vercel.app/docs/configuration#locale at AsyncResource.runInAsyncScope (node:async_hooks:206:9) digest: "1085825041" 21 | 22 | if (!locale) { > 23 | throw new Error('Failed to determine locale in `NextIntlClientProvider`, please provide the `locale` prop explicitly.\n\nSee https://next-intl-docs.vercel.app/docs/configuration#locale' ); | ^ 24 | } 25 | return /*#__PURE__*/React__default.default.createElement(_IntlProvider.IntlProvider, _rollupPluginBabelHelpers.extends({ 26 | locale: locale GET /en 500 in 4488ms
  6. محمود سعداوي2
    لايزال نفس الخطأ وأرجح أن يكون بسبب lang أو dir.
  7. محمود سعداوي2
    السلام عليكم. الكود التالي import {NextIntlClientProvider} from 'next-intl'; import {getLocale, getMessages} from 'next-intl/server'; import { AppProvider } from "@/context/AppContext"; import { Tajawal } from "next/font/google"; const ubuntu = Tajawal({ subsets: ["arabic"], weight: ["300", "400", "500", "700"], }); export default async function RootLayout({ children }) { const locale = await getLocale(); const messages = await getMessages(); const direction = locale === "ar" ? "rtl" : "ltr"; return ( <html lang={locale} dir={direction}> <body className={ubuntu.className}> <NextIntlClientProvider messages={messages}> <AppProvider> {children} </AppProvider> </NextIntlClientProvider> </body> </html> ); } تسبب في هذا الخطأ Console Error Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used - A server/client branch `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. See more info here: https://nextjs.org/docs/messages/react-hydration-error - lang="en" - dir="ltr" - className="__className_f09b3f" Call Stack Next.js شكرا لكم
  8. محمود سعداوي2
    السلام عليكم. أود أن أسأل علىcustum hook في react. ماهي مميزاتها وماهي فائدتها خاصة بعد النسخ الحديثة متى نستعملها هل يمكن تعويضها عبر إستعمال برامج لإدارة الحالة كredux او حتى react context شكرا.
  9. محمود سعداوي2
    السلام عليكم. إعتمدت على react-quill لإرسال بيانات إلى قاعدة البيانات كما يلي "use client"; import React, { SetStateAction, useState } from 'react'; import dynamic from 'next/dynamic'; import 'react-quill/dist/quill.snow.css'; import { useTranslations } from 'next-intl'; const QuillEditor = dynamic(() => import('react-quill'), { ssr: false }); type DescriptionProps = { description: string, setDescription: React.Dispatch<React.SetStateAction<string>> } const Description = ({description, setDescription}: DescriptionProps) => { const t = useTranslations('Add Task') // const [description, setDescription] = useState<string>(''); const quillModules = { toolbar: [ [{ header: [1, 2, 3, false] }], ['bold', 'italic', 'underline', 'strike', 'blockquote'], [{ list: 'ordered' }, { list: 'bullet' }], ['link', 'image'], [{ align: [] }], [{ color: [] }], ['code-block'], ['clean'], ], }; const quillFormats = [ 'header', 'bold', 'italic', 'underline', 'strike', 'blockquote', 'list', 'bullet', 'link', 'image', 'align', 'color', 'code-block', ]; const handleEditorChange = (content: SetStateAction<string>) => { setDescription(content); }; return ( <div className=" bg-gradient-to-br from-white to-gray-100 dark:from-gray-800 dark:to-gray-900"> <h2 className="text-gray-800 dark:text-gray-300 font-medium mb-2"> {t('task_description')} </h2> <QuillEditor value={description} onChange={handleEditorChange} modules={quillModules} formats={quillFormats} className="w-full bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-4 focus:ring-indigo-400 focus:border-indigo-500 transition-all text-gray-900 dark:text-gray-100 text-xl" /> </div> ); }; export default Description; المشكل الذي أواجهه هو أنه عند عرض البيانات لايتم عرضها كما أرسلتها (ul - ol ...) الكود <p className="mb-6 text-gray-700 dark:text-gray-300 text-justify" dangerouslySetInnerHTML={{ __html: task.description }} > {/* {task.description} */} </p> شكرا
  10. محمود سعداوي2
    شكرا لكم. في الواقع وجدت الحل لكن بطريقة أخرى حيث قمت بفصل الform على الmodal.
  11. محمود سعداوي2
    السلام عليكم. الرجاء المساعدة في تجاوز الخطأ التالي Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error الكود 'use client' import { useTranslations } from 'next-intl'; import { useEffect, useState } from 'react'; import Description from './Description'; import { IoIosClose } from 'react-icons/io'; import { Task } from '@prisma/client'; import moment from 'moment'; interface UpdateTaskProps { task: Task } const UpdateTask = ({ task }: UpdateTaskProps) => { const t = useTranslations("Add Task"); const [isMounted, setIsMounted] = useState(false) // Handle open/close update modal const [updateTaskModal, setUpdateTaskModal] = useState(false) const openUpdateTaskModal = () => setUpdateTaskModal(true) const closeUpdateTaskModal = () => setUpdateTaskModal(false) // handle update modal const [title, setTitle] = useState(task.title); const [description, setDescription] = useState(task.description); const [from, setFrom] = useState(task.from); const [to, setTo] = useState(task.to); const [status, setStatus] = useState(task.status); useEffect(() => { setIsMounted(true); if (task) { setTitle(task.title || "") setDescription(task.description || "") setFrom(task.from || null); setTo(task.to || null); setStatus(task.status || "") } }, [task]); if (!isMounted) return null; return ( <div className="relative"> {/* Modal */} {updateTaskModal ? ( <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50"> <div className="bg-white dark:bg-gray-800 rounded-lg p-6 w-11/12 md:w-3/4 shadow-xl overflow-auto max-h-[85vh]"> {/* {alert.type && <Toast alertText={alert.alertText} type={alert.type} />} */} {/* Close Button */} <button onClick={closeUpdateTaskModal} className="absolute top-1 right-1 bg-rubyRed p-1 rounded-full hover:bg-red-600" > <IoIosClose className="text-3xl text-white" /> </button> {/* Form */} <form // onSubmit={AddNewTask} className="space-y-6" > <div> <label className="block text-gray-800 dark:text-gray-300 font-medium mb-2"> {t("title")} </label> <input type="text" name="title" className="w-full p-3 border rounded-lg dark:bg-gray-700 dark:text-white" placeholder={t("enter_task_title")} value={title} onChange={(e) => setTitle(e.target.value)} /> </div> {/* Text editor Component */} <Description description={description} setDescription={setDescription} /> <div> <label className="block text-gray-800 dark:text-gray-300 font-medium mb-2"> {t("status")} </label> <select name="status" className="w-full p-3 border rounded-lg dark:bg-gray-700 dark:text-white" onChange={(e) => setStatus(e.target.value)} > <option value="NotStarted">{t("not_started")}</option> <option value="InProgress">{t("in_progress")}</option> <option value="Completed">{t("completed")}</option> </select> </div> <div className="grid grid-cols-2 gap-4"> <div> <label className="block text-gray-800 dark:text-gray-300 font-medium mb-2"> {t("from")} </label> <input type="date" name="from" className="w-full p-3 border rounded-lg dark:bg-gray-700 dark:text-white" value={from ? moment(from).format('YYYY-MM-DD') : ''} onChange={(e) => setFrom(new Date(e.target.value))} /> </div> <div> <label className="block text-gray-800 dark:text-gray-300 font-medium mb-2"> {t("to")} </label> <input type="date" name="to" className="w-full p-3 border rounded-lg dark:bg-gray-700 dark:text-white" value={to ? moment(to).format('YYYY-MM-DD') : ''} onChange={(e) => setTo(new Date(e.target.value))} /> </div> </div> <button type="submit" className="w-full bg-royalPurple text-white p-3 rounded-lg hover:bg-slate-700 transition" >{t('update')}</button> </form> </div> </div> ) : (<button onClick={openUpdateTaskModal} className="px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all" > Update </button>)} </div> ) } export default UpdateTask شكرا لكم.
  12. محمود سعداوي2
    شكرا مفس الشيء. هذه رسالة الخطأ Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale. The `notFound()` function will be called as a result.
  13. محمود سعداوي2
    السلام عليكم. نبذة عن المشروع: عبارة عن قائمة مهام باستخدام nextjs typescript postegres prisma. المستخدم المسجل هو فقط من يمكنه إضافة مهمة بنية المشروع: src |_ app |_[locale] |_api |_taskaties middleware.ts i18n.ts taskaties/route.ts export async function GET (request: NextRequest) { try { const user = verifyToken(request) if (!user) { return NextResponse.json({message: "Access Denied!"}, {status: 401}) } const tasks = await prisma.task.findMany() return NextResponse.json(tasks, {status: 201}) } catch (error) { console.error("Error: ", error) return NextResponse.json({ message: "Internal Server Error" }, { status: 500 }) } } middleware.ts 1. export const config = { matcher: ['/((?!api|_next|.*\\..*).*)', '/api/taskaties/*], } export function middleware (request: NextRequest) { const token = request.cookies.get('jwtToken')?.value if (!token) { if (request.nextUrl.pathname.startsWith("/api/taskaties")) { return NextResponse.json( { message: 'No Token Provided, Access Denied!' }, { status: 401 } ) } } return NextResponse.next() } export default createMiddleware({ locales: ["en", "fr", "ar"], defaultLocale: "ar", }); في هذه الحالة يتم جلب المهام من قاعدة البيانات غير أنه لايتم التعرف على الواجهات ويتم إرجاع صفحة notFound 2. قمت بتعديل الكود ليصير كالتالي export const config = { matcher: ['/((?!api|_next|.*\\..*).*)'], } export function middleware(request: NextRequest) { const token = request.cookies.get('jwtToken')?.value; if (!token && request.nextUrl.pathname.startsWith("/api/taskaties")) { return NextResponse.json( { message: 'No Token Provided, Access Denied!' }, { status: 401 } ); } return createMiddleware({ locales: ["en", "fr", "ar"], defaultLocale: "en", })(request); } غير أ،ه في هذه الحالة عندما لا يكون لدي token يتم إرجاع `{message: "Access Denied!"}, {status: 401}` عوضا عن `{ message: 'No Token Provided, Access Denied!' }` وبالتالي لم يتم تفعيل الدوال الوسيطة التي تهدف للتحقق من المستخدم. شكرا
  14. محمود سعداوي2
    نفس المشكل. هذا هو الكود كاملا. e.preventDefault(); setLoading(true); setAlert({ alertText: "", type: "" }); let errorMessage = ""; if (first_name === "") { errorMessage = "First Name is required"; } else if (last_name === "") { errorMessage = "Last Name is required"; } else if (email === "") { errorMessage = "Email is required"; } else if (password === "") { errorMessage = "Password is required"; } if (errorMessage) { setAlert({ alertText: errorMessage, type: "error" }); setLoading(false); return; } register form "use client"; import { useTranslations } from "next-intl"; import React, { FormEvent, useContext, useState } from "react"; import Toast from "../toast"; import { AppContext } from "@/context/AppContext"; const RegisterForm = () => { const t = useTranslations("Auth"); const context = useContext(AppContext); const [first_name, setFirst_name] = useState(""); const [last_name, setLast_name] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [loading, setLoading] = useState(false); if (!context) { throw new Error("AppContext must be used within an AppProvider"); } const { alert, setAlert } = context; const submitFormHandler = (e: FormEvent) => { e.preventDefault(); setLoading(true); setAlert({ alertText: "", type: "" }); let errorMessage = ""; if (first_name === "") { errorMessage = "First Name is required"; } else if (last_name === "") { errorMessage = "Last Name is required"; } else if (email === "") { errorMessage = "Email is required"; } else if (password === "") { errorMessage = "Password is required"; } if (errorMessage) { setAlert({ alertText: errorMessage, type: "error" }); setLoading(false); return; } }; return ( <div> {alert.alertText && ( <Toast alertText={alert.alertText} type={alert.type}/> )} <form onSubmit={submitFormHandler}> {/* First Name & Last Name Fields */} <div className="flex justify-between"> <div className="w-1/2 mx-2 mb-4"> <label className="text-white dark:text-coolGray"> {t("first_name")} <span className="text-rubyRed">*</span> </label> <input type="text" name="firstName" value={first_name} onChange={(e) => setFirst_name(e.target.value)} className={`w-full p-2 border ${first_name === "" ? "border-rubyRed" : "border-coolGray"} dark:border-white bg-white dark:bg-slateGray text-slateGray dark:text-white rounded-lg focus:outline-none focus:border-leafGreen`} /> </div> <div className="w-1/2 mx-2 mb-4"> <label className="text-white dark:text-coolGray"> {t("last_name")} <span className="text-rubyRed">*</span> </label> <input type="text" name="lastName" autoComplete="off" value={last_name} onChange={(e) => setLast_name(e.target.value)} className={`w-full p-2 border ${first_name === "" ? "border-rubyRed" : "border-coolGray"} dark:border-white bg-white dark:bg-slateGray text-slateGray dark:text-white rounded-lg focus:outline-none focus:border-leafGreen`} /> </div> </div> {/* Email Field */} <div className="mb-4"> <label className="text-white dark:text-coolGray"> {t("email")} <span className="text-rubyRed">*</span> </label> <input type="email" name="email" autoComplete="off" value={email} onChange={(e) => setEmail(e.target.value)} className={`w-full p-2 border ${email === "" ? "border-rubyRed" : "border-coolGray"} dark:border-white bg-white dark:bg-slateGray text-slateGray dark:text-white rounded-lg focus:outline-none focus:border-leafGreen`} /> </div> {/* Password Field */} <div className="mb-4"> <label className="text-white dark:text-coolGray"> {t("password")} <span className="text-rubyRed">*</span> </label> <input type="password" name="password" autoComplete="off" value={password} onChange={(e) => setPassword(e.target.value)} className={`w-full p-2 border ${password === "" ? "border-rubyRed" : "border-coolGray"} dark:border-white bg-white dark:bg-slateGray text-slateGray dark:text-white rounded-lg focus:outline-none focus:border-leafGreen`} /> </div> <p className="text-rubyRed mb-4">* {t('required')}</p> {/* Register Button */} <button type="submit" className="button button-block w-full py-2 text-lg font-semibold text-white bg-leafGreen hover:bg-coralRed rounded-lg transition-all duration-300" > {t("register")} </button> </form> </div> ); }; export default RegisterForm;
  15. محمود سعداوي2
    السلام عليكم. عند إنشاء حساب جديد لابد على المستخدم إدخال كافة المعطيات (last name, first name, email, password) بحيث إدخال حقل فارغ يعني ظهور رسالة خطأ. في الكود التالي const context = useContext(AppContext); const [first_name, setFirst_name] = useState(""); const [last_name, setLast_name] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [loading, setLoading] = useState(false); if (!context) { throw new Error("AppContext must be used within an AppProvider"); } const { alert, setAlert } = context; const submitFormHandler = (e: FormEvent) => { e.preventDefault(); setLoading(true); // Validation if (first_name === "") { setAlert({ alertText: "First Name is required", type: "error" }); setLoading(false); return; } if (last_name === "") { setAlert({ alertText: "Last Name is required", type: "error" }); setLoading(false); return; } if (email === "") { setAlert({ alertText: "Email is required", type: "error" }); setLoading(false); return; } if (password === "") { setAlert({ alertText: "Password is required", type: "error" }); setLoading(false); return; } }; ***** return ( <div> {alert.alertText && ( <Toast alertText={alert.alertText} type={alert.type}/> )} <form onSubmit={submitFormHandler}> -------- </form> </div> ); عندما تكون كافة الحقول فارغة تظهر رسالة الخطأ الأولى، ولكن بعد ملئ الحقل الأول وترك بقية الحقول فارغة لاتظهر رسالة خطأ مجددا للتوضيح. AppContext "use client" import { Alert } from "@/utils/types"; import { createContext, ReactNode, useState } from "react" type Props = { children: ReactNode; }; type AppContextType = { darkMode: boolean, toggleMode: () => void, alert: Alert, setAlert: (alert: Alert) => void, } | null export const AppContext = createContext<AppContextType>({ darkMode: false, toggleMode: () => {}, alert: { type: "", alertText: "" }, setAlert: () => {}, }) export const AppProvider = ({ children }: Props) => { const [darkMode, setDarkMode] = useState(false) const [alert, setAlert] = useState<Alert>({ type: "", alertText: "" }); const toggleMode = () => { setDarkMode(!darkMode) } return ( <AppContext.Provider value = {{toggleMode, darkMode, alert, setAlert}}> <div className={`${darkMode && "dark"}`}> {children} </div> </AppContext.Provider> ) } شكرا لكم.
  16. محمود سعداوي2
    السلام عليكم. أواجه مشكل في ضبط timeZone حيث يظهر الخطأ التالي IntlError: ENVIRONMENT_FALLBACK: There is no `timeZone` configured, this can lead to markup mismatches caused by environment differences. Consider adding a global default: https://next-intl-docs.vercel.app/docs/configuration#time-zone ******************** originalMessage: 'There is no `timeZone` configured, this can lead to markup mismatches caused by environment differences. Consider adding a global default: https://next-intl-docs.vercel.app/docs/configuration#time-zone' الكود. next.config.js /** @type {import('next').NextConfig} */ const nextConfig = {}; const withNextIntl = require("next-intl/plugin")("./src/i18n.ts"); module.exports = withNextIntl(nextConfig); src/i18n.ts import { getRequestConfig } from "next-intl/server"; export default getRequestConfig(async ({ locale }) => ({ messages: (await import(`../messages/${locale}.json`)).default, })); middleware.ts import createMiddleware from "next-intl/middleware"; export default createMiddleware({ locales: ["en", "fr", "ar"], defaultLocale: "ar", }); export const config = { matcher: ['/((?!api|_next|.*\\..*).*)'], } شكرا لكم
  17. محمود سعداوي2
    السلام عليكم. أواجه الكثير من الأخطاء بسبب سوء إستعمال next-intel حيث تظهر الصفحة الرئيسية في البداية ثم تختفي. الكود src/app/layout.tsx import type { Metadata } from "next"; import "./globals.css"; import { Tajawal } from 'next/font/google'; import Fixed from "@/components/fixed"; import { ThemeProvider } from "@/context/ThemeContext"; import { ReactNode } from "react"; export const metadata: Metadata = { title: "Taskaty", description: "Notes App Project Using Nextjs | Typescript | PostgreSql", keywords: "notes, to do, todos, note, task, tasks", authors: [ { name: "Saadaoui Mahmoud", }, ], icons: { icon: "/icon.png", }, }; type Props = { children: ReactNode; }; export default function RootLayout({ children }: Props) { return children; } src/app/page.tsx import { redirect } from "next/navigation"; export default function RootPage() { redirect("/en"); } src/[locale]/layout.tsx "use client"; import { NextIntlClientProvider } from "next-intl"; import { ReactNode } from "react"; import { notFound } from "next/navigation"; import Fixed from "@/components/fixed"; import { ThemeProvider } from "@/context/ThemeContext"; import { Tajawal } from "next/font/google"; const ubuntu = Tajawal({ subsets: ["arabic"], weight: ["300", "400", "500", "700"], }); export default async function RootLayout({ children, params: { locale }, }: { children: ReactNode; params: { locale: string }; }) { let messages; try { messages = (await import(`../../../messages/${locale}.json`)).default; } catch (error) { notFound(); } return ( <html lang={locale} dir={locale === "ar" ? "rtl" : "ltr"}> <body className={ubuntu.className}> <NextIntlClientProvider locale={locale} messages={messages}> <ThemeProvider> <> <Fixed /> {children} </> </ThemeProvider> </NextIntlClientProvider> </body> </html> ); } src/[locale]/page.tsx "use client" import { useTranslations } from "next-intl"; import Auth from "@/components/auth/Auth"; import Image from "next/image"; import logo from "../../../public/logo.png"; const AuthForm = () => { const t = useTranslations('Home') return ( <div className="min-h-screen bg-coolGray dark:bg-slateGray p-1 transition-all duration-300"> {/* Logo Section */} <div className="flex justify-start items-start"> <Image src={logo} alt="Taskaty" width={120} height={100} /> </div> {/* Main Content */} <div className="text-center mb-5"> <p className="text-lg text-dustyGray dark:text-white max-w-lg mx-auto leading-relaxed"> <span className="text-2xl font-bold text-leafGreen dark:text-goldenYellow"> Taskaty </span>{" "} {t('intro')} <span className="font-semibold text-royalPurple dark:text-coralRed"> {t('start')} </span> </p> </div> {/* Bottom Section: AuthForm */} <div className="flex justify-center"> <Auth /> </div> </div> ); }; export default AuthForm; src/components/fixed "use client"; import { ThemeContext } from "@/context/ThemeContext"; import React, { useContext, useState } from "react"; import { CiSettings } from "react-icons/ci"; import { FiMoon, FiSun } from "react-icons/fi"; const Fixed = () => { const { darkMode, toggleMode } = useContext(ThemeContext); const [dropdownOpen, setDropdownOpen] = useState(false); const [language, setLanguage] = useState("English"); const toggleDropdown = () => { setDropdownOpen(!dropdownOpen); }; const changeLanguage = (lang: any) => { setLanguage(lang); setDropdownOpen(false); }; return ( <div className="fixed bottom-4 right-4 z-50"> <div className="relative"> {/* Settings Button */} <div onClick={toggleDropdown} className="flex items-center justify-center p-3 bg-coolGray dark:bg-gray-800 text-rubyRed dark:text-white rounded-full shadow-lg cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300" > <CiSettings className="text-2xl" /> </div> {/* Dropdown */} {dropdownOpen && ( <div onMouseEnter={() => setDropdownOpen(true)} onMouseLeave={() => setDropdownOpen(false)} className="absolute bottom-full right-0 mb-4 w-48 bg-white dark:bg-gray-700 border border-coolGray dark:border-gray-600 rounded-lg shadow-lg py-2 transition-all duration-300" > {/* Language Selection */} <div className="px-4 py-2 text-dustyGray dark:text-white"> <label className="font-bold" htmlFor="language-select"> Select Language: </label> <select id="language-select" value={language} onChange={(e) => changeLanguage(e.target.value)} className="mt-1 block w-full border border-coolGray dark:border-gray-600 bg-white dark:bg-slateGray text-slateGray dark:text-white rounded-lg focus:outline-none focus:ring focus:ring-leafGreen" > <option value="Français">Français</option> <option value="Arabe">العربية</option> <option value="English">English</option> </select> </div> {/* Dark/Light Mode Toggle */} <div onClick={toggleMode} className="flex items-center justify-between px-4 py-2 text-dustyGray dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer transition-all duration-300" > <span>{darkMode ? "Light Mode" : "Dark Mode"}</span> {darkMode ? ( <FiSun className="ml-2" /> ) : ( <FiMoon className="ml-2" /> )} </div> </div> )} </div> </div> ); }; export default Fixed; شكرا لكم.
  18. محمود سعداوي2
    عند تفعيل الأمر التالي npx prisma migrate dev في مشروع next postegres حصل الخطأ التالي Environment variables loaded from .env Prisma schema loaded from prisma\schema.prisma Datasource "db": PostgreSQL database "CloudHostingDB", schema "public" at "localhost:5432" Error: P1000: Authentication failed against database server at `localhost`, the provided database credentials for `postegres` are not valid. Please make sure to provide valid database credentials for the database server at `localhost`. وهذه بعض الصور لمزيد التوضيح 1. هذه الصورة عندما للمرة الأولى بفتح برنامج pg Admin 2. الإتصال بقاعدة البيانات بواسطة psql 3. شكرا على المساعدة
  19. محمود سعداوي2
    هذا ملف .env DATABASE_URL="postgresql://postegres:/*MahmouD_1989*/@localhost:5432/CloudHostingDB?schema=public" ملف schema.prisma generator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" url = env("DATABASE_URL") } model User { id Int @id @default(autoincrement()) username String @db.VarChar(100) email String @unique password String isAdmin Boolean @default(false) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt comments Comment[] } model Article { id Int @id @default(autoincrement()) title String @db.VarChar(200) description String createdAt DateTime @default(now()) updatedAt DateTime @updatedAt comments Comment[] } model Comment { id Int @id @default(autoincrement()) text String createdAt DateTime @default(now()) updatedAt DateTime @updatedAt articleId Int userId Int // One-to-Many relation between Article & Comment article Article @relation(fields: [articleId], references: [id]) // One-to-Many relation between User & Comment user User @relation(fields: [userId], references: [id]) }
  20. محمود سعداوي2
    مرحبا مجددا هذا ما ظهر لي عند تنفيذ الأمر npx prisma migrate dev ظهر نفس الخطأ مجددا
  21. محمود سعداوي2
    لم يتم التعرف على psql
  22. محمود سعداوي2
    كيف يكون ذلك
  23. محمود سعداوي2
    السلام عليكم. أود إنشاء الجداول في postegres فقمتكتابة الأمر التالي npx migrate prisma dev ظهر لي هذا الخطأ Environment variables loaded from .env Prisma schema loaded from prisma\schema.prisma Datasource "db": PostgreSQL database "**************@localhost:5432/CloudHostigDB", schema "public" at "postegres" Error: P1001: Can't reach database server at `postegres:5432` Please make sure your database server is running at `postegres:5432`. كيف يمكن معالجة هذا الخطأ. شكرا
  24. محمود سعداوي2
    كل شيء تمام الآن شكرا
  25. محمود سعداوي2
    يوجد pg Admin وpg Admin4. قمت بحذف pg Admin كيف ذلك
×
×
  • أضف...