Source: pages/TranslateInstitutionsPage.js

import React, {Component} from 'react';
import * as apiCalls from "../apiCalls/apiCalls";
import handleError from "../shared/failureHandler";
import Spinner from "../components/Spinner";
import InstitutionCard from "../components/InstitutionCard";
import NoContentMessage from "../components/NoContentMessage";
import PageContentContainer from "../components/PageContentContainer";
import Breadcrumbs from "../components/Breadcrumbs";
import PageInfo from "../components/PageInfo";

/**
 * page of all registered institutions for translators to choose
 */
class TranslateInstitutionsPage extends Component {

    /**
     * current page state
     */
    state = {
        institutions: [],
        pendingApiCall: false,
    }

    /**
     * called when page is moutned
     */
    componentDidMount() {
        this.setState({pendingApiCall: true})
        // fetch institutions from the server
        apiCalls.getAllInstitutions().then(response => {
            this.setState({institutions: response.data, pendingApiCall: false});
        }).catch(error => {
            // handle unauthorized state
            return handleError(error);
        });
    }

    /**
     * renders institutions page
     * @returns {JSX.Element} page
     */
    render() {

        // map institutions to institution cards
        const institutions = this.state.institutions.map(i =>
            <InstitutionCard key={i.institutionId} {...i} />
        );

        // define content
        let content = <Spinner/>;
        if (!this.state.pendingApiCall) {
            content = this.state.institutions.length === 0 ? <NoContentMessage text="There are no institutions"/> : institutions;
        }

        return (
            <PageContentContainer>
                <Breadcrumbs>
                    <li className="breadcrumb-item active">Translate - Institutions</li>
                </Breadcrumbs>

                <PageInfo name="Institutions">Choose the institution whose information labels you want to translate</PageInfo>
                {content}
            </PageContentContainer>
        );
    }
}

export default TranslateInstitutionsPage;