A Next.js Web Application built with the REST Countries's REST API
Go to the app
You can view all the countries in a user-friendly table view.
You can apply sorting, ascending or descending, to any column by clicking on the column's header.
You can search for any country by typing in the name in the search bar or by selecting one from the auto complete dropdown.
The web page is fully responsive for desktop, tablet, and mobile.
▸ countriesError(error: string): CountriesErrorAction
The action dispatched when the countries are failed to be fetched from API
| Name | Type | Description |
|---|---|---|
error |
string | The error occured while fetching from API |
Returns: CountriesErrorAction
Returns the CountriesErrorAction
Defined in: global/countries/actions.ts:32
▸ countriesLoaded(countries: Country[]): CountriesLoadedAction
The action dispatched when the countries are fetched from API
| Name | Type | Description |
|---|---|---|
countries |
Country[] | The list of countries fetched from API |
Returns: CountriesLoadedAction
Returns the CountriesLoadedAction
Defined in: global/countries/actions.ts:16
▸ countriesReducer(state?: CountriesState, action: CountriesActionType): CountriesState
| Name | Type | Description |
|---|---|---|
state |
CountriesState | The initial state provided to countries reducer |
action |
CountriesActionType | The actions this reducer will react to |
Returns: CountriesState
Returns the countries state
Defined in: global/countries/reducers.ts:23
▸ default(query: RouteQuery): CountriesTableValues
A custom React hook for building rows and columns for the Countries Table
| Name | Type | Description |
|---|---|---|
query |
RouteQuery | The route query with the URL for filtering the rows |
Returns: CountriesTableValues
The values to be used in the Countries table
Defined in: hooks/useCountriesTable.ts:40
▸ default(state: SerializedRootState): RootState
Deserializes a serialized redux state for client-side
| Name | Type | Description |
|---|---|---|
state |
SerializedRootState | The serialized redux state |
Returns: RootState
Returns a deserialized redux state
Defined in: utils/deserializeState.ts:10
▸ default(): Promise<Country[]>
Fetches the countries list from API endpoint.
Returns: Promise<Country[]>
Returns an array of Country object in a promise
Defined in: utils/fetchCountries.ts:10
▸ default(): ColDef[]
Prepares the columns for the countries table
Returns: ColDef[]
Returns an array of column definitions
Defined in: utils/getColumns.tsx:10
▸ default(countries: Country[], query: SearchQuery): ICountry[]
Prepares, and filters if search query provided, the rows for the countries table
| Name | Type | Description |
|---|---|---|
countries |
Country[] | The list of countries |
query |
SearchQuery | The search query for filtering |
Returns: ICountry[]
Returns the list of countries as rows
Defined in: utils/getRows.ts:12
▸ default(input: string, query: ParsedUrlQuery): string
Merges the search input with the existing url query
| Name | Type | Description |
|---|---|---|
input |
string | the input value to be merged with the existing url query |
query |
ParsedUrlQuery | the existing url query |
Returns: string
Returns the merged query as string
Defined in: utils/mergeSearchQuery.ts:11
▸ default(sortingQuery: SortingQuery, query: ParsedUrlQuery): string
Merges the sorting query with the existing url query
| Name | Type | Description |
|---|---|---|
sortingQuery |
SortingQuery | the sorting query to be merged with the existing url query |
query |
ParsedUrlQuery | the existing url query |
Returns: string
Returns the merged query as string
Defined in: utils/mergeSortingQuery.ts:12
▸ default(state: RootState: SerializedRootState)
Serializes the redux state for server-side
| Name | Type | Description |
|---|---|---|
state |
RootState | The un-serialized redux state |
Returns: SerializedRootState
Returns a serialized redux state
Defined in: utils/serializeState.ts:9
▸ default(model: SortModel): SortingQuery
Converts a sort model into a sorting query
| Name | Type | Description |
|---|---|---|
model |
SortModel | The sort model to be converted |
Returns: SortingQuery
Returns the converted sorting query
Defined in: utils/sortModelToSortQuery.ts:11
▸ default(query: SortingQuery): SortModel
Converts a sorting query into a sort model
| Name | Type | Description |
|---|---|---|
query |
SortingQuery | The sorting query to be converted |
Returns: SortModel
Returns the converted sort model
Defined in: utils/sortQueryToSortModel.ts:11