speakers.tsx

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> {
    getInitialProps: ({req}: { req: any; }) => Promise<{
        isLoading: boolean;
        hasErrored: boolean; speakers: any; isServer: boolean;
    } |
        { speakers: never[]; hasErrored: boolean; isServer: boolean; errorMessage: any; }>;
    GetSpeakersUrl: () => string;
    GetEmptyData: () => any
}

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