feat(app router): migrating organizations to app router (#1338)

* feat(accessibility): exporting more detailed metadata

* feat(app router): added client wrappers for toolip and toast

* feat(app router): added 'use client' directive and migrated to next/navigation router

* chore(app router): removed bulletbadge

* feat(app router): moved organizations to app router

* feat(app router): migrated member administration to form actions

* feat(forms): added submit-button and hidden input components, bumped react, added react-dom

* feat(form actions): utilizing useFormState, deleted unused api route

* fix(app router): removed organizations page

* fix(app router): removed unnecessary 'use client' directives

* chore(contrast): added contrast class to root layout instead of using components

* chore(invite user): moved error handling

* feat(remove user): added error handling for remove user button

* chore(app router): added 'use client' directive to submitbutton

* fix(code quality): removed unnecessary promise nesting

* fix(code quality): minor enhancement of return types

* chore(type naming): Props => TProps

* chore(code conventions): moved helper components to bottom of file

* fix(code quality): disable button after form submission

Author: fredrbus

next-tavla/app/(admin)/admin.module.css

@@ -0,0 +1,18 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    padding: 1em;
+    margin: 0 5em;
+}
+
+.pageContainer {
+    margin: 0 auto;
+    max-width: 120rem;
+}
+
+.organization {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8em;
+}

next-tavla/app/(admin)/layout.tsx

@@ -1,12 +1,18 @@
 import { OrganizationIcon, UserIcon } from '@entur/icons'
 import TavlaLogo from 'assets/logos/Tavla-white.svg'
+import { Metadata } from 'next'
 import Image from 'next/image'
 import Link from 'next/link'
 import { ReactNode } from 'react'
