**مهارت‌های لازم**:
+ آشنایی با توابع جاوااسکریپت
+ آشنایی با `ReactJS`
+ آشنایی با `Bootstrap`
+ کدخوانی
--------------------------------------------------
# پروژه اولیه
پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/Qosp6qAvdB/fifabaz.zip) دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
fifabaz
├── public
│ ├── static
│ │ ├── css
│ │ │ └── bootstrap.css
│ │ └── js
│ │ ├── bootstrap.js
│ │ ├── jquery.js
│ │ └── popper.js
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── __tests__
│ │ └── sample.test.js
│ ├── components
│ │ ├── FilterBox.js
│ │ ├── SortBox.js
│ │ └── Table.js
│ ├── containers
│ │ └── App.js
│ ├── data
│ │ ├── Clubs.js
│ │ ├── Nationality.js
│ │ ├── Players.js
│ │ ├── SortType.js
│ │ └── TeamPositions.js
│ ├── index.css
│ └── index.js
├── README.md
└── package.json
```
<details class="brown">
<summary>
راه‌اندازی پروژه
</summary>
**برای اجرای پروژه، باید `NodeJS` و `npm` را از قبل نصب کرده باشید.**
- ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
- در پوشه‌ی `fifabaz` ، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید.
- در همین پوشه، دستور `npm start` را برای راه‌اندازی پروژه اجرا کنید.
- پس از انجام موفق این مراحل، با مراجعه به آدرس `http://localhost:3000/`
می‌توانید نتیجه را ببینید.
</details>
# جزئیات
در این پروژه ما می‌خواهیم ۲۰۰ بازیکن برتر بازی *FIFA 20* را در قالب یک جدول نمایش دهیم و کاربر باید بتواند بازیکنان را براساس ویژگی‌های آن‌ها فیلتر یا مرتب کند.
دیتاسِت مربوط به بازیکنان از سایت [`kaggle.com`](https://www.kaggle.com/stefanoleone992/fifa-20-complete-player-dataset#players_20.csv)، گرفته شده و در مسیر `data/Players.js` قرار داده شده است.
شما باید این اطلاعات را بخوانید و سپس براساس فیلترها و گزینه مرتب‌سازی که کاربر انتخاب کرده است آن‌ها را در یک جدول نمایش دهید.
شکل کلی پروژه به صورت زیر می‌باشد:
اطلاعات بازیکنان در این فایل به صورت زیر می‌باشد:
```json
{
short_name: "L. Messi",
age: 32,
nationality: "Argentina",
club: "FC Barcelona",
overall: 94,
value: 95500000,
preferred_foot: "Left",
team_position: "RW"
}
```
در این پروژه چهار کامپوننت تعریف شده که شما باید هر یک از آن‌ها را با توجه به قابلیتی که باید داشته باشد تغییر دهید.
<details class="blue">
<summary>
**۱) کامپوننت `App.js`**
</summary>
در این کامپوننت شما باید `state` مورد نیاز پروژه را تعریف کنید. خواندن از فایل `Players.js` در این بخش انجام می‌شود.
سه تابع در این فایل وجود دارد که شما باید آن‌ها را براساس نیاز گفته شده تغییر دهید.
- تابع `changeSort(_selectedSort)`: این تابع وظیفه تغییر نحوه مرتب شدن جدول را دارد. پس از انتخاب یکی از موارد مرتب سازی این تابع باید فراخوانی شود.
- تابع `changeFilters`: این تابع وظیفه تغییر وضعیت نحوه فیلتر شدن دیتای جدول را دارد. پس از انتخاب فیلترها این تابع باید فراخوانی شود.
- تابع `renderTable`: این تابع وظیفه نمایش جدول را دارد. پس از هر تغییر در نحوه مرتب سازی یا فیلتر کردن این تابع جدول بروزرسانی شده را نمایش می‌دهد.
</details>
<details class="blue">
<summary>
**۲) کامپوننت`Table.js`**
</summary>
در این کامپوننت شما باید ابتدا `thead` جدول را براساس متغیر `fields` که در کامپوننت وجود دارد بسازید؛ سپس اطلاعات بازیکنان را در قسمت `tbody` جدول نشان دهید.
</details>
<details class="blue">
<summary>
**۳) کامپوننت `SortBox.js`**
</summary>
در این کامپوننت شما باید دکمه‌های مربوط به نحوه مرتب کردن جدول را بسازید. هر دکمه سه وضعیت دارد.
۱- غیرفعال: (در این حالت بازیکنان بدون تغییر و به صورت مرتب شده اولیه (براساس overall) نمایش داده می‌شود.)
۲- مرتب نزولی
۳- مرتب صعودی
کاربر میتواند روی هرکدام کلیک کند و وضعیت دکمه را تغییر دهد. حالت اولیه دکمه، غیرفعال است و پس کلیک بر روی آن دکمه به حالت مرتب نزولی می‌رود و دیتای جدول براساس آن فیلد به صورت نزولی مرتب می‌شود. پس از کلیک دوباره دیتای جدول براساس آن فیلد و این بار صعودی مرتب می‌شود و درنهایت پس از کلیک سوم، دکمه به حالت اولیه رفته و دیتا به همان شکل اولیه مرتب می‌شود.
هرکدام از حالات دارای یک کلاس html منحصر به فرد است که باید پیاده سازی شود.
براساس هر وضعیت که دکمه دارد یک کلاس منحصر به فرد به آن دکمه داده می‌شود. توضیح این کلاس‌ها در خود کامپوننت داده شده است.
این کامپوننت دو تابع ناقص دارد که شما باید آن‌ها را تکمیل کنید.
- تابع `changeSelectedSort` : این تابع وظیفه تغییر نحوه مرتب شدن را دارد. وقتی دکمه‌ای کلیک شد، این تابع فراخوانی می‌شود و بر اساس فیلد مرتب‌سازی و وضعیت آن دکمه، اطلاعات جدول تغییر می‌کند.
- تابع `setClassName` : این تابع وظیفه نام‌گذاری کلاس دکمه‌ها براساس وضعیت آن دکمه را دارد.
**نکات**
+ دکمه‌های این کامپوننت باید دارای `id` به شکل `sort-btn-FIELD_NAME` باشند، که `FIELD_NAME` از متغیر `fields` در این کامپوننت خوانده می‌شود.
+ شما باید کلاس‌های گفته شده را به کلاس‌های اولیه این دکمه‌ها اضافه کنید.
+ مرتب‌سازی براساس نام *نباید* به حروف کوچک و بزرگ حساس باشد.
</details>
<details class="blue">
<summary>
**۴) کامپوننت `FilterBox.js`**
</summary>
در این کامپوننت ابتدا دیتا را از پوشه `data` بخوانید و سپس براساس متغیر `filters` آن‌ها را نمایش دهید.
برای نمایش این قسمت، لازم است با نحوه عملکرد `Accordion` از کتابخانه `bootstrap` آشنایی داشته باشد.
برای آشنایی با این قسمت می‌توانید به [این](https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example) لینک مراجعه کنید.
این کامپوننت یک تابع ناقص دارد که باید آن را تکمیل کنید.
+ تابع `changeFilter` : این تابع وظیفه تغییر نحوه فیلتر شدن را دارد.
توجه کنید که کاربر میتواند چند فیلتر را هم‌زمان انتخاب کند. برای مثل هم گزینه `Spain` از بخش `nationallity` و هم گزینه `FC Barcelona` از بخش `club` را انتخاب کند.
**نکات**
+ دکمه باز بسته کننده `Accordion` باید دارای `id` به شکل `btn-FILTER_NAME-collapse` باشد که `FILTER_NAME` از متغیر `filters` که در این کاپوننت وجود دارد خوانده می‌شود.
+ شما باید `div`هایی که `id`ای به یکی از سه شکل `collapseOne`, `collapseTwo`, `collapseThree` دارند را به شکل `collapse-FILTER_NAME` در بیاورید و تغییرات لازم را در کامپوننت ایجاد کنید.
+ برای بخش `checkbox`ها باید از `bootstrap` کمک بگیرید و به همان شکلی که در داکیومنت این کتابخانه وجود دارد عمل کنید. برای اطلاعات بیشتر میتواند به [لینک](https://getbootstrap.com/docs/4.3/components/forms/#inline) مراجعه کنید.
+ `checkbox`های این قسمت باید دارای `id` به شکل `FILTER_TYPE-ITEM_NAME` باشند. مانند `nationality-Egypt`
+ برای تغییر `checkbox` از `event` `onChange` استفاده شود.
+ قسمت `nationality` در ابتدای اجرای پروژه *باید* باز باشد و در هر لحظه فقط یک قسمت از `Accordion` *باید* باز است.
</details>
# نکات تکمیلی
- به نحوه نمایش تگ‌ها و `attributes` و اطلاعات توضیح داده شده در هر کامپوننت توجه شود.
- مدت زمان `render` شدن کامپوننت‌ها و جدول دارای اهمیت می‌باشد.
- تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آن‌ها می‌توانید کد خود را تست کنید.
- شما تنها مجاز به اعمال تغییر در فایل‌های `containers`، `components` هستید.
- پس از اعمال تغییرات، پروژه را zip کرده و ارسال کنید.دقت کنید که پوشه‌ی `node_modules` در فایل ارسالی نباشد.