From 5812c23a1316180790e3b29144eb09afebde53c0 Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Tue, 25 Jun 2024 17:17:21 +0800 Subject: [PATCH] Chore/modify editor drawer context (#219) * Fix: modify stored data in context * chore: update state management for editor pages * chore: remove commented code and add todos --- .../PageEditor/ComponentSelector.tsx | 64 ++++++++++--------- .../src/contexts/EditorDrawerContext.tsx | 29 +++++++-- .../components/EditPageDrawer.tsx | 32 ++-------- .../components/RootStateDrawer.tsx | 18 ++---- .../components/TipTapComponent.tsx | 27 ++++---- .../studio/src/pages/dashboard/edit/index.tsx | 62 +++++++++--------- .../templates/layouts/PageEditingLayout.tsx | 29 +++++---- apps/studio/src/types/editorDrawer.ts | 1 - 8 files changed, 133 insertions(+), 129 deletions(-) diff --git a/apps/studio/src/components/PageEditor/ComponentSelector.tsx b/apps/studio/src/components/PageEditor/ComponentSelector.tsx index 776ed198f..39468358b 100644 --- a/apps/studio/src/components/PageEditor/ComponentSelector.tsx +++ b/apps/studio/src/components/PageEditor/ComponentSelector.tsx @@ -9,7 +9,7 @@ import { Wrap, } from '@chakra-ui/react' import { Button, IconButton } from '@opengovsg/design-system-react' -import { IconType } from 'react-icons' +import { type IconType } from 'react-icons' import { BiCard, BiColumns, @@ -26,29 +26,30 @@ import { BiText, BiX, } from 'react-icons/bi' -import { SectionType } from './types' +import { type SectionType } from './types' +import { useEditorDrawerContext } from '~/contexts/EditorDrawerContext' -const Section = ({ children }: React.PropsWithChildren) => { +function Section({ children }: React.PropsWithChildren) { return ( - + {children} ) } -const SectionTitle = ({ title }: { title: string }) => { +function SectionTitle({ title }: { title: string }) { return ( - + {title} ) } -const BlockList = ({ children }: React.PropsWithChildren) => { +function BlockList({ children }: React.PropsWithChildren) { return {children} } -const BlockItem = ({ +function BlockItem({ icon: Icon, label, onProceed, @@ -60,7 +61,7 @@ const BlockItem = ({ onProceed: (sectionType: SectionType) => void sectionType: SectionType description: string -}) => { +}) { return ( @@ -74,16 +75,16 @@ const BlockItem = ({ > - {label} + {label} - - + + - {label} + {label} {description} @@ -92,29 +93,30 @@ const BlockItem = ({ ) } -interface ComponentSelectorProps { - onClose: () => void - onProceed: (sectionType: SectionType) => void -} - -const ComponentSelector = ({ onClose, onProceed }: ComponentSelectorProps) => { +function ComponentSelector() { + const { setDrawerState, setPageState, setEditorState } = + useEditorDrawerContext() + const onProceed = (sectionType: SectionType) => { + // TODO: add new section to page/editor state + setDrawerState({ state: 'root' }) + } return ( - - + + Add a new block - Click a block to add to the page + Click a block to add to the page { color="interaction.sub.default" aria-label="Close add component" icon={} - onClick={onClose} + onClick={() => { + setDrawerState({ state: 'root' }) + }} /> - +
@@ -136,7 +140,7 @@ const ComponentSelector = ({ onClose, onProceed }: ComponentSelectorProps) => { onProceed={onProceed} sectionType="paragraph" description="Add text to your page - lists, headings, paragraph, and links." - > + /> void + pageState: Block[] + setPageState: (state: Block[]) => void + editorState: Block[] + setEditorState: (state: Block[]) => void } const EditorDrawerContext = createContext(null) export function EditorDrawerProvider({ children }: PropsWithChildren) { - const [drawerState, setDrawerState] = useState(null) + const [drawerState, setDrawerState] = useState({ + state: 'root', + }) + // Current saved state of page + const [pageState, setPageState] = useState([]) + // Current edit view of page + const [editorState, setEditorState] = useState([]) const value = useMemo( () => ({ drawerState, setDrawerState, + pageState, + setPageState, + editorState, + setEditorState, }), - [drawerState, setDrawerState], + [ + drawerState, + setDrawerState, + pageState, + setPageState, + editorState, + setEditorState, + ], ) return ( diff --git a/apps/studio/src/features/editing-experience/components/EditPageDrawer.tsx b/apps/studio/src/features/editing-experience/components/EditPageDrawer.tsx index 45cc82af3..c123c43aa 100644 --- a/apps/studio/src/features/editing-experience/components/EditPageDrawer.tsx +++ b/apps/studio/src/features/editing-experience/components/EditPageDrawer.tsx @@ -17,40 +17,18 @@ import TipTapComponent from './TipTapComponent' type EditPageDrawerProps = { isOpen: boolean - state: DrawerState } -export function EditPageDrawer({ isOpen: open, state }: EditPageDrawerProps) { - const { drawerState: currState, setDrawerState: setCurrState } = - useEditorDrawerContext() +export function EditPageDrawer({ isOpen: open }: EditPageDrawerProps) { + const { drawerState: currState } = useEditorDrawerContext() - useEffect(() => { - setCurrState(state) - }, []) - - if (!currState) return <> - console.log(currState.state) switch (currState.state) { case 'root': - return + return case 'addBlock': - return ( - setCurrState(state)} - onProceed={(componentType) => console.log(componentType)} - /> - ) + return case 'nativeEditor': - return ( - console.log(path, data)} - onProceed={(path: string, data: any) => console.log(path, data)} - onClose={() => setCurrState(state)} - type="paragraph" - /> - ) + return default: return

Edit Page Drawer

} diff --git a/apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx b/apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx index 766a6e75a..cb315fef8 100644 --- a/apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx +++ b/apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx @@ -15,27 +15,23 @@ import { } from '@hello-pangea/dnd' import { BsPlus } from 'react-icons/bs' import { MdOutlineDragIndicator } from 'react-icons/md' -import { useState } from 'react' -import { type Block } from '~/types/editorDrawer' import { useEditorDrawerContext } from '~/contexts/EditorDrawerContext' -type RootStateDrawerProps = { - blocks: Block[] -} -export default function RootStateDrawer({ blocks }: RootStateDrawerProps) { - const { setDrawerState } = useEditorDrawerContext() - const [currState, setCurrState] = useState<{ blocks: Block[] }>({ blocks }) +export default function RootStateDrawer() { + const { setDrawerState, pageState, setPageState, setEditorState } = + useEditorDrawerContext() const onDragEnd = (result: DropResult) => { if (!result.destination) return - const updatedBlocks = Array.from(currState.blocks) + const updatedBlocks = Array.from(pageState) // Remove block at source index const [movedBlock] = updatedBlocks.splice(result.source.index, 1) // Insert at destination index updatedBlocks.splice(result.destination.index, 0, movedBlock!) - setCurrState({ blocks: updatedBlocks }) + setPageState(updatedBlocks) + setEditorState(updatedBlocks) } return ( @@ -70,7 +66,7 @@ export default function RootStateDrawer({ blocks }: RootStateDrawerProps) { Custom blocks - {currState.blocks.map((block, index) => ( + {pageState.map((block, index) => ( } - onClick={onClose} + onClick={() => setDrawerState({ state: 'root' })} /> - diff --git a/apps/studio/src/pages/dashboard/edit/index.tsx b/apps/studio/src/pages/dashboard/edit/index.tsx index 8eb473b85..8eb5fa65a 100644 --- a/apps/studio/src/pages/dashboard/edit/index.tsx +++ b/apps/studio/src/pages/dashboard/edit/index.tsx @@ -1,7 +1,7 @@ import { Grid, GridItem } from '@chakra-ui/react' import { useEffect, useState } from 'react' import Ajv from 'ajv' -import { EditorDrawerProvider } from '~/contexts/EditorDrawerContext' +import { useEditorDrawerContext } from '~/contexts/EditorDrawerContext' import EditPageDrawer from '~/features/editing-experience/components/EditPageDrawer' import Preview from '~/features/editing-experience/components/Preview' import { type NextPageWithLayout } from '~/lib/types' @@ -165,35 +165,39 @@ const EditPage: NextPageWithLayout = () => { } } + const { setDrawerState, setPageState, setEditorState } = + useEditorDrawerContext() + useEffect(() => { + setDrawerState({ + state: 'root', + }) + // TODO: retrieve data from backend + const blocks = [ + { text: 'Hero', id: 'hero-123' }, + { text: 'Content', id: 'content-123' }, + { text: 'Infopic', id: 'infopic-123' }, + { text: 'Content', id: 'content-234' }, + ] + setEditorState(blocks) + setPageState(blocks) + }, []) + return ( - - - {/* TODO: Implement sidebar editor */} - - - - {/* TODO: Implement preview */} - - - - - + + {/* TODO: Implement sidebar editor */} + + + + {/* TODO: Implement preview */} + + + + ) } diff --git a/apps/studio/src/templates/layouts/PageEditingLayout.tsx b/apps/studio/src/templates/layouts/PageEditingLayout.tsx index 191d7e3cc..b1bd2401f 100644 --- a/apps/studio/src/templates/layouts/PageEditingLayout.tsx +++ b/apps/studio/src/templates/layouts/PageEditingLayout.tsx @@ -3,24 +3,27 @@ import { AppNavbar } from '~/components/AppNavbar' import { EnforceLoginStatePageWrapper } from '~/components/AuthWrappers' import { DashSidebar } from '~/components/DashSidebar' import { APP_GRID_TEMPLATE_AREA } from '~/constants/layouts' +import { EditorDrawerProvider } from '~/contexts/EditorDrawerContext' import { type GetLayout } from '~/lib/types' export const PageEditingLayout: GetLayout = (page) => { return ( - - - - - {page} - - - + + + + + + {page} + + + + ) } diff --git a/apps/studio/src/types/editorDrawer.ts b/apps/studio/src/types/editorDrawer.ts index 7e1f96260..644d613dd 100644 --- a/apps/studio/src/types/editorDrawer.ts +++ b/apps/studio/src/types/editorDrawer.ts @@ -5,7 +5,6 @@ export type Block = { export type RootDrawerState = { state: 'root' - blocks: Block[] } export type AddNewBlockState = {