diff --git a/interface/app/$libraryId/Explorer/GridView.tsx b/interface/app/$libraryId/Explorer/GridView.tsx index 905fd31f5..b633ff76e 100644 --- a/interface/app/$libraryId/Explorer/GridView.tsx +++ b/interface/app/$libraryId/Explorer/GridView.tsx @@ -6,7 +6,8 @@ import { ExplorerItem, formatBytes } from '@sd/client'; import { getExplorerStore, useExplorerStore } from '~/hooks/useExplorerStore'; import RenameTextBox from './File/RenameTextBox'; import Thumb from './File/Thumb'; -import { ViewItem, useExplorerView } from './View'; +import { ViewItem } from './View'; +import { useExplorerViewContext } from './ViewContext'; import { getItemFilePath } from './util'; interface GridViewItemProps { @@ -72,7 +73,8 @@ const GridViewItem = memo(({ data, selected, index, ...props }: GridViewItemProp export default () => { const explorerStore = useExplorerStore(); - const { data, scrollRef, onLoadMore, hasNextPage, isFetchingNextPage } = useExplorerView(); + const { data, scrollRef, onLoadMore, hasNextPage, isFetchingNextPage } = + useExplorerViewContext(); const [width, setWidth] = useState(0); diff --git a/interface/app/$libraryId/Explorer/ListView.tsx b/interface/app/$libraryId/Explorer/ListView.tsx index 699bd6b1a..3e221e611 100644 --- a/interface/app/$libraryId/Explorer/ListView.tsx +++ b/interface/app/$libraryId/Explorer/ListView.tsx @@ -22,7 +22,8 @@ import { useScrolled } from '~/hooks/useScrolled'; import RenameTextBox from './File/RenameTextBox'; import Thumb from './File/Thumb'; import { InfoPill } from './Inspector'; -import { ViewItem, useExplorerView } from './View'; +import { ViewItem } from './View'; +import { useExplorerViewContext } from './ViewContext'; import { getExplorerItemData, getItemFilePath } from './util'; interface ListViewItemProps { @@ -70,7 +71,8 @@ const ListViewItem = memo((props: ListViewItemProps) => { export default () => { const explorerStore = useExplorerStore(); const dismissibleNoticeStore = useDismissibleNoticeStore(); - const { data, scrollRef, onLoadMore, hasNextPage, isFetchingNextPage } = useExplorerView(); + const { data, scrollRef, onLoadMore, hasNextPage, isFetchingNextPage } = + useExplorerViewContext(); const { isScrolled } = useScrolled(scrollRef, 5); const [sized, setSized] = useState(false); diff --git a/interface/app/$libraryId/Explorer/MediaView.tsx b/interface/app/$libraryId/Explorer/MediaView.tsx index 2334fdcb7..8039dcc69 100644 --- a/interface/app/$libraryId/Explorer/MediaView.tsx +++ b/interface/app/$libraryId/Explorer/MediaView.tsx @@ -9,7 +9,8 @@ import { Button } from '@sd/ui'; import { useDismissibleNoticeStore } from '~/hooks/useDismissibleNoticeStore'; import { getExplorerStore, useExplorerStore } from '~/hooks/useExplorerStore'; import Thumb from './File/Thumb'; -import { ViewItem, useExplorerView } from './View'; +import { ViewItem } from './View'; +import { useExplorerViewContext } from './ViewContext'; interface MediaViewItemProps { data: ExplorerItem; @@ -58,7 +59,8 @@ const MediaViewItem = memo(({ data, index }: MediaViewItemProps) => { export default () => { const explorerStore = useExplorerStore(); const dismissibleNoticeStore = useDismissibleNoticeStore(); - const { data, scrollRef, onLoadMore, hasNextPage, isFetchingNextPage } = useExplorerView(); + const { data, scrollRef, onLoadMore, hasNextPage, isFetchingNextPage } = + useExplorerViewContext(); const gridPadding = 2; const scrollBarWidth = 6; diff --git a/interface/app/$libraryId/Explorer/View.tsx b/interface/app/$libraryId/Explorer/View.tsx index 5cc1a599e..25f29749e 100644 --- a/interface/app/$libraryId/Explorer/View.tsx +++ b/interface/app/$libraryId/Explorer/View.tsx @@ -1,13 +1,5 @@ import clsx from 'clsx'; -import { - HTMLAttributes, - PropsWithChildren, - RefObject, - createContext, - memo, - useContext, - useRef -} from 'react'; +import { HTMLAttributes, PropsWithChildren, memo, useRef } from 'react'; import { createSearchParams, useMatch, useNavigate } from 'react-router-dom'; import { ExplorerItem, isPath, useLibraryContext } from '@sd/client'; import { getExplorerStore, useExplorerStore } from '~/hooks/useExplorerStore'; @@ -17,6 +9,7 @@ import ContextMenu from './File/ContextMenu'; import GridView from './GridView'; import ListView from './ListView'; import MediaView from './MediaView'; +import { ViewContext } from './ViewContext'; import { getExplorerItemData, getItemFilePath } from './util'; interface ViewItemProps extends PropsWithChildren, HTMLAttributes { @@ -79,16 +72,6 @@ interface Props { viewClassName?: string; } -interface ExplorerView { - data: ExplorerItem[]; - scrollRef: RefObject; - isFetchingNextPage?: boolean; - onLoadMore?(): void; - hasNextPage?: boolean; -} -const context = createContext(undefined!); -export const useExplorerView = () => useContext(context); - export default memo((props: Props) => { const explorerStore = useExplorerStore(); const layoutMode = explorerStore.layoutMode; @@ -110,7 +93,7 @@ export default memo((props: Props) => { onClick={() => (getExplorerStore().selectedRowIndex = null)} > {!isOverview && } - { {layoutMode === 'grid' && } {layoutMode === 'rows' && } {layoutMode === 'media' && } - + ); }); diff --git a/interface/app/$libraryId/Explorer/ViewContext.ts b/interface/app/$libraryId/Explorer/ViewContext.ts new file mode 100644 index 000000000..8e0909d5e --- /dev/null +++ b/interface/app/$libraryId/Explorer/ViewContext.ts @@ -0,0 +1,20 @@ +import { RefObject, createContext, useContext } from 'react'; +import { ExplorerItem } from '@sd/client'; + +interface Context { + data: ExplorerItem[]; + scrollRef: RefObject; + isFetchingNextPage?: boolean; + onLoadMore?(): void; + hasNextPage?: boolean; +} + +export const ViewContext = createContext(null); + +export const useExplorerViewContext = () => { + const ctx = useContext(ViewContext); + + if (ctx === null) throw new Error('ViewContext.Provider not found!'); + + return ctx; +};