From 1250f465962f368fc8cd59e2a444aba79782ddf1 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Wed, 4 Oct 2023 23:31:12 +0300
Subject: [PATCH] [ENG-989] Switch explorer views bug (#1433)

* Fix explorer switching bug

* tweaks
---
 interface/app/$libraryId/Explorer/useExplorer.ts | 13 +++++++++++--
 interface/app/$libraryId/location/$id.tsx        |  3 ++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/interface/app/$libraryId/Explorer/useExplorer.ts b/interface/app/$libraryId/Explorer/useExplorer.ts
index 681d2389e..9b9ed20f2 100644
--- a/interface/app/$libraryId/Explorer/useExplorer.ts
+++ b/interface/app/$libraryId/Explorer/useExplorer.ts
@@ -81,20 +81,29 @@ export type UseExplorer<TOrder extends Ordering> = ReturnType<typeof useExplorer
 export function useExplorerSettings<TOrder extends Ordering>({
 	settings,
 	onSettingsChanged,
-	orderingKeys
+	orderingKeys,
+	location
 }: {
 	settings: ReturnType<typeof createDefaultExplorerSettings<TOrder>>;
 	onSettingsChanged?: (settings: ExplorerSettings<TOrder>) => any;
 	orderingKeys?: z.ZodUnion<
 		[z.ZodLiteral<OrderingKeys<TOrder>>, ...z.ZodLiteral<OrderingKeys<TOrder>>[]]
 	>;
+	location?: Location | null;
 }) {
 	const [store] = useState(() => proxy(settings));
 
 	useEffect(() => {
-		Object.assign(store, settings);
+		Object.assign(store, {
+			...settings,
+			layoutMode: store.layoutMode
+		});
 	}, [store, settings]);
 
+	useEffect(() => {
+		store.layoutMode = settings.layoutMode;
+	}, [location])
+
 	useEffect(
 		() =>
 			subscribe(store, () => {
diff --git a/interface/app/$libraryId/location/$id.tsx b/interface/app/$libraryId/location/$id.tsx
index 62e514551..807fcaadb 100644
--- a/interface/app/$libraryId/location/$id.tsx
+++ b/interface/app/$libraryId/location/$id.tsx
@@ -74,7 +74,8 @@ export const Component = () => {
 	const explorerSettings = useExplorerSettings({
 		settings,
 		onSettingsChanged,
-		orderingKeys: filePathOrderingKeysSchema
+		orderingKeys: filePathOrderingKeysSchema,
+		location: location.data
 	});
 
 	const { items, count, loadMore, query } = useItems({ locationId, settings: explorerSettings });