From f116c6a606052f6ff3893328ab9e5d35f513bd79 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Wed, 15 Jan 2025 11:51:59 -0700 Subject: [PATCH] restructure folders for layout --- web/src/app/app/_components/AppContent.tsx | 4 ++-- .../[collectionId]/metrics/[threadId]/page.tsx | 6 +++--- .../[dashboardId]/metrics/[threadId]/page.tsx | 6 +++--- web/src/app/app/layout.tsx | 6 ++---- web/src/app/app/metrics/[threadId]/page.tsx | 6 +++--- web/src/app/app/terms/[termId]/page.tsx | 6 +++--- web/src/components/grid/BusterResizeColumns.tsx | 2 +- .../layout/{ => AppSplitter}/AppSplitter.tsx | 14 ++++---------- .../{ => AppSplitter}/SplitPane/SashContent.tsx | 0 .../{ => AppSplitter}/SplitPane/SplitPane.tsx | 0 .../layout/{ => AppSplitter}/SplitPane/base.ts | 0 .../layout/{ => AppSplitter}/SplitPane/index.ts | 0 .../layout/{ => AppSplitter}/SplitPane/pane.tsx | 0 .../layout/{ => AppSplitter}/SplitPane/sash.tsx | 0 .../SplitPane/themes/default.scss | 0 .../layout/{ => AppSplitter}/SplitPane/types.ts | 0 .../components/layout/{ => AppSplitter}/config.ts | 0 .../components/layout/{ => AppSplitter}/helper.ts | 0 web/src/components/layout/AppSplitter/index.ts | 2 ++ .../layout/{ => AppSplitter}/splitContentHelper.ts | 10 +++++++--- web/src/components/layout/PreventNavigation.tsx | 3 +-- web/src/styles/styles.scss | 2 +- 22 files changed, 32 insertions(+), 35 deletions(-) rename web/src/components/layout/{ => AppSplitter}/AppSplitter.tsx (96%) rename web/src/components/layout/{ => AppSplitter}/SplitPane/SashContent.tsx (100%) rename web/src/components/layout/{ => AppSplitter}/SplitPane/SplitPane.tsx (100%) rename web/src/components/layout/{ => AppSplitter}/SplitPane/base.ts (100%) rename web/src/components/layout/{ => AppSplitter}/SplitPane/index.ts (100%) rename web/src/components/layout/{ => AppSplitter}/SplitPane/pane.tsx (100%) rename web/src/components/layout/{ => AppSplitter}/SplitPane/sash.tsx (100%) rename web/src/components/layout/{ => AppSplitter}/SplitPane/themes/default.scss (100%) rename web/src/components/layout/{ => AppSplitter}/SplitPane/types.ts (100%) rename web/src/components/layout/{ => AppSplitter}/config.ts (100%) rename web/src/components/layout/{ => AppSplitter}/helper.ts (100%) create mode 100644 web/src/components/layout/AppSplitter/index.ts rename web/src/components/layout/{ => AppSplitter}/splitContentHelper.ts (63%) diff --git a/web/src/app/app/_components/AppContent.tsx b/web/src/app/app/_components/AppContent.tsx index 5d5fe16ac..c7af15b35 100644 --- a/web/src/app/app/_components/AppContent.tsx +++ b/web/src/app/app/_components/AppContent.tsx @@ -1,13 +1,13 @@ 'use client'; -import React, { PropsWithChildren, useEffect } from 'react'; +import React, { PropsWithChildren } from 'react'; import { Layout } from 'antd'; import { createStyles } from 'antd-style'; import { appContentHeaderHeight } from './AppContentHeader'; const { Content } = Layout; -const useStyles = createStyles(({ token, css }) => { +const useStyles = createStyles(({ css }) => { return { scrollableContainer: css` max-height: calc(100% - ${appContentHeaderHeight}px); diff --git a/web/src/app/app/collections/[collectionId]/metrics/[threadId]/page.tsx b/web/src/app/app/collections/[collectionId]/metrics/[threadId]/page.tsx index 159e7d3c4..174f81f29 100644 --- a/web/src/app/app/collections/[collectionId]/metrics/[threadId]/page.tsx +++ b/web/src/app/app/collections/[collectionId]/metrics/[threadId]/page.tsx @@ -1,9 +1,9 @@ import { ThreadContentController } from '@/app/app/_controllers/ThreadController'; import { AppAssetCheckLayout } from '@/app/app/_layouts'; -import { getAppSplitterLayout } from '@/components/layout/splitContentHelper'; +import { getAppSplitterLayout } from '@/components/layout'; import React from 'react'; -export default function CollectionThreadPage({ +export default async function CollectionThreadPage({ params: { threadId, collectionId } }: { params: { @@ -11,7 +11,7 @@ export default function CollectionThreadPage({ collectionId: string; }; }) { - const threadLayout = getAppSplitterLayout('thread', ['auto', '360px']); + const threadLayout = await getAppSplitterLayout('thread', ['auto', '360px']); return ( diff --git a/web/src/app/app/dashboards/[dashboardId]/metrics/[threadId]/page.tsx b/web/src/app/app/dashboards/[dashboardId]/metrics/[threadId]/page.tsx index efc3515d1..f3cb1ace4 100644 --- a/web/src/app/app/dashboards/[dashboardId]/metrics/[threadId]/page.tsx +++ b/web/src/app/app/dashboards/[dashboardId]/metrics/[threadId]/page.tsx @@ -1,16 +1,16 @@ import { ThreadContentController } from '@/app/app/_controllers/ThreadController'; import { AppAssetCheckLayout } from '@/app/app/_layouts'; -import { getAppSplitterLayout } from '@/components/layout/splitContentHelper'; +import { getAppSplitterLayout } from '@/components/layout'; import React from 'react'; -export default function DashboardThreadPage({ +export default async function DashboardThreadPage({ params: { threadId } }: { params: { threadId: string; }; }) { - const threadLayout = getAppSplitterLayout('thread', ['auto', '360px']); + const threadLayout = await getAppSplitterLayout('thread', ['auto', '360px']); return ( diff --git a/web/src/app/app/layout.tsx b/web/src/app/app/layout.tsx index 50275635c..782fc0969 100644 --- a/web/src/app/app/layout.tsx +++ b/web/src/app/app/layout.tsx @@ -1,10 +1,8 @@ 'use server'; -import { AppProviders } from '@/context/AppProviders'; import { useSupabaseServerContext } from '@/context/Supabase/useSupabaseContext'; import React from 'react'; -import { AppLayout } from './_controllers/AppLayout'; -import { getAppSplitterLayout } from '@/components/layout/splitContentHelper'; +import { getAppSplitterLayout } from '@/components/layout/AppSplitter'; import { getUserInfo } from '@/api/busterv2/users/requests'; import { useBusterSupabaseAuthMethods } from '@/hooks/useBusterSupabaseAuthMethods'; import { createBusterRoute } from '@/routes'; @@ -22,7 +20,7 @@ export default async function Layout({ const headersList = headers(); const supabaseContext = await useSupabaseServerContext(); const userInfo = await getUserInfo({ jwtToken: supabaseContext.accessToken }); - const defaultLayout = getAppSplitterLayout('app-layout', ['230px', 'auto']); + const defaultLayout = await getAppSplitterLayout('app-layout', ['230px', 'auto']); const { signOut } = useBusterSupabaseAuthMethods(); const pathname = headersList.get('x-next-pathname') as string; const cookiePathname = cookies().get('x-next-pathname')?.value; diff --git a/web/src/app/app/metrics/[threadId]/page.tsx b/web/src/app/app/metrics/[threadId]/page.tsx index dc7b77a95..5e8b20332 100644 --- a/web/src/app/app/metrics/[threadId]/page.tsx +++ b/web/src/app/app/metrics/[threadId]/page.tsx @@ -2,11 +2,11 @@ import { ThreadContentController, ThreadControllerHeader } from '../../_controllers/ThreadController'; -import { getAppSplitterLayout } from '@/components/layout/splitContentHelper'; +import { getAppSplitterLayout } from '@/components/layout'; import { AppAssetCheckLayout } from '../../_layouts/AppAssetCheckLayout'; import { AppContentHeader } from '../../_components/AppContentHeader'; -export default function ThreadsPage({ +export default async function ThreadsPage({ params: { threadId }, searchParams }: { @@ -15,7 +15,7 @@ export default function ThreadsPage({ }; searchParams: { embed?: string }; }) { - const threadLayout = getAppSplitterLayout('thread', ['auto', '360px']); + const threadLayout = await getAppSplitterLayout('thread', ['auto', '360px']); const embedView = searchParams.embed === 'true'; return ( diff --git a/web/src/app/app/terms/[termId]/page.tsx b/web/src/app/app/terms/[termId]/page.tsx index 15ad6e6fe..d81923c3e 100644 --- a/web/src/app/app/terms/[termId]/page.tsx +++ b/web/src/app/app/terms/[termId]/page.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { getAppSplitterLayout } from '@/components/layout/splitContentHelper'; +import { getAppSplitterLayout } from '@/components/layout'; import { TermIndividualContainer } from './TermIndividualContainer'; -export default function TermIdPage({ params: { termId } }: { params: { termId: string } }) { - const termPageIdLayout = getAppSplitterLayout('term-page', ['auto', '300px']); +export default async function TermIdPage({ params: { termId } }: { params: { termId: string } }) { + const termPageIdLayout = await getAppSplitterLayout('term-page', ['auto', '300px']); return ; } diff --git a/web/src/components/grid/BusterResizeColumns.tsx b/web/src/components/grid/BusterResizeColumns.tsx index 557ed075f..a8054189a 100644 --- a/web/src/components/grid/BusterResizeColumns.tsx +++ b/web/src/components/grid/BusterResizeColumns.tsx @@ -8,7 +8,7 @@ import { useMemoizedFn, useMouse } from 'ahooks'; import { BusterDragColumnMarkers } from './_BusterDragColumnMarkers'; import { calculateColumnSpan, columnSpansToPercent } from './config'; import { createStyles } from 'antd-style'; -import SplitPane, { Pane } from '../layout/SplitPane'; +import SplitPane, { Pane } from '../layout/AppSplitter/SplitPane'; import { useDropzoneStyles } from './BusterResizeRows'; type ContainerProps = { diff --git a/web/src/components/layout/AppSplitter.tsx b/web/src/components/layout/AppSplitter/AppSplitter.tsx similarity index 96% rename from web/src/components/layout/AppSplitter.tsx rename to web/src/components/layout/AppSplitter/AppSplitter.tsx index 18be7b06b..87a09c79c 100644 --- a/web/src/components/layout/AppSplitter.tsx +++ b/web/src/components/layout/AppSplitter/AppSplitter.tsx @@ -1,14 +1,8 @@ -import { useAntToken } from '@/styles/useAntToken'; +'use client'; + import { useMemoizedFn } from 'ahooks'; -import React, { - useCallback, - useEffect, - useMemo, - useState, - forwardRef, - useImperativeHandle -} from 'react'; -import SplitPane, { Pane } from '@/components/layout/SplitPane'; +import React, { useEffect, useMemo, useState, forwardRef, useImperativeHandle } from 'react'; +import SplitPane, { Pane } from './SplitPane'; import { createAutoSaveId } from './helper'; import Cookies from 'js-cookie'; import { createStyles } from 'antd-style'; diff --git a/web/src/components/layout/SplitPane/SashContent.tsx b/web/src/components/layout/AppSplitter/SplitPane/SashContent.tsx similarity index 100% rename from web/src/components/layout/SplitPane/SashContent.tsx rename to web/src/components/layout/AppSplitter/SplitPane/SashContent.tsx diff --git a/web/src/components/layout/SplitPane/SplitPane.tsx b/web/src/components/layout/AppSplitter/SplitPane/SplitPane.tsx similarity index 100% rename from web/src/components/layout/SplitPane/SplitPane.tsx rename to web/src/components/layout/AppSplitter/SplitPane/SplitPane.tsx diff --git a/web/src/components/layout/SplitPane/base.ts b/web/src/components/layout/AppSplitter/SplitPane/base.ts similarity index 100% rename from web/src/components/layout/SplitPane/base.ts rename to web/src/components/layout/AppSplitter/SplitPane/base.ts diff --git a/web/src/components/layout/SplitPane/index.ts b/web/src/components/layout/AppSplitter/SplitPane/index.ts similarity index 100% rename from web/src/components/layout/SplitPane/index.ts rename to web/src/components/layout/AppSplitter/SplitPane/index.ts diff --git a/web/src/components/layout/SplitPane/pane.tsx b/web/src/components/layout/AppSplitter/SplitPane/pane.tsx similarity index 100% rename from web/src/components/layout/SplitPane/pane.tsx rename to web/src/components/layout/AppSplitter/SplitPane/pane.tsx diff --git a/web/src/components/layout/SplitPane/sash.tsx b/web/src/components/layout/AppSplitter/SplitPane/sash.tsx similarity index 100% rename from web/src/components/layout/SplitPane/sash.tsx rename to web/src/components/layout/AppSplitter/SplitPane/sash.tsx diff --git a/web/src/components/layout/SplitPane/themes/default.scss b/web/src/components/layout/AppSplitter/SplitPane/themes/default.scss similarity index 100% rename from web/src/components/layout/SplitPane/themes/default.scss rename to web/src/components/layout/AppSplitter/SplitPane/themes/default.scss diff --git a/web/src/components/layout/SplitPane/types.ts b/web/src/components/layout/AppSplitter/SplitPane/types.ts similarity index 100% rename from web/src/components/layout/SplitPane/types.ts rename to web/src/components/layout/AppSplitter/SplitPane/types.ts diff --git a/web/src/components/layout/config.ts b/web/src/components/layout/AppSplitter/config.ts similarity index 100% rename from web/src/components/layout/config.ts rename to web/src/components/layout/AppSplitter/config.ts diff --git a/web/src/components/layout/helper.ts b/web/src/components/layout/AppSplitter/helper.ts similarity index 100% rename from web/src/components/layout/helper.ts rename to web/src/components/layout/AppSplitter/helper.ts diff --git a/web/src/components/layout/AppSplitter/index.ts b/web/src/components/layout/AppSplitter/index.ts new file mode 100644 index 000000000..515c3f32f --- /dev/null +++ b/web/src/components/layout/AppSplitter/index.ts @@ -0,0 +1,2 @@ +export * from './AppSplitter'; +export * from './splitContentHelper'; diff --git a/web/src/components/layout/splitContentHelper.ts b/web/src/components/layout/AppSplitter/splitContentHelper.ts similarity index 63% rename from web/src/components/layout/splitContentHelper.ts rename to web/src/components/layout/AppSplitter/splitContentHelper.ts index c1bda2351..4695aa8ce 100644 --- a/web/src/components/layout/splitContentHelper.ts +++ b/web/src/components/layout/AppSplitter/splitContentHelper.ts @@ -1,10 +1,14 @@ +'use server'; + import { cookies } from 'next/headers'; import { createAutoSaveId } from './helper'; -export function getAppSplitterLayout( +const DEFAULT_LAYOUT = ['300px', 'auto']; + +export async function getAppSplitterLayout( id: string = '', - defaultLayout: string[] = ['300px', 'auto'] -): [string, string] { + defaultLayout: string[] = DEFAULT_LAYOUT +): Promise<[string, string]> { const key = createAutoSaveId(id); const layout = cookies().get(key); if (layout) { diff --git a/web/src/components/layout/PreventNavigation.tsx b/web/src/components/layout/PreventNavigation.tsx index 46b8be2d3..af2d3a262 100644 --- a/web/src/components/layout/PreventNavigation.tsx +++ b/web/src/components/layout/PreventNavigation.tsx @@ -1,11 +1,10 @@ 'use client'; import { useMemoizedFn, useMount } from 'ahooks'; -import { Modal } from 'antd'; import { useRouter } from 'next/navigation'; import { useState, useRef, useEffect, useMemo } from 'react'; import React from 'react'; -import { AppModal } from '@/components'; +import { AppModal } from '../modal/AppModal'; type PreventNavigationProps = { isDirty: boolean; diff --git a/web/src/styles/styles.scss b/web/src/styles/styles.scss index 582d6141c..9c73e5a90 100644 --- a/web/src/styles/styles.scss +++ b/web/src/styles/styles.scss @@ -7,7 +7,7 @@ @import './transitions.scss'; @import './animations.scss'; @import './monaco.scss'; -@import '../components/layout/SplitPane/themes/default.scss'; +@import '../components/layout/AppSplitter/SplitPane/themes/default.scss'; @import 'react-data-grid/lib/styles.css'; h1,