+import classes from './admin.module.css'
+
+export const metadata: Metadata = {
+    title: 'Mine organisasjoner | Entur Tavla',
+}
 
 function AdminLayout({ children }: { children: ReactNode }) {
     return (
-        <>
+        <div className={classes.pageContainer}>
             <div className="flexRow justifyBetween alignCenter p-4">
                 <Link href="/">
                     <Image src={TavlaLogo} height={32} alt="Tavla logo" />
@@ -28,7 +34,7 @@ function AdminLayout({ children }: { children: ReactNode }) {
                 </div>
             </div>
             {children}
-        </>
+        </div>
     )
 }
 

next-tavla/app/(admin)/organizations/[id]/page.tsx

@@ -1,16 +1,36 @@
-import classes from 'styles/pages/admin.module.css'
+import classes from '../../admin.module.css'
 import { cookies } from 'next/headers'
 import {
     getOrganization,
+    getOrganizationById,
+    getOrganizationUsers,
+    getUsersWithEmailsByUids,
     initializeAdminApp,
     verifySession,
 } from 'Admin/utils/firebase'
 import { permanentRedirect } from 'next/navigation'
-import { Organization } from 'Admin/scenarios/Organization'
+import { Metadata } from 'next'
+import { Heading1 } from '@entur/typography'
+import { UploadLogo } from 'Admin/scenarios/Organization/components/UploadLogo'
+import { MemberAdministration } from 'Admin/scenarios/Organization/components/MemberAdministration'
 
 initializeAdminApp()
 
-async function EditOrganizationPage({ params }: { params: { id: string } }) {
+type TProps = {
+    params: { id: string }
+}
+
+export async function generateMetadata({ params }: TProps): Promise<Metadata> {
+    const { id } = params
+
+    const organization = await getOrganizationById(id)
+
+    return {
+        title: `${organization.name} | Entur Tavla`,
+    }
+}
+
+async function EditOrganizationPage({ params }: TProps) {
     const { id } = params
 
     const session = cookies().get('session')
@@ -23,9 +43,20 @@ async function EditOrganizationPage({ params }: { params: { id: string } }) {
     if (!organization || !organization?.owners?.includes(user.uid))
         return <div>Du har ikke tilgang til denne organisasjonen</div>
 
+    const userIds = await getOrganizationUsers(id ?? '')
+    const members = await getUsersWithEmailsByUids(userIds)
+
     return (
         <div className={classes.root}>
-            <Organization user={user} organization={organization} />
+            <Heading1>{organization.name}</Heading1>
+            <div className={classes.organization}>
+                <UploadLogo organization={organization} />
+                <MemberAdministration
+                    members={members}
+                    uid={user.uid}
+                    oid={organization.id}
+                />
+            </div>
         </div>
     )
 }

next-tavla/app/(admin)/organizations/page.tsx

@@ -0,0 +1,22 @@
+import classes from '../admin.module.css'
+import { Organizations } from 'Admin/scenarios/Organizations'
+import { getOrganizationsWithUser, verifySession } from 'Admin/utils/firebase'
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+async function OrganizationsPage() {
+    const session = cookies().get('session')
+    const user = await verifySession(session?.value)
+
+    if (!user) redirect('/#login')
+
+    const organizations = await getOrganizationsWithUser(user.uid)
+
+    return (
+        <div className={classes.root}>
+            <Organizations organizations={organizations} userId={user.uid} />
+        </div>
+    )
+}
+
+export default OrganizationsPage

next-tavla/app/layout.tsx

@@ -40,7 +40,9 @@ export const metadata: Metadata = {
 function RootLayout({ children }: { children: ReactNode }) {
     return (
         <html lang="nb">
-            <body>{children}</body>
+            <body>
+                <div className="eds-contrast">{children}</div>
+            </body>
         </html>
     )
 }

next-tavla/package.json

@@ -63,7 +63,8 @@
         "@graphql-codegen/typescript-operations": "3.0.2",
         "@types/lodash": "4.14.191",
         "@types/node": "18.15.5",
-        "@types/react": "18.2.37",
+        "@types/react": "18.2.38",
+        "@types/react-dom": "18.2.17",
         "@typescript-eslint/eslint-plugin": "5.57.1",
         "@typescript-eslint/parser": "5.57.1",
         "dependency-cruiser": "13.0.3",

next-tavla/pages/api/organization/[oid]/members/invite.ts

@@ -1,9 +1,8 @@
 'use client'
-import { ReactNode } from 'react'
-import { Contrast as EnturContrast } from '@entur/layout'
+import { ContrastProps, Contrast as EnturContrast } from '@entur/layout'
 
-function Contrast({ children }: { children: ReactNode }) {
-    return <EnturContrast>{children}</EnturContrast>
+function Contrast(props: ContrastProps<'div'>) {
+    return <EnturContrast {...props}>{props.children}</EnturContrast>
 }
 
 export { Contrast }

next-tavla/pages/organizations/index.tsx

@@ -0,0 +1,9 @@
+'use client'
+import { ReactNode } from 'react'
+import { ToastProvider as EnturToastProvider } from '@entur/alert'
+
+function ToastProvider({ children }: { children: ReactNode }) {
+    return <EnturToastProvider>{children}</EnturToastProvider>
+}
+
+export { ToastProvider }

next-tavla/src/Admin/components/Contrast.tsx

@@ -0,0 +1,8 @@
+'use client'
+import { Tooltip as EnturTooltip, TooltipProps } from '@entur/tooltip'
+
+function Tooltip(props: TooltipProps) {
+    return <EnturTooltip {...props}>{props.children}</EnturTooltip>
+}
+
+export { Tooltip }

next-tavla/src/Admin/components/ToastProvider.tsx

@@ -1,67 +1,36 @@
-import { Button } from '@entur/button'
+'use client'
 import { TextField } from '@entur/form'
 import { AddIcon } from '@entur/icons'
-import { useToggle } from 'hooks/useToggle'
-import { SyntheticEvent } from 'react'
-import { TOrganizationID, TUser } from 'types/settings'
+import { TOrganizationID } from 'types/settings'
 import classes from './styles.module.css'
-import { FeedbackCode, useFormFeedback } from 'hooks/useFormFeedback'
-import { fetchInviteUserToOrganizationByEmail } from 'Admin/utils/fetch'
+import { inviteUserAction } from 'Admin/utils/formActions'
+import { useFormState } from 'react-dom'
+import { HiddenInput } from 'components/Form/HiddenInput'
+import { getFormStateProps } from 'utils/formStatuses'
+import { SubmitButton } from 'components/Form/SubmitButton'
 
-function InviteUser({
-    oid,
-    addMember,
-}: {
-    oid?: TOrganizationID
-    addMember: (member: TUser) => void
-}) {
-    const [isLoading, enableLoading, disableLoading] = useToggle()
-    const { setFeedback, clearFeedback, getTextFieldProps } = useFormFeedback()
-
-    const submitHandler = (event: SyntheticEvent) => {
-        event.preventDefault()
-        clearFeedback()
-
-        const { email } = event.currentTarget as unknown as {
-            email: HTMLInputElement
-        }
-
-        enableLoading()
-
-        fetchInviteUserToOrganizationByEmail(email.value, oid)
-            .then((response) => {
-                disableLoading()
-                addMember({ email: email.value })
-                response.json().then((data: { feedbackCode: FeedbackCode }) => {
-                    setFeedback(data.feedbackCode)
-                })
-            })
-            .catch(() => {
-                disableLoading()
-                setFeedback('error')
-            })
-    }
+function InviteUser({ oid }: { oid?: TOrganizationID }) {
+    const [formState, formAction] = useFormState(inviteUserAction, undefined)
 
     return (
-        <form className={classes.inviteForm} onSubmit={submitHandler}>
+        <form className={classes.inviteForm} action={formAction}>
+            <HiddenInput id="oid" value={oid} />
             <div className="flexColumn g-1 w-100">
                 <TextField
                     name="email"
                     label="E-post"
                     type="email"
-                    {...getTextFieldProps()}
+                    {...getFormStateProps(formState)}
                 />
             </div>
-            <Button
+            <SubmitButton
                 variant="primary"
-                loading={isLoading}
-                onClick={clearFeedback}
                 width="fluid"
                 className={classes.addMemberButton}
             >
                 Legg til medlem
                 <AddIcon />
-            </Button>
+            </SubmitButton>
         </form>
     )
 }