import fetch from 'isomorphic-fetch' ; import { NextPageContext } from 'next' ; import React from 'react' ; import { StyleSheet } from 'react-native' ; import ContentContainer from '../components/ContentContainer' ; import ExploreSection from '../components/Explore/ExploreSection' ; import { PlatformAndroid , PlatformIOS , PlatformMacOS , PlatformWeb , PlatformWindows , PlatformExpo , ReactLogo , } from '../components/Icons' ; import Navigation from '../components/Navigation' ; import getApiUrl from '../util/getApiUrl' ; import urlWithQuery from '../util/urlWithQuery' ; const Popular = ( { data } ) => { return ( < > < Navigation title = "Popular libraries" description = "Browse most popular recently libraries by platform." / > < ContentContainer style = { styles . container } > < ExploreSection title = "Core platforms" icon = { ReactLogo } data = { data } filter = { lib => lib . android === true && lib . ios === true } count = { 8 } queryParams = { { android : 'true' , ios : 'true' } } /> < ExploreSection title = "Android" icon = { PlatformAndroid } data = { data } filter = { lib => lib . android === true && ! lib . ios } / > < ExploreSection title = "iOS" icon = { PlatformIOS } data = { data } filter = { lib => lib . ios === true && ! lib . android } / > < ExploreSection title = "Expo Go" icon = { PlatformExpo } data = { data } filter = { lib => lib . expo === true } / > < ExploreSection title = "macOS" icon = { PlatformMacOS } data = { data } filter = { lib => lib . macos === true } / > < ExploreSection title = "Web" icon = { PlatformWeb } data = { data } filter = { lib => lib . web === true } / > < ExploreSection title = "Windows" icon = { PlatformWindows } data = { data } filter = { lib => lib . windows === true } / > < /ContentContainer> < />); } ; Popular . getInitialProps = async ( ctx ) => { const url = getApiUrl ( urlWithQuery ( '/libraries' , { limit : 9999 , minPopularity : 0 , order : 'popularity' } ) , ctx ) ; const response = await fetch ( url ) ; const result = await response . json ( ) ; return { data : result . libraries , query : ctx . query , } ; } ; const styles = StyleSheet . create ( { container : { paddingHorizontal : 16 , paddingBottom : 12 , } , } ) ; export default Popular ;