حسنی در دوران تنبلی‌اش، همه‌ی فیلم‌های برتر سینمای جهان را مشاهده کرد و علاقه‌ی او به سینما از همانجا آغاز شد.

بعد از سال‌ها، او به تازگی یک توسعه‌دهنده‌ی Front-end شده است و به او پیشنهاد شده که سایت سینما شلمرود را پیاده‌سازی کند. اون نیز به دلیل علاقه‌ی زیادی که به سینما دارد این پروژه را به سرعت قبول کرد.

این پروژه یک وب‌سایت ساده برای نمایش اطلاعات فیلم‌های در حال اکران است. در صفحه‌ی اصلی، لیست فیلم‌ها به صورت تعدادی کارت به نمایش در می‌آید.

و با کلیک روی نام هر فیلم به صفحه‌ی جزئیات آن فیلم هدایت می‌شویم.

از آنجایی که حسنی کار با React را یاد گرفته، پروژه را با این کتابخانه آغاز می‌کند اما در میانه‌ی کار متوجه می‌شود که این کتابخانه به تنهایی کافی نیست و باید راهی برای مدیریت مسیر (Route) های مختلف پیدا کند. پیشنهاد ما به او استفاده ازreact-router-dom است اما حسنی هیچ دانشی از این کتابخانه ندارد،‌ او را در این مسیر کمک کنید.

پروژه اولیه

پروژه اولیه را از اینجا دانلود کنید.

cinema
├── public
│   ├── favicon.png
│   └── index.html
├── src
│   ├── components
│   │   ├── MovieCard.jsx
│   │   ├── MovieDetail.jsx
│   │   ├── MovieList.jsx
│   │   ├── Movies.jsx
│   │   └── NotFound.jsx
│   ├── server
│   │   ├── static
│   │   │   └── images
│   │   │       ├── fight-club.jpg
│   │   │       ├── forrest-gump.jpg
│   │   │       └── the-shawshank-redemption.jpg
│   │   ├── movies-detail.json
│   │   ├── movies.json
│   │   └── server.js
│   ├── App.jsx
│   ├── index.js
│   └── style.css
└── package.json

راه‌اندازی پروژه

برای اجرای پروژه، باید NodeJS و npm را از قبل نصب کرده باشید.

• در پوشه‌ی cinema ، دستور npm install را برای نصب نیازمندی‌ها اجرا کنید.
• در همین پوشه، دستور npm run server را برای راه‌اندازی سرور اجرا کنید.
• در یک ترمینال دیگر، دستور npm start را برای راه‌اندازی کلاینت اجرا کنید.
• با مراجعه به http://localhost:3000/ می‌توانید نتیجه را ببینید.

جزئیات

هدف این سؤال، سنجش مهارت شما در استفاده از کتابخانه‌ی react-router-dom است. کارهایی که باید انجام دهید در ادامه آمده است.

• تنظیم مسیر (Route) های صحیح در مؤلفه‌ی App به طوری که با دسترسی به هر مسیر مؤلفه‌ی مشخص‌شده نمایش داده شود.
  • مسیر اصلی /: مؤلفه‌ی Movies
  • مسیر /movies/{movie_id}: مؤلفه‌ی MovieDetail
  • تمام مسیرهای دیگر: مؤلفه‌ی NotFound
• عنوان هر فیلم در مؤلفه‌ی MovieCard باید لینک به صفحه‌ی جزئیات همان فیلم باشد.
• باید در مؤلفه‌ی MovieDetail یکی از متدهای lifecycle مناسب را override کنید به طوری که بلافاصله پس از load شدن مؤلفه اطلاعات مربوط به فیلم را از سرور دریافت و state مولفه را بروز کنید.

دریافت اطلاعات جزئی یک فیلم از سرور:

• URL: localhost:9000/movies/{movie_id}
• Method: GET

نکات

• شما تنها مجاز به تغییر در فایل‌های App.jsx، MovieCard.jsx و MovieDetail.jsx هستید.
• پس از اعمال تغییرات، پروژه را Zip کرده و ارسال کنید. دقت کنید که پوشه‌ی node_modules در فایل ارسالی نباشد.