Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new CanvasProvider state to manage the opening of the ThumbsPagesPod accordion #622

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Add new CanvasProvider state to manage the opening of the ThumbsPagesPod accordion #622

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/core/local-disk/use-local-disk.hook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const DEFAULT_FILE_EXTENSION = 'qm';
const DEFAULT_EXTENSION_DESCRIPTION = 'quick mock';

export const useLocalDisk = () => {
const { fullDocument, loadDocument, fileName, setFileName } =
const { fullDocument, loadDocument, fileName, setFileName, setIsFileLoaded } =
useCanvasContext();

const serializeShapes = (): string => {
Expand Down Expand Up @@ -72,6 +72,7 @@ export const useLocalDisk = () => {
}
};
reader.readAsText(file);
setIsFileLoaded(true);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather in the provider (see comment)

};

const handleLoad = () => {
Expand Down
2 changes: 2 additions & 0 deletions src/core/providers/canvas/canvas.model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,4 +110,6 @@ export interface CanvasContextModel {
setIsThumbnailContextMenuVisible: React.Dispatch<
React.SetStateAction<boolean>
>;
isFileLoaded: boolean;
setIsFileLoaded: React.Dispatch<React.SetStateAction<boolean>>;
}
3 changes: 3 additions & 0 deletions src/core/providers/canvas/canvas.provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export const CanvasProvider: React.FC<Props> = props => {
const [fileName, setFileName] = React.useState<string>('');
const [isThumbnailContextMenuVisible, setIsThumbnailContextMenuVisible] =
React.useState(false);
const [isFileLoaded, setIsFileLoaded] = React.useState(false);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A flag is a good idea, but true/false won't work the second time you open a document, one trick we can do is to count the number of times we have opened documents, something like:

const [howManyLoadedDocuments, setHowManyLoadedDocuments] = React.useState(0);

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The setter we can call it directly here in the provider (no need to call it from outside, something like:

  const loadDocument = (document: DocumentModel) => {
    setDocument(document);
+    setHowManyLoadedDocuments(numberOfDocuments => numberOfDocuments + 1);
  };


const {
addSnapshot,
Expand Down Expand Up @@ -331,6 +332,8 @@ export const CanvasProvider: React.FC<Props> = props => {
activePageIndex: document.activePageIndex,
isThumbnailContextMenuVisible,
setIsThumbnailContextMenuVisible,
isFileLoaded,
setIsFileLoaded,
}}
>
{children}
Expand Down
5 changes: 5 additions & 0 deletions src/scenes/main.scene.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,15 @@ import { PropertiesPod } from '@/pods/properties';
import { FooterPod } from '@/pods/footer/footer.pod';
import { ThumbPagesPod } from '@/pods/thumb-pages';
import { useAccordionSectionVisibility } from './accordion-section-visibility.hook';
import { useCanvasContext } from '@/core/providers';

export const MainScene = () => {
const { isThumbPagesPodOpen, thumbPagesPodRef } =
useAccordionSectionVisibility();

const { isFileLoaded } = useCanvasContext();
const forceOpenThumbsPages = isFileLoaded && { open: true };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mmm.. we could create a custom hook to encapsulate the open doc funciontallity, the use it directly in the scene, something like:

import { useCanvasContext } from '@/core/providers';
import { useEffect, useRef, useState } from 'react';

export const useAccordionSectionVisibility = () => {
  const [isThumbPagesPodOpen, setIsThumbPagesPodOpen] = useState(false);
  const thumbPagesPodRef = useRef<HTMLDetailsElement>(null);
  const { fullDocument, howManyLoadedDocuments } = useCanvasContext();

  useEffect(() => {
    if (
      howManyLoadedDocuments > 0 &&
      thumbPagesPodRef.current &&
      fullDocument.pages.length > 1
    ) {
      setIsThumbPagesPodOpen(true);
      thumbPagesPodRef.current.open = true;
    }
  }, [howManyLoadedDocuments]);

  useEffect(() => {
    const handleToggle = () => {
      setIsThumbPagesPodOpen(thumbPagesPodRef.current?.open ?? false);
    };

    const detailsElement = thumbPagesPodRef.current;
    if (detailsElement) {
      detailsElement.addEventListener('toggle', handleToggle);
    }

    // Cleanup event listener on component unmount
    return () => {
      if (detailsElement) {
        detailsElement.removeEventListener('toggle', handleToggle);
      }
    };
  }, []);

  return {
    thumbPagesPodRef,
    isThumbPagesPodOpen,
  };
};


return (
<MainLayout>
<ToolbarPod />
Expand All @@ -27,6 +31,7 @@ export const MainScene = () => {
className={classes.container}
name="toolsLeft"
ref={thumbPagesPodRef}
{...forceOpenThumbsPages}
>
<summary className={classes.title}>Pages</summary>
<ThumbPagesPod isVisible={isThumbPagesPodOpen} />
Expand Down
Loading