From 8d7fa95ed6df65c3f911f30525521301ed8ff1fe Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Tue, 27 Apr 2021 20:19:21 +0800
Subject: [PATCH] Modify groupings

Group "more" and the sidebar into one subpage key.
---
 .../templates/LeftSidebarLayout/index.tsx     | 14 ++++++-----
 .../LeftSidebarWithMenuLayout/index.tsx       | 24 +++++++++----------
 src/pages/layouts/left-sidebar/index.tsx      | 16 +++++++------
 .../layouts/left-sidebar/with-menu/index.tsx  | 22 ++++++++---------
 src/utilities/queryKeys.ts                    |  4 +---
 src/utilities/subpages.ts                     |  3 +++
 6 files changed, 43 insertions(+), 40 deletions(-)
 create mode 100644 src/utilities/subpages.ts

diff --git a/src/components/templates/LeftSidebarLayout/index.tsx b/src/components/templates/LeftSidebarLayout/index.tsx
index ffef600..c5df405 100644
--- a/src/components/templates/LeftSidebarLayout/index.tsx
+++ b/src/components/templates/LeftSidebarLayout/index.tsx
@@ -7,7 +7,6 @@ import Brand from '../../molecules/Brand'
 
 type Props = {
 	query: string,
-	sidebarMainOpen: boolean,
 	menuLinkLabel: string,
 	userLinkLabel: string,
 	searchQueryKey: string,
@@ -15,12 +14,13 @@ type Props = {
 	searchHint: string,
 	popupQueryKey: string,
 	userPopupQueryValue: string,
-	sidebarQueryKey: string,
+	sidebarSubpageQueryValue: string,
+	subpageQueryKey: string,
+	subpage: string,
 }
 
 const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 	query,
-	sidebarMainOpen,
 	menuLinkLabel,
 	userLinkLabel,
 	searchQueryKey,
@@ -28,14 +28,16 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 	searchHint,
 	popupQueryKey,
 	userPopupQueryValue,
-	sidebarQueryKey,
+	sidebarSubpageQueryValue,
+	subpageQueryKey,
+	subpage,
 }) => {
 	return (
 		<LeftSidebar.Layout
 			brand={
 				<Brand />
 			}
-			sidebarMainOpen={sidebarMainOpen}
+			sidebarMainOpen={subpage === sidebarSubpageQueryValue}
 			topBarCenter={
 				<form>
 					<T.TextInput
@@ -52,7 +54,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 				<Link
 					href={{
 						query: {
-							[sidebarQueryKey]: '',
+							[subpageQueryKey]: sidebarSubpageQueryValue,
 						},
 					}}
 				>
diff --git a/src/components/templates/LeftSidebarWithMenuLayout/index.tsx b/src/components/templates/LeftSidebarWithMenuLayout/index.tsx
index 9f0b45a..ffa8ab3 100644
--- a/src/components/templates/LeftSidebarWithMenuLayout/index.tsx
+++ b/src/components/templates/LeftSidebarWithMenuLayout/index.tsx
@@ -7,36 +7,36 @@ import Brand from '../../molecules/Brand'
 
 type Props = {
 	query: string,
-	sidebarMainOpen: boolean,
 	menuLinkLabel: string,
 	userLinkLabel: string,
-	moreItemsOpen: boolean,
 	searchQueryKey: string,
 	searchLabel: string,
 	searchHint: string,
 	popupQueryKey: string,
-	moreQueryKey: string,
-	sidebarQueryKey: string,
+	moreSubpageQueryValue: string,
+	sidebarSubpageQueryValue: string,
 	moreLinkLabel: string,
 	sidebarMenuItems: LeftSidebarWithMenu.MenuItem[],
 	userPopupQueryValue: string,
+	subpageQueryKey: string,
+	subpage: string,
 }
 
 const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 	query,
-	sidebarMainOpen,
 	menuLinkLabel,
 	userLinkLabel,
-	moreItemsOpen,
 	searchQueryKey,
 	searchLabel,
 	searchHint,
 	popupQueryKey,
-	moreQueryKey,
-	sidebarQueryKey,
+	moreSubpageQueryValue,
+	sidebarSubpageQueryValue,
 	moreLinkLabel,
 	sidebarMenuItems,
 	userPopupQueryValue,
+	subpageQueryKey,
+	subpage,
 }) => {
 	return (
 		<LeftSidebarWithMenu.Layout
@@ -59,7 +59,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 				<Link
 					href={{
 						query: {
-							[sidebarQueryKey]: '',
+							[subpageQueryKey]: sidebarSubpageQueryValue,
 						},
 					}}
 				>
@@ -87,7 +87,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 				label: moreLinkLabel,
 				url: {
 					query: {
-						[moreQueryKey]: '',
+						[subpageQueryKey]: moreSubpageQueryValue,
 					},
 				},
 				icon: (
@@ -97,7 +97,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 					/>
 				),
 			}}
-			moreItemsOpen={moreItemsOpen}
+			moreItemsOpen={subpage === moreSubpageQueryValue}
 			moreLinkComponent={({ url, icon, label, }) => (
 				<Link
 					href={url}
@@ -122,7 +122,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 					</LeftSidebarWithMenu.SidebarMenuContainer>
 				</Link>
 			)}
-			sidebarMainOpen={sidebarMainOpen}
+			sidebarMainOpen={subpage === sidebarSubpageQueryValue}
 			sidebarMain={
 				<LeftSidebarWithMenu.SidebarMainContainer>
 					<DummyContent />
diff --git a/src/pages/layouts/left-sidebar/index.tsx b/src/pages/layouts/left-sidebar/index.tsx
index e939616..b4df0a2 100644
--- a/src/pages/layouts/left-sidebar/index.tsx
+++ b/src/pages/layouts/left-sidebar/index.tsx
@@ -1,21 +1,22 @@
 import {GetServerSideProps, NextPage} from 'next'
 import Template from '../../../components/templates/LeftSidebarLayout'
-import {POPUP, QUERY, SIDEBAR} from '../../../utilities/queryKeys'
+import {POPUP, QUERY, SUBPAGE} from '../../../utilities/queryKeys'
 import {USER} from '../../../utilities/popups'
+import {SIDEBAR} from '../../../utilities/subpages'
 
 type Props = {
 	query: string,
-	sidebarMainOpen: boolean,
+	subpage: string,
 }
 
 const Page: NextPage<Props> = ({
 	query,
-	sidebarMainOpen,
+	subpage,
 }) => {
 	return (
 		<Template
+			subpage={subpage}
 			query={query}
-			sidebarMainOpen={sidebarMainOpen}
 			userLinkLabel="User"
 			searchQueryKey={QUERY}
 			searchLabel="Search"
@@ -23,7 +24,8 @@ const Page: NextPage<Props> = ({
 			popupQueryKey={POPUP}
 			userPopupQueryValue={USER}
 			menuLinkLabel="Menu"
-			sidebarQueryKey={SIDEBAR}
+			subpageQueryKey={SUBPAGE}
+			sidebarSubpageQueryValue={SIDEBAR}
 		/>
 	)
 }
@@ -31,11 +33,11 @@ const Page: NextPage<Props> = ({
 export default Page
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-	const { [QUERY]: query = '', } = ctx.query
+	const { [QUERY]: query = '', [SUBPAGE]: subpage = null, } = ctx.query
 	return {
 		props: {
 			query,
-			sidebarMainOpen: 'sidebar' in ctx.query,
+			subpage,
 		}
 	}
 }
diff --git a/src/pages/layouts/left-sidebar/with-menu/index.tsx b/src/pages/layouts/left-sidebar/with-menu/index.tsx
index 13fba76..22050e6 100644
--- a/src/pages/layouts/left-sidebar/with-menu/index.tsx
+++ b/src/pages/layouts/left-sidebar/with-menu/index.tsx
@@ -2,24 +2,23 @@ import * as React from 'react'
 import * as T from '@tesseract-design/react-common'
 import {GetServerSideProps, NextPage} from 'next'
 import Template from '../../../../components/templates/LeftSidebarWithMenuLayout'
-import {MORE, POPUP, QUERY, SIDEBAR} from '../../../../utilities/queryKeys'
+import {POPUP, QUERY, SUBPAGE} from '../../../../utilities/queryKeys'
 import {USER} from '../../../../utilities/popups'
+import {MORE, SIDEBAR} from '../../../../utilities/subpages'
 
 type Props = {
 	query: string,
-	sidebarMainOpen: boolean,
-	moreItemsOpen: boolean,
+	subpage: string,
 }
 
 const Page: NextPage<Props> = ({
 	query,
-	sidebarMainOpen,
-	moreItemsOpen,
+	subpage,
 }) => {
 	return (
 		<Template
 			query={query}
-			moreQueryKey={MORE}
+			subpage={subpage}
 			userLinkLabel="User"
 			searchQueryKey={QUERY}
 			searchLabel="Search"
@@ -27,10 +26,10 @@ const Page: NextPage<Props> = ({
 			popupQueryKey={POPUP}
 			userPopupQueryValue={USER}
 			menuLinkLabel="Menu"
-			sidebarQueryKey={SIDEBAR}
-			sidebarMainOpen={sidebarMainOpen}
 			moreLinkLabel="More"
-			moreItemsOpen={moreItemsOpen}
+			subpageQueryKey={SUBPAGE}
+			sidebarSubpageQueryValue={SIDEBAR}
+			moreSubpageQueryValue={MORE}
 			sidebarMenuItems={[
 				{
 					id: '1',
@@ -133,12 +132,11 @@ const Page: NextPage<Props> = ({
 export default Page
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-	const { q: query = '', } = ctx.query
+	const { [QUERY]: query = '', [SUBPAGE]: subpage = null, } = ctx.query
 	return {
 		props: {
 			query,
-			sidebarMainOpen: 'sidebar' in ctx.query,
-			moreItemsOpen: 'more' in ctx.query,
+			subpage,
 		}
 	}
 }
diff --git a/src/utilities/queryKeys.ts b/src/utilities/queryKeys.ts
index 724b102..cb121f2 100644
--- a/src/utilities/queryKeys.ts
+++ b/src/utilities/queryKeys.ts
@@ -2,6 +2,4 @@ export const QUERY = 'q'
 
 export const POPUP = 'popup'
 
-export const SIDEBAR = 'sidebar'
-
-export const MORE = 'more'
+export const SUBPAGE = 'subpage'
diff --git a/src/utilities/subpages.ts b/src/utilities/subpages.ts
new file mode 100644
index 0000000..e8d42f9
--- /dev/null
+++ b/src/utilities/subpages.ts
@@ -0,0 +1,3 @@
+export const SIDEBAR = 'sidebar'
+
+export const MORE = 'more'