import fetch from 'isomorphic-fetch' ; import { NextPageContext } from 'next' ; import dynamic from 'next/dynamic' ; import { useRouter } from 'next/router' ; import React from 'react' ; import { View , StyleSheet } from 'react-native' ; import ContentContainer from '../components/ContentContainer' ; import LoadingContent from '../components/Library/LoadingContent' ; import Navigation from '../components/Navigation' ; import Pagination from '../components/Pagination' ; import Search from '../components/Search' ; import getApiUrl from '../util/getApiUrl' ; import urlWithQuery from '../util/urlWithQuery' ; const LibrariesWithLoading = dynamic ( ( ) => import ( '../components/Libraries' ) , { loading : ( ) => ( < View style = { { paddingTop : 8 , } } > < LoadingContent /> < LoadingContent / > < LoadingContent /> < LoadingContent / > < LoadingContent /> < LoadingContent / > < LoadingContent /> < LoadingContent / > < /View>), } ) ; const Index = ( { data , query } ) => { const router = useRouter ( ) ; const total = data && data . total ; return ( < > < Navigation noHeader query = { router . query ?. search } / > < Search query = { router . query } total = { total } / > < ContentContainer style = { styles . container } > < Pagination query = { query } total = { total } / > < LibrariesWithLoading libraries = { data && data . libraries } /> < Pagination query = { query } total = { total } / > < /ContentContainer> < />); } ; Index . getInitialProps = async ( ctx ) => { const url = getApiUrl ( urlWithQuery ( '/libraries' , ctx . query ) , ctx ) ; const response = await fetch ( url ) ; const result = await response . json ( ) ; return { data : result , query : ctx . query , } ; } ; const styles = StyleSheet . create ( { container : { padding : 16 , } , } ) ; export default Index ;