Data-Filter

A simple react app that filters data with a specific filter component and also can be searched through with a search box or #tag.

cd data-filter
Run npm install to install dependencies
Run npm start to start app

Click on this Link to view demo app

1. React Hooks used:

useState
useEffect

2. GraphQL API used:

https://api.spacex.land/graphql/

3. Data is filtered by:

Searching data via search box
Clicking any of the filter buttons and searching data via search box filters data based on that header
Clicking any of the #tags for a quick filter

How it works:

Each filter button has an onClick function which updates the data state. In order to call this function onChange when a user enters a search word, a header is being passed and used to check each handleChange functions for that header. If the header matches, that onClick function is then called during onChange thus filtering data by that selection.

Clicking any of the #tags simple sends the data header through an onChange function to the handleHashChange function where the data is checked for a match and all data matching that header is returned.

App functions and Implementations

1. Error Handling

Errors where handled using react useState hook - by updating the initial state with the error message received and rendering it on the screen

2. Loading State

The loading state was handled with react useState hook. Initially set to false, the loading state is updated to true when the GraphQL API is being called

Screen.Recording.2022-07-12.at.9.13.10.PM.mov

3. Data

using the below query, a limit of 30 was applied to get the needed data, which is used to populate the app

query {
  launchesPast(limit: 30) {
    mission_name
    details
    id
    launch_date_local
    launch_year
    links {
      wikipedia
    }
    launch_site {
      site_name
    }
  }
}

Extra

On search, the length of filtered data is returned
On search, the data being filtered is displayed above the id field
The Go to Search button quickly take user to the search box
App deployed to Netlify

https://df-clinton-otse.netlify.app/
Night/Day mode
Mobile responsive

DhanteyUD/Data-Filter