پروژه اولیه

پروژه‌ی اولیه را از این لینک دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

use-page-data
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── hooks
│   │   └── usePageData.js
│   ├── App.js
│   ├── index.css
│   └── index.js
└── package.json

جزئیات

ظاهر کلی برنامه به‌این صورت است: ​ ​ از آن‌جایی که تعداد محصولات دیجی‌کالا در حال زیاد شدن است، ساخت Custom Hook به یک بخش جدانشدنی از پروژه‌ها تبدیل شده است. ساختار api ها در دیجی‌کالا در تمام پروژه‌ها رعایت شده است. این موضوع باعث می‌شود ساخت یک Custom Hook برای ارسال درخواست‌ها به سرور بسیار مفید باشد. در این سوال از شما می‌خواهیم یک Custom Hook به این منظور پیاده‌سازی کنید.

این هوک باید ورودی‌های زیر را دریافت کند: ​

{
  "url": string,
  "fireOnLoad": boolean,
  "successCallback": (data) => void,
  "failedCallback": () => void,
}

• ‍url: این پارامتر آدرس api را مشخص می‌کند. به‌عبارتی دیگر شما باید به این آدرس درخواست را ارسال کنید.
• fireOnLoad: این پارامتر مشخص می‌کند که آیا درخواست در هنگام ایجاد کامپوننت (mount) ارسال شود یا خیر.
• successCallback: این پارامتر یک callback function ،است و در‌صورتی که درخواست با موفقیت تمام شد باید صدا زده شود. پارامتر ورودی این تابع، پاسخ سرور است.
• failedCallback: این پارامتر یک callback function است و در‌صورتی که درخواست ناموفق بود، باید صدا زده شود.

خروجی هوک باید به شکل زیر باشد: ​

{
  "pending": boolean,
  "hasError": boolean,
  "data": any,
  "request": () => Promise<any>,
}

• pending: نشان‌دهنده‌ی آن است که درخواست به سرور فرستاده شده است ولی هنوز پاسخی از سرور دریافت نشده است.
• hasError: نشان‌دهنده‌ی ناموفق بودن درخواست ارسالی است.
• request: یک تابع async برای ارسال درخواست است. این تابع بخش اصلی هوک است. در صورت موفق‌بودن درخواست این تابع باید پاسخ را برگرداند (resolve). این تابع را می‌توان به صورت جداگانه نیز صدا کرد.
• data : پاسخ سرور در این فیلد قرار داده می‌شود.

هم‌چنین این هوک باید قابلیت کش‌کردن درخواست‌ها را درصورت موفقیت‌آمیز بودن ریکوئست داشته باشد؛ به‌این‌صورت که برای هر url وضعیت درخواست را ذخیره کند و در درخواست‌های بعدی به آن url از کش بخواند و درخواست جدیدی ارسال نکند.​ به‌عنوان مثال اگر هوک در چند جای مختلف استفاده شود یا اگر متد request چند بار برای یک url فراخوانی شود تنها یک ریکوئست به url داده شده زده می‌شود و پاسخ سرور برای بقیه ریکوئست‌ها با url یکسان استفاده می‌گردد. ساختار کش را میتوانید هرطور که خواستید پیاده سازی کنید به طور مثال این ساختار میتواند برای هر url به شکل زیر باشد:​

{
  "hasError": boolean,
  "result": any,
}

مواردی که باید در این سوال رعایت کنید:

• در صورتی که مقدار fireOnLoad برابر true باشد، باید تابع request در هنگام mount شدن کامپوننت صدا زده شود.
• درصورت وجود یک url در کش، درخواست جدیدی به آن url نباید ارسال شود.
• شرایط گفته شده باید برای هنگامی که url در کش موجود است نیز برقرار باشد. -‌ باید بتوان توسط تابع request به پاسخ سرور پس از resolve شدن دسترسی داشت.

​

تغییرات لازم برای هر فایل:

• فایل usePageData.js: موارد خواسته شده باید در این فایل قرار داده شوند. ​

نکات

• شما تنها مجاز به اعمال تغییرات در فایل‌ usePageData.js هستید.
• فرض کنید تمام درخواست‌های GET می‌باشند.
• برای ارسال پاسخ فقط فایل usePageData.js ارسال کنید.