import React , { useState , useEffect } from 'react' ; import Category from '../modules/models/category' ; import Subcategory from '../modules/models/subcategory' ; import { trackView , trackSearch } from '../utils/googleAnalytics' ; import SearchBar from '../components/searchBar' ; import Categories from '../components/categories' ; import Footer from '../components/footer' ; const Home = ( props ) => { const json = require ( '../modules/cheatsheet.json' ) ; const [ cheatsheet , setCheatsheet ] = useState < Category [ ] > ( json ) ; useEffect ( ( ) => { trackView ( '/cheatsheet' ) ; } , [ ] ) ; const search = ( event ) => { const text = event . target . value ; let newCheatsheet = json . map ( ( category ) => { return { ... category , 'content' : category . content . map ( ( subcategory ) => { return { ... subcategory , 'table' : subcategory . title . includes ( text ) || subcategory . description . includes ( text ) ? subcategory . table : subcategory . table . filter ( tr => { let isValid = false ; tr . forEach ( td => { if ( ! isValid ) { isValid = td . includes ( text ) ; } } ) ; return isValid ; } ) , } ; } ) , } ; } ) ; setCheatsheet ( newCheatsheet ) ; trackSearch ( text ) ; } ; return ( < > < SearchBar search = { search } / > < Categories cheatsheet = { cheatsheet } /> < Footer / > < />); } ; export default Home ;