dhanteyud / 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

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.

1. cd data-filter

2. Run npm install to install dependencies

3. 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