fix filename fetch

This commit is contained in:
Qing 2023-01-07 21:56:41 +08:00
parent 9d6fc3bc42
commit 7374a5127f

View File

@ -29,6 +29,7 @@ interface Photo {
src: string src: string
height: number height: number
width: number width: number
name: string
} }
interface Filename { interface Filename {
@ -68,7 +69,6 @@ interface Props {
export default function FileManager(props: Props) { export default function FileManager(props: Props) {
const { show, onClose, onPhotoClick, photoWidth } = props const { show, onClose, onPhotoClick, photoWidth } = props
const [filenames, setFileNames] = useState<Filename[]>([])
const [scrollTop, setScrollTop] = useState(0) const [scrollTop, setScrollTop] = useState(0)
const [closeScrollTop, setCloseScrollTop] = useState(0) const [closeScrollTop, setCloseScrollTop] = useState(0)
const setToastState = useSetRecoilState(toastState) const setToastState = useSetRecoilState(toastState)
@ -78,6 +78,7 @@ export default function FileManager(props: Props) {
const [searchText, setSearchText] = useState('') const [searchText, setSearchText] = useState('')
const [debouncedSearchText, setDebouncedSearchText] = useState('') const [debouncedSearchText, setDebouncedSearchText] = useState('')
const [tab, setTab] = useState(IMAGE_TAB) const [tab, setTab] = useState(IMAGE_TAB)
const [photos, setPhotos] = useState<Photo[]>([])
const [, cancel] = useDebounce( const [, cancel] = useDebounce(
() => { () => {
@ -110,8 +111,26 @@ export default function FileManager(props: Props) {
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
try { try {
const newFilenames = await getMedias(tab) const filenames = await getMedias(tab)
setFileNames(newFilenames) let filteredFilenames = filenames
if (debouncedSearchText) {
const index = new Index()
filenames.forEach((filename: Filename, id: number) =>
index.add(id, filename.name)
)
const results: IndexSearchResult = index.search(debouncedSearchText)
filteredFilenames = results.map((id: Id) => filenames[id as number])
}
filteredFilenames = _.orderBy(filteredFilenames, sortBy, sortOrder)
const newPhotos = filteredFilenames.map((filename: Filename) => {
const width = photoWidth
const height = filename.height * (width / filename.width)
const src = `/media_thumbnail/${tab}/${filename.name}?width=${width}&height=${height}`
return { src, height, width, name: filename.name }
})
setPhotos(newPhotos)
} catch (e: any) { } catch (e: any) {
setToastState({ setToastState({
open: true, open: true,
@ -121,50 +140,15 @@ export default function FileManager(props: Props) {
}) })
} }
} }
if (show) { fetchData()
fetchData() }, [setToastState, tab, debouncedSearchText, sortBy, sortOrder, photoWidth])
}
}, [show, setToastState, tab])
const onScroll = (event: SyntheticEvent) => { const onScroll = (event: SyntheticEvent) => {
setScrollTop(event.currentTarget.scrollTop) setScrollTop(event.currentTarget.scrollTop)
} }
const filteredFilenames: Filename[] | undefined = useAsyncMemo(async () => {
if (!debouncedSearchText) {
return filenames
}
const index = new Index()
filenames.forEach((filename: Filename, id: number) =>
index.add(id, filename.name)
)
const results: IndexSearchResult = await index.searchAsync(
debouncedSearchText
)
return _.orderBy(
results.map((id: Id) => filenames[id as number]),
sortBy,
sortOrder
)
}, [filenames, debouncedSearchText, sortBy, sortOrder])
const photos: Photo[] = useMemo(() => {
if (!filteredFilenames) {
return []
}
return filteredFilenames.map((filename: Filename) => {
const width = photoWidth
const height = filename.height * (width / filename.width)
const src = `/media_thumbnail/${tab}/${filename.name}?width=${width}&height=${height}`
return { src, height, width }
})
}, [filteredFilenames, photoWidth, tab])
const onClick = ({ index }: { index: number }) => { const onClick = ({ index }: { index: number }) => {
if (filteredFilenames) { onPhotoClick(tab, photos[index].name)
onPhotoClick(tab, filteredFilenames[index].name)
}
} }
return ( return (