From adbe7d5992ca5b35169148abb5deb1552d641297 Mon Sep 17 00:00:00 2001 From: Dion Date: Fri, 3 Nov 2023 16:11:20 +0100 Subject: [PATCH 01/31] fix some code smells --- .github/workflows.md | 6 +++++ .../file-hash-image/file-hash-image.spec.tsx | 15 +++--------- .../atoms/menu-option/menu-option.stories.tsx | 24 +++++++++++++++++++ .../atoms/menu-option/menu-option.tsx | 23 +++++++++++------- .../src/components/atoms/modal/modal.tsx | 3 +++ .../atoms/more-menu/more-menu.stories.tsx | 10 +++++++- .../components/atoms/more-menu/more-menu.tsx | 3 +++ .../archive-sidebar-selection-list.tsx | 9 +++++-- .../src/style/css/28-sidebar-selection.css | 23 ++++++++++++++---- 9 files changed, 89 insertions(+), 27 deletions(-) create mode 100644 .github/workflows.md create mode 100644 starsky/starsky/clientapp/src/components/atoms/menu-option/menu-option.stories.tsx diff --git a/.github/workflows.md b/.github/workflows.md new file mode 100644 index 0000000000..b73038b2b2 --- /dev/null +++ b/.github/workflows.md @@ -0,0 +1,6 @@ + +The following workflows are allowed on: https://github.com/qdraw/starsky/settings/actions + +``` +ljharb/rebase@master,peter-evans/create-pull-request*,EndBug/add-and-commit*,everlytic/branch-merge*,docker/login-action*,docker/metadata-action*,docker/build-push-action*,codecov/codecov-action* +``` \ No newline at end of file diff --git a/starsky/starsky/clientapp/src/components/atoms/file-hash-image/file-hash-image.spec.tsx b/starsky/starsky/clientapp/src/components/atoms/file-hash-image/file-hash-image.spec.tsx index a38819d399..0c08bb8e3a 100644 --- a/starsky/starsky/clientapp/src/components/atoms/file-hash-image/file-hash-image.spec.tsx +++ b/starsky/starsky/clientapp/src/components/atoms/file-hash-image/file-hash-image.spec.tsx @@ -52,10 +52,7 @@ describe("FileHashImage", () => { // need to await here const component = await render( - + ); expect(detectRotationSpy).toBeCalled(); @@ -94,10 +91,7 @@ describe("FileHashImage", () => { .mockImplementationOnce(() => mockGetIConnectionDefault); const component = render( - + ); // need to await here @@ -125,10 +119,7 @@ describe("FileHashImage", () => { .mockImplementationOnce(() => mockGetIConnectionDefault); const component = render( - + ); // need to await here diff --git a/starsky/starsky/clientapp/src/components/atoms/menu-option/menu-option.stories.tsx b/starsky/starsky/clientapp/src/components/atoms/menu-option/menu-option.stories.tsx new file mode 100644 index 0000000000..95f4d44ea4 --- /dev/null +++ b/starsky/starsky/clientapp/src/components/atoms/menu-option/menu-option.stories.tsx @@ -0,0 +1,24 @@ +import MenuOption from "./menu-option"; + +export default { + title: "components/atoms/menu-option" +}; + +export const Default = () => { + return ( + {}} + testName="test" + isReadOnly={false} + setEnableMoreMenu={(value) => { + alert(value); + }} + /> + ); +}; + +Default.story = { + name: "default" +}; diff --git a/starsky/starsky/clientapp/src/components/atoms/menu-option/menu-option.tsx b/starsky/starsky/clientapp/src/components/atoms/menu-option/menu-option.tsx index 38446645cb..814f5b8f51 100644 --- a/starsky/starsky/clientapp/src/components/atoms/menu-option/menu-option.tsx +++ b/starsky/starsky/clientapp/src/components/atoms/menu-option/menu-option.tsx @@ -11,6 +11,7 @@ interface IMenuOptionProps { setEnableMoreMenu?: React.Dispatch>; } +// eslint-disable-next-line react/display-name const MenuOption: React.FunctionComponent = memo( ({ localization, @@ -24,6 +25,17 @@ const MenuOption: React.FunctionComponent = memo( const language = new Language(settings.language); const Message = language.key(localization); + function onClickHandler() { + if (isReadOnly) { + return; + } + // close menu + if (setEnableMoreMenu) { + setEnableMoreMenu(false); + } + set(!isSet); + } + return ( <> { @@ -31,14 +43,9 @@ const MenuOption: React.FunctionComponent = memo( tabIndex={0} data-test={testName} className={!isReadOnly ? "menu-option" : "menu-option disabled"} - onClick={() => { - if (!isReadOnly) { - // close menu - if (setEnableMoreMenu) { - setEnableMoreMenu(false); - } - set(!isSet); - } + onClick={onClickHandler} + onKeyDown={(event) => { + event.key === "Enter" && onClickHandler(); }} > {Message} diff --git a/starsky/starsky/clientapp/src/components/atoms/modal/modal.tsx b/starsky/starsky/clientapp/src/components/atoms/modal/modal.tsx index 0801fe9a90..23ae332274 100644 --- a/starsky/starsky/clientapp/src/components/atoms/modal/modal.tsx +++ b/starsky/starsky/clientapp/src/components/atoms/modal/modal.tsx @@ -68,6 +68,9 @@ export default function Modal({ return ReactDOM.createPortal(
ifModalOpenHandleExit(event, handleExit)} + onKeyDown={(event) => { + event.key === "Enter" && handleExit(); + }} data-test={dataTest} className={`modal-bg ${ isOpen ? ` ${ModalOpenClassName} ` + className : "" diff --git a/starsky/starsky/clientapp/src/components/atoms/more-menu/more-menu.stories.tsx b/starsky/starsky/clientapp/src/components/atoms/more-menu/more-menu.stories.tsx index 0ad05eaaad..4a20cb42c9 100644 --- a/starsky/starsky/clientapp/src/components/atoms/more-menu/more-menu.stories.tsx +++ b/starsky/starsky/clientapp/src/components/atoms/more-menu/more-menu.stories.tsx @@ -5,7 +5,15 @@ export default { }; export const Default = () => { - return {}}>test; + return ( + { + alert("test"); + }} + > + test + + ); }; Default.story = { diff --git a/starsky/starsky/clientapp/src/components/atoms/more-menu/more-menu.tsx b/starsky/starsky/clientapp/src/components/atoms/more-menu/more-menu.tsx index 7e43875870..8c34277814 100644 --- a/starsky/starsky/clientapp/src/components/atoms/more-menu/more-menu.tsx +++ b/starsky/starsky/clientapp/src/components/atoms/more-menu/more-menu.tsx @@ -47,6 +47,9 @@ const MoreMenu: React.FunctionComponent = ({
setEnableMoreMenu(false)} + onKeyDown={(event) => { + event.key === "Enter" && setEnableMoreMenu(false); + }} data-test="menu-context" className={ enableMoreMenu ? "menu-context" : "menu-context menu-context--hide" diff --git a/starsky/starsky/clientapp/src/components/molecules/archive-sidebar/archive-sidebar-selection-list.tsx b/starsky/starsky/clientapp/src/components/molecules/archive-sidebar/archive-sidebar-selection-list.tsx index ff94f7a2ff..d5f118d188 100644 --- a/starsky/starsky/clientapp/src/components/molecules/archive-sidebar/archive-sidebar-selection-list.tsx +++ b/starsky/starsky/clientapp/src/components/molecules/archive-sidebar/archive-sidebar-selection-list.tsx @@ -12,6 +12,7 @@ interface IDetailViewSidebarSelectionListProps { } const ArchiveSidebarSelectionList: React.FunctionComponent = + // eslint-disable-next-line react/display-name memo((props) => { // content const settings = useGlobalSettings(); @@ -92,11 +93,15 @@ const ArchiveSidebarSelectionList: React.FunctionComponent (
  • - { + event.key === "Enter" && toggleSelection(item); + }} onClick={() => toggleSelection(item)} className="close" + title={item} /> - {item} + {item}
    • ) ) diff --git a/starsky/starsky/clientapp/src/style/css/28-sidebar-selection.css b/starsky/starsky/clientapp/src/style/css/28-sidebar-selection.css index 6390429028..748e191cbc 100644 --- a/starsky/starsky/clientapp/src/style/css/28-sidebar-selection.css +++ b/starsky/starsky/clientapp/src/style/css/28-sidebar-selection.css @@ -7,12 +7,18 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - line-height: 30px; + line-height: 36px; width: 100%; padding-left: 10px; padding-right: 10px; } +.sidebar-selection li span { + line-height: 36px; + display: inline-block; + vertical-align: middle; +} + .sidebar-selection li:nth-child(2n) { background-color: #f5f8fa; /* lighter than Blue Gray 50 ECEFF1*/ @@ -32,12 +38,15 @@ opacity: 0.5; position: relative; margin-right: 8px; + padding: 0px; + background-color: transparent; + vertical-align: middle; } -.sidebar-selection li .close::before, -.sidebar-selection li .close::after { +.sidebar-selection li .close:before, +.sidebar-selection li .close:after { position: absolute; - margin-top: 4px; + margin-top: -14px; left: 13px; content: " "; height: 28px; @@ -45,6 +54,12 @@ background-color: #333; } +.sidebar-selection li .close:hover:before, +.sidebar-selection li .close:hover:after { + background-color: #000; + opacity: 1; +} + @media (prefers-color-scheme: dark) { .sidebar-selection li .close::before, .sidebar-selection li .close::after { From 1b05ed839b329ff1c67a3354f3360335c6ed8eb3 Mon Sep 17 00:00:00 2001 From: Dion Date: Sun, 5 Nov 2023 09:43:36 +0100 Subject: [PATCH 02/31] update list --- .github/workflows.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows.md b/.github/workflows.md index b73038b2b2..fe57bb0401 100644 --- a/.github/workflows.md +++ b/.github/workflows.md @@ -2,5 +2,5 @@ The following workflows are allowed on: https://github.com/qdraw/starsky/settings/actions ``` -ljharb/rebase@master,peter-evans/create-pull-request*,EndBug/add-and-commit*,everlytic/branch-merge*,docker/login-action*,docker/metadata-action*,docker/build-push-action*,codecov/codecov-action* +ljharb/rebase@master@,peter-evans/create-pull-request@*,EndBug/add-and-commit@*,everlytic/branch-merge*,docker/login-action@*,docker/metadata-action@*,docker/build-push-action@*,codecov/codecov-action@*,chizkiyahu/delete-untagged-ghcr-action@*,cypress-io/github-action@*,softprops/action-gh-release@* ``` \ No newline at end of file From 6f3bd5edab9607af218158a3943f1650d492e655 Mon Sep 17 00:00:00 2001 From: Dion Date: Sun, 5 Nov 2023 19:09:58 +0100 Subject: [PATCH 03/31] add keydown --- starsky/starsky/clientapp/.storybook/main.ts | 1 - .../menu-option-move-to-trash.stories.tsx | 8 +++-- .../menu-option-move-to-trash.tsx | 5 +++ .../detail-view-media/detail-view-mp4.tsx | 8 +++++ .../organisms/menu-archive/menu-archive.tsx | 30 +++++++++++++++++ .../menu-detail-view/menu-detail-view.tsx | 19 +++++++++++ .../organisms/menu-search/menu-search.tsx | 32 ++++++++++++++++++- 7 files changed, 99 insertions(+), 4 deletions(-) diff --git a/starsky/starsky/clientapp/.storybook/main.ts b/starsky/starsky/clientapp/.storybook/main.ts index a12290b0c6..6adf216825 100644 --- a/starsky/starsky/clientapp/.storybook/main.ts +++ b/starsky/starsky/clientapp/.storybook/main.ts @@ -5,7 +5,6 @@ const config: StorybookConfig = { addons: [ "@storybook/addon-links", "@storybook/addon-essentials", - "@storybook/addon-onboarding", "@storybook/addon-interactions" ], framework: { diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-option-move-to-trash/menu-option-move-to-trash.stories.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-option-move-to-trash/menu-option-move-to-trash.stories.tsx index bbc29502e7..ff32825cba 100644 --- a/starsky/starsky/clientapp/src/components/molecules/menu-option-move-to-trash/menu-option-move-to-trash.stories.tsx +++ b/starsky/starsky/clientapp/src/components/molecules/menu-option-move-to-trash/menu-option-move-to-trash.stories.tsx @@ -22,11 +22,15 @@ export const Default = () => { <> {}}> {}} + setSelect={() => { + alert("done"); + }} select={["test.jpg"]} isReadOnly={false} state={test} - dispatch={() => {}} + dispatch={() => { + alert("done"); + }} /> diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-option-move-to-trash/menu-option-move-to-trash.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-option-move-to-trash/menu-option-move-to-trash.tsx index a5de60f0c5..61b1a6d5a0 100644 --- a/starsky/starsky/clientapp/src/components/molecules/menu-option-move-to-trash/menu-option-move-to-trash.tsx +++ b/starsky/starsky/clientapp/src/components/molecules/menu-option-move-to-trash/menu-option-move-to-trash.tsx @@ -25,6 +25,7 @@ interface IMenuOptionMoveToTrashProps { * Used from Archive and Search */ const MenuOptionMoveToTrash: React.FunctionComponent = + // eslint-disable-next-line react/display-name memo(({ state, dispatch, select, setSelect, isReadOnly }) => { const settings = useGlobalSettings(); const language = new Language(settings.language); @@ -98,7 +99,11 @@ const MenuOptionMoveToTrash: React.FunctionComponent= 1 ? (
  • { + event.key === "Enter" && moveToTrashSelection(); + }} onClick={() => moveToTrashSelection()} > {MessageMoveToTrash} diff --git a/starsky/starsky/clientapp/src/components/organisms/detail-view-media/detail-view-mp4.tsx b/starsky/starsky/clientapp/src/components/organisms/detail-view-media/detail-view-mp4.tsx index ce93d8abe4..217ed67ec4 100644 --- a/starsky/starsky/clientapp/src/components/organisms/detail-view-media/detail-view-mp4.tsx +++ b/starsky/starsky/clientapp/src/components/organisms/detail-view-media/detail-view-mp4.tsx @@ -24,6 +24,7 @@ function GetVideoClass(isPaused: boolean, isStarted: boolean): string { } } +// eslint-disable-next-line react/display-name const DetailViewMp4: React.FunctionComponent = memo(() => { // content const settings = useGlobalSettings(); @@ -232,6 +233,10 @@ const DetailViewMp4: React.FunctionComponent = memo(() => {
    { + event.key === "Enter" && playPause(); + event.key === "Enter" && timeUpdate(); + }} onClick={() => { playPause(); timeUpdate(); @@ -249,6 +254,9 @@ const DetailViewMp4: React.FunctionComponent = memo(() => {
    • @@ -272,14 +282,23 @@ const MenuArchive: React.FunctionComponent = memo(() => {
  • setModalMkdirOpen(!isModalMkdirOpen)} + onKeyDown={(event) => { + event.key === "Enter" && setModalMkdirOpen(!isModalMkdirOpen); + }} > {MessageMkdir}
  • setDisplayOptionsOpen(!isDisplayOptionsOpen)} + onKeyDown={(event) => { + event.key === "Enter" && + setDisplayOptionsOpen(!isModalMkdirOpen); + }} > {MessageDisplayOptions}
    • @@ -323,6 +342,10 @@ const MenuArchive: React.FunctionComponent = memo(() => { className="menu-option" data-test="undo-selection" onClick={() => undoSelection()} + tabIndex={0} + onKeyDown={(event) => { + event.key === "Enter" && undoSelection(); + }} > {MessageUndoSelection} @@ -332,6 +355,10 @@ const MenuArchive: React.FunctionComponent = memo(() => { className="menu-option" data-test="select-all" onClick={() => allSelection()} + tabIndex={0} + onKeyDown={(event) => { + event.key === "Enter" && allSelection(); + }} > {MessageSelectAll} @@ -393,6 +420,9 @@ const MenuArchive: React.FunctionComponent = memo(() => { onClick={() => { toggleLabels(); }} + onKeyDown={(event) => { + event.key === "Enter" && toggleLabels(); + }} > {MessageSelectFurther}
    diff --git a/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/menu-detail-view.tsx b/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/menu-detail-view.tsx index 7da7ec0ffd..4256e90627 100644 --- a/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/menu-detail-view.tsx +++ b/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/menu-detail-view.tsx @@ -424,6 +424,9 @@ const MenuDetailView: React.FunctionComponent = ({ onClick={() => { toggleLabels(); }} + onKeyDown={(event) => { + event.key === "Enter" && toggleLabels(); + }} > Labels @@ -439,6 +442,9 @@ const MenuDetailView: React.FunctionComponent = ({ } data-test="export" onClick={() => setModalExportOpen(!isModalExportOpen)} + onKeyDown={(event) => { + event.key === "Enter" && setModalExportOpen(!isModalExportOpen); + }} > Download @@ -457,6 +463,9 @@ const MenuDetailView: React.FunctionComponent = ({ className={!isReadOnly ? "menu-option" : "menu-option disabled"} data-test="move" onClick={() => setModalMoveFile(!isModalMoveFile)} + onKeyDown={(event) => { + event.key === "Enter" && setModalMoveFile(!isModalMoveFile); + }} > {MessageMove} @@ -465,6 +474,10 @@ const MenuDetailView: React.FunctionComponent = ({ className={!isReadOnly ? "menu-option" : "menu-option disabled"} data-test="rename" onClick={() => setModalRenameFileOpen(!isModalRenameFileOpen)} + onKeyDown={(event) => { + event.key === "Enter" && + setModalRenameFileOpen(!isModalRenameFileOpen); + }} > {MessageRenameFileName} @@ -473,6 +486,9 @@ const MenuDetailView: React.FunctionComponent = ({ className={!isReadOnly ? "menu-option" : "menu-option disabled"} data-test="trash" onClick={TrashFile} + onKeyDown={(event) => { + event.key === "Enter" && TrashFile(); + }} > {!isMarkedAsDeleted ? MessageMoveToTrash @@ -515,6 +531,9 @@ const MenuDetailView: React.FunctionComponent = ({ onClick={() => { toggleLabels(); }} + onKeyDown={(event) => { + event.key === "Enter" && toggleLabels(); + }} > {MessageCloseDetailScreenDialog} {isRecentEdited ? ( diff --git a/starsky/starsky/clientapp/src/components/organisms/menu-search/menu-search.tsx b/starsky/starsky/clientapp/src/components/organisms/menu-search/menu-search.tsx index 1e2394dc7e..94a9a15366 100644 --- a/starsky/starsky/clientapp/src/components/organisms/menu-search/menu-search.tsx +++ b/starsky/starsky/clientapp/src/components/organisms/menu-search/menu-search.tsx @@ -127,6 +127,9 @@ export const MenuSearch: React.FunctionComponent = ({ onClick={() => { removeSidebarSelection(); }} + onKeyDown={(event) => { + event.key === "Enter" && removeSidebarSelection(); + }} className="item item--first item--close" > {MessageNoneSelected} @@ -138,6 +141,9 @@ export const MenuSearch: React.FunctionComponent = ({ onClick={() => { removeSidebarSelection(); }} + onKeyDown={(event) => { + event.key === "Enter" && removeSidebarSelection(); + }} className="item item--first item--close" > {select.length} {MessageSelectPresentPerfect} @@ -155,6 +161,9 @@ export const MenuSearch: React.FunctionComponent = ({ onClick={() => { removeSidebarSelection(); }} + onKeyDown={(event) => { + event.key === "Enter" && removeSidebarSelection(); + }} > {MessageSelectAction} @@ -162,7 +171,13 @@ export const MenuSearch: React.FunctionComponent = ({ {/* when selected */} {select ? ( -
    toggleLabels()}> +
    toggleLabels()} + onKeyDown={(event) => { + event.key === "Enter" && toggleLabels(); + }} + > Labels
    ) : null} @@ -185,6 +200,9 @@ export const MenuSearch: React.FunctionComponent = ({ tabIndex={0} className="menu-option" onClick={() => allSelection()} + onKeyDown={(event) => { + event.key === "Enter" && allSelection(); + }} > {MessageSelectAll} @@ -202,6 +220,10 @@ export const MenuSearch: React.FunctionComponent = ({ data-test="undo-selection" className="menu-option" onClick={() => undoSelection()} + tabIndex={0} + onKeyDown={(event) => { + event.key === "Enter" && undoSelection(); + }} > {MessageUndoSelection} @@ -210,7 +232,11 @@ export const MenuSearch: React.FunctionComponent = ({
  • allSelection()} + onKeyDown={(event) => { + event.key === "Enter" && allSelection(); + }} > {MessageSelectAll}
    • @@ -252,6 +278,10 @@ export const MenuSearch: React.FunctionComponent = ({ onClick={() => { toggleLabels(); }} + onKeyDown={(event) => { + event.key === "Enter" && toggleLabels(); + }} + tabIndex={0} > {MessageSelectFurther}
    From 6b1896409290e17fd25bf3dea7e890fc2c5a4583 Mon Sep 17 00:00:00 2001 From: Dion Date: Sun, 5 Nov 2023 19:40:34 +0100 Subject: [PATCH 04/31] add keydowns --- .../organisms/menu-trash/menu-trash.tsx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/starsky/starsky/clientapp/src/components/organisms/menu-trash/menu-trash.tsx b/starsky/starsky/clientapp/src/components/organisms/menu-trash/menu-trash.tsx index fdf0f3fec3..17656a2b1f 100644 --- a/starsky/starsky/clientapp/src/components/organisms/menu-trash/menu-trash.tsx +++ b/starsky/starsky/clientapp/src/components/organisms/menu-trash/menu-trash.tsx @@ -142,6 +142,9 @@ const MenuTrash: React.FunctionComponent = ({ onClick={() => { removeSidebarSelection(); }} + onKeyDown={(event) => { + event.key === "Enter" && removeSidebarSelection(); + }} className="item item--first item--close" > {MessageNoneSelected} @@ -152,6 +155,9 @@ const MenuTrash: React.FunctionComponent = ({ onClick={() => { removeSidebarSelection(); }} + onKeyDown={(event) => { + event.key === "Enter" && removeSidebarSelection(); + }} className="item item--first item--close" > {select.length} {MessageSelectPresentPerfect} @@ -165,6 +171,9 @@ const MenuTrash: React.FunctionComponent = ({ onClick={() => { removeSidebarSelection(); }} + onKeyDown={(event) => { + event.key === "Enter" && removeSidebarSelection(); + }} > {MessageSelectAction} @@ -212,6 +221,10 @@ const MenuTrash: React.FunctionComponent = ({ data-test="undo-selection" className="menu-option" onClick={() => undoSelection()} + tabIndex={0} + onKeyDown={(event) => { + event.key === "Enter" && undoSelection(); + }} > {MessageUndoSelection} @@ -221,6 +234,10 @@ const MenuTrash: React.FunctionComponent = ({ className="menu-option" data-test="select-all" onClick={() => allSelection()} + tabIndex={0} + onKeyDown={(event) => { + event.key === "Enter" && allSelection(); + }} > {MessageSelectAll} @@ -229,6 +246,10 @@ const MenuTrash: React.FunctionComponent = ({ className="menu-option" data-test="restore-from-trash" onClick={() => undoTrash()} + tabIndex={0} + onKeyDown={(event) => { + event.key === "Enter" && undoTrash(); + }} > {MessageRestoreFromTrash} @@ -236,6 +257,10 @@ const MenuTrash: React.FunctionComponent = ({ className="menu-option" data-test="delete" onClick={() => setModalDeleteOpen(true)} + tabIndex={0} + onKeyDown={(event) => { + event.key === "Enter" && setModalDeleteOpen(true); + }} > {MessageDeleteImmediately} From 1cb7d65b3b08e969e759e6fd3edfc0a1b60eeef4 Mon Sep 17 00:00:00 2001 From: Dion Date: Sun, 5 Nov 2023 20:20:27 +0100 Subject: [PATCH 05/31] add extra keydowns --- .../src/containers/detailview/detailview.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/starsky/starsky/clientapp/src/containers/detailview/detailview.tsx b/starsky/starsky/clientapp/src/containers/detailview/detailview.tsx index 51f66ffd93..99d3c4173d 100644 --- a/starsky/starsky/clientapp/src/containers/detailview/detailview.tsx +++ b/starsky/starsky/clientapp/src/containers/detailview/detailview.tsx @@ -269,6 +269,18 @@ const DetailView: React.FC = () => { setIsLoading ).next() } + tabIndex={0} + onKeyDown={(event) => { + event.key === "Enter" && + new PrevNext( + relativeObjects, + state, + isSearchQuery, + history, + setRelativeObjects, + setIsLoading + ).next(); + }} data-test="detailview-next" className="nextprev nextprev--next" > @@ -290,6 +302,18 @@ const DetailView: React.FC = () => { setIsLoading ).prev() } + tabIndex={0} + onKeyDown={(event) => { + event.key === "Enter" && + new PrevNext( + relativeObjects, + state, + isSearchQuery, + history, + setRelativeObjects, + setIsLoading + ).next(); + }} data-test="detailview-prev" className="nextprev nextprev--prev" > From f14099d93a2bb25408419f755f9676a583ac52ac Mon Sep 17 00:00:00 2001 From: Dion Date: Sun, 5 Nov 2023 22:52:18 +0100 Subject: [PATCH 06/31] remove some duplicate code --- .../menu-select-count/menu-select-count.tsx | 53 +++++++++++++++++++ .../organisms/menu-archive/menu-archive.tsx | 34 +++--------- .../organisms/menu-search/menu-search.tsx | 40 +++----------- .../organisms/menu-trash/menu-trash.tsx | 31 ++--------- .../src/localization/localization.json | 16 ++++++ 5 files changed, 86 insertions(+), 88 deletions(-) create mode 100644 starsky/starsky/clientapp/src/components/molecules/menu-select-count/menu-select-count.tsx diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-select-count/menu-select-count.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-select-count/menu-select-count.tsx new file mode 100644 index 0000000000..078a645180 --- /dev/null +++ b/starsky/starsky/clientapp/src/components/molecules/menu-select-count/menu-select-count.tsx @@ -0,0 +1,53 @@ +import useGlobalSettings from "../../../hooks/use-global-settings"; +import localization from "../../../localization/localization.json"; +import { Language } from "../../../shared/language"; + +export interface IMenuSelectCountProps { + select?: string[]; + removeSidebarSelection: () => void; +} + +export const MenuSelectCount: React.FunctionComponent< + IMenuSelectCountProps +> = ({ select, removeSidebarSelection }) => { + const settings = useGlobalSettings(); + const language = new Language(settings.language); + const MessageNoneSelected = language.key(localization.MessageNoneSelected); + + const MessageSelectPresentPerfect = language.key( + localization.MessageSelectPresentPerfect + ); + + return ( + <> + {select && select.length === 0 ? ( + + ) : null} + {select && select.length >= 1 ? ( + + ) : null} + + ); +}; diff --git a/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx b/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx index 0e259f00ac..92e02a8187 100644 --- a/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx +++ b/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx @@ -22,6 +22,7 @@ import MoreMenu from "../../atoms/more-menu/more-menu"; import MenuSearchBar from "../../molecules/menu-inline-search/menu-inline-search"; import MenuOptionMoveFolderToTrash from "../../molecules/menu-option-move-folder-to-trash/menu-option-move-folder-to-trash"; import MenuOptionMoveToTrash from "../../molecules/menu-option-move-to-trash/menu-option-move-to-trash"; +import { MenuSelectCount } from "../../molecules/menu-select-count/menu-select-count"; import ModalDropAreaFilesAdded from "../../molecules/modal-drop-area-files-added/modal-drop-area-files-added"; import ModalArchiveMkdir from "../modal-archive-mkdir/modal-archive-mkdir"; import ModalArchiveRename from "../modal-archive-rename/modal-archive-rename"; @@ -224,34 +225,11 @@ const MenuArchive: React.FunctionComponent = memo(() => { setHamburgerMenu={setHamburgerMenu} /> - {select && select.length === 0 ? ( - - ) : null} - {select && select.length >= 1 ? ( - - ) : null} + + {!select ? (
    = ({ const language = new Language(settings.language); // Content - const MessageNoneSelected = language.text( - "Niets geselecteerd", - "Nothing selected" - ); - const MessageSelectPresentPerfect = language.text("geselecteerd", "selected"); const MessageSelectAction = language.text("Selecteer", "Select"); const MessageSelectAll = language.text("Alles selecteren", "Select all"); const MessageUndoSelection = language.text("Undo selectie", "Undo selection"); @@ -121,36 +117,12 @@ export const MenuSearch: React.FunctionComponent = ({ setHamburgerMenu={setHamburgerMenu} /> - {select && select.length === 0 ? ( - - ) : null} - {select && select.length >= 1 ? ( - - ) : null} + - {/* te select button with checkbox*/} + {/* the select button with checkbox*/} {!select ? (
    = ({ setHamburgerMenu={setHamburgerMenu} /> - {select && select.length === 0 ? ( - - ) : null} - {select && select.length >= 1 ? ( - - ) : null} + {!select && state.fileIndexItems.length >= 1 ? (
    Date: Sun, 5 Nov 2023 22:53:26 +0100 Subject: [PATCH 07/31] rm usused code --- .../src/components/organisms/menu-archive/menu-archive.tsx | 5 ----- .../src/components/organisms/menu-trash/menu-trash.tsx | 5 ----- 2 files changed, 10 deletions(-) diff --git a/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx b/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx index 92e02a8187..55bc42bb83 100644 --- a/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx +++ b/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx @@ -41,11 +41,6 @@ const MenuArchive: React.FunctionComponent = memo(() => { // Content const MessageSelectAction = language.text("Selecteer", "Select"); - const MessageSelectPresentPerfect = language.text("geselecteerd", "selected"); - const MessageNoneSelected = language.text( - "Niets geselecteerd", - "Nothing selected" - ); const MessageMkdir = language.text("Map maken", "Create folder"); const MessageRenameDir = language.text("Naam wijzigen", "Rename"); const MessageDisplayOptions = language.text( diff --git a/starsky/starsky/clientapp/src/components/organisms/menu-trash/menu-trash.tsx b/starsky/starsky/clientapp/src/components/organisms/menu-trash/menu-trash.tsx index 33e2cd0446..41a0f1b4e7 100644 --- a/starsky/starsky/clientapp/src/components/organisms/menu-trash/menu-trash.tsx +++ b/starsky/starsky/clientapp/src/components/organisms/menu-trash/menu-trash.tsx @@ -33,11 +33,6 @@ const MenuTrash: React.FunctionComponent = ({ // Content const MessageSelectAction = language.text("Selecteer", "Select"); - const MessageSelectPresentPerfect = language.text("geselecteerd", "selected"); - const MessageNoneSelected = language.text( - "Niets geselecteerd", - "Nothing selected" - ); const MessageSelectAll = language.text("Alles selecteren", "Select all"); const MessageUndoSelection = language.text("Undo selectie", "Undo selection"); const MessageRestoreFromTrash = language.text( From 3a40ffa2cff5cb346135024048d68071a3b9abd6 Mon Sep 17 00:00:00 2001 From: Dion Date: Sun, 5 Nov 2023 23:14:23 +0100 Subject: [PATCH 08/31] split duplicate code --- .../menu-option-selection-all.tsx | 36 ++++++++++++++++ .../menu-option-selection-undo.tsx | 36 ++++++++++++++++ .../organisms/menu-archive/menu-archive.tsx | 42 +++++++------------ .../organisms/menu-search/menu-search.tsx | 41 +++++++----------- .../organisms/menu-trash/menu-trash.tsx | 41 +++++++----------- .../src/localization/localization.json | 10 +++-- 6 files changed, 121 insertions(+), 85 deletions(-) create mode 100644 starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.tsx create mode 100644 starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.tsx new file mode 100644 index 0000000000..2ca719c4cc --- /dev/null +++ b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.tsx @@ -0,0 +1,36 @@ +import useGlobalSettings from "../../../hooks/use-global-settings"; +import { IArchiveProps } from "../../../interfaces/IArchiveProps"; +import localization from "../../../localization/localization.json"; +import { Language } from "../../../shared/language"; + +export interface IMenuOptionUndoSelectionProps { + select: string[]; + state: IArchiveProps; + allSelection: () => void; +} + +export const MenuOptionSelectionAll: React.FunctionComponent< + IMenuOptionUndoSelectionProps +> = ({ select, state, allSelection }) => { + const settings = useGlobalSettings(); + const language = new Language(settings.language); + const MessageSelectAll = language.key(localization.MessageSelectAll); + + return ( + <> + {select.length !== state.fileIndexItems.length ? ( +
  • allSelection()} + tabIndex={0} + onKeyDown={(event) => { + event.key === "Enter" && allSelection(); + }} + > + {MessageSelectAll} +
    • + ) : null} + + ); +}; diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx new file mode 100644 index 0000000000..5d790a9d23 --- /dev/null +++ b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx @@ -0,0 +1,36 @@ +import useGlobalSettings from "../../../hooks/use-global-settings"; +import { IArchiveProps } from "../../../interfaces/IArchiveProps"; +import localization from "../../../localization/localization.json"; +import { Language } from "../../../shared/language"; + +export interface IMenuOptionSelectionUndoProps { + select: string[]; + state: IArchiveProps; + undoSelection: () => void; +} + +export const MenuOptionSelectionUndo: React.FunctionComponent< + IMenuOptionSelectionUndoProps +> = ({ select, state, undoSelection }) => { + const settings = useGlobalSettings(); + const language = new Language(settings.language); + const MessageUndoSelection = language.key(localization.MessageUndoSelection); + + return ( + <> + {select.length === state.fileIndexItems.length ? ( +
  • undoSelection()} + tabIndex={0} + onKeyDown={(event) => { + event.key === "Enter" && undoSelection(); + }} + > + {MessageUndoSelection} +
    • + ) : null} + + ); +}; diff --git a/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx b/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx index 55bc42bb83..091e9a8c22 100644 --- a/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx +++ b/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx @@ -22,6 +22,8 @@ import MoreMenu from "../../atoms/more-menu/more-menu"; import MenuSearchBar from "../../molecules/menu-inline-search/menu-inline-search"; import MenuOptionMoveFolderToTrash from "../../molecules/menu-option-move-folder-to-trash/menu-option-move-folder-to-trash"; import MenuOptionMoveToTrash from "../../molecules/menu-option-move-to-trash/menu-option-move-to-trash"; +import { MenuOptionSelectionAll } from "../../molecules/menu-option-selection-all/menu-option-selection-all"; +import { MenuOptionSelectionUndo } from "../../molecules/menu-option-selection-undo/menu-option-selection-undo"; import { MenuSelectCount } from "../../molecules/menu-select-count/menu-select-count"; import ModalDropAreaFilesAdded from "../../molecules/modal-drop-area-files-added/modal-drop-area-files-added"; import ModalArchiveMkdir from "../modal-archive-mkdir/modal-archive-mkdir"; @@ -52,8 +54,6 @@ const MenuArchive: React.FunctionComponent = memo(() => { "Verder selecteren", "Select further" ); - const MessageSelectAll = language.text("Alles selecteren", "Select all"); - const MessageUndoSelection = language.text("Undo selectie", "Undo selection"); const [hamburgerMenu, setHamburgerMenu] = React.useState(false); const [enableMoreMenu, setEnableMoreMenu] = React.useState(false); @@ -310,32 +310,18 @@ const MenuArchive: React.FunctionComponent = memo(() => { setEnableMoreMenu={setEnableMoreMenu} enableMoreMenu={enableMoreMenu} > - {select.length === state.fileIndexItems.length ? ( -
  • undoSelection()} - tabIndex={0} - onKeyDown={(event) => { - event.key === "Enter" && undoSelection(); - }} - > - {MessageUndoSelection} -
    • - ) : null} - {select.length !== state.fileIndexItems.length ? ( -
  • allSelection()} - tabIndex={0} - onKeyDown={(event) => { - event.key === "Enter" && allSelection(); - }} - > - {MessageSelectAll} -
    • - ) : null} + + + + {select.length >= 1 ? ( <> = ({ // Content const MessageSelectAction = language.text("Selecteer", "Select"); const MessageSelectAll = language.text("Alles selecteren", "Select all"); - const MessageUndoSelection = language.text("Undo selectie", "Undo selection"); const MessageSelectFurther = language.text( "Verder selecteren", "Select further" @@ -187,32 +188,18 @@ export const MenuSearch: React.FunctionComponent = ({ setEnableMoreMenu={setEnableMoreMenu} enableMoreMenu={enableMoreMenu} > - {select.length === state.fileIndexItems.length ? ( -
  • undoSelection()} - tabIndex={0} - onKeyDown={(event) => { - event.key === "Enter" && undoSelection(); - }} - > - {MessageUndoSelection} -
    • - ) : null} - {select.length !== state.fileIndexItems.length ? ( -
  • allSelection()} - onKeyDown={(event) => { - event.key === "Enter" && allSelection(); - }} - > - {MessageSelectAll} -
    • - ) : null} + + + + = ({ // Content const MessageSelectAction = language.text("Selecteer", "Select"); const MessageSelectAll = language.text("Alles selecteren", "Select all"); - const MessageUndoSelection = language.text("Undo selectie", "Undo selection"); const MessageRestoreFromTrash = language.text( "Zet terug uit prullenmand", "Restore from Trash" @@ -190,32 +191,18 @@ const MenuTrash: React.FunctionComponent = ({ setEnableMoreMenu={setEnableMoreMenu} enableMoreMenu={enableMoreMenu} > - {select.length === state.fileIndexItems.length ? ( -
  • undoSelection()} - tabIndex={0} - onKeyDown={(event) => { - event.key === "Enter" && undoSelection(); - }} - > - {MessageUndoSelection} -
    • - ) : null} - {select.length !== state.fileIndexItems.length ? ( -
  • allSelection()} - tabIndex={0} - onKeyDown={(event) => { - event.key === "Enter" && allSelection(); - }} - > - {MessageSelectAll} -
    • - ) : null} + + + +
  • Date: Mon, 6 Nov 2023 11:30:29 +0100 Subject: [PATCH 09/31] add extra tests --- .../archive-sidebar-selection-list.spec.tsx | 60 +++++++++++- .../detail-view-mp4.spec.tsx | 91 ++++++++++++++++++- 2 files changed, 149 insertions(+), 2 deletions(-) diff --git a/starsky/starsky/clientapp/src/components/molecules/archive-sidebar/archive-sidebar-selection-list.spec.tsx b/starsky/starsky/clientapp/src/components/molecules/archive-sidebar/archive-sidebar-selection-list.spec.tsx index b6a1b2da7f..fdc60755e8 100644 --- a/starsky/starsky/clientapp/src/components/molecules/archive-sidebar/archive-sidebar-selection-list.spec.tsx +++ b/starsky/starsky/clientapp/src/components/molecules/archive-sidebar/archive-sidebar-selection-list.spec.tsx @@ -1,4 +1,10 @@ -import { act, render, screen } from "@testing-library/react"; +import { + act, + createEvent, + fireEvent, + render, + screen +} from "@testing-library/react"; import { IFileIndexItem, newIFileIndexItemArray @@ -64,6 +70,58 @@ describe("archive-sidebar-selection-list", () => { component.unmount(); }); + it("toggleSelection keyboard keyDown it hits", () => { + const component = render( + + ); + + const spy = jest.spyOn(URLPath.prototype, "toggleSelection"); + + const selectionList = screen.queryByTestId( + "sidebar-selection-list" + ) as HTMLElement; + const element = selectionList.children[0].querySelector( + ".close" + ) as HTMLElement; + + act(() => { + const inputEvent = createEvent.keyDown(element, { key: "Enter" }); + fireEvent(element, inputEvent); + }); + + expect(spy).toBeCalledTimes(1); + + spy.mockClear(); + + component.unmount(); + }); + + it("toggleSelection keyboard keyDown it ignores", () => { + const component = render( + + ); + + const spy = jest.spyOn(URLPath.prototype, "toggleSelection"); + + const selectionList = screen.queryByTestId( + "sidebar-selection-list" + ) as HTMLElement; + const element = selectionList.children[0].querySelector( + ".close" + ) as HTMLElement; + + act(() => { + const inputEvent = createEvent.keyDown(element, { key: "Tab" }); + fireEvent(element, inputEvent); + }); + + expect(spy).toBeCalledTimes(0); + + spy.mockClear(); + + component.unmount(); + }); + it("allSelection", () => { const component = render( diff --git a/starsky/starsky/clientapp/src/components/organisms/detail-view-media/detail-view-mp4.spec.tsx b/starsky/starsky/clientapp/src/components/organisms/detail-view-media/detail-view-mp4.spec.tsx index 9a33505c16..019d557af7 100644 --- a/starsky/starsky/clientapp/src/components/organisms/detail-view-media/detail-view-mp4.spec.tsx +++ b/starsky/starsky/clientapp/src/components/organisms/detail-view-media/detail-view-mp4.spec.tsx @@ -1,4 +1,10 @@ -import { act, fireEvent, render, screen } from "@testing-library/react"; +import { + act, + createEvent, + fireEvent, + render, + screen +} from "@testing-library/react"; import React from "react"; import { Root, createRoot } from "react-dom/client"; import { IDetailView } from "../../../interfaces/IDetailView"; @@ -36,6 +42,40 @@ describe("DetailViewMp4", () => { component.unmount(); }); + it("keyDown Tab ignore", () => { + const component = render(); + + const playSpy = jest + .spyOn(HTMLMediaElement.prototype, "play") + .mockReset() + .mockImplementationOnce(() => Promise.resolve()); + + const figure = screen.queryByTestId("video") as HTMLElement; + const inputEvent = createEvent.keyDown(figure, { key: "Tab" }); + fireEvent(figure, inputEvent); + + expect(playSpy).toBeCalledTimes(0); + + component.unmount(); + }); + + it("keyDown Enter video resolve", () => { + const component = render(); + + const playSpy = jest + .spyOn(HTMLMediaElement.prototype, "play") + .mockReset() + .mockImplementationOnce(() => Promise.resolve()); + + const figure = screen.queryByTestId("video") as HTMLElement; + const inputEvent = createEvent.keyDown(figure, { key: "Enter" }); + fireEvent(figure, inputEvent); + + expect(playSpy).toBeCalledTimes(1); + + component.unmount(); + }); + it("click to play video rejected", async () => { const component = render(); @@ -56,6 +96,7 @@ describe("DetailViewMp4", () => { await component.unmount(); }); }); + it("click to play video and timeupdate", () => { const component = render(); @@ -79,6 +120,54 @@ describe("DetailViewMp4", () => { component.unmount(); }); + it("keyDown Enter to play video and timeupdate", () => { + const component = render(); + + const playSpy = jest + .spyOn(HTMLMediaElement.prototype, "play") + .mockReset() + .mockImplementationOnce(() => { + return Promise.resolve(); + }); + + expect(screen.queryByTestId("video-time")?.textContent).toBe(""); + + const figure = screen.queryByTestId("video") as HTMLElement; + const inputEvent = createEvent.keyDown(figure, { key: "Enter" }); + fireEvent(figure, inputEvent); + + expect(screen.queryByTestId("video-time")?.textContent).toBe( + "0:00 / 0:00" + ); + + expect(playSpy).toBeCalled(); + + component.unmount(); + }); + + it("keyDown Tab ignored", () => { + const component = render(); + + const playSpy = jest + .spyOn(HTMLMediaElement.prototype, "play") + .mockReset() + .mockImplementationOnce(() => { + return Promise.resolve(); + }); + + expect(screen.queryByTestId("video-time")?.textContent).toBe(""); + + const figure = screen.queryByTestId("video") as HTMLElement; + const inputEvent = createEvent.keyDown(figure, { key: "Tab" }); + fireEvent(figure, inputEvent); + + expect(screen.queryByTestId("video-time")?.textContent).toBe(""); + + expect(playSpy).toBeCalledTimes(0); + + component.unmount(); + }); + it("progress DOM", (done) => { const component = document.createElement("div"); document.body.appendChild(component); // Append the component to the body From b247c8939c44d8c4957ce34b02ab4c14aeabb8bd Mon Sep 17 00:00:00 2001 From: Dion Date: Mon, 6 Nov 2023 11:41:40 +0100 Subject: [PATCH 10/31] tmp --- .../starsky/clientapp/src/containers/detailview/detailview.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/starsky/starsky/clientapp/src/containers/detailview/detailview.tsx b/starsky/starsky/clientapp/src/containers/detailview/detailview.tsx index 99d3c4173d..e0776a4039 100644 --- a/starsky/starsky/clientapp/src/containers/detailview/detailview.tsx +++ b/starsky/starsky/clientapp/src/containers/detailview/detailview.tsx @@ -271,6 +271,8 @@ const DetailView: React.FC = () => { } tabIndex={0} onKeyDown={(event) => { + console.log(event.key); + event.key === "Enter" && new PrevNext( relativeObjects, From 70f864e68c548d968eb57efe1cc13a7c579766c7 Mon Sep 17 00:00:00 2001 From: Dion Date: Mon, 6 Nov 2023 11:57:51 +0100 Subject: [PATCH 11/31] add tests --- starsky/starsky/clientapp/package.json | 2 +- .../src/components/atoms/modal/modal.spec.tsx | 31 +++++++++++++- .../menu-option-move-folder-to-trash.spec.tsx | 42 +++++++++++++++++++ .../containers/detailview/detailview.spec.tsx | 10 +++-- 4 files changed, 79 insertions(+), 6 deletions(-) diff --git a/starsky/starsky/clientapp/package.json b/starsky/starsky/clientapp/package.json index 904a2ef4db..a99212c890 100644 --- a/starsky/starsky/clientapp/package.json +++ b/starsky/starsky/clientapp/package.json @@ -168,7 +168,7 @@ "@typescript-eslint/no-explicit-any": "warn", "@typescript-eslint/ban-types": "warn", "no-case-declarations": "warn", - "react/display-name": "warn", + "react/display-name": "off", "react/prop-types": "warn", "@typescript-eslint/no-loss-of-precision": "warn", "react/react-in-jsx-scope": "off" diff --git a/starsky/starsky/clientapp/src/components/atoms/modal/modal.spec.tsx b/starsky/starsky/clientapp/src/components/atoms/modal/modal.spec.tsx index 09cbf61fba..e5ef8b6fcb 100644 --- a/starsky/starsky/clientapp/src/components/atoms/modal/modal.spec.tsx +++ b/starsky/starsky/clientapp/src/components/atoms/modal/modal.spec.tsx @@ -1,4 +1,9 @@ -import { render, RenderResult, screen } from "@testing-library/react"; +import { + fireEvent, + render, + RenderResult, + screen +} from "@testing-library/react"; import Modal from "./modal"; describe("Modal", () => { @@ -26,7 +31,7 @@ describe("Modal", () => { }; } - it("modal-exit-button", () => { + it("modal-exit-button click", () => { const { handleExit, element } = renderModal(); screen.queryAllByTestId("modal-exit-button")[0].click(); @@ -34,6 +39,28 @@ describe("Modal", () => { element.unmount(); }); + it("modal-exit-button keyDown tab ignores", () => { + const { handleExit, element } = renderModal(); + + const menuOption = screen.queryAllByTestId("modal-exit-button")[0]; + + fireEvent.keyDown(menuOption, { key: "Tab" }); + + expect(handleExit).toBeCalledTimes(0); + element.unmount(); + }); + + it("modal-exit-button keyDown enter", () => { + const { handleExit, element } = renderModal(); + + const menuOption = screen.queryAllByTestId("modal-exit-button")[0]; + + fireEvent.keyDown(menuOption, { key: "Enter" }); + + expect(handleExit).toBeCalledTimes(1); + element.unmount(); + }); + it("modal-bg", () => { const { handleExit, element } = renderModal(); diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-option-move-folder-to-trash/menu-option-move-folder-to-trash.spec.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-option-move-folder-to-trash/menu-option-move-folder-to-trash.spec.tsx index 3e8ef53fdb..ba71c6929d 100644 --- a/starsky/starsky/clientapp/src/components/molecules/menu-option-move-folder-to-trash/menu-option-move-folder-to-trash.spec.tsx +++ b/starsky/starsky/clientapp/src/components/molecules/menu-option-move-folder-to-trash/menu-option-move-folder-to-trash.spec.tsx @@ -41,6 +41,48 @@ describe("MenuOptionMoveFolderToTrash", () => { expect(screen.getByTestId("modal-move-folder-to-trash")).toBeTruthy(); }); + it("opens the modal when the menu option is keyDowned", () => { + jest + .spyOn(ModalMoveFolderToTrash, "default") + .mockImplementationOnce(() => ( +
    + )); + + render( + + ); + + const menuOption = screen.getByTestId("move-folder-to-trash"); + fireEvent.keyDown(menuOption, { key: "Enter" }); + + expect(screen.getByTestId("modal-move-folder-to-trash")).toBeTruthy(); + }); + + it("not opens the modal when the menu option is keyDowned but wrong key so ignored", () => { + jest + .spyOn(ModalMoveFolderToTrash, "default") + .mockImplementationOnce(() => ( +
    + )); + + render( + + ); + + const menuOption = screen.getByTestId("move-folder-to-trash"); + fireEvent.keyDown(menuOption, { key: "Tab" }); + + expect(screen.queryByTestId("modal-move-folder-to-trash")).toBeFalsy(); + }); + it("opens the modal when the menu option is clicked 1", () => { console.log("----------"); diff --git a/starsky/starsky/clientapp/src/containers/detailview/detailview.spec.tsx b/starsky/starsky/clientapp/src/containers/detailview/detailview.spec.tsx index d4f10da451..70cdbc4989 100644 --- a/starsky/starsky/clientapp/src/containers/detailview/detailview.spec.tsx +++ b/starsky/starsky/clientapp/src/containers/detailview/detailview.spec.tsx @@ -1,4 +1,8 @@ -import { fireEvent, render, RenderResult } from "@testing-library/react"; +import { + fireEvent, + render, + RenderResult +} from "@testing-library/react"; import { useState } from "react"; import { act } from "react-dom/test-utils"; import { BrowserRouter } from "react-router-dom"; @@ -139,8 +143,6 @@ describe("DetailView", () => { const image = imgContainer?.querySelector("img") as HTMLImageElement; expect(image).toBeTruthy(); - console.log(image.src); - expect(image.src).toBe( "http://localhost" + new UrlQuery().UrlThumbnailImageLargeOrExtraLarge( @@ -194,6 +196,7 @@ describe("DetailView", () => { state: defaultState }; + // eslint-disable-next-line react/display-name TestComponent = () => ( @@ -513,6 +516,7 @@ describe("DetailView", () => { component.unmount(); }); + it("should update when swipe left", () => { console.log("- - - -"); From 37cc217f5be809f7d5a5bf290a655a397241b805 Mon Sep 17 00:00:00 2001 From: Dion Date: Mon, 6 Nov 2023 13:43:28 +0100 Subject: [PATCH 12/31] add tests --- .../menu-detail-view.spec.tsx | 295 +++++++++++++++++- 1 file changed, 294 insertions(+), 1 deletion(-) diff --git a/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/menu-detail-view.spec.tsx b/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/menu-detail-view.spec.tsx index 088a00c554..58be0a5c2a 100644 --- a/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/menu-detail-view.spec.tsx +++ b/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/menu-detail-view.spec.tsx @@ -328,6 +328,64 @@ describe("MenuDetailView", () => { }); }); + it("export keyDown [menu] Tab so ignore", () => { + const exportModal = jest + .spyOn(ModalExport, "default") + .mockReset() + .mockImplementationOnce(() => { + return <>; + }); + + const component = render( + + + + ); + + const exportButton = component.queryByTestId("export") as HTMLElement; + expect(exportButton).toBeTruthy(); + + act(() => { + fireEvent.keyDown(exportButton, { key: "Tab" }); + }); + + expect(exportModal).toBeCalledTimes(0); + + // to avoid polling afterwards + act(() => { + component.unmount(); + }); + }); + + it("export keyDown [menu] Enter so continue", () => { + const exportModal = jest + .spyOn(ModalExport, "default") + .mockReset() + .mockImplementationOnce(() => { + return <>; + }); + + const component = render( + + + + ); + + const exportButton = component.queryByTestId("export") as HTMLElement; + expect(exportButton).toBeTruthy(); + + act(() => { + fireEvent.keyDown(exportButton, { key: "Enter" }); + }); + + expect(exportModal).toBeCalledTimes(1); + + // to avoid polling afterwards + act(() => { + component.unmount(); + }); + }); + it("labels click .item--labels [menu]", () => { const component = render( @@ -353,6 +411,62 @@ describe("MenuDetailView", () => { }); }); + it("labels keyDown .item--labels [menu] Tab so ignore", () => { + const component = render( + + + + ); + + const labels = component.queryByTestId( + "menu-detail-view-labels" + ) as HTMLElement; + expect(labels).toBeTruthy(); + + act(() => { + fireEvent.keyDown(labels, { key: "Tab" }); + }); + + const urlObject = new URLPath().StringToIUrl(window.location.search); + + expect(urlObject.details).toBeFalsy(); + + // don't keep any menus open + act(() => { + component.unmount(); + // reset afterwards + Router.navigate("/"); + }); + }); + + it("labels keyDown .item--labels [menu] Enter", () => { + const component = render( + + + + ); + + const labels = component.queryByTestId( + "menu-detail-view-labels" + ) as HTMLElement; + expect(labels).toBeTruthy(); + + act(() => { + fireEvent.keyDown(labels, { key: "Enter" }); + }); + + const urlObject = new URLPath().StringToIUrl(window.location.search); + + expect(urlObject.details).toBeTruthy(); + + // don't keep any menus open + act(() => { + component.unmount(); + // reset afterwards + Router.navigate("/"); + }); + }); + it("labels click (in MoreMenu)", () => { const component = render( @@ -427,6 +541,66 @@ describe("MenuDetailView", () => { }); }); + it("[menu detail] move keyDown tab so ignore", () => { + const moveModal = jest + .spyOn(ModalMoveFile, "default") + .mockReset() + .mockImplementationOnce(() => { + return <>; + }); + + const component = render( + + + + ); + + const move = component.queryByTestId("move") as HTMLElement; + expect(move).toBeTruthy(); + + act(() => { + fireEvent.keyDown(move, { key: "Tab" }); + }); + + expect(moveModal).toBeCalledTimes(0); + + // reset afterwards + act(() => { + Router.navigate("/"); + component.unmount(); + }); + }); + + it("[menu detail] move keyDown enter", () => { + const moveModal = jest + .spyOn(ModalMoveFile, "default") + .mockReset() + .mockImplementationOnce(() => { + return <>; + }); + + const component = render( + + + + ); + + const move = component.queryByTestId("move") as HTMLElement; + expect(move).toBeTruthy(); + + act(() => { + fireEvent.keyDown(move, { key: "Enter" }); + }); + + expect(moveModal).toBeCalledTimes(1); + + // reset afterwards + act(() => { + Router.navigate("/"); + component.unmount(); + }); + }); + it("rename click", () => { const renameModal = jest .spyOn(ModalDetailviewRenameFile, "default") @@ -454,13 +628,132 @@ describe("MenuDetailView", () => { }); }); - it("trash click to trash", () => { + it("rename keyDown tab so ignore", () => { + const renameModal = jest + .spyOn(ModalDetailviewRenameFile, "default") + .mockReset() + .mockImplementationOnce(() => { + return <>; + }); + + const component = render( + + + + ); + + const rename = component.queryByTestId("rename") as HTMLElement; + expect(rename).toBeTruthy(); + + act(() => { + fireEvent.keyDown(rename, { key: "Tab" }); + }); + + expect(renameModal).toBeCalledTimes(0); + + act(() => { + component.unmount(); + }); + }); + + it("rename keyDown enter so continue", () => { + const renameModal = jest + .spyOn(ModalDetailviewRenameFile, "default") + .mockReset() + .mockImplementationOnce(() => { + return <>; + }); + + const component = render( + + + + ); + + const rename = component.queryByTestId("rename") as HTMLElement; + expect(rename).toBeTruthy(); + + act(() => { + fireEvent.keyDown(rename, { key: "Enter" }); + }); + + expect(renameModal).toBeCalled(); + + act(() => { + component.unmount(); + }); + }); + + it("trash keyDown to trash so tab so skip", () => { + // spy on fetch + // use this import => import * as FetchPost from '../shared/fetch-post'; + const mockIConnectionDefault: Promise = + Promise.resolve({ statusCode: 200 } as IConnectionDefault); + const spy = jest + .spyOn(FetchPost, "default") + .mockImplementationOnce(() => mockIConnectionDefault); + + const component = render( + + + + ); + + const trash = component.queryByTestId("trash") as HTMLElement; + expect(trash).toBeTruthy(); + + act(() => { + fireEvent.keyDown(trash, { key: "Tab" }); + }); + + expect(spy).toBeCalledTimes(0); + + act(() => { + component.unmount(); + }); + }); + + it("trash keyDown to trash enter continue", () => { + // spy on fetch + // use this import => import * as FetchPost from '../shared/fetch-post'; + const mockIConnectionDefault: Promise = + Promise.resolve({ statusCode: 200 } as IConnectionDefault); + const spy = jest + .spyOn(FetchPost, "default") + .mockImplementationOnce(() => mockIConnectionDefault); + + const component = render( + + + + ); + + const trash = component.queryByTestId("trash") as HTMLElement; + expect(trash).toBeTruthy(); + + act(() => { + fireEvent.keyDown(trash, { key: "Enter" }); + }); + + expect(spy).toBeCalledTimes(1); + expect(spy).toBeCalledWith( + new UrlQuery().UrlMoveToTrashApi(), + "f=%2Ftest%2Fimage.jpg" + ); + + act(() => { + component.unmount(); + }); + }); + + it("trash keyDown to trash", () => { // spy on fetch // use this import => import * as FetchPost from '../shared/fetch-post'; const mockIConnectionDefault: Promise = Promise.resolve({ statusCode: 200 } as IConnectionDefault); const spy = jest .spyOn(FetchPost, "default") + .mockReset() .mockImplementationOnce(() => mockIConnectionDefault); const component = render( From 37e3013b35097f789f3bdd81843f6c1497b275df Mon Sep 17 00:00:00 2001 From: Dion Date: Mon, 6 Nov 2023 13:49:15 +0100 Subject: [PATCH 13/31] nullable --- .../menu-option-selection-undo/menu-option-selection-undo.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx index 5d790a9d23..15c095d223 100644 --- a/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx +++ b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx @@ -5,7 +5,7 @@ import { Language } from "../../../shared/language"; export interface IMenuOptionSelectionUndoProps { select: string[]; - state: IArchiveProps; + state?: IArchiveProps; undoSelection: () => void; } @@ -18,7 +18,7 @@ export const MenuOptionSelectionUndo: React.FunctionComponent< return ( <> - {select.length === state.fileIndexItems.length ? ( + {select.length === state?.fileIndexItems.length ? (
  • Date: Mon, 6 Nov 2023 13:50:00 +0100 Subject: [PATCH 14/31] nullable --- .../menu-option-selection-undo/menu-option-selection-undo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx index 15c095d223..8f475416ca 100644 --- a/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx +++ b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx @@ -18,7 +18,7 @@ export const MenuOptionSelectionUndo: React.FunctionComponent< return ( <> - {select.length === state?.fileIndexItems.length ? ( + {select.length === state?.fileIndexItems?.length ? (
  • Date: Mon, 6 Nov 2023 15:17:03 +0100 Subject: [PATCH 15/31] add some tests --- .../menu-option-selection-all.spec.tsx | 75 +++++++++++++++++++ .../menu-option-selection-all.tsx | 4 +- .../menu-option-selection-undo.spec.tsx | 72 ++++++++++++++++++ 3 files changed, 149 insertions(+), 2 deletions(-) create mode 100644 starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.spec.tsx create mode 100644 starsky/starsky/clientapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.spec.tsx diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.spec.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.spec.tsx new file mode 100644 index 0000000000..8c6ece24f7 --- /dev/null +++ b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.spec.tsx @@ -0,0 +1,75 @@ +import { fireEvent, render } from "@testing-library/react"; +import { MenuOptionSelectionAll } from "./menu-option-selection-all"; + +describe("MenuOptionSelectionAll", () => { + it("renders", () => { + render( + {}} + /> + ); + }); + + it("renders 2", () => { + render( + {}} + /> + ); + }); + + it("keyDown tab skipped", () => { + const allSelection = jest.fn(); + const component = render( + + ); + console.log(component.container.innerHTML); + + const allItem = component.queryByTestId("select-all") as HTMLElement; + expect(allItem).toBeTruthy(); + + fireEvent.keyDown(allItem, { + key: "Tab" + }); + + expect(allSelection).toBeCalledTimes(0); + }); + + it("keyDown enter continue", () => { + const allSelection = jest.fn(); + const component = render( + + ); + + fireEvent.keyDown( + component.queryByTestId("undo-selection") as HTMLElement, + { key: "Enter" } + ); + + expect(allSelection).toBeCalledTimes(1); + }); +}); diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.tsx index 2ca719c4cc..598a1360e3 100644 --- a/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.tsx +++ b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.tsx @@ -5,7 +5,7 @@ import { Language } from "../../../shared/language"; export interface IMenuOptionUndoSelectionProps { select: string[]; - state: IArchiveProps; + state?: IArchiveProps; allSelection: () => void; } @@ -18,7 +18,7 @@ export const MenuOptionSelectionAll: React.FunctionComponent< return ( <> - {select.length !== state.fileIndexItems.length ? ( + {select.length !== state?.fileIndexItems?.length ? (
  • { + it("renders", () => { + render( + {}} + /> + ); + }); + + it("renders 2", () => { + render( + {}} + /> + ); + }); + + it("keyDown tab skipped", () => { + const undoSelection = jest.fn(); + const component = render( + + ); + + fireEvent.keyDown( + component.queryByTestId("undo-selection") as HTMLElement, + { key: "Tab" } + ); + + expect(undoSelection).toBeCalledTimes(0); + }); + + it("keyDown enter continue", () => { + const undoSelection = jest.fn(); + const component = render( + + ); + + fireEvent.keyDown( + component.queryByTestId("undo-selection") as HTMLElement, + { key: "Enter" } + ); + + expect(undoSelection).toBeCalledTimes(1); + }); +}); From 3f89948c503a8214a7d741b79e38524f5843bdb9 Mon Sep 17 00:00:00 2001 From: Dion Date: Mon, 6 Nov 2023 15:20:21 +0100 Subject: [PATCH 16/31] fix tests --- .../menu-option-selection-all.spec.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.spec.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.spec.tsx index 8c6ece24f7..3f30bc42d2 100644 --- a/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.spec.tsx +++ b/starsky/starsky/clientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.spec.tsx @@ -5,7 +5,7 @@ describe("MenuOptionSelectionAll", () => { it("renders", () => { render( {}} /> @@ -15,7 +15,7 @@ describe("MenuOptionSelectionAll", () => { it("renders 2", () => { render( { const allSelection = jest.fn(); const component = render( { allSelection={allSelection} /> ); - console.log(component.container.innerHTML); const allItem = component.queryByTestId("select-all") as HTMLElement; expect(allItem).toBeTruthy(); @@ -55,7 +54,7 @@ describe("MenuOptionSelectionAll", () => { const allSelection = jest.fn(); const component = render( { /> ); - fireEvent.keyDown( - component.queryByTestId("undo-selection") as HTMLElement, - { key: "Enter" } - ); + fireEvent.keyDown(component.queryByTestId("select-all") as HTMLElement, { + key: "Enter" + }); expect(allSelection).toBeCalledTimes(1); }); From 52a725a6d167abe60dc2b7e76987961e64a7e884 Mon Sep 17 00:00:00 2001 From: Dion Date: Mon, 6 Nov 2023 15:39:50 +0100 Subject: [PATCH 17/31] add tests --- .../menu-select-count.spec.tsx | 80 +++++++++++++++++++ .../menu-select-count/menu-select-count.tsx | 1 + .../organisms/menu-trash/menu-trash.spec.tsx | 35 +++++++- 3 files changed, 114 insertions(+), 2 deletions(-) create mode 100644 starsky/starsky/clientapp/src/components/molecules/menu-select-count/menu-select-count.spec.tsx diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-select-count/menu-select-count.spec.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-select-count/menu-select-count.spec.tsx new file mode 100644 index 0000000000..8f457035d8 --- /dev/null +++ b/starsky/starsky/clientapp/src/components/molecules/menu-select-count/menu-select-count.spec.tsx @@ -0,0 +1,80 @@ +import { fireEvent, render } from "@testing-library/react"; +import { MenuSelectCount } from "./menu-select-count"; + +describe("MenuOptionSelectionAll", () => { + it("renders", () => { + render( + {}} /> + ); + }); + + it("selected-0 keyDown tab skipped", () => { + const removeSidebarSelection = jest.fn(); + const component = render( + + ); + + const allItem = component.queryByTestId("selected-0") as HTMLElement; + expect(allItem).toBeTruthy(); + + fireEvent.keyDown(allItem, { + key: "Tab" + }); + + expect(removeSidebarSelection).toBeCalledTimes(0); + }); + + it("selected-0 keyDown enter continue", () => { + const removeSidebarSelection = jest.fn(); + const component = render( + + ); + + fireEvent.keyDown(component.queryByTestId("selected-0") as HTMLElement, { + key: "Enter" + }); + + expect(removeSidebarSelection).toBeCalledTimes(1); + }); + + it("selected-1 keyDown tab skipped", () => { + const removeSidebarSelection = jest.fn(); + const component = render( + + ); + + const allItem = component.queryByTestId("selected-1") as HTMLElement; + expect(allItem).toBeTruthy(); + + fireEvent.keyDown(allItem, { + key: "Tab" + }); + + expect(removeSidebarSelection).toBeCalledTimes(0); + }); + + it("selected-1 keyDown enter continue", () => { + const removeSidebarSelection = jest.fn(); + const component = render( + + ); + + fireEvent.keyDown(component.queryByTestId("selected-1") as HTMLElement, { + key: "Enter" + }); + + expect(removeSidebarSelection).toBeCalledTimes(1); + }); +}); diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-select-count/menu-select-count.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-select-count/menu-select-count.tsx index 078a645180..f568839141 100644 --- a/starsky/starsky/clientapp/src/components/molecules/menu-select-count/menu-select-count.tsx +++ b/starsky/starsky/clientapp/src/components/molecules/menu-select-count/menu-select-count.tsx @@ -34,6 +34,7 @@ export const MenuSelectCount: React.FunctionComponent< {MessageNoneSelected} ) : null} + {select && select.length >= 1 ? ( )} - {isInputEnabled && select.length !== 0 ? ( + {inputEnabled && select.length !== 0 ? (
    • ); }; diff --git a/starsky/starsky/clientapp/src/components/molecules/color-class-filter/color-class-filter.tsx b/starsky/starsky/clientapp/src/components/molecules/color-class-filter/color-class-filter.tsx index f2076cf21a..b6c46359fb 100644 --- a/starsky/starsky/clientapp/src/components/molecules/color-class-filter/color-class-filter.tsx +++ b/starsky/starsky/clientapp/src/components/molecules/color-class-filter/color-class-filter.tsx @@ -51,20 +51,20 @@ const ColorClassFilter: React.FunctionComponent = memo( collectionsCount: props.itemsCount ? props.itemsCount : 0 }; } - const [colorClassUsage, setIsColorClassUsage] = useState( + const [colorClassUsage, setColorClassUsage] = useState( props.colorClassUsage ); useEffect(() => { - setIsColorClassUsage(state.colorClassUsage); + setColorClassUsage(state.colorClassUsage); // it should not update when the prop are changing }, [state.colorClassUsage]); - const [colorClassActiveList, setIsColorClassActiveList] = useState( + const [colorClassActiveList, setColorClassActiveList] = useState( props.colorClassActiveList ); useEffect(() => { - setIsColorClassActiveList(state.colorClassActiveList); + setColorClassActiveList(state.colorClassActiveList); // it should not update when the prop are changing }, [state.colorClassActiveList]); diff --git a/starsky/starsky/clientapp/src/components/molecules/list-image-view-select-container/list-image-view-select-container.tsx b/starsky/starsky/clientapp/src/components/molecules/list-image-view-select-container/list-image-view-select-container.tsx index 4144fdafc7..6ce3164116 100644 --- a/starsky/starsky/clientapp/src/components/molecules/list-image-view-select-container/list-image-view-select-container.tsx +++ b/starsky/starsky/clientapp/src/components/molecules/list-image-view-select-container/list-image-view-select-container.tsx @@ -52,7 +52,7 @@ const ListImageViewSelectContainer: React.FunctionComponent = } const preloader = ; - const [isPreloaderState, setPreloaderState] = React.useState(false); + const [preloaderState, setPreloaderState] = React.useState(false); function preloaderStateOnClick(event: React.MouseEvent) { // Command (mac) or ctrl click means open new window @@ -105,7 +105,7 @@ const ListImageViewSelectContainer: React.FunctionComponent = data-filepath={item.filePath} > {/* for slow connections show preloader icon */} - {isPreloaderState ? preloader : null} + {preloaderState ? preloader : null} {/* the a href to the child page */} = memo(({ isReadOnly, subPath, setEnableMoreMenu }) => { - const [isModalMoveFolderToTrashOpen, setModalMoveFolderToTrashOpen] = + const [modalMoveFolderToTrashOpen, setModalMoveFolderToTrashOpen] = useState(false); return ( <> {/* Modal move folder to trash */} - {isModalMoveFolderToTrashOpen ? ( + {modalMoveFolderToTrashOpen ? ( { - setModalMoveFolderToTrashOpen(!isModalMoveFolderToTrashOpen); + setModalMoveFolderToTrashOpen(!modalMoveFolderToTrashOpen); }} subPath={subPath} setIsLoading={() => {}} - isOpen={isModalMoveFolderToTrashOpen} + isOpen={modalMoveFolderToTrashOpen} /> ) : null} { const { state } = React.useContext(DetailViewContext); /** update to make useEffect simpler te read */ - const [downloadApi, setDownloadPhotoApi] = useState( + const [downloadPhotoApi, setDownloadPhotoApi] = useState( new UrlQuery().UrlDownloadPhotoApi( new URLPath().encodeURI( new URLPath().getFilePath(history.location.search) @@ -102,8 +102,8 @@ const DetailViewMp4: React.FunctionComponent = memo(() => { const scrubberRef = useRef(null); const timeRef = useRef(null); - const [isPaused, setPaused] = useState(true); - const [isStarted, setStarted] = useState(false); + const [paused, setPaused] = useState(true); + const [started, setStarted] = useState(false); const videoRefCurrent = videoRef.current; useEffect(() => { @@ -136,7 +136,7 @@ const DetailViewMp4: React.FunctionComponent = memo(() => { setStarted(true); - if (isPaused) { + if (paused) { const promise = videoRef.current.play(); promise?.catch(() => { @@ -232,7 +232,7 @@ const DetailViewMp4: React.FunctionComponent = memo(() => { {!isError ? (
    { event.key === "Enter" && playPause(); event.key === "Enter" && timeUpdate(); @@ -248,11 +248,11 @@ const DetailViewMp4: React.FunctionComponent = memo(() => { controls={false} preload="metadata" > - +
    diff --git a/starsky/starsky/clientapp/src/components/organisms/detail-view-sidebar/detail-view-sidebar.tsx b/starsky/starsky/clientapp/src/components/organisms/detail-view-sidebar/detail-view-sidebar.tsx index fec6466ff5..a556de2119 100644 --- a/starsky/starsky/clientapp/src/components/organisms/detail-view-sidebar/detail-view-sidebar.tsx +++ b/starsky/starsky/clientapp/src/components/organisms/detail-view-sidebar/detail-view-sidebar.tsx @@ -114,7 +114,7 @@ const DetailViewSidebar: React.FunctionComponent = setCollections(collectionsList); } // For the display - const [isFormEnabled, setFormEnabled] = React.useState(true); + const [formEnabled, setFormEnabled] = React.useState(true); useEffect(() => { if (!fileIndexItem.status) return; switch (fileIndexItem.status) { @@ -226,7 +226,7 @@ const DetailViewSidebar: React.FunctionComponent = data-test="detailview-sidebar-tags" maxlength={1024} reference={tagsReference} - contentEditable={isFormEnabled} + contentEditable={formEnabled} > {fileIndexItem.tags} @@ -242,7 +242,7 @@ const DetailViewSidebar: React.FunctionComponent = maxlength={1024} name="description" reference={descriptionReference} - contentEditable={isFormEnabled} + contentEditable={formEnabled} > {fileIndexItem.description} @@ -252,7 +252,7 @@ const DetailViewSidebar: React.FunctionComponent = name="title" maxlength={1024} reference={titleReference} - contentEditable={isFormEnabled} + contentEditable={formEnabled} > {fileIndexItem.title} @@ -281,7 +281,7 @@ const DetailViewSidebar: React.FunctionComponent = }} filePath={fileIndexItem.filePath} currentColorClass={fileIndexItem.colorClass} - isEnabled={isFormEnabled} + isEnabled={formEnabled} />
    {fileIndexItem.latitude || @@ -298,7 +298,7 @@ const DetailViewSidebar: React.FunctionComponent =
    @@ -342,7 +342,7 @@ const DetailViewSidebar: React.FunctionComponent = = memo(() => { useHotKeys({ key: "a", ctrlKeyOrMetaKey: true }, allSelection, []); /* only update when the state is changed */ - const [isReadOnly, setReadOnly] = React.useState(state.isReadOnly); + const [readOnly, setReadOnly] = React.useState(state.isReadOnly); useEffect(() => { setReadOnly(state.isReadOnly); }, [state.isReadOnly]); @@ -107,7 +107,7 @@ const MenuArchive: React.FunctionComponent = memo(() => { ); const UploadMenuItem = () => { - if (isReadOnly) + if (readOnly) return (
  • Upload @@ -169,7 +169,7 @@ const MenuArchive: React.FunctionComponent = memo(() => { ) : null} {/* Modal new directory */} - {isModalMkdirOpen && !isReadOnly ? ( + {isModalMkdirOpen && !readOnly ? ( = memo(() => { /> ) : null} - {isModalRenameFolder && !isReadOnly && state.subPath !== "/" ? ( + {isModalRenameFolder && !readOnly && state.subPath !== "/" ? ( = memo(() => { enableMoreMenu={enableMoreMenu} >
  • setModalMkdirOpen(!isModalMkdirOpen)} @@ -281,7 +281,7 @@ const MenuArchive: React.FunctionComponent = memo(() => { {state ? : null}
  • = memo(() => {
    • = memo(() => { dispatch={dispatch} select={select} setSelect={setSelect} - isReadOnly={isReadOnly} + isReadOnly={readOnly} /> ) : null} diff --git a/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/menu-detail-view.tsx b/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/menu-detail-view.tsx index 925b3d8234..26a38b850b 100644 --- a/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/menu-detail-view.tsx +++ b/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/menu-detail-view.tsx @@ -95,7 +95,7 @@ const MenuDetailView: React.FunctionComponent = ({ const history = useLocation(); - const [isDetails, setDetails] = React.useState( + const [details, setDetails] = React.useState( new URLPath().StringToIUrl(history.location.search).details ); useEffect(() => { @@ -127,7 +127,7 @@ const MenuDetailView: React.FunctionComponent = ({ function toggleLabels() { const urlObject = new URLPath().StringToIUrl(history.location.search); - urlObject.details = !isDetails; + urlObject.details = !details; setDetails(urlObject.details); setRecentEdited(false); // disable to avoid animation history.navigate(new URLPath().IUrlToString(urlObject), { replace: true }); @@ -384,7 +384,7 @@ const MenuDetailView: React.FunctionComponent = ({ setModalPublishOpen={setModalPublishOpen} /> -
    +
    {/* in directory state aka no search */} {!isSearchQuery ? ( @@ -448,7 +448,7 @@ const MenuDetailView: React.FunctionComponent = ({ > Download - {!isDetails ? ( + {!details ? (
  • = ({
    • - {isDetails ? ( + {details ? (
    = () => { }, [state.relativeObjects]); // boolean to get the details-side menu on or off - const [isDetails, setDetails] = React.useState( + const [details, setDetails] = React.useState( new URLPath().StringToIUrl(history?.location?.search)?.details ); useEffect(() => { @@ -121,7 +121,7 @@ const DetailView: React.FC = () => { // toggle details side menu function toggleLabels() { const urlObject = new URLPath().StringToIUrl(history.location.search); - urlObject.details = !isDetails; + urlObject.details = !details; setDetails(urlObject.details); history.navigate(new URLPath().IUrlToString(urlObject), { replace: true }); } @@ -196,7 +196,7 @@ const DetailView: React.FC = () => { return ( <> -
    +
    {isLoading ? ( = () => { }} /> - {isDetails && state.fileIndexItem.status ? ( + {details && state.fileIndexItem.status ? (