From b5945f4fcdcbcdb7c396043d2396a119204dcbd2 Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Thu, 28 Sep 2023 10:08:01 +0200
Subject: [PATCH] feat(PageTitle): provide alternate title for app details page

---
 src/app/(dashboard)/components/PageTitle/PageTitle.tsx | 10 +++++++---
 src/app/(dashboard)/layout.tsx                         |  5 ++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/app/(dashboard)/components/PageTitle/PageTitle.tsx b/src/app/(dashboard)/components/PageTitle/PageTitle.tsx
index 37f1da62..0bc68180 100644
--- a/src/app/(dashboard)/components/PageTitle/PageTitle.tsx
+++ b/src/app/(dashboard)/components/PageTitle/PageTitle.tsx
@@ -5,14 +5,18 @@ import clsx from 'clsx';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import React from 'react';
+import React, { useMemo } from 'react';
 
-export const PageTitle = () => {
+type Props = {
+  apps: { id: string; name: string }[];
+};
+
+export const PageTitle = ({ apps }: Props) => {
   const t = useTranslations();
 
   const path = usePathname();
 
-  const pathArray = path?.substring(1).split('/') || [];
+  const pathArray = useMemo(() => path?.substring(1).split('/') || [], [path]);
 
   const renderBreadcrumbs = () => {
     return (
diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index e30c6b14..4f847037 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -4,6 +4,7 @@ import { getUserFromCookie } from '@/server/common/session.helpers';
 import { SystemServiceClass } from '@/server/services/system';
 import semver from 'semver';
 import clsx from 'clsx';
+import { AppServiceClass } from '@/server/services/apps/apps.service';
 import { Header } from './components/Header';
 import { PageTitle } from './components/PageTitle';
 import styles from './layout.module.scss';
@@ -12,6 +13,8 @@ import { LayoutActions } from './components/LayoutActions/LayoutActions';
 export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
   const user = await getUserFromCookie();
 
+  const { apps } = await AppServiceClass.listApps();
+
   if (!user) {
     redirect('/login');
   }
@@ -28,7 +31,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
           <div className="container-xl">
             <div className={clsx(styles.title, 'align-items-stretch align-items-md-center d-flex flex-column flex-md-row ')}>
               <div className="me-3 text-white">
-                <PageTitle />
+                <PageTitle apps={apps} />
               </div>
               <div className="flex-fill">
                 <LayoutActions />