feat: add selectedProject prop to SidebarDesktop component in multipl…

…e pages to display the selected project's information in the sidebar
icoretech · May 21, 2023 · 03bff56 · 03bff56
1 parent 06cfd70
commit 03bff56
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 82 deletions.
diff --git a/app/projects/[project_id]/notices/[notice_id]/occurrences/[occurrence_id]/page.tsx b/app/projects/[project_id]/notices/[notice_id]/occurrences/[occurrence_id]/page.tsx
@@ -2,6 +2,7 @@ import OccurrenceCounterLabel from '@/components/CounterLabel';
 import EnvironmentLabel from '@/components/EnvironmentLabel';
 import ProjectHeader from '@/components/ProjectHeader';
 import SidebarDesktop from '@/components/SidebarDesktop';
+import SidebarMobile from '@/components/SidebarMobile';
 import Backtrace from '@/components/occurrence/Backtrace';
 import Context from '@/components/occurrence/Context';
 import Environment from '@/components/occurrence/Environment';
@@ -70,94 +71,102 @@ export default async function Occurrence({
 
   return (
     <>
-      {/* @ts-expect-error Server Component */}
-      <SidebarDesktop selectedProject={project} />
+      <div>
+        <SidebarMobile>
+          {/* @ts-expect-error Server Component */}
+          <SidebarDesktop selectedProject={project} />
+        </SidebarMobile>
 
-      <main className="xl:pl-72">
-        <div className="sticky top-0 z-40 bg-airbroke-900">
-          <ProjectHeader project={project} />
+        <div className="hidden xl:fixed xl:inset-y-0 xl:z-50 xl:flex xl:w-72 xl:flex-col">
+          {/* @ts-expect-error Server Component */}
+          <SidebarDesktop selectedProject={project} />
         </div>
+        <main className="xl:pl-72">
+          <div className="sticky top-0 z-40 bg-airbroke-900">
+            <ProjectHeader project={project} />
+          </div>
 
-        <div className="pb-8">
-          <div className="px-4 py-4 sm:px-6 lg:px-8">
-            <div className="sm:hidden">
-              <label htmlFor="tabs" className="sr-only">
-                Select a tab
-              </label>
-              <select
-                name="tabs"
-                className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
-                defaultValue={currentTab}
-              >
-                {tabs.map((tab) => (
-                  <option key={tab.name}>{tab.name}</option>
-                ))}
-              </select>
-            </div>
-            <div className="hidden sm:block">
-              <nav className="flex space-x-4" aria-label="Tabs">
-                {tabs.map((tab) => (
-                  <Link
-                    key={tab.id}
-                    href={tab.href}
-                    className={classNames(
-                      tab.current
-                        ? 'bg-indigo-500 text-indigo-200 '
-                        : 'bg-indigo-400/10 text-indigo-400 hover:bg-indigo-500 hover:text-indigo-200',
-                      'inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-medium ring-1 ring-indigo-400/30 transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500'
-                    )}
-                    aria-current={tab.current ? 'page' : undefined}
-                  >
-                    <tab.icon className="-ml-0.5 h-5 w-5 text-indigo-400" aria-hidden="true" />
-                    {tab.name}
-                  </Link>
-                ))}
-              </nav>
+          <div className="pb-8">
+            <div className="px-4 py-4 sm:px-6 lg:px-8">
+              <div className="sm:hidden">
+                <label htmlFor="tabs" className="sr-only">
+                  Select a tab
+                </label>
+                <select
+                  name="tabs"
+                  className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
+                  defaultValue={currentTab}
+                >
+                  {tabs.map((tab) => (
+                    <option key={tab.name}>{tab.name}</option>
+                  ))}
+                </select>
+              </div>
+              <div className="hidden sm:block">
+                <nav className="flex space-x-4" aria-label="Tabs">
+                  {tabs.map((tab) => (
+                    <Link
+                      key={tab.id}
+                      href={tab.href}
+                      className={classNames(
+                        tab.current
+                          ? 'bg-indigo-500 text-indigo-200 '
+                          : 'bg-indigo-400/10 text-indigo-400 hover:bg-indigo-500 hover:text-indigo-200',
+                        'inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-medium ring-1 ring-indigo-400/30 transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500'
+                      )}
+                      aria-current={tab.current ? 'page' : undefined}
+                    >
+                      <tab.icon className="-ml-0.5 h-5 w-5 text-indigo-400" aria-hidden="true" />
+                      {tab.name}
+                    </Link>
+                  ))}
+                </nav>
+              </div>
             </div>
-          </div>
 
-          <div className="px-4 pb-4 sm:px-6 lg:px-8">
-            <div className="rounded-md bg-gray-900 p-4 shadow-md">
-              <div className="flex items-center">
-                <div className="flex-shrink-0">
-                  <div className="flex flex-col items-center">
-                    <FaCarCrash className="h-5 w-5 text-indigo-400" aria-hidden="true" />
-                    <div className="mt-4">
-                      <OccurrenceCounterLabel counter={occurrence.seen_count} />
+            <div className="px-4 pb-4 sm:px-6 lg:px-8">
+              <div className="rounded-md bg-gray-900 p-4 shadow-md">
+                <div className="flex items-center">
+                  <div className="flex-shrink-0">
+                    <div className="flex flex-col items-center">
+                      <FaCarCrash className="h-5 w-5 text-indigo-400" aria-hidden="true" />
+                      <div className="mt-4">
+                        <OccurrenceCounterLabel counter={occurrence.seen_count} />
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div className="ml-3">
-                  <div className="flex items-center space-x-3">
-                    <h3 className="text-sm font-semibold text-indigo-400">
-                      <Link href={`/projects/${project.id}/notices/${notice.id}/occurrences`}>{notice.kind}</Link>
-                    </h3>
-                    <EnvironmentLabel env={notice.env} />
-                  </div>
+                  <div className="ml-3">
+                    <div className="flex items-center space-x-3">
+                      <h3 className="text-sm font-semibold text-indigo-400">
+                        <Link href={`/projects/${project.id}/notices/${notice.id}/occurrences`}>{notice.kind}</Link>
+                      </h3>
+                      <EnvironmentLabel env={notice.env} />
+                    </div>
 
-                  <div className="mt-2 space-y-1 text-sm text-indigo-200">
-                    <p>{occurrence.message}</p>
-                    <div className="flex items-center space-x-2 text-xs text-gray-300">
-                      <span>First seen: {occurrence.created_at.toUTCString()}</span>
-                      <svg viewBox="0 0 2 2" className="h-0.5 w-0.5 fill-gray-300">
-                        <circle cx={1} cy={1} r={1} />
-                      </svg>
-                      <span>Last seen: {occurrence.updated_at.toUTCString()}</span>
+                    <div className="mt-2 space-y-1 text-sm text-indigo-200">
+                      <p>{occurrence.message}</p>
+                      <div className="flex items-center space-x-2 text-xs text-gray-300">
+                        <span>First seen: {occurrence.created_at.toUTCString()}</span>
+                        <svg viewBox="0 0 2 2" className="h-0.5 w-0.5 fill-gray-300">
+                          <circle cx={1} cy={1} r={1} />
+                        </svg>
+                        <span>Last seen: {occurrence.updated_at.toUTCString()}</span>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
 
-          {currentTab === 'backtrace' && <Backtrace occurrence={occurrence} project={project} />}
-          {currentTab === 'context' && <Context occurrence={occurrence} />}
-          {currentTab === 'environment' && <Environment occurrence={occurrence} />}
-          {currentTab === 'session' && <Session occurrence={occurrence} />}
-          {currentTab === 'params' && <Params occurrence={occurrence} />}
-          {currentTab === 'toolbox' && <Toolbox occurrence={occurrence} />}
-        </div>
-      </main>
+            {currentTab === 'backtrace' && <Backtrace occurrence={occurrence} project={project} />}
+            {currentTab === 'context' && <Context occurrence={occurrence} />}
+            {currentTab === 'environment' && <Environment occurrence={occurrence} />}
+            {currentTab === 'session' && <Session occurrence={occurrence} />}
+            {currentTab === 'params' && <Params occurrence={occurrence} />}
+            {currentTab === 'toolbox' && <Toolbox occurrence={occurrence} />}
+          </div>
+        </main>
+      </div>
     </>
   );
 }
diff --git a/app/projects/[project_id]/notices/[notice_id]/occurrences/page.tsx b/app/projects/[project_id]/notices/[notice_id]/occurrences/page.tsx
@@ -38,12 +38,12 @@ export default async function Notice({
       <div>
         <SidebarMobile>
           {/* @ts-expect-error Server Component */}
-          <SidebarDesktop />
+          <SidebarDesktop selectedProject={project} />
         </SidebarMobile>
 
         <div className="hidden xl:fixed xl:inset-y-0 xl:z-50 xl:flex xl:w-72 xl:flex-col">
           {/* @ts-expect-error Server Component */}
-          <SidebarDesktop />
+          <SidebarDesktop selectedProject={project} />
         </div>
 
         <main className="xl:pl-72">

diff --git a/app/projects/[project_id]/notices/page.tsx b/app/projects/[project_id]/notices/page.tsx
@@ -47,12 +47,12 @@ export default async function ProjectNotices({
       <div>
         <SidebarMobile>
           {/* @ts-expect-error Server Component */}
-          <SidebarDesktop />
+          <SidebarDesktop selectedProject={project} />
         </SidebarMobile>
 
         <div className="hidden xl:fixed xl:inset-y-0 xl:z-50 xl:flex xl:w-72 xl:flex-col">
           {/* @ts-expect-error Server Component */}
-          <SidebarDesktop />
+          <SidebarDesktop selectedProject={project} />
         </div>
 
         <main className="xl:pl-72">

diff --git a/app/projects/[project_id]/page.tsx b/app/projects/[project_id]/page.tsx
@@ -40,12 +40,12 @@ export default async function Project({
       <div>
         <SidebarMobile>
           {/* @ts-expect-error Server Component */}
-          <SidebarDesktop />
+          <SidebarDesktop selectedProject={project} />
         </SidebarMobile>
 
         <div className="hidden xl:fixed xl:inset-y-0 xl:z-50 xl:flex xl:w-72 xl:flex-col">
           {/* @ts-expect-error Server Component */}
-          <SidebarDesktop />
+          <SidebarDesktop selectedProject={project} />
         </div>
 
         <main className="xl:pl-72">

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -28,12 +28,12 @@ export default async function Projects({ searchParams }: { searchParams: Record<
       <div>
         <SidebarMobile>
           {/* @ts-expect-error Server Component */}
-          <SidebarDesktop />
+          <SidebarDesktop selectedProject={project} />
         </SidebarMobile>
 
         <div className="hidden xl:fixed xl:inset-y-0 xl:z-50 xl:flex xl:w-72 xl:flex-col">
           {/* @ts-expect-error Server Component */}
-          <SidebarDesktop />
+          <SidebarDesktop selectedProject={project} />
         </div>
 
         <main className="xl:pl-72">