This week, I started doing the “Item” page which will using the API. First of all, I modified the style of the “Item” page, I was using the style in the past few weeks before when I was creating the page by using mock data. Then, I convert the CSS style to the Tailwind CSS style too to ensure it is using the first priority style that I want. After calling the API, I use the “useDidMountEffect() function instead of using useEffect() function to display the item list. When the user clicked one of the Item box, it will display the item details.
Besides that, I also modified the function by implementing Regex. This will change the UI implementation to be more user friendly. When there is no matching for the input value, it will prompt out a message “No items match the search criteria”.
At the end of the week, I display the Pricing panel which consist of the multiple properties from the data. When the user clicked to the “Price” button, it will pop out the detail panel. On the other hand, I also create a “Search Category” button beside the search bar to let the user search the category. Inside the category panel, I separate the main category by using bold font and different color comparing to their child category. Each child will leave some left space to let the user know which category is parent or child. However, this category function I haven’t modify the function which will able to filter the item box according to it’s category.
Sharing About Technology