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(); });

ليس من الخطأ أبدا استخدام Fetch ولكن أغلب المطورين يلجئون إلى إستخدام axios لعدة مميزات لعل من أشهرها هو التالي 1- تقليل الكود المكتوب فعلى سبيل المثال إذا أخذنا الكود المرفق في السؤال وكتبناه بإستخدام axios فسيكون كالتالي useEffect(() => { axios("https://api.example.com/items") .then((result) => { setIsLoaded(true); setItems(result.data); }) .catch((error) => { setIsLoaded(true); setError(error); }); }, []); حيث تم توفير خطوة التي كنا نقوم فيها بالتحويل إلى JSON 2. تضمين بعض الأمور من أجل الحماية بشكل تلقائي على سبيل المثال XSRF إختصار ل "Cross-site request forgery" أو ما يسمى ب "تزوير الطلب عبر المواقع" مثال axios.post('/signup',{ xsrfCookieName: 'XSRF-TOKEN', xsrfHeaderName: 'X-XSRF-TOKEN', }); 3. ماذا لو قمت بإنشاء طلب بإستخدام axios وأردت إلغاء هذا الطلب على الفور لأنه يأخذ وقت طويل مثلا يمكنك القيام بذلك مباشرة بإستخدام axios بشكل إفتراضي بإستخدام "CancelToken" و "cancel()" 4. متابعة عملية رفع ملف مثلا وتتبع تقدم عملية الرفع باستخدام const config = { onUploadProgress: progressEvent => { console.log(progressEvent.loaded); } } axios.put(`${URL}/upload/image.png`, data, config) 4. لعل من ضمن المميزات أيضا أننا يمكننا إستخدام axios على السيرفر أيضا على عكس fetch فهي موجودة في المتصفح فقط ولذا يقوم المطورين بتوحيد الأداة المستخدمه. وغيرها من المميزات المدمجه في axios والتي تساعدنا في إنجاز عدة أمور دون كتابتها من الصفر. ولعلنا هنا نحتاج إلى أن نركز على أن axios هي مكتبة خارجيه تم إدماج العديد من المميزات بها من قبل المطورين القائمين عليها حتى تقوم بتسهيل الكثير من الأمور ولذا يمكننا إستخدامها مثلا في المتصفح والسيرفر ولكن fetch هي موجوده بشكل إفتراضي في جافا سكريبت ولها وظيفة واحده وأساسيه ولذا هنا سبب الفارق بينهما.

يمكنك الحصول على كود الخطأ كالتالي axios.get('https://api.example.com') .then((response) => {}) .catch((error) => { setErrorCode(error.response.status) // error.response.status })

الطبيعي بأن تظهر القيمة ب "undefined" في حالة قمت بالدخول على المسار مباشرة من المتصفح دون الضغط على المكون "Link" ولذا هل تظهر القيمه ب "undefined" في حالة قمت بالضغط على المكون "Link" ؟ لكي يقوم بتحويلك إلى المسار أم من عند الدخول على المسار مباشرة؟

يمكنك إستخدم setTimeout لتحقيق ذلك كالتالي const [loading, setLoading] = useState(false); const [error, setError] = useState(false); const next = async () => { const timer = setTimeout(() => { setLoading(true); }, 1000); updateCurrent(code) //some async function .then(() => {loading ? setLoading(false) : clearTimeout(timer);}) .catch((e) => { setLoading(false); setError(e); }); };

في ملف "backend.css" قم بتغير مسار الصوره كالتالي background-image: url("../img/Mandala.png");

مرحبا Basent Mady هل يمكنك إرفاق ملفات المشروع؟

لديك خطأ بسيط في السطر رقم 4 حيث قمت بكتابة "sally" بدلا من "salary" ولطباعة الناتج تحتاج إلى كتابة print(sampleDict)

هناك بعض الأمور البيسطة في الكود المرفق 1- فيما يتعلق بإستخدام "axios" فيمكنك الحصول على البيانات مباشرة من خلال res.data كالتالي const res = await axios('/api'); console.log(res.data); 2- فيما يتعلق بالخطأ المرفق فذلك لأن الناتج من الدالة getData() عباره عن كائن "object" وفي ريأكت لايمكن أن يكون الإبن المطلوب عرضه وطباعته للمستخدم عباره عن كائن يحتوي على داتا وإن كان لابد من أن تعرض البيانات المحموله في هذا الكائن يمكنك إستخدام "JSON.stringify()" وذلك كالتالي JSON.stringify(this.getData()) 3- ولكن هناك أمر أخر سوف يتم عرض قوسين كالتالي "{}" فارغين للمستخدم دون وجود أي بيانات ؟!! ذلك لأنه في أول مرة يتم عرض المكون للمستخدم "component rendering" سوف تكون عملية جلب البيانات من الداله "getData()" لم يتم الإنتهاء من جلب البيانات بعد وكما نعلم لكي يتم إعادة عرض المكون بعد تمام عملية جلب البيانات لابد من أن نقوم بتخزين هذه البيانات في State وبذلك فور أن يتم إعطاء قيمه جديده ل State سوف يتم عرض البيانات لليوزر وبالتالي يمكن أن يكون الشكل النهائي للكود كالتالي class Data extends React.Component { state = {}; async getData() { const res = await axios('/api'); console.log(res.data); this.setState(res.data); } componentDidMount() { this.getData(); } render() { return <div>{JSON.stringify(this.state)}</div>; } }

كم حجم المشروع الذي تحاول رفعه؟ يمكنك القيام بالتحويل الى http v1 والمحاوله مرة أخرى git config --global http.version HTTP/1.1

المشكله تكمن في الإعدادات الخاصه ب git/https buffer ولذ يمكنك حلها عن طريق الأمر التالي الذي يسمح بزيادة حجم ال buffer git config --global http.postBuffer 524288000 ويمكنك أيضا استخدام ال ssh بدلا من http ومشاكله