ImageGallery.tsx

import React, { Reducer, useEffect, useReducer, useState } from 'react';
import { Button } from 'reactstrap';

export class WrappedIncrementorState {
    current: number = 0;
    max: number = 0;
}

export type WrappedIncrementorAction =
    | { type: 'INCREMENT' }
    | { type: 'SETMAX', payload: number }

export const wrappedIncrementor = (oldState: WrappedIncrementorState, action: WrappedIncrementorAction) => {
    let state = { ...oldState }
    switch (action.type) {
        case 'INCREMENT':
            state.current++;
            if (state.current >= state.max) {
                state.current = 0;
            }
            break;
        case 'SETMAX':
            state.max = action.payload;
            if (state.current >= state.max) {
                state.current = state.max - 1;
            }
            break;
    }
    return state;
}


export const ImageGallery = () => {

    const [image, setImage] = useState<string | null>()
    const [index, setIndex] = useReducer(wrappedIncrementor, new WrappedIncrementorState())

    const fetchNewImage = async () => {
        setImage(null)

        let response = await fetch(`imagegallery/${index.current}`);

        setIndex({ type: 'SETMAX', payload: parseInt(response.headers.get("total-images") as string) })

        const fileReaderInstance = new FileReader();
        fileReaderInstance.readAsDataURL(await response.blob());
        fileReaderInstance.onload = () => {
            setImage(fileReaderInstance.result as string);
        }
    }

    useEffect(() => { fetchNewImage() }, [index.current])

    return (
        <>
            <Button onClick={() => setIndex({ type: 'INCREMENT' })} disabled={image == null}>Next image</Button>
            <div style={{ border: '2px solid black', width: 1024, height: 768 }}>
                {image == null ? (<p>Loading...</p>) : (<img src={image} style={{ display: 'block', height: '100%', width: '100%', objectFit: 'contain' }} />)}
            </div>
        </>
    );
}