sessions.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 { IUserInfo, Session } from '../src/components/codecamp/common/CodeCampInterfaces';
import fetchUserInfoPromise from '../src/utils/fetchUserInfoPromise';

const { publicRuntimeConfig } = getConfig();

interface Props {
    userInfo?: IUserInfo;
    sessions?: Session[] | AxiosResponse<any>;
    hasErrored?: boolean;
    isLoading?: boolean;
    isServer?: boolean;
    errorMessage?: string;
}

interface FunctionComponentSessions<Props> extends FunctionComponent<Props> {
    GetSessionsUrl: () => string;
    GetEmptyData: () => any;
}

const Sessions: FunctionComponentSessions<Props> = ({
    userInfo,
    isLoading,
    hasErrored,
    errorMessage,
    sessions,
    isServer
}) => {
    if (isServer) {
        // this means have data already from server so don't get it again
        return (
            <App
                userInfo={userInfo}
                svccpage="sessions"
                sessions={sessions}
                isLoading={isLoading}
                isServer={true}
                errorMessage={errorMessage}
                hasErrored={hasErrored}
            />
        );
    } else {
        // no axios call has been made
        const { axiosResult } = useAxiosFetch(
            Sessions.GetSessionsUrl(),
            5000,
            Sessions.GetEmptyData()
        );

        return (
            <App
                svccpage="sessions"
                sessions={axiosResult.data}
                isLoading={axiosResult.loading}
                isServer={false}
                errorMessage={axiosResult.errorMessage}
                hasErrored={axiosResult.error}
            />
        );
    }
};

Sessions.GetEmptyData = () => {
    return [...Array(7)].map((_, i) => ({
        firstName: '',
        lastName: '',
        id: i,
        speakersList: [
            {
                id: 1124,
                firstName: 'doug',
                lastName: 'crock',
                company: 'paypal'
            }
        ]
    }));
};

Sessions.GetSessionsUrl = () => {
    if (process.env.NODE_ENV === 'production') {
        return (
            process.env.RESTURL_SESSIONS_PROD ||
            publicRuntimeConfig.RESTURL_SESSIONS_PROD
        );
    } else {
        return process.env.RESTURL_SESSIONS_DEV;
    }
};

// @ts-ignore
Sessions.getInitialProps = async ({ req }) => {
    const isServer = !!req;
    if (isServer) {
        const promise1 = axios({
            method: 'get',
            url: Sessions.GetSessionsUrl(),
            headers: {
                Cookie: '.ASPXAUTH=' + req.cookies['.ASPXAUTH']
            }
        })
            .then(response => {
                return {
                    isLoading: false,
                    hasErrored: false,
                    sessions: response.data,
                    //sessions: [response.data[0],response.data[5]],
                    isServer: true
                };
            })
            .catch(error => {
                // console.log('error:' + error.message);
                return {
                    sessions: [],
                    hasErrored: true,
                    isServer: true,
                    errorMessage: error.message
                };
            });

        const promise2 = fetchUserInfoPromise(req.cookies['.ASPXAUTH']);

        return Promise.all([promise1, promise2]).then(function(valArray) {
            let newRet = {
                ...valArray[0],
                ...valArray[1]
            };
            return newRet;
        });
    } 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 {
            sessions: Sessions.GetEmptyData(),
            isLoading: true,
            hasErrored: false,
            isServer: false
        };
    }
};

export default Sessions;