refactor(#7646): update the select component to have a default placeholder of the window title in site

Author: manishprivet

apps/site/components/withSidebar.tsx

@@ -7,6 +7,7 @@ import type { RichTranslationValues } from 'next-intl';
 import type { FC } from 'react';
 
 import Link from '#site/components/Link';
+import { useDocumentTitle } from '#site/hooks';
 import { useSiteNavigation } from '#site/hooks/server';
 import { useRouter } from '#site/navigation.mjs';
 import type { NavigationKeys } from '#site/types';
@@ -23,6 +24,7 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
   const locale = useLocale();
   const t = useTranslations();
   const { push } = useRouter();
+  const pageTitle = useDocumentTitle();
   const sideNavigation = getSideNavigation(navKeys, context);
 
   const mappedSidebarItems =
@@ -40,6 +42,7 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
       groups={mappedSidebarItems}
       pathname={pathname.replace(`/${locale}`, '')}
       title={t('components.common.sidebar.title')}
+      placeholder={pageTitle}
       onSelect={push}
       as={Link}
       {...props}

apps/site/hooks/react-client/index.ts

@@ -4,3 +4,4 @@ export { default as useMediaQuery } from './useMediaQuery';
 export { default as useNotification } from './useNotification';
 export { default as useClientContext } from './useClientContext';
 export { default as useNavigationState } from './useNavigationState';
+export { default as useDocumentTitle } from './useDocumentTitle';

apps/site/hooks/react-client/useDocumentTitle.ts

@@ -0,0 +1,15 @@
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+const useDocumentTitle = (): string => {
+  const pathname = usePathname();
+  const [title, setTitle] = useState<string>(window.document.title);
+
+  useEffect(() => {
+    setTitle(window.document.title);
+  }, [pathname]);
+
+  return title;
+};
+
+export default useDocumentTitle;

packages/ui-components/Containers/Sidebar/index.tsx

@@ -15,6 +15,7 @@ type SidebarProps = {
   onSelect: (value: string) => void;
   as?: LinkLike;
   showProgressionIcons?: boolean;
+  placeholder?: string;
 };
 
 const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
@@ -25,16 +26,16 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
   as,
   showProgressionIcons = false,
   children,
+  placeholder,
 }) => {
   const selectItems = groups.map(({ items, groupName }) => ({
     label: groupName,
     items: items.map(({ label, link }) => ({ value: link, label })),
   }));
 
-  const currentItem =
-    selectItems
-      .flatMap(item => item.items)
-      .find(item => pathname === item.value) || selectItems[0]?.items[0];
+  const currentItem = selectItems
+    .flatMap(item => item.items)
+    .find(item => pathname === item.value);
 
   return (
     <aside className={styles.wrapper}>
@@ -45,6 +46,7 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
           label={title}
           values={selectItems}
           defaultValue={currentItem?.value}
+          placeholder={placeholder}
           onChange={onSelect}
           className={styles.mobileSelect}
         />