grungnet/src/contexts/DiceLoadingContext.tsx
Mitchell McCaffrey 029a992381 Typescript
2021-07-17 18:39:49 +10:00

50 lines
1.3 KiB
TypeScript

import React, { useState, useContext, ReactChild } from "react";
export type AssetLoadStartEventHandler = () => void;
export type AssetLoadFinishEventHandler = () => void;
type DiceLoadingContextValue = {
assetLoadStart: AssetLoadStartEventHandler;
assetLoadFinish: AssetLoadFinishEventHandler;
isLoading: boolean;
};
const DiceLoadingContext =
React.createContext<DiceLoadingContextValue | undefined>(undefined);
export function DiceLoadingProvider({ children }: { children: ReactChild }) {
const [loadingAssetCount, setLoadingAssetCount] = useState(0);
function assetLoadStart() {
setLoadingAssetCount((prevLoadingAssets) => prevLoadingAssets + 1);
}
function assetLoadFinish() {
setLoadingAssetCount((prevLoadingAssets) => prevLoadingAssets - 1);
}
const isLoading = loadingAssetCount > 0;
const value = {
assetLoadStart,
assetLoadFinish,
isLoading,
};
return (
<DiceLoadingContext.Provider value={value}>
{children}
</DiceLoadingContext.Provider>
);
}
export function useDiceLoading() {
const context = useContext(DiceLoadingContext);
if (context === undefined) {
throw new Error("useDiceLoading must be used within a DiceLoadingProvider");
}
return context;
}
export default DiceLoadingContext;