From ee4ccf511d47f5cf2585d99ab0ecb617c094444d Mon Sep 17 00:00:00 2001
From: nikec <43032218+niikeec@users.noreply.github.com>
Date: Tue, 4 Jul 2023 14:14:33 +0200
Subject: [PATCH] [ENG-882] Overview page scroll position on category change
 (#1071)

* Page layout context & overview page scroll on category change

* Move PageLayout
---
 interface/app/$libraryId/PageLayout.tsx       | 24 -------------------
 .../app/$libraryId/PageLayout/Context.tsx     | 14 +++++++++++
 interface/app/$libraryId/PageLayout/index.tsx | 22 +++++++++++++++++
 interface/app/$libraryId/overview/index.tsx   | 13 +++++++---
 4 files changed, 46 insertions(+), 27 deletions(-)
 delete mode 100644 interface/app/$libraryId/PageLayout.tsx
 create mode 100644 interface/app/$libraryId/PageLayout/Context.tsx
 create mode 100644 interface/app/$libraryId/PageLayout/index.tsx

diff --git a/interface/app/$libraryId/PageLayout.tsx b/interface/app/$libraryId/PageLayout.tsx
deleted file mode 100644
index ee8186e97..000000000
--- a/interface/app/$libraryId/PageLayout.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { RefObject, createContext, useContext, useRef } from 'react';
-import { Outlet } from 'react-router';
-import { TOP_BAR_HEIGHT } from './TopBar';
-
-const PageContext = createContext<{ ref: RefObject<HTMLDivElement> } | undefined>(undefined);
-export const usePageLayout = () => useContext(PageContext);
-
-export const Component = () => {
-	const ref = useRef<HTMLDivElement>(null);
-
-	return (
-		<div
-			ref={ref}
-			className="custom-scroll topbar-page-scroll app-background flex h-screen w-full flex-col"
-			style={{ paddingTop: TOP_BAR_HEIGHT }}
-		>
-			<PageContext.Provider value={{ ref }}>
-				<div className="flex h-screen w-full flex-col">
-					<Outlet />
-				</div>
-			</PageContext.Provider>
-		</div>
-	);
-};
diff --git a/interface/app/$libraryId/PageLayout/Context.tsx b/interface/app/$libraryId/PageLayout/Context.tsx
new file mode 100644
index 000000000..62b29ed08
--- /dev/null
+++ b/interface/app/$libraryId/PageLayout/Context.tsx
@@ -0,0 +1,14 @@
+import { RefObject, createContext, useContext } from 'react';
+
+/**
+ * Context to hold the ref value of the page layout
+ */
+export const PageLayoutContext = createContext<{ ref: RefObject<HTMLDivElement> } | null>(null);
+
+export const usePageLayoutContext = () => {
+	const ctx = useContext(PageLayoutContext);
+
+	if (ctx === null) throw new Error('PageLayoutContext.Provider not found!');
+
+	return ctx;
+};
diff --git a/interface/app/$libraryId/PageLayout/index.tsx b/interface/app/$libraryId/PageLayout/index.tsx
new file mode 100644
index 000000000..ab66af38e
--- /dev/null
+++ b/interface/app/$libraryId/PageLayout/index.tsx
@@ -0,0 +1,22 @@
+import { useRef } from 'react';
+import { Outlet } from 'react-router';
+import { TOP_BAR_HEIGHT } from '../TopBar';
+import { PageLayoutContext } from './Context';
+
+export const Component = () => {
+	const ref = useRef<HTMLDivElement>(null);
+
+	return (
+		<PageLayoutContext.Provider value={{ ref }}>
+			<div
+				ref={ref}
+				className="custom-scroll topbar-page-scroll app-background flex h-screen w-full flex-col"
+				style={{ paddingTop: TOP_BAR_HEIGHT }}
+			>
+				<div className="flex h-screen w-full flex-col">
+					<Outlet />
+				</div>
+			</div>
+		</PageLayoutContext.Provider>
+	);
+};
diff --git a/interface/app/$libraryId/overview/index.tsx b/interface/app/$libraryId/overview/index.tsx
index b5a555aef..2321af653 100644
--- a/interface/app/$libraryId/overview/index.tsx
+++ b/interface/app/$libraryId/overview/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import 'react-loading-skeleton/dist/skeleton.css';
 import { Category } from '@sd/client';
 import { ExplorerContext } from '../Explorer/Context';
@@ -8,7 +8,7 @@ import { Inspector } from '../Explorer/Inspector';
 import { DefaultTopBarOptions } from '../Explorer/TopBarOptions';
 import View from '../Explorer/View';
 import { useExplorerStore } from '../Explorer/store';
-import { usePageLayout } from '../PageLayout';
+import { usePageLayoutContext } from '../PageLayout/Context';
 import { TopBarPortal } from '../TopBar/Portal';
 import Statistics from '../overview/Statistics';
 import { Categories } from './Categories';
@@ -16,7 +16,7 @@ import { useItems } from './data';
 
 export const Component = () => {
 	const explorerStore = useExplorerStore();
-	const page = usePageLayout();
+	const page = usePageLayoutContext();
 
 	const [selectedCategory, setSelectedCategory] = useState<Category>('Recents');
 
@@ -29,6 +29,13 @@ export const Component = () => {
 		[selectedItemId, items]
 	);
 
+	useEffect(() => {
+		if (page?.ref.current) {
+			const { scrollTop } = page.ref.current;
+			if (scrollTop > 100) page.ref.current.scrollTo({ top: 100 });
+		}
+	}, [selectedCategory, page?.ref]);
+
 	return (
 		<ExplorerContext.Provider value={{}}>
 			<TopBarPortal right={<DefaultTopBarOptions />} />