Created
December 21, 2018 21:30
-
-
Save pkellner/0cf31f5bbba8d18387d81df0f095dc12 to your computer and use it in GitHub Desktop.
Need typescript Props interface for getInitialProps
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, {FunctionComponent} from 'react'; | |
import axios, {AxiosResponse} from 'axios'; | |
import useAxiosFetch | |
from '../src/components/codecamp/common/hooks/useAxiosFetch'; | |
import getConfig from 'next/config'; | |
import App from "../src/App"; | |
import {Speaker} from "../src/components/codecamp/common/CodeCampInterfaces"; | |
const {publicRuntimeConfig} = getConfig(); | |
interface Props { | |
speakers?: Speaker[] | AxiosResponse<any>, | |
hasErrored?: boolean, | |
isLoading?: boolean, | |
isServer?: boolean, | |
errorMessage?: string | |
} | |
interface FunctionComponentSpeakers<Props> extends FunctionComponent<Props> { | |
GetSpeakersUrl: () => string; | |
GetEmptyData: () => any | |
// NEED TO TYPE GETINITIALPROPS HERE FOR PROMISE AND OBJECT AS WELL AS IN COMING PARAMETERS | |
} | |
const Speakers : FunctionComponentSpeakers<Props> = ({isLoading, hasErrored, errorMessage, speakers, isServer}) => { | |
if (isServer) { | |
console.log(isLoading); | |
// this means have data already from server so don't get it again | |
return ( | |
<App svccpage="speakers" speakers={speakers} isLoading={false} isServer={true} errorMessage={errorMessage} | |
hasErrored={hasErrored}/> | |
); | |
} else { | |
const {data, loading, error, errorMessage} = | |
useAxiosFetch(Speakers.GetSpeakersUrl(),5000,Speakers.GetEmptyData()); | |
return ( | |
<App svccpage="speakers" speakers={data} isLoading={loading} isServer={false} errorMessage={errorMessage} | |
hasErrored={error}/> | |
); | |
} | |
}; | |
Speakers.GetEmptyData = () => { | |
return [...Array(7)].map((_, i) => ({ | |
firstName: "", | |
lastName: "", | |
id: i | |
})); | |
}; | |
Speakers.GetSpeakersUrl = () => { | |
if (process.env.NODE_ENV === "production") { | |
return process.env.RESTURL_SPEAKERS_PROD | |
|| publicRuntimeConfig.RESTURL_SPEAKERS_PROD; | |
} else { | |
return process.env.RESTURL_SPEAKERS_DEV; | |
} | |
}; | |
Speakers.getInitialProps = async ({req}) => { | |
const isServer = !!req; | |
if (isServer) { | |
var promise = axios.get(Speakers.GetSpeakersUrl()).then(response => { | |
return { | |
isLoading: false, | |
hasErrored: false, | |
speakers: response.data, | |
isServer: true | |
}; | |
}) | |
.catch(error => { | |
// console.log('error:' + error.message); | |
return { | |
speakers: [], | |
hasErrored: true, | |
isServer: true, | |
errorMessage: error.message | |
} | |
}); | |
return promise; | |
} else { | |
// client side so just return empty array, main functinal component here | |
// will load placeholder data so don't need to return it (maybe) | |
return { | |
speakers: Speakers.GetEmptyData(), | |
isLoading: true, | |
hasErrored: false, | |
isServer: false | |
}; | |
} | |
}; | |
export default Speakers |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment