aswi2022code-of-duty-gitlab/frontend/src/features/Reusables/ConsumeLastError.tsx @ f2db3e05

import { Typography } from '@mui/material'
import { Fragment, FunctionComponent, useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'

export interface ConsumeLastErrorProps {
    // Observable error from the store
    err?: string
    // Consume function that clears the error in the store
    consumeFn: () => void
}

// Utility component that consumes the last error from the store and shows it
const ConsumeLastError: FunctionComponent<ConsumeLastErrorProps> = ({
    err: error,
    consumeFn,
}) => {
    const dispatch = useDispatch()
    const [err, setErr] = useState('')

    useEffect(() => {
        if (error) {
            setErr(`${error}`)
            dispatch(consumeFn())
        }
    }, [consumeFn, dispatch, error])

    return <Fragment>
        {err ? <Typography variant="h6" fontWeight="400">{err}</Typography> : null}
    </Fragment>
}

export default ConsumeLastError