Unified page title for all org pages

theopensource-company · Dec 27, 2023 · f0eea73 · f0eea73
1 parent 7ea029b
commit f0eea73
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 48 deletions.
diff --git a/src/app/[locale]/(console)/organisation/[organisation]/(container)/events/page.tsx b/src/app/[locale]/(console)/organisation/[organisation]/(container)/events/page.tsx
@@ -44,7 +44,7 @@ import { useParams } from 'next/navigation';
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { TinyOrgName } from '../../TinyOrgName';
+import { PageTitle } from '../../components/PageTitle';
 
 export default function Account() {
     const params = useParams();
@@ -73,18 +73,9 @@ export default function Account() {
 
     return (
         <div className="flex flex-grow flex-col gap-6 pt-6">
-            <div>
-                <TinyOrgName name={organisation.name} />
-                <div className="flex items-center justify-between gap-4">
-                    <h1 className="pb-6 text-3xl font-semibold">
-                        {t('title')}
-                    </h1>
-                    <CreateEvent
-                        refetch={refetch}
-                        organiser={organisation.id}
-                    />
-                </div>
-            </div>
+            <PageTitle organisation={organisation} title={t('title')}>
+                <CreateEvent refetch={refetch} organiser={organisation.id} />
+            </PageTitle>
             <div className="flex justify-start gap-4 pb-2">
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>

diff --git a/src/app/[locale]/(console)/organisation/[organisation]/(container)/members/page.tsx b/src/app/[locale]/(console)/organisation/[organisation]/(container)/members/page.tsx
@@ -33,7 +33,7 @@ import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
 import React, { useState } from 'react';
 import { z } from 'zod';
-import { TinyOrgName } from '../../TinyOrgName';
+import { PageTitle } from '../../components/PageTitle';
 
 export default function Account() {
     const params = useParams();
@@ -43,8 +43,9 @@ export default function Account() {
     const { isPending, data, refetch } = useData(slug);
     const t = useTranslations('pages.console.organisation.members');
 
-    const organisation = data?.organisation;
-    const invited_members = data?.invited_members;
+    if (!data?.organisation) return <NotFoundScreen text={t('not_found')} />;
+    const organisation = data.organisation;
+    const invited_members = data.invited_members;
 
     // Split the managers out per organisation,
     // store managers for the current org under the '__' key
@@ -66,18 +67,17 @@ export default function Account() {
         </Container>
     ) : organisation ? (
         <div className="flex flex-grow flex-col pt-6">
-            <div>
-                <TinyOrgName name={organisation.name} />
-                <div className="flex items-center justify-between pb-6">
-                    <h1 className="text-3xl font-semibold">{t('title')}</h1>
-                    {organisation.can_manage && (
-                        <AddMember
-                            organisation={organisation.id}
-                            refresh={refetch}
-                        />
-                    )}
-                </div>
-            </div>
+            <PageTitle
+                organisation={organisation as unknown as Organisation}
+                title={t('title')}
+            >
+                {organisation.can_manage && (
+                    <AddMember
+                        organisation={organisation.id}
+                        refresh={refetch}
+                    />
+                )}
+            </PageTitle>
             <div className="space-y-20">
                 {Object.entries(perOrg).map(([key, managers]) => (
                     <ListManagers

diff --git a/src/app/[locale]/(console)/organisation/[organisation]/(container)/organisations/page.tsx b/src/app/[locale]/(console)/organisation/[organisation]/(container)/organisations/page.tsx
@@ -1,13 +1,15 @@
 'use client';
 
 import { OrganisationTable } from '@/components/data/organisations/table';
+import { NotFoundScreen } from '@/components/layout/NotFoundScreen';
 import { useSurreal } from '@/lib/Surreal';
 import { Organisation } from '@/schema/resources/organisation';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
 import React from 'react';
 import { z } from 'zod';
+import { PageTitle } from '../../components/PageTitle';
 
 export default function Organisations() {
     const params = useParams();
@@ -16,13 +18,15 @@ export default function Organisations() {
         : params.organisation;
 
     const { data, isPending } = useData({ slug });
-    const t = useTranslations('pages.console.account.organisations');
+    const t = useTranslations('pages.console.organisation.organisations');
 
-    const nested = data?.nested ?? [];
+    if (!data?.organisation) return <NotFoundScreen text={t('not_found')} />;
+    const nested = data.nested ?? [];
+    const organisation = data.organisation;
 
     return (
         <div className="flex flex-grow flex-col gap-12 pt-6">
-            <h1 className="pb-6 text-3xl font-bold">{t('title')}</h1>
+            <PageTitle organisation={organisation} title={t('title')} />
 
             <OrganisationTable
                 isLoading={isPending}

diff --git a/src/app/[locale]/(console)/organisation/[organisation]/(container)/overview/page.tsx b/src/app/[locale]/(console)/organisation/[organisation]/(container)/overview/page.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { Avatar } from '@/components/cards/avatar';
 import { Profile } from '@/components/cards/profile';
 import { EventTable } from '@/components/data/events/table';
 import { OrganisationTable } from '@/components/data/organisations/table';
@@ -23,7 +22,7 @@ import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
 import React from 'react';
 import { z } from 'zod';
-import { TinyOrgName } from '../../TinyOrgName';
+import { PageTitle } from '../../components/PageTitle';
 
 export default function Account() {
     const params = useParams();
@@ -52,13 +51,7 @@ export default function Account() {
 
     return (
         <div className="flex flex-grow flex-col gap-6 pt-6">
-            <div className="flex items-center gap-6 pb-6">
-                <Avatar profile={organisation} renderBadge={false} size="big" />
-                <div>
-                    <TinyOrgName name={organisation.name} />
-                    <h1 className="text-3xl font-semibold">{t('title')}</h1>
-                </div>
-            </div>
+            <PageTitle organisation={organisation} title={t('title')} />
             <div className="grid grid-cols-1 gap-16 xl:grid-cols-3">
                 <div className="space-y-12 xl:col-span-2">
                     <div className="space-y-6">

diff --git a/src/app/[locale]/(console)/organisation/[organisation]/(container)/settings/page.tsx b/src/app/[locale]/(console)/organisation/[organisation]/(container)/settings/page.tsx
@@ -23,7 +23,7 @@ import { useParams } from 'next/navigation';
 import React from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { TinyOrgName } from '../../TinyOrgName';
+import { PageTitle } from '../../components/PageTitle';
 
 export default function Account() {
     const params = useParams();
@@ -47,10 +47,7 @@ export default function Account() {
         <LoaderOverlay />
     ) : organisation ? (
         <div className="flex max-w-2xl flex-grow flex-col gap-6 pt-6">
-            <div>
-                <TinyOrgName name={organisation.name} />
-                <h1 className="pb-6 text-3xl font-semibold">{t('title')}</h1>
-            </div>
+            <PageTitle organisation={organisation} title={t('title')} />
             <div className="flex w-full items-center justify-between gap-16 rounded-lg border p-6">
                 <div className="flex flex-col gap-6">
                     <div className="space-y-2">

diff --git a/src/app/[locale]/(console)/organisation/[organisation]/components/PageTitle.tsx b/src/app/[locale]/(console)/organisation/[organisation]/components/PageTitle.tsx
@@ -0,0 +1,35 @@
+import { Avatar } from '@/components/cards/avatar';
+import { cn } from '@/lib/utils';
+import { Organisation } from '@/schema/resources/organisation';
+import React, { ReactNode } from 'react';
+import { TinyOrgName } from './TinyOrgName';
+
+export function PageTitle({
+    organisation,
+    title,
+    children,
+    className,
+}: {
+    organisation: Organisation;
+    title: string;
+    children?: ReactNode;
+    className?: string;
+}) {
+    return (
+        <div
+            className={cn(
+                'flex items-end justify-between gap-6 pb-6',
+                className
+            )}
+        >
+            <div className="flex items-center gap-6">
+                <Avatar profile={organisation} renderBadge={false} size="big" />
+                <div>
+                    <TinyOrgName name={organisation.name} />
+                    <h1 className="text-3xl font-semibold">{title}</h1>
+                </div>
+            </div>
+            {children}
+        </div>
+    );
+}
diff --git a/...ganisation/[organisation]/TinyOrgName.tsx → ...[organisation]/components/TinyOrgName.tsx b/...ganisation/[organisation]/TinyOrgName.tsx → ...[organisation]/components/TinyOrgName.tsx
diff --git a/src/app/[locale]/(console)/organisation/[organisation]/events/[id]/[subpage]/page.tsx b/src/app/[locale]/(console)/organisation/[organisation]/events/[id]/[subpage]/page.tsx
@@ -15,7 +15,7 @@ import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
 import React from 'react';
 import { z } from 'zod';
-import { TinyOrgName } from '../../../TinyOrgName';
+import { TinyOrgName } from '../../../components/TinyOrgName';
 import { EventOverviewTab } from './overview';
 import { EventSettingsTab } from './settings';
 

diff --git a/src/locales/en/pages.json b/src/locales/en/pages.json
@@ -237,7 +237,12 @@
       },
       "organisations": {
         "title": "Organisations",
-        "not_found": "Organisation not found"
+        "not_found": "Organisation not found",
+        "table": {
+          "caption": {
+            "count": "Count"
+          }
+        }
       }
     }
   },

diff --git a/src/locales/nl/pages.json b/src/locales/nl/pages.json
@@ -237,7 +237,12 @@
       },
       "organisations": {
         "not_found": "Organisatie niet gevonden",
-        "title": "Organisaties"
+        "title": "Organisaties",
+        "table": {
+          "caption": {
+            "count": "Aantal"
+          }
+        }
       }
     }
   },