-
-
-
-
-
-
- {props.sortBy === 'versions'
- ? 'Schema Versions'
- : props.sortBy === 'name'
- ? 'Name'
- : 'Requests'}
-
-
-
- Requests
-
- GraphQL requests made in the last {days} days.
-
-
-
- Schema Versions
-
- Schemas published in last {days} days.
-
-
-
- Name
- Sort by project name.
-
-
-
-
- {props.sortOrder === 'asc' ? (
-
+ <>
+
+
+
+
Projects
+ A list of available project in your organization.
+
+
+
+
+
+
+
+
+ {sortBy === 'versions'
+ ? 'Schema Versions'
+ : sortBy === 'name'
+ ? 'Name'
+ : 'Requests'}
+
+
+
+ Requests
+
+ GraphQL requests made in the last {days} days.
+
+
+
+ Schema Versions
+
+ Schemas published in last {days} days.
+
+
+
+ Name
+ Sort by project name.
+
+
+
+
+ {searchSortOrder === 'asc' ? (
+
- {currentOrganization && projectsConnection ? (
- projectsConnection.edges.length === 0 ? (
-
- ) : (
-
- {projects.map(project => (
-
- ))}
-
- )
+
+ {currentOrganization && projectsConnection ? (
+ projectsConnection.edges.length === 0 ? (
+
) : (
- {Array.from({ length: 4 }).map((_, index) => (
+ {projects.map(project => (
))}
- )}
-
-
-
+ )
+ ) : (
+
+ {Array.from({ length: 4 }).map((_, index) => (
+
+ ))}
+
+ )}
+
+
);
}
-export function OrganizationPage(
- props: {
- organizationSlug: string;
- } & RouteSearchProps,
-) {
+export function OrganizationPage() {
return (
<>
-
+
);
}
diff --git a/packages/web/app/src/router.tsx b/packages/web/app/src/router.tsx
index 849bf6ae58c..fea65c7f6d4 100644
--- a/packages/web/app/src/router.tsx
+++ b/packages/web/app/src/router.tsx
@@ -1,10 +1,10 @@
-import { lazy, useCallback, useEffect, useMemo } from 'react';
+import { lazy, useEffect, useMemo } from 'react';
import { parse as jsUrlParse, stringify as jsUrlStringify } from 'jsurl2';
import { HelmetProvider } from 'react-helmet-async';
import { ToastContainer } from 'react-toastify';
import SuperTokens, { SuperTokensWrapper } from 'supertokens-auth-react';
import Session from 'supertokens-auth-react/recipe/session';
-import { Provider as UrqlProvider } from 'urql';
+import { CombinedError, Provider as UrqlProvider, type TypedDocumentNode } from 'urql';
import { z } from 'zod';
import { LoadingAPIIndicator } from '@/components/common/LoadingAPI';
import { Toaster } from '@/components/ui/toaster';
@@ -21,11 +21,14 @@ import {
Outlet,
parseSearchWith,
stringifySearchWith,
- useNavigate,
} from '@tanstack/react-router';
import { ErrorComponent } from './components/error';
import { NotFound } from './components/not-found';
import 'react-toastify/dist/ReactToastify.css';
+import { endOfDay, formatISO, startOfDay, subDays } from 'date-fns';
+import { OrganizationLayout } from '@/components/layouts/organization';
+import { QueryError } from '@/components/ui/query-error';
+import { UTCDate } from '@date-fns/utc';
import { zodValidator } from '@tanstack/zod-adapter';
import { authenticated } from './components/authenticated-container';
import { AuthPage } from './pages/auth';
@@ -41,13 +44,17 @@ import { IndexPage } from './pages/index';
import { LogoutPage } from './pages/logout';
import { ManagePage } from './pages/manage';
import { NativeCompositionDiff } from './pages/native-composition-diff';
-import { OrganizationIndexRouteSearch, OrganizationPage } from './pages/organization';
+import { OrganizationPage, OrganizationPageWithLayoutQuery } from './pages/organization';
import { JoinOrganizationPage } from './pages/organization-join';
-import { OrganizationMembersPage } from './pages/organization-members';
+import {
+ OrganizationMembersPage,
+ OrganizationMembersPageWithLayoutQuery,
+} from './pages/organization-members';
import { NewOrgPage } from './pages/organization-new';
import {
OrganizationSettingsPage,
OrganizationSettingsPageEnum,
+ OrganizationSettingsPageWithLayoutQuery,
} from './pages/organization-settings';
import { OrganizationSubscriptionPage } from './pages/organization-subscription';
import { OrganizationSubscriptionManagePage } from './pages/organization-subscription-manage';
@@ -95,6 +102,20 @@ if (env.sentry) {
const queryClient = new QueryClient();
+async function loadGraphQLData
>(
+ query: TypedDocumentNode,
+ variables: TVariables,
+): Promise {
+ const result = await urqlClient
+ .query(query, variables, {
+ requestPolicy: 'cache-first',
+ })
+ .toPromise();
+
+ if (result.error) throw result.error;
+ return result.data!;
+}
+
const LazyTanStackRouterDevtools = lazy(() =>
import('@tanstack/router-devtools').then(({ TanStackRouterDevtools }) => ({
default: TanStackRouterDevtools,
@@ -343,28 +364,46 @@ const organizationRoute = createRoute({
errorComponent: ErrorComponent,
});
-const organizationIndexRoute = createRoute({
+export const organizationLayoutRoute = createRoute({
getParentRoute: () => organizationRoute,
+ id: '_organizationLayout',
+ component: OrganizationLayout,
+});
+
+export const OrganizationIndexRouteSearch = z.object({
+ search: z.string().optional(),
+ sortBy: z.enum(['requests', 'versions', 'name']).optional(),
+ sortOrder: z.enum(['asc', 'desc']).optional(),
+});
+
+export const organizationIndexRoute = createRoute({
+ getParentRoute: () => organizationLayoutRoute,
path: '/',
validateSearch: OrganizationIndexRouteSearch.parse,
- component: function OrganizationRoute() {
- const { organizationSlug } = organizationRoute.useParams();
- const { search, sortBy, sortOrder } = organizationIndexRoute.useSearch();
- return (
- ['page']) => {
- void navigate({ search: { page: newPage, search: undefined } });
- },
- [navigate],
- );
- return (
-