56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import { useState, useEffect, useRef, useCallback } from 'react'
|
|
import { addDays, subDays } from 'date-fns'
|
|
|
|
interface UseRadarTileOptions {
|
|
}
|
|
|
|
interface RadarTileStatus {
|
|
needRefresh: boolean;
|
|
isLoading: boolean;
|
|
isError: boolean;
|
|
url: string | null;
|
|
}
|
|
|
|
interface RadarTile {
|
|
imgBitmap: ImageBitmap | null;
|
|
needRefresh: boolean;
|
|
isLoading: boolean;
|
|
isError: boolean;
|
|
url: string | null;
|
|
}
|
|
|
|
export function useRadarTile({
|
|
}: UseRadarTileOptions = {}) {
|
|
|
|
const radarTileRef = useRef<RadarTile>({
|
|
imgBitmap: null,
|
|
needRefresh: false,
|
|
isLoading: false,
|
|
isError: false,
|
|
url: null,
|
|
})
|
|
|
|
|
|
const fetchRadarTile = useCallback(async (url: string) => {
|
|
radarTileRef.current.needRefresh = true
|
|
radarTileRef.current.isError = false
|
|
radarTileRef.current.url = url
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (radarTileRef.current.needRefresh) {
|
|
if (radarTileRef.current.url) {
|
|
fetch(radarTileRef.current.url).then(async (resp) => {
|
|
const blob = await resp.blob()
|
|
const imgBitmap = await createImageBitmap(blob)
|
|
radarTileRef.current.imgBitmap = imgBitmap
|
|
})
|
|
}
|
|
}
|
|
}, [radarTileRef.current.needRefresh, fetchRadarTile])
|
|
|
|
return {
|
|
radarTileRef,
|
|
fetchRadarTile,
|
|
}
|
|
} |