put ViewContext into its own file (#795)

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);
 

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);

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;

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<HTMLDivElement> {
@@ -79,16 +72,6 @@ interface Props {
 	viewClassName?: string;
 }
 
-interface ExplorerView {
-	data: ExplorerItem[];
-	scrollRef: RefObject<HTMLDivElement>;
-	isFetchingNextPage?: boolean;
-	onLoadMore?(): void;
-	hasNextPage?: boolean;
-}
-const context = createContext<ExplorerView>(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 && <DismissibleNotice />}
-			<context.Provider
+			<ViewContext.Provider
 				value={{
 					data: props.data,
 					scrollRef,
@@ -122,7 +105,7 @@ export default memo((props: Props) => {
 				{layoutMode === 'grid' && <GridView />}
 				{layoutMode === 'rows' && <ListView />}
 				{layoutMode === 'media' && <MediaView />}
-			</context.Provider>
+			</ViewContext.Provider>
 		</div>
 	);
 });

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<HTMLDivElement>;
+	isFetchingNextPage?: boolean;
+	onLoadMore?(): void;
+	hasNextPage?: boolean;
+}
+
+export const ViewContext = createContext<Context | null>(null);
+
+export const useExplorerViewContext = () => {
+	const ctx = useContext(ViewContext);
+
+	if (ctx === null) throw new Error('ViewContext.Provider not found!');
+
+	return ctx;
+};