feat: Links Page

app/Root/config/routes.ts

@@ -191,6 +191,25 @@ const galleries: RouteConfig = {
     visibility: 'is-authenticated',
 };
 
+const links: RouteConfig = {
+    index: true,
+    path: '/links',
+    load: () => import('#views/Links'),
+    visibility: 'is-authenticated',
+};
+
+const createLink: RouteConfig = {
+    path: '/links/new',
+    load: () => import('#views/Links/LinkForm'),
+    visibility: 'is-authenticated',
+};
+
+const editLink: RouteConfig = {
+    path: '/links/:id/edit',
+    load: () => import('#views/Links/LinkForm'),
+    visibility: 'is-authenticated',
+};
+
 const routes = {
     home,
     login,
@@ -221,6 +240,9 @@ const routes = {
     onlineInteractive,
     galleries,
     editTeamMember,
+    links,
+    createLink,
+    editLink,
 } satisfies Record<string, RouteConfig>;
 
 export type RouteKeys = keyof typeof routes;

app/Root/index.tsx

@@ -20,8 +20,12 @@ import {
     appTitle,
     environment,
 } from '#config';
+import GlobalEnumsContext, { type GlobalEnumsContextInterface } from '#contexts/GlobalEnumsContext';
 import UserContext, { type UserContextInterface } from '#contexts/UserContext';
-import type { MeQuery } from '#generated/types/graphql';
+import {
+    type MeQuery,
+    useGlobalEnumsQuery,
+} from '#generated/types/graphql';
 import useAlertContextProviderValue from '#hooks/useAlertContextProviderValue';
 
 const COOKIE_NAME = `ERCS-${environment}-CSRFTOKEN`;
@@ -55,23 +59,34 @@ function Root() {
 
     const alertContextValue = useAlertContextProviderValue();
 
+    const [{ data: globalEnumsData }] = useGlobalEnumsQuery();
+
+    const globalEnumsContext: GlobalEnumsContextInterface = useMemo(() => ({
+        linkType: globalEnumsData?.enums.LinkType,
+        userRole: globalEnumsData?.enums.UserRole,
+        teamMemberSex: globalEnumsData?.enums.TeamMemberSex,
+        dashboardPage: globalEnumsData?.enums.DashboardPage,
+    }), [globalEnumsData]);
+
     return (
         <UrqlProvider value={gqlClient}>
             <UserContext.Provider value={userContext}>
-                <AlertContext.Provider value={alertContextValue}>
-                    <AlertContainer />
-                    <Suspense
-                        fallback={(
-                            <PreloadMessage>
-                                {appTitle}
-                                {' '}
-                                loading...
-                            </PreloadMessage>
-                        )}
-                    >
-                        <Outlet />
-                    </Suspense>
-                </AlertContext.Provider>
+                <GlobalEnumsContext.Provider value={globalEnumsContext}>
+                    <AlertContext.Provider value={alertContextValue}>
+                        <AlertContainer />
+                        <Suspense
+                            fallback={(
+                                <PreloadMessage>
+                                    {appTitle}
+                                    {' '}
+                                    loading...
+                                </PreloadMessage>
+                            )}
+                        >
+                            <Outlet />
+                        </Suspense>
+                    </AlertContext.Provider>
+                </GlobalEnumsContext.Provider>
             </UserContext.Provider>
         </UrqlProvider>
     );

app/Root/query.ts

@@ -0,0 +1,25 @@
+import { gql } from 'urql';
+
+// eslint-disable-next-line import/prefer-default-export
+export const GLOBAL_ENUMS = gql`
+    query GlobalEnums {
+        enums {
+            LinkType {
+                key
+                label
+            }
+            UserRole {
+                key
+                label
+            }
+            TeamMemberSex {
+                key
+                label
+            }
+            DashboardPage {
+                key
+                label
+            }
+        }
+    }
+`;

app/contexts/GlobalEnumsContext.ts

@@ -0,0 +1,24 @@
+import { createContext } from 'react';
+
+import type {
+    AppEnumCollectionDashboardPage,
+    AppEnumCollectionLinkType,
+    AppEnumCollectionTeamMemberSex,
+    AppEnumCollectionUserRole,
+} from '#generated/types/graphql';
+
+export interface GlobalEnumsContextInterface {
+    linkType: AppEnumCollectionLinkType[] | undefined;
+    userRole: AppEnumCollectionUserRole[] | undefined;
+    teamMemberSex: AppEnumCollectionTeamMemberSex[] | undefined;
+    dashboardPage: AppEnumCollectionDashboardPage[] | undefined;
+}
+
+const GlobalEnumsContext = createContext<GlobalEnumsContextInterface>({
+    linkType: undefined,
+    userRole: undefined,
+    teamMemberSex: undefined,
+    dashboardPage: undefined,
+});
+
+export default GlobalEnumsContext;

app/hooks/useGlobalEnums.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import GlobalEnumsContext from '#contexts/GlobalEnumsContext';
+
+export default function useGlobalEnums() {
+    return useContext(GlobalEnumsContext);
+}