The purpose of SSR in this project to get a better LCP time. There is no request to randomuser API when the page is loaded for the first time, we get data on the first page with default filter on the server side.
Page control (filter, search, sortBy, sortOrder) is combined and stored as an object, the object is debounced for 500ms so typing search keyword or rapidly changing the filter wont rapidly hit API.
These components in this project are handmade and using React.memo to demonstrate the benefit of using useReducer hooks.
We can pass Dispatch function to any child component and the result is any components that have been memoized wont rerender since we can use useCallback hooks to any function that will be passed to the components and set only Dispatch as a dependency ex:
when we type on the search box, Select Component , Users Table Component, Button wont rerender.
When a new value is typed on the Search Component it will set the current page to 1 (first page)
and hit the API with existing sortBy,sortOrder, and filter gender
When a new filter value is selected on the Select Component it will set the current page to 1 (first page)
and hit the API with existing sortBy,sortOrderand keyword,
When selected table header is clicked for the first time it will set SortBy value to the selected header and set SortOrder to Ascending mode, when clicked the same header again (second times) it will set SortOrder to Descending mode, when clicked again (third times) it will remove SortBy and SortOrder value. Changing SortBy or SortOrder will set the page to 1 (first page) and hit the API with existing filter and keyword,
You can set page size and total data on @constants/api.ts. Ex: Changing page size to 5, and setting total data to 11 will display
3 pagination link, first link will display 5 items, second link will display 5 items, and last link will display 1 item.
List of micro components / design system that used on this project, these components styling is inspired from antd design system.
Contain some configuration for API, Table columns, Filter options
For now only contain UsersContext and UsersContext.Provider, the main logic for debounce and calling the API is located
in this folder (usersContext file)
Contain some utility hooks like debounce, click outside
Contain components that will be used for nextjs page, the main logic for the project is in this folder (Container.tsx)
- Contain colors token
- Contain global styles
- Containe basic typography styles
Contain utility function