feat: addeed live view for slot

adolfokrah · Sep 25, 2024 · d2e60f6 · d2e60f6
1 parent 36edce5
commit d2e60f6
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 19 deletions.
diff --git a/src/components/exposed-components/slot/index.tsx b/src/components/exposed-components/slot/index.tsx
@@ -2,8 +2,9 @@ import BlockItem from "@/components/pages/page-content/components/bock-item"
 import EmptyPageDroppable from "@/components/pages/page-content/components/emptyPageDroppable"
 import { PageBlock } from "@/lib/exposed-types"
 import usePageContent from "@/lib/hooks/usePageContent"
+import { usePageContentState } from "@/lib/states/usePageContentState"
 import { useProjectConfigurationState } from "@/lib/states/useProjectConfigState"
-import { cn } from "@/lib/utils"
+import { cn, getProjectMode } from "@/lib/utils"
 
 type SlotProps = {
     pageBlocks: PageBlock[]
@@ -14,17 +15,36 @@ type SlotProps = {
 }
 export default function Slot({pageBlocks, direction, className, propName, pageBlockId}:SlotProps){
     const { activePage } = usePageContent();
-    const { blocks } = useProjectConfigurationState();
+    const { blocks: builderBlocks } = useProjectConfigurationState();
+    const {blocks: liveBlocks, globalBlocks} = usePageContentState();
+    const isLiveMode = getProjectMode() === 'LIVE'
 
 
     if (pageBlocks.length === 0 && activePage) {
         return <EmptyPageDroppable activePage={activePage} propName={propName} pageBlockId={pageBlockId} className="h-full" />;
     }
-
+
+    const blocks =  isLiveMode ?  liveBlocks : builderBlocks
+
+    const divClass = cn('relative flex flex-col',className, {
+        'flex-row': direction === 'horizontal',
+    })
+
+    if(isLiveMode){
+        return (
+            <div className={cn(divClass)}>
+           { pageBlocks?.map((block) => {
+            const globalBlock = globalBlocks?.find((b) => b.id === block?.globalBlockId);
+            const Block = blocks.find((b) => b.Schema.id === (globalBlock?.blockId || block.blockId));
+            if (!Block) return null;
+                const inputs = { ...Block.Schema.defaultPropValues, ...block.inputs, ...globalBlock?.inputs };
+                return <Block key={block.id} {...inputs} />;
+            })}
+        </div>
+        )
+    }
     return (
-        <div className={cn('relative flex flex-col',className, {
-          'flex-row': direction === 'horizontal',
-        })}>
+        <div className={cn(divClass)}>
             {pageBlocks.map((pageBlock, index)=>{
                 const { blockId } = pageBlock;
                 const block = blocks.find((block) => block.Schema.id === blockId);

diff --git a/src/components/pages/live-page/index.tsx b/src/components/pages/live-page/index.tsx
@@ -21,7 +21,7 @@ export default function LivePage({
     projectId: string;
   };
 }) {
-  const { setGlobalBlocks, setTheme, setAllowImageTransformation, setProjectId, setPages } = usePageContentState();
+  const { setGlobalBlocks, setTheme, setBlocks, blocks, setAllowImageTransformation, setProjectId, setPages } = usePageContentState();
   const { setParams } = useParamState();
   useEffect(() => {
     setAllowImageTransformation(allowImageTransformation || false);
@@ -30,6 +30,7 @@ export default function LivePage({
     setProjectId(projectConfiguration.projectId);
     setParams(params);
     setPages(pages);
+    setBlocks(projectConfiguration.blocks)
   }, [
     setAllowImageTransformation,
     setGlobalBlocks,
@@ -41,13 +42,17 @@ export default function LivePage({
     params,
     pages,
     setPages,
+    setBlocks
   ]);
 
+
+
+  if(blocks.length < 1) return null;
+
   return (
     <>
-      {pageBlocks?.map((block) => {
+      { pageBlocks?.map((block) => {
         const globalBlock = projectConfiguration?.globalBlocks?.find((b) => b.id === block?.globalBlockId);
-
         const Block = projectConfiguration.blocks.find((b) => b.Schema.id === (globalBlock?.blockId || block.blockId));
         if (!Block) return null;
         const inputs = { ...Block.Schema.defaultPropValues, ...block.inputs, ...globalBlock?.inputs };

diff --git a/src/lib/hooks/useCanvas.ts b/src/lib/hooks/useCanvas.ts
@@ -4,7 +4,7 @@ import { Block, Message } from '../types';
 import { useProjectConfigurationState } from '../states/useProjectConfigState';
 import { v4 as uuidv4 } from 'uuid';
 import useUndoAndRedo from './useUndoAndRedo';
-import { getSelectedBlockPath, getValueByPath, updateIsSelectedByBlockId, updateValueByPath } from '../utils';
+import { getSelectedBlock, getSelectedBlockPath, getValueByPath, updateIsSelectedByBlockId, updateValueByPath } from '../utils';
 import useBlockHistory from './useBlockHistory';
 import { useTabState } from '../states/useTabsState';
 import { useListState } from '../states/useListState';
@@ -38,14 +38,14 @@ export default function useCanvas() {
         const blocks = page.blocks?.[page.activeLanguageLocale] ?? [];
         const newBlocks = updateIsSelectedByBlockId(lodash.cloneDeep(blocks), '') as PageBlock[]
         const globalBlock = globalBlocks.find((block) => block.id === globalBlockId);
-        const foundBlock = newBlocks.find((block)=>block.id === pageBlockId)
+        const foundBlock =  getSelectedBlock(newBlocks, pageBlockId) 
         const copiedBlock = localStorage.getItem('copiedBlock');
         const inputs =
           fromClipBoard && copiedBlock
             ? JSON.parse(copiedBlock)?.inputs :
             globalBlock?.inputs || block.Schema.defaultPropValues;
 
-       
+
         if(propName  && foundBlock){   
            const foundPropInput = getValueByPath(foundBlock?.inputs, propName.split('.')) || [];
            foundPropInput.splice(position, 0, {
@@ -71,7 +71,6 @@ export default function useCanvas() {
           });
         }
 
-
         // setPages(pages.map((p) => (p.active ? page : p)));
         await addBlocksToPageHistory(page.activeLanguageLocale, newBlocks);
         if (fromClipBoard) {

diff --git a/src/lib/states/usePageContentState.ts b/src/lib/states/usePageContentState.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import { Page } from './usePagesState';
-import { ProjectConfiguration } from '../types';
+import { BlockList, ProjectConfiguration } from '../types';
 import { TabsState } from './useTabsState';
 import { ListStateType } from './useListState';
 
@@ -19,6 +19,8 @@ type State = {
   setAllowImageTransformation: (allowImageTransformation: boolean) => void;
   projectId: string;
   setProjectId: (projectId: string) => void;
+  blocks: BlockList[]
+  setBlocks: (blocks: BlockList[]) => void
 };
 
 export const usePageContentState = create<State>((set) => ({
@@ -38,4 +40,6 @@ export const usePageContentState = create<State>((set) => ({
   setAllowImageTransformation: (allowImageTransformation) => set({ allowImageTransformation }),
   projectId: '',
   setProjectId: (projectId) => set({ projectId }),
+  blocks: [],
+  setBlocks: (blocks) => set({ blocks }),
 }));
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -808,12 +808,13 @@ export function getSelectedBlock(obj: any, id?: string): any | null {
       const value = obj[key];
 
       // If the current object has the 'isSelected' key and it's true, return this object
-      if ('isSelected' in obj && obj.isSelected === true) {
-        if(id && id == obj.id){
-          return obj;
-        }
+
+      if(id && id == obj.id){
         return obj;
-      }
+      }else if (!id && 'isSelected' in obj && obj.isSelected === true) {
+
+      return obj;
+    }
 
       // If the value is an object, recursively call the function
       if (typeof value === 'object' && value !== null) {