This project is a React application -created using create-react-app- which implements a search box where we can introduce a term, and performs a Star Wars planet search using the Star Wars API. It loads the results in popup list, highlighting within the results the matching search substring.
-
After cloning or unzip the file run in the command shell
npm i
to perform the React and rest of dependencies installation -
Development server: To run the development server
npm run start
. Open in the browser the urllocalhost:3000
-
Production build: To create a production build we can use the command
npm run build
-
Run production build: To run the production build created in the previous point, we can use command
npm run start:prod
which will initiate an http-server (open in the browser the urllocalhost:8080
) loading the files generate in /build/
-
SearchBox
-
It will load the SearchInput and PopupList components, and will manage the redux actions to pass down to the children
-
It makes uses of react-redux hooks (useSelector and useDispatch) to load state values and dispatch actions related to request or cancel a planet search
-
-
SearchInput
-
It renders an input text field where after changes in its value or press Enter, a side effect will trigger the search
-
When search is ongoing it will render a loading icon component on the middle of the input
-
When input text field is not empty a clear button appears in the right side of the input
-
Emptying the text input by keys or clicking the clear button, will trigger the clear action (managed by the SearchBox and that will stop the ongoing search)
-
The input changes are debounced to avoid triggering search by each keystroke. We use a custom hooks for it (useDebounce)
-
Use tabs to move between search input and clear button (when is visible)
-
-
PopupList
-
It renders a list of items containing a name field and show its text highlighting the marching text of the SearchInput
-
Clicking on an list item will load the text into the SearchInput and close the PopupList
-
Pressing ESC will close the PopupList
-
Using tabs will move us around the list items that can be selected by Enter or click
-
Clicking outside is managed by a custom hook (useOutsideNotifier)
-
-
LoadingIcon
- It renders a loading SVG icon as a ReactComponent, that is using a rotating animation (defined in the styles of the App component)
-
ClearIcon
- It renders a clear SVG icon as a ReactComponent
-
sagas/planets.sagas
-
The saga that will manage the side effect of the redux actions related to the planet search
-
requestGetPlanets will perform, depending on the search active status, either a call to the api to get the planets and update the state, cancel the request, or filter over the fetched results when a regex is matched, in order to avoid re-fetching over the current results
-
-
actions
- Actions to notify about a request, cancel or completed status of the planet search
-
reducers/planets.reducer
- Reducer related to the planets, search word or search status. Manages how the state of the application is reduced depending on the redux actions triggered
-
store
-
File to define the redux store setup and middleware that will enhance it. We add redux-saga as a middleware here
-
React redux component will wrap the App, also passing down this store as attribute
-
-
api/sw-planets
-
getPlanets is the async function that will define the get planets search url and perform a GET request
-
Promise are resolved and check if it exists an offset, and next pages of results are available. If it exists is added to the composition of results and returned
-
-
common/index
-
Place to define general constants, types, etc.
-
Definition of constant values for redux actions, and redux action types
-
-
common/api
-
Constants for Star Wars base urls
-
It defines the apiGet function that performs a GET request using the axios library
-
-
common/utils
-
File with additional functions that serve for general purposes
-
highlightSubstr is a function that given a word and a substring, it adds a markup with the class highlight around the substring found in the word
-