import React , { useEffect , useState } from "react" ; import { Switch , Route } from "react-router-dom" ; import { Navbar , Footer , ScrollToTop } from "./components" ; import TermsOfService from "./components/info/Terms" ; import { Class , Textbook } from "./typings/interfaces" ; import posthog from "posthog-js" ; import { HomePage , SearchPage , ExplorePage , SubmitPage , TextbookPage , WelcomePage , } from "./views" ; import { JSON_DATA_VERSION } from "./globals" ; import ScrollArrow from "./components/ScrollArrow" ; if ( ! window . location . href . includes ( '127.0.0.1' ) && process . env . REACT_APP_PH_ID ) { posthog . init ( process . env . REACT_APP_PH_ID , { api_host : "https://app.posthog.com" , persistence : 'memory' } ) ; } function App ( ) { const [ classes , setClasses ] = useState < Class [ ] > ( [ ] ) ; const [ featured , setFeatured ] = useState < Class [ ] > ( [ ] ) ; const [ textbooks , setTextbooks ] = useState < Textbook [ ] > ( [ ] ) ; const [ loading , setLoading ] = useState ( true ) ; useEffect ( ( ) => { if ( featured . length === 0 || classes . length === 0 || textbooks . length === 0 ) { const locData = localStorage ?. getItem ( "compendium" ) ; if ( locData && typeof locData === "string" && JSON . parse ( locData ) . version === JSON_DATA_VERSION ) { const locJSONData = JSON . parse ( locData ) ; setFeatured ( locJSONData [ "featured" ] ) ; setClasses ( locJSONData [ "courses" ] ) ; setTextbooks ( locJSONData [ "textbooks" ] ) ; } else if ( process . env . REACT_APP_JSONIO_API_KEY && process . env . REACT_APP_DATA_ID ) { let fReq = new XMLHttpRequest ( ) ; fReq . onreadystatechange = ( ) => { if ( fReq . readyState === XMLHttpRequest . DONE ) { if ( fReq . status === 200 ) { const data = JSON . parse ( fReq . responseText ) ; setFeatured ( data [ 'featured' ] ) ; setClasses ( data [ 'courses' ] ) ; setTextbooks ( data [ 'textbooks' ] ) ; localStorage ?. setItem ( "compendium" , fReq . responseText ) ; } } } ; fReq . open ( "GET" , `https://api.jsonbin.io/v3/b/${ process . env . REACT_APP_DATA_ID }/latest` , true ) ; fReq . setRequestHeader ( "X-Master-Key" , `${ process . env . REACT_APP_JSONIO_API_KEY }` ) ; fReq . setRequestHeader ( "X-Bin-Meta" , "false" ) ; fReq . send ( ) ; if ( localStorage ?. getItem ( "classes" ) ) { localStorage ?. removeItem ( "classes" ) ; } if ( localStorage ?. getItem ( "featured" ) ) { localStorage ?. removeItem ( "featured" ) ; } } } if ( classes . length > 0 && featured . length > 0 ) { setLoading ( false ) ; } } , [ classes . length , featured . length , textbooks . length ] ) ; return ( < ScrollToTop > { } { } < Navbar /> < Switch > < Route path = "//" render = { ( ) => < HomePage featured = { featured } loading = { loading } / > } /> < Route path = "/search" render = { ( ) => ( < SearchPage classes = { classes } textbooks = { textbooks } loading = { loading } / > ) } /> < Route path = "/explore" render = { ( ) => ( < ExplorePage classes = { classes } textbooks = { textbooks } loading = { loading } / > ) } /> < Route path = "/textbooks" render = { ( ) => ( < TextbookPage textbooks = { textbooks } loading = { loading } / > ) } /> < Route path = "/submit" exact component = { SubmitPage } / > < Route path = "/welcome" exact component = { WelcomePage } / > < Route path = "/tos" exact component = { TermsOfService } / > < /Switch> < ScrollArrow / > < Footer /> < /ScrollToTop>); } export default App ;