React Photo Album Practice

You are given markup for a table of photos and 3 arrays. Implement as much options below as you can:

Render photos in a table with id, title, album title and an user name.
- owner names should be colored with has-text-link for men and has-text-danger for women.
Implement ability to filter photos by an owner:
- If a user is selected it should be highlighter with is-active class;
- Show only photos of a selected user;
- Select All to see all the photos.
Use the input to filter photos by name.
- Show only photos having the input value in their name ignoring the case;
- The x button should appear only when the value is not empty;
- Clear the value after the x button click.
Show No results message if there are no photos matching current criteria
- Reset All Filters button should clear all the filters.
(*) Allow to select several albums:
- Add is-info class to selected categories;
- You should truncate text of the album name (with CSS or JS)
- Show only photos of selected categories;
- All button should clear the selection;
- Remove is-outlined class from the All button if no categories are selected.
(*) Implement photo reordering.
- add the last column with ↓ and ↑ buttons
- with moveUp button, move the item of the list to the one up position (if it's the first element - do nothing)
- with moveDown button, move the item of the list to the one bottom position (if it's the last element - do nothing)

Instructions

Fork, clone and run npm i
fix the DEMO LINK below (use your github username and the repo name)
- DEMO LINK
implement tasks one by one (You can do it in the App.tsx)
commit, push and deploy after each task
Send a link to your App.tsx file to your personal Slack channel (for example #fe_apr22_misha_hrynko)
Send a message about solving the next tasks after each push and deploy (e.g. Task 3 is done)
If you are done with the required tasks please proceed solving the optional once
Stop when the time is over (typically 2.5 hours from start)