From c2ec27f65c5fc7aeb640818dd2e0fd7788b8d2ab Mon Sep 17 00:00:00 2001 From: rob_at_airwalk Date: Sun, 16 Jun 2024 20:17:23 +0000 Subject: [PATCH] feat: branch swapping --- .../Layouts/ControlBar.stories.tsx | 20 +++-- src/_components/Layouts/ControlBar.tsx | 43 ++++++---- src/_components/Layouts/MenuWrapper.tsx | 37 +++------ src/_features/Mdx/EditorWrapper.tsx | 80 ++++++------------- .../[branch]/[[...path]]/@edit/page.tsx | 16 +++- .../[branch]/[[...path]]/@view/page.tsx | 7 +- 6 files changed, 96 insertions(+), 107 deletions(-) diff --git a/src/_components/Layouts/ControlBar.stories.tsx b/src/_components/Layouts/ControlBar.stories.tsx index 21a382e..202beb0 100644 --- a/src/_components/Layouts/ControlBar.stories.tsx +++ b/src/_components/Layouts/ControlBar.stories.tsx @@ -14,12 +14,18 @@ export default { title: 'App Bar/ControlBar', component: ControlBar, tags: ['autodocs'], - parameters: { actions: { argTypesRegex: '^on.*|^handle*' } }, + parameters: { + actions: { argTypesRegex: '^on.*|^handle*' }, + nextjs: { + appDirectory: true, + }, + }, // More on argTypes: https://storybook.js.org/docs/api/argtypes argTypes: { result: { control: { type: 'radio' }, options: ['success', 'error'] }, // backgroundColor: { control: 'color' }, }, + args: { handleRefresh: fn(), handlePrint: fn(), @@ -155,10 +161,10 @@ export const DefaultBranch = { const Template: StoryFn = (args) => { // const [collection, setCollection] = useState(dummyCollection); const [editMode, setEditMode] = useState(args.editMode || false); - const [context, setContext] = useState({ + const context = { ...args.context, branch: 'main', - }); + }; // function fn()() {} @@ -167,9 +173,9 @@ const Template: StoryFn = (args) => { fn(); }; - function onContextUpdate(newCollection: ExtendedContentItem) { - setContext(newCollection); - } + // function onContextUpdate(newCollection: ExtendedContentItem) { + // setContext(newCollection); + // } function dummyDelay() { fn(); @@ -194,7 +200,7 @@ const Template: StoryFn = (args) => { handlePresentation={() => fn()} handlePrint={() => fn()} handleNewBranch={() => fn()} - onContextUpdate={() => onContextUpdate} + // onContextUpdate={() => onContextUpdate} collection={args.collection} context={context} branches={args.branches} diff --git a/src/_components/Layouts/ControlBar.tsx b/src/_components/Layouts/ControlBar.tsx index b2b4206..6c5a11f 100644 --- a/src/_components/Layouts/ControlBar.tsx +++ b/src/_components/Layouts/ControlBar.tsx @@ -16,8 +16,13 @@ import { } from '@mui/material'; import MuiAlert from '@mui/material/Alert'; import CircularProgress from '@mui/material/CircularProgress'; +import { usePathname, useRouter } from 'next/navigation'; import React, { useEffect, useState } from 'react'; +import { getLogger } from '@/lib/Logger'; + +const logger = getLogger().child({ namespace: 'ControlBar' }); +logger.level = 'info'; export interface ControlBarProps { open: boolean; // height: number; @@ -29,7 +34,7 @@ export interface ControlBarProps { context: any; branches: any[]; top?: number; - onContextUpdate: (context: any) => void; + // onContextUpdate: (context: any) => void; editMode: boolean; fetchBranches?: (collection: any) => void; handleNewBranch?: () => void; @@ -37,14 +42,14 @@ export interface ControlBarProps { } interface BranchSelectorProps { - onBranchChange: (event: any, value: any) => void; + // onBranchChange: (event: any, value: any) => void; branches: any[]; branch: any; collection: any; } const BranchSelector: React.FC = ({ - onBranchChange, + // onBranchChange, branches, branch, collection, @@ -56,6 +61,16 @@ const BranchSelector: React.FC = ({ error = true; } + const router = useRouter(); + const pathname = usePathname(); + const onBranchChange = (value: any) => { + logger.info('handleContextUpdate', value); + const pathnameArray = pathname.split('/'); + pathnameArray[3] = value; + const newPathname = pathnameArray.join('/'); + router.push(newPathname); + }; + return ( = ({ context, branches, top = '64px', - onContextUpdate, + // onContextUpdate, editMode, fetchBranches = () => {}, handleNewBranch = () => {}, @@ -109,9 +124,9 @@ export const ControlBar: React.FC = ({ const onBranchToggle = async (state = 'ignore') => { if (changeBranch) { - const newCollection = { ...collection }; + // const newCollection = { ...collection }; setBranch(collection.branch); - onContextUpdate(newCollection); + // onContextUpdate(newCollection); if (typeof window !== 'undefined') { const url = new URL(window.location.href); if (url.searchParams.has('branch')) { @@ -130,13 +145,13 @@ export const ControlBar: React.FC = ({ } }; - const onBranchChange = async (value: any) => { - if (value) { - const newContext = { ...collection, branch: value }; - setBranch(value); - onContextUpdate(newContext); - } - }; + // const onBranchChange = async (value: any) => { + // if (value) { + // const newContext = { ...collection, branch: value }; + // setBranch(value); + // onContextUpdate(newContext); + // } + // }; const handlePresentationClick = () => { if (typeof handlePresentation === 'function') { @@ -220,7 +235,7 @@ export const ControlBar: React.FC = ({ )} Loading...

}> - {isEditing && ( -
- -
- )} - {!isEditing && ( -
- {/* */} - - {children && children} - - {/* */} -
- )} +
+ {/* */} + + {children && children} + + {/* */} +
); diff --git a/src/_features/Mdx/EditorWrapper.tsx b/src/_features/Mdx/EditorWrapper.tsx index f1bbe96..9c3fcba 100644 --- a/src/_features/Mdx/EditorWrapper.tsx +++ b/src/_features/Mdx/EditorWrapper.tsx @@ -11,13 +11,19 @@ import { getLogger } from '@/lib/Logger'; import type { ContentItem } from '@/lib/Types'; const logger = getLogger().child({ namespace: 'EditorWrapper' }); -logger.level = 'warn'; +logger.level = 'info'; interface EditorWrapperProps { + defaultContext: ContentItem | undefined; context: ContentItem; + branches: { name: string; commit: { sha: string }; protected: boolean }[]; } -export default function EditorWrapper({ context }: EditorWrapperProps) { +export default function EditorWrapper({ + defaultContext, + context, + branches, +}: EditorWrapperProps) { const editorRef = useRef(null); const searchParams = `owner=${context.owner}&repo=${context.repo}&path=${context.file}&branch=${context.branch}`; const [mdx, setMdx] = useState(''); @@ -31,63 +37,23 @@ export default function EditorWrapper({ context }: EditorWrapperProps) { fetchData(); }, [context, searchParams]); + + // const router = useRouter(); + // const pathname = usePathname(); + // const handleContextUpdate = (newContext: any) => { + // logger.info('handleContextUpdate', newContext); + // const pathnameArray = pathname.split('/'); + // pathnameArray[2] = newContext.branch; + // const newPathname = pathnameArray.join('/'); + // router.push(newPathname); + // }; + return ( <> {}} handleAdd={() => {}} handleEdit={() => {}} @@ -96,7 +62,7 @@ export default function EditorWrapper({ context }: EditorWrapperProps) { handlePresentation={() => {}} handlePrint={() => {}} // handleRefresh={() => {}} - onContextUpdate={() => {}} + // onContextUpdate={handleContextUpdate} open editMode top={65} diff --git a/src/app/docs/[mode]/[branch]/[[...path]]/@edit/page.tsx b/src/app/docs/[mode]/[branch]/[[...path]]/@edit/page.tsx index fc2fd9f..e93a9ae 100644 --- a/src/app/docs/[mode]/[branch]/[[...path]]/@edit/page.tsx +++ b/src/app/docs/[mode]/[branch]/[[...path]]/@edit/page.tsx @@ -7,6 +7,7 @@ import { notFound } from 'next/navigation'; import { getLogger } from '@/lib/Logger'; import type { ContentItem } from '@/lib/Types'; import EditorWrapper from '@/features/Mdx/EditorWrapper'; +import { getBranches } from '@/lib/Github'; const logger = getLogger().child({ namespace: 'docs/page/@edit' }); logger.level = 'info'; @@ -18,7 +19,7 @@ export const metadata: Metadata = { export default async function Page({ params, }: { - params: { path?: string[] }; + params: { mode: 'view' | 'edit' | 'print'; branch: string; path: string[] }; }) { const topBarHeight = 65; if ( @@ -39,11 +40,16 @@ export default async function Page({ } const contentKey = params.path[0] as keyof typeof siteConfig.content; + const branch = () => + params.branch === 'default' + ? siteConfig?.content?.[contentKey]?.branch + : params.branch; const contentConfig = { ...siteConfig?.content?.[contentKey], file: file, + branch: branch(), } as ContentItem; - + const branches = await getBranches(contentConfig.owner, contentConfig.repo); return (
- +
diff --git a/src/app/docs/[mode]/[branch]/[[...path]]/@view/page.tsx b/src/app/docs/[mode]/[branch]/[[...path]]/@view/page.tsx index c90efcd..a65ef53 100644 --- a/src/app/docs/[mode]/[branch]/[[...path]]/@view/page.tsx +++ b/src/app/docs/[mode]/[branch]/[[...path]]/@view/page.tsx @@ -63,7 +63,7 @@ async function checkFrontmatter(content: string, context: ContentItem) { export default async function Page({ params, }: { - params: { path?: string[] }; + params: { mode: 'view' | 'edit' | 'print'; branch: string; path: string[] }; }) { if ( params.path && @@ -89,9 +89,14 @@ export default async function Page({ let pageContentText; let loading = false; const contentKey = params.path[0] as keyof typeof siteConfig.content; + const branch = () => + params.branch === 'default' + ? siteConfig?.content?.[contentKey]?.branch + : params.branch; const contentConfig = { ...siteConfig?.content?.[contentKey], file: file, + branch: branch(), } as ContentItem; const menuConfig = (contentConfig: ContentItem) => {