React wrapper

index.js

import React, { Component } from 'react';
import ApiService from '../../services/api-service';
import Nav from '../../components/nav';
import Metabox from '../../components/metabox';
import Dialog from '../../components/dialog';
import Page404 from '../../components/page-404';
import Spinner from '../../components/spinner';
import './single-sample.scss';
import placeholder from './placeholder-image.png';
import { AppStatusContext } from '../../context/app-status-context';

export default class SingleSamlpe extends Component {
    static contextType = AppStatusContext;

    render() {
        return (
            <Wrapper
                isConnected={this.context.isConnected}
                {...this.props}
            />
        )
    }
};

class Wrapper extends Component {

    static contextType = AppStatusContext;
    apiService = new ApiService();
    itemId = this.props.itemId;

    state = {
        metaData: null,
        imgUrl: null,
        openedModal: false,
        loading: true,
        error: false,
        imageLoaded: false,
        reserveImg: false
    };
    
    componentDidMount() {
        this.getData();
    };

    getData = () => {
        let metaData;

        this.apiService
            .getImageMetaData(this.itemId)
            .then((res) => {
                metaData = res;
                return this.apiService.getImageUrl(metaData.image);
            })
            .then((imgUrl) => {
                this.setState({
                    imgUrl,
                    metaData,
                    loading: false,
                    error: false
                });
            })
            .catch(this.onError);
    };

    componentDidUpdate(prevProps) {
        if(prevProps.isConnected !== this.props.isConnected) {
            this.getData();
        }
    }

    showModal = () => {
        if(this.context.isConnected) {
            this.setState({openedModal: true});
        }
    };

    onClose = () => {
        this.setState({openedModal: false});
    }

    onImageLoaded = (e) => {
        this.setState({imageLoaded: true})
        e.target.parentElement.classList.add('loaded');
    }

    onImageError = (e) => {
        this.setState({reserveImg: true})
        e.target.classList.add('image-error');
    }

    onError = () => {
        this.setState({
            error: true,
            loading: false
        });
    };

    render() {
        const { loading, error } = this.state;
        const { isConnected } = this.props;

        if (loading || (error && !isConnected)) { return <Spinner /> }
        if (error && isConnected) { return <Page404 /> }
        
        const { imgUrl, openedModal, imageLoaded, reserveImg, metaData } = this.state;
        const sampleBtnStyle = isConnected ? 'btn btn-delete' : 'btn btn-delete btn-disabled';
        const dialog = (openedModal && metaData.id) ? <Dialog onClose={this.onClose} currentItemId={metaData.id} /> : null;
        const imageSpinner = !imageLoaded ? <Spinner /> : null;

        return (
            <div className="single">
                <div className="single-view">
                    <Nav />
                    { imageSpinner }
                    <div className="sample">
                        <header className="sample-header">
                            <div className="sample-id">{metaData ? metaData.id : null}</div>
                            <button disabled={!isConnected} onClick={this.showModal} className={sampleBtnStyle} >delete</button>    
                        </header>
                        <img 
                            src={ (imgUrl && !reserveImg ) ? imgUrl : placeholder } 
                            onLoad={this.onImageLoaded} 
                            onError={this.onImageError}
                            className="sample-image" 
                            alt='single' />
                    </div>
                </div>
                <aside className="single-sidebar">
                    <Metabox metaData={metaData} />
                </aside>
                { dialog }
            </div>
        );
    };
};