Abdullah Muhammad

يمكنك إستخدام createAsyncThunk الخطوة الأولى قم بإنشاء "thunk" كالتالي const fetchUserById = createAsyncThunk( 'users/fetchByIdStatus', async (userId, thunkAPI) => { const response = await userAPI.fetchById(userId) return response.data } ) الخطوة الثانيه قم بالتعامل مع هذا الأكشن داخل ال reducer عن طريق إستخدام extraReducers كالتالي const usersSlice = createSlice({ name: 'users', initialState: { entities: [], loading: 'idle' }, reducers: { }, extraReducers: { [fetchUserById.fulfilled]: (state, action) => { state.entities.push(action.payload) }, }, }) وأخيرا يمكنك أن تستدعي هذا ال "thunk" وعمل "dispatch" dispatch(fetchUserById(123))

يمكنك إستخدام gatsby-plugin-intl لإنشاء موقع متعدد اللغات وذلك كالتالي npm install gatsby-plugin-intl بعد ذلك في ملف gatsby-config.js نقوم بإضافة الإعدادات الخاصه بالإضافة كالتالي module.exports = { plugins: [ { resolve: `gatsby-plugin-intl`, options: { // المسار الذي سيتواجد به ملفات الترجمه path: `${__dirname}/src/langs`, // اللغات التي تود إستخدامها languages: [`ar`, `en`], // اللغة الإفتراضية للموقع defaultLanguage: `ar`, }, }, ], } بعد ذلك في المسار الذي حددته تقوم بإنشاء ملف خاص بكل لغه يحتوي على ترجمة المصطلحات المطلوبه ولكن لابد من مراعاة بعض الأمور لابد أن يكون إسم الملف كالتالي "[language].json" ف علي سبيل المثال "ar.json" "en.json" لابد من إستخدام نفس ال id الدال على الترجمه في كل ملف بحيث يكون شكل الملفات الناتجة كالتالي // ar.json { "aboutUs": "عنا", "comments": "التعليقات", "home": "الصفحة الرئيسية" } // وفي ملف en.json { "aboutUs": "about us", "comments": "Comments", "home": "Home Page" } بعد ذلك يمكنك تطبيق الترجمه داخل كل مكون او صفحة كالتالي import React from "react" import { useIntl } from "gatsby-plugin-intl" export default function Index() { const intl = useIntl() const locale = intl.locale !== "en" ? `/${intl.locale}` : "" return ( <div>{intl.formatMessage({ id: "home" })}</div> ) } حيث أنه بإستخدام "formatMessage" وتمرير ال id الذي نريد إيجاد الترجمة الخاصة به سوف يتم توليد المحتوى المطلوب على حسب اللغة المختاره يتبقى لنا أن نعرف كيف نقوم بالتبديل بين اللغات المتوفرة لدينا وذلك كالتالي import React from "react" import { Link } from "gatsby" export default function LanguageSelector({ label, className }) { return ( <div> <ul> <li> <Link to="/en">En</Link> </li> <li> <Link to="/">Ar</Link> </li> </ul> </div> ) }

الخطأ هنا يكمن في أن مسار الصورة الذي تحدده خطأ لتلافي مشاكل المسارات مع الصور يمكنك ببساطه إنشاء مجلد "static" في المسار الرئيسي للمشروع وإنشاء مجلد "images" بداخله ليحتوي على الصور الخاصة بالمشروع وبالتالي في أي مكان داخل المشروع إذا ما أردت إستخدام صورة يمكنك بكل بساطه القيام بالتالي كمثال .brand { background-image: url('/images/logo.png'); }

يمكننا إستخدام jquery بطريقتين الإولى من CDN وذلك كالتالي في ملف gatsby-ssr.js const React = require("react") export const onRenderBody = ({ setHeadComponents }, pluginOptions) => { setHeadComponents([ <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossOrigin="anonymous"> </script>, ]) } بعد ذلك في نحتاج أن نضيف jquery إلى ويب باك وذلك في ملف gatsby-node.js كالتالي exports.onCreateWebpackConfig = ({ actions, }) => { const { setWebpackConfig } = actions; setWebpackConfig({ externals: { jquery: 'jQuery', } }) } الثانيه ما إذا كان مشروعك يتضمن ملفات ال jquery يمكنك إستخدام helmet في هذه الحالة كالتالي // layout.js import { withPrefix } from "gatsby" const Component = ({ children }) => ( <> <Helmet> <script src={withPrefix('../../scripts/jquery.min.js')} type="text/javascript" /> </Helmet> </> )

في البداية علينا أن نوضح بأن جوجل أدسنس لديها نوعين من الإعلانات Auto Ads حيث نترك جوجل هي من تحدد مكان وحجم الإعلانات Ad units حيث نحن من نقوم بتحديد مكان وحجم وشكل الإعلان المناسب للموقع الخاص بنا ولإستخدام النوع الأول يمكنك بكل بساطة إستخدام plugin gatsby-plugin-google-adsense. وذلك كالاتي npm install --save gatsby-plugin-google-adsense وفي الجزء الخاص ب plugins داخل ملف gatsby-config.js plugins: [ { resolve: `gatsby-plugin-google-adsense`, options: { publisherId: `ca-pub-number` }, }, ] و لاتنسى أن تقوم بكتابة ال id الخاص بك في publisherId ويمكنك التحكم في الإعدادت الخاصة بالاعلانات من خلال حسابك على googleAdsense في حالة أردت أن تقوم بإستخدام react-adsense وذلك لكي تستخدم Ad units في أماكن محدده بدلا من أن تدع الأمر لجوجل لتحدد موضع الإعلان يمكنك بكل بساطة تطبيق الخطوة السابقه بالإضافة إلى التالي npm install --save react-adsense ومن ثم يمكنك إستخدام react-adsense بطريقة إعتيادية كالتالي على سبيل المثال import React from 'react'; import AdSense from 'react-adsense'; // ads with no set-up <AdSense.Google client='ca-pub-number' slot='slot-number' /> ولكن لا تنسى هنا أن ترفق كلا من ال publisherId و slot-number لكل وحدة إعلانيه بدمجنا للخطوتين معا قد حققنا وضع السكريبت الخاص بجوجل adsense في الهيد وبالتالي تفعيل ال auto ads وبالخطوة التاليه تمكنا من إستخدام ad units وبحسب جوجل ادسنس في حال تم تفعيل النوعين سوف يتم إعطاء الأولويه ل "ad units"

يمكنك تعديل الكود الخاص ب return كالتالي return ( <View> {questions.length > 0 && <Text>{questions[index].name}</Text> {num === index ? ( <Text>{questions[index].answers[0].ansName}</Text> ) : null} {num === index ? ( <Text>{questions[index].answers[1].ansName}</Text> ) : null} {num === index ? ( <Text>{questions[index].answers[2].ansName}</Text> ) : null} {Done ? <Text>Test is Done</Text> : null} {CorrectMessage === true ? ( <Text style={{color: 'red'}}>Wrong Answer</Text> ) : null} <Button color={IsSelected === 1 ? 'green' : 'blue'} title="A" onPress={() => { setIsSelected(1); handleSelect(0); }} /> <Button color={IsSelected === 2 ? 'green' : 'blue'} title="B" onPress={() => { setIsSelected(2); handleSelect(1); }} /> <Button color={IsSelected === 3 ? 'green' : 'blue'} title="C" onPress={() => { setIsSelected(3); handleSelect(2); }} /> <Button title=">>" onPress={handelSubmit} /> } </View> );

تنفيذك للطريقة الأولى خاطئه فكان لابد أن يكون الكود النهائي بالشكل التالي في ملف index.js // index.js const questRouter = require("./router/questions"); app.use(express.json()); app.use(morgan("tiny")); app.get('/*', function(req, res, next){ res.setHeader('Last-Modified', (new Date()).toUTCString()); next(); }); app.use("/questions", questRouter); بالنسبة للفرونت إند فلديك خطأ بسيط هنا <Text>{questions[index].name}</Text> حيث أنك تقوم بعرض الإسم الخاص بالسؤال صاحب index صفر ولكن في أول مرة يعرض فيها المكون يكون index = 0 questions = [] وبالتالي لايوجد شئ في الاندكس صفر ويكون الناتج undefined ويظهر لك الخطأ

هذه المشكله خاصة بالكاش ولحلها يمكنك إستخدام إحدى الطريقتين التاليتين app.get('/*', function(req, res, next){ res.setHeader('Last-Modified', (new Date()).toUTCString()); next(); }); او app.disable('etag'); وذلك قبل إستخدامك ل app.use("/questions", questRouter);

مرحبا Dalia Hussein إذا كانت X تساوي 60

يمكنك بالفعل القيام بكل ذلك حتى بدون إستخدام أي أدوات خارجيه وذلك من خلال جافا سكريبت بكل بساطة يمكنك إضافة الكلاس كالتالي عند دخولك إلى المسار المطلوب document.body.classList.add("home") وبكل بساطة يمكنك إستخدام useEffect لحذف ال class المستخدم بمجرد خروجك من هذا المسار كالتالي useEffect(() => { return () => document.body.classList.remove("home") },[]) وبالتالي بعد إعداد ال classes الخاصة بكل مسار سوف يتم تغير class ال body عند الدخول إلى مسار جديد أو عند الخروج منه. لاتنسى أبدا أننا مازلنا نكتب جافاسكريبت ونتعامل مع جافا سكريبت.

بالإضافة إلى الإجابات المطروحه يمكنك بالفعل إستخدام "window.location" وذلك كالتالي const NotFoundPage = () => { if (typeof window !== "undefined") { window.location = "/" } return null } حتى لا تفشل عملية البناء نقوم الأول بالتأكد من أن الكائن window الموجود داخل المتصفح موجود أم لا وفي حالة كان موجودا نقوم بتغير المسار إلى الصفحة الرئيسية.

لابد لنا من أن نحدد أولا نقطتين رئيسين أننا نريد تنفيذ ذلك في الجزء الخاص ب client side بعد تمام عملية بناء المشروع إذا ما كنا نريد إستخدام ذلك داخل "page" أم مكون في حالة كنت تريد إستخدام ذلك داخل page فيمكنك بالفعل إستخدام نفس الطريقة التي كنت تتبعها مع الأخذ في الإعتبار أنك لا تتعامل مع كلاس في هذه الحاله بحيث يمكنك الحصول على "location" من ال "props" حيث يتم إعطاء ال location لكل صفحة موجوده داخل المجلد pages في Gatsby وبالتالي يمكنك إستخدام ال location كالتالي const HomePage = ({ location }) => { console.log(location.pathname); return (<div></div>); }; في حالة كنت تريد تطبيق ذلك داخل مكون ف يمكنك في هذه الحالة إستخدام "useLocation" المقدم من "@reach/router" حيث يعطي الإمكانيه للمكون في هذه الحاله في إستخدام ال location import * as React from 'react'; import { useLocation } from '@reach/router'; const ComponentName = () => { const location = useLocation(); console.log(location.pathname); return (<div></div>) }; ولكن يمكنك أيضا الحصول على المسار الحالي بالطريقة الإفتراضيه الخاصه بجافا سكريبت دون النظر إلى كل ماسبق سواء كنت تريد ذلك في مكون او كنت تريد ذلك داخل صفحة const location = typeof window !== 'undefined' ? window.location : '';

const camelize = (str) => str.split('-').map((word, index) => { if(index !== 0) return word.charAt(0).toUpperCase() + word.slice(1) return word }).join('') شرح الدالة نقوم بإستخدام split لتحويل النص إلى مصفوفه بعد ذلك نقوم بعمل لوب على المصفوفة الناتجه وتحويل كل كلمة عدا الأولى إلى كلمة تبدأ بحرف كبير عدا الكلمة الأولى وذلك عن طريق إقتطاع الحرف الأول من الكلمه ومن ثم إعادة لصقه مع باقي الكلمه وأخيرا نقوم بإعادة المصفوفة إلى نص مرة أخرى باستخدام join يمكنك حل هذا التمرين بطرق عديده خذ الحل المرفق وحاول أن تبتكر حلا جديدا

لقد إطلعت على الملف المرفق وأرى أنك قمت بعمل رائع أحسنت 1- الموقع بطئ لأن حجم الصور كبيير جدا جدا ف تحتاج إلى عمل ضغط للصور وعمل resizing للصور بإستخدام ادوات مثل فوتوشوب يمكنك الإستعانة بهذا الموقع في عملية ضغط الصور. 2- بالنسبة للنقطة الخاصة ب الخلفية الخاصة بالهيدر فتحتاج إلى تعديل المسار في ملف css ليكون بهذا الشكل background-image: url('./img/header-img.png'); 3- بالنسبة للنقطة هذه ف تحتاج إلى تعديل ال responsive للصفحه لحل هذا الأمر 4- يمكنك إستخدام هذه المقاسات الشائعه Small (smaller than 640px) Medium (641px to 1007px) Large (1008px and larger) 5- بالنسبة لهذه النقطة قم بإضافة ال class على وسم "a" بدلا من الصورة 6- رابط ال cdn لمكتبة wow.js 7- للاجابة على النقطة الأخيره تختلف بإختلاف طبيعة المشروع حيث في أغلب الأحيان يساعدك استخدام مكتبة على أنجاز المشروع في وقت أقل ومساعدتك في إنجاز ال responsive في المشروع في وقت أقل ومجهود أقل

يمكنك إستخدام الشفرة التالية لتحميل الملف بإستخدام axios دون إعادة توجيه أو فتح صفحة جديده axios({ url: "https://example.com/file.pdf", // هنا الرابط الخاص بالملف المراد تحميله method: "GET", responseType: "blob" // لابد من هذا الخيار تأمد من تواجده }).then((response) => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement("a"); link.href = url; link.setAttribute("download", "file.pdf"); // لاحظ هنا نحدد نوع الملف المحمل document.body.appendChild(link); link.click(); });