From 50878bf3302575b48e432f94b41136db18d72fe2 Mon Sep 17 00:00:00 2001 From: Agata Date: Wed, 16 Oct 2024 12:26:52 +0200 Subject: [PATCH 1/4] Import Github modal without reloading --- .../website/src/components/layout/index.tsx | 45 ++++++++++--------- .../github-import-menu-item.tsx | 8 +++- .../src/github/github-export-form/modal.tsx | 9 ++-- .../src/github/github-import-form/modal.tsx | 33 +++++++++----- .../playground/website/src/github/utils.tsx | 15 +++++++ 5 files changed, 70 insertions(+), 40 deletions(-) create mode 100644 packages/playground/website/src/github/utils.tsx diff --git a/packages/playground/website/src/components/layout/index.tsx b/packages/playground/website/src/components/layout/index.tsx index 67770be2be..9a988736be 100644 --- a/packages/playground/website/src/components/layout/index.tsx +++ b/packages/playground/website/src/components/layout/index.tsx @@ -166,6 +166,29 @@ function Modals(blueprint: Blueprint) { return ; } else if (currentModal === 'start-error') { return ; + } else if (currentModal === 'github-import-modal') { + return { + setGithubExportValues({ + repoUrl: url, + prNumber: pr?.toString(), + toPathInRepo: path, + prAction: pr ? 'update' : 'create', + contentType, + plugin: pluginOrThemeName, + theme: pluginOrThemeName, + }); + setGithubExportFiles(files); + }} + />; } return ( @@ -175,27 +198,7 @@ function Modals(blueprint: Blueprint) { ) : ( '' )} - { - setGithubExportValues({ - repoUrl: url, - prNumber: pr?.toString(), - toPathInRepo: path, - prAction: pr ? 'update' : 'create', - contentType, - plugin: pluginOrThemeName, - theme: pluginOrThemeName, - }); - setGithubExportFiles(files); - }} - /> + void; disabled?: boolean; } export function GithubImportMenuItem({ onClose, disabled }: Props) { + const dispatch: PlaygroundDispatch = useDispatch(); + return ( { - openModal(); + dispatch(setActiveModal('github-import-modal')); onClose(); }} > diff --git a/packages/playground/website/src/github/github-export-form/modal.tsx b/packages/playground/website/src/github/github-export-form/modal.tsx index e85cb08e8e..feb0b90047 100644 --- a/packages/playground/website/src/github/github-export-form/modal.tsx +++ b/packages/playground/website/src/github/github-export-form/modal.tsx @@ -3,6 +3,7 @@ import { signal } from '@preact/signals-react'; import Modal, { defaultStyles } from '../../components/modal'; import GitHubExportForm, { GitHubExportFormProps } from './form'; import { usePlaygroundClient } from '../../lib/use-playground-client'; +import { addURLState, removeURLState } from '../utils'; const query = new URLSearchParams(window.location.search); export const isGitHubExportModalOpen = signal( @@ -18,17 +19,13 @@ interface GithubExportModalProps { export function closeModal() { isGitHubExportModalOpen.value = false; // Remove ?state=github-export from the URL. - const url = new URL(window.location.href); - url.searchParams.delete('state'); - window.history.replaceState({}, '', url.href); + removeURLState(); } export function openModal() { isGitHubExportModalOpen.value = true; // Add a ?state=github-export to the URL so that the user can refresh the page // and still see the modal. - const url = new URL(window.location.href); - url.searchParams.set('state', 'github-export'); - window.history.replaceState({}, '', url.href); + addURLState('github-export'); } export function GithubExportModal({ onExported, diff --git a/packages/playground/website/src/github/github-import-form/modal.tsx b/packages/playground/website/src/github/github-import-form/modal.tsx index 6562695efb..5e2fb2d1f6 100644 --- a/packages/playground/website/src/github/github-import-form/modal.tsx +++ b/packages/playground/website/src/github/github-import-form/modal.tsx @@ -2,49 +2,60 @@ import { signal } from '@preact/signals-react'; import Modal, { defaultStyles } from '../../components/modal'; import GitHubImportForm, { GitHubImportFormProps } from './form'; import { usePlaygroundClient } from '../../lib/use-playground-client'; +import { addURLState, removeURLState } from '../utils'; +import { useState } from 'react'; +import { setActiveModal } from '../../lib/state/redux/slice-ui'; +import { PlaygroundDispatch } from '../../lib/state/redux/store'; +import { useDispatch } from 'react-redux'; const query = new URLSearchParams(window.location.search); export const isGitHubModalOpen = signal(query.get('state') === 'github-import'); interface GithubImportModalProps { + defaultOpen?: boolean; onImported?: GitHubImportFormProps['onImported']; } export function closeModal() { isGitHubModalOpen.value = false; // Remove ?state=github-import from the URL. - const url = new URL(window.location.href); - url.searchParams.delete('state'); - window.history.replaceState({}, '', url.href); + removeURLState(); } export function openModal() { isGitHubModalOpen.value = true; // Add a ?state=github-import to the URL so that the user can refresh the page // and still see the modal. - const url = new URL(window.location.href); - url.searchParams.set('state', 'github-import'); - window.history.replaceState({}, '', url.href); + addURLState('github-import'); } -export function GithubImportModal({ onImported }: GithubImportModalProps) { +export function GithubImportModal({ defaultOpen, onImported }: GithubImportModalProps) { + const dispatch: PlaygroundDispatch = useDispatch(); const playground = usePlaygroundClient(); + const [isOpen, toggleOpen] = useState(defaultOpen || isGitHubModalOpen.value); + + const handleOnClose = () => { + toggleOpen(false); + closeModal(); + dispatch(setActiveModal(null)); + } + return ( { playground!.goTo('/'); // eslint-disable-next-line no-alert alert( 'Import finished! Your Playground site has been updated.' ); - closeModal(); + handleOnClose(); onImported?.(details); }} /> diff --git a/packages/playground/website/src/github/utils.tsx b/packages/playground/website/src/github/utils.tsx new file mode 100644 index 0000000000..ca765b5a62 --- /dev/null +++ b/packages/playground/website/src/github/utils.tsx @@ -0,0 +1,15 @@ + +export function removeURLState() { + // Remove ?state=github-xxx from the URL. + const url = new URL(window.location.href); + url.searchParams.delete('state'); + window.history.pushState({}, '', url.toString()); +} + +export function addURLState(name: string) { + // Add a ?state=github-xxx to the URL so that the user can refresh the page + // and still see the modal. + const url = new URL(window.location.href); + url.searchParams.set('state', name); + window.history.pushState({}, '', url.toString()); +} From a62d8624b11f28c11dc6699982f15defed2fcc65 Mon Sep 17 00:00:00 2001 From: Agata Date: Wed, 16 Oct 2024 13:00:44 +0200 Subject: [PATCH 2/4] Export Github without reloading --- .../website/src/components/layout/index.tsx | 25 ++++++++++--------- .../github-export-menu-item.tsx | 7 ++++-- .../github-import-menu-item.tsx | 1 - .../src/github/github-export-form/modal.tsx | 19 +++++++++++--- .../src/github/github-import-form/modal.tsx | 2 -- 5 files changed, 34 insertions(+), 20 deletions(-) diff --git a/packages/playground/website/src/components/layout/index.tsx b/packages/playground/website/src/components/layout/index.tsx index 9a988736be..4419f05a08 100644 --- a/packages/playground/website/src/components/layout/index.tsx +++ b/packages/playground/website/src/components/layout/index.tsx @@ -189,6 +189,19 @@ function Modals(blueprint: Blueprint) { setGithubExportFiles(files); }} />; + } else if (currentModal === 'github-export-modal') { + return { + setGithubExportValues(formValues); + setGithubExportFiles(undefined); + }} + /> } return ( @@ -198,18 +211,6 @@ function Modals(blueprint: Blueprint) { ) : ( '' )} - - { - setGithubExportValues(formValues); - setGithubExportFiles(undefined); - }} - /> ); } diff --git a/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx b/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx index 47063006b6..098fcbfcba 100644 --- a/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx +++ b/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx @@ -1,17 +1,20 @@ import { MenuItem } from '@wordpress/components'; -import { openModal } from '../../github/github-export-form/modal'; +import { setActiveModal } from '../../lib/state/redux/slice-ui'; +import { PlaygroundDispatch } from '../../lib/state/redux/store'; +import { useDispatch } from 'react-redux'; interface Props { onClose: () => void; disabled?: boolean; } export function GithubExportMenuItem({ onClose, disabled }: Props) { + const dispatch: PlaygroundDispatch = useDispatch(); return ( { - openModal(); + dispatch(setActiveModal('github-export-modal')); onClose(); }} > diff --git a/packages/playground/website/src/components/toolbar-buttons/github-import-menu-item.tsx b/packages/playground/website/src/components/toolbar-buttons/github-import-menu-item.tsx index c9726361a7..96b492a4ad 100644 --- a/packages/playground/website/src/components/toolbar-buttons/github-import-menu-item.tsx +++ b/packages/playground/website/src/components/toolbar-buttons/github-import-menu-item.tsx @@ -9,7 +9,6 @@ interface Props { } export function GithubImportMenuItem({ onClose, disabled }: Props) { const dispatch: PlaygroundDispatch = useDispatch(); - return ( { + toggleOpen(false); + closeModal(); + dispatch(setActiveModal(null)); + } return ( { toggleOpen(false); closeModal(); dispatch(setActiveModal(null)); } - return ( Date: Wed, 16 Oct 2024 13:23:21 +0200 Subject: [PATCH 3/4] keep slug opens modal functionality --- .../website/src/components/layout/index.tsx | 72 +++++++++---------- .../src/github/github-export-form/modal.tsx | 6 +- .../src/github/github-import-form/modal.tsx | 5 +- 3 files changed, 45 insertions(+), 38 deletions(-) diff --git a/packages/playground/website/src/components/layout/index.tsx b/packages/playground/website/src/components/layout/index.tsx index 4419f05a08..d20c076367 100644 --- a/packages/playground/website/src/components/layout/index.tsx +++ b/packages/playground/website/src/components/layout/index.tsx @@ -166,42 +166,6 @@ function Modals(blueprint: Blueprint) { return ; } else if (currentModal === 'start-error') { return ; - } else if (currentModal === 'github-import-modal') { - return { - setGithubExportValues({ - repoUrl: url, - prNumber: pr?.toString(), - toPathInRepo: path, - prAction: pr ? 'update' : 'create', - contentType, - plugin: pluginOrThemeName, - theme: pluginOrThemeName, - }); - setGithubExportFiles(files); - }} - />; - } else if (currentModal === 'github-export-modal') { - return { - setGithubExportValues(formValues); - setGithubExportFiles(undefined); - }} - /> } return ( @@ -211,6 +175,42 @@ function Modals(blueprint: Blueprint) { ) : ( '' )} + + { + setGithubExportValues({ + repoUrl: url, + prNumber: pr?.toString(), + toPathInRepo: path, + prAction: pr ? 'update' : 'create', + contentType, + plugin: pluginOrThemeName, + theme: pluginOrThemeName, + }); + setGithubExportFiles(files); + }} + /> + + { + setGithubExportValues(formValues); + setGithubExportFiles(undefined); + }} + /> ); } diff --git a/packages/playground/website/src/github/github-export-form/modal.tsx b/packages/playground/website/src/github/github-export-form/modal.tsx index 5da7a016a8..2242448c66 100644 --- a/packages/playground/website/src/github/github-export-form/modal.tsx +++ b/packages/playground/website/src/github/github-export-form/modal.tsx @@ -6,8 +6,9 @@ import { usePlaygroundClient } from '../../lib/use-playground-client'; import { addURLState, removeURLState } from '../utils'; import { PlaygroundDispatch } from '../../lib/state/redux/store'; import { useDispatch } from 'react-redux'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { setActiveModal } from '../../lib/state/redux/slice-ui'; +import { isGitHubModalOpen } from '../github-import-form'; const query = new URLSearchParams(window.location.search); export const isGitHubExportModalOpen = signal( @@ -42,6 +43,9 @@ export function GithubExportModal({ const dispatch: PlaygroundDispatch = useDispatch(); const playground = usePlaygroundClient(); const [isOpen, toggleOpen] = useState(defaultOpen || isGitHubExportModalOpen.value); + useEffect(() => { + toggleOpen(defaultOpen || isGitHubExportModalOpen.value); + }, [defaultOpen, isGitHubExportModalOpen.value]); const handleOnClose = () => { toggleOpen(false); closeModal(); diff --git a/packages/playground/website/src/github/github-import-form/modal.tsx b/packages/playground/website/src/github/github-import-form/modal.tsx index 20b0b02936..a4eb2134a6 100644 --- a/packages/playground/website/src/github/github-import-form/modal.tsx +++ b/packages/playground/website/src/github/github-import-form/modal.tsx @@ -3,7 +3,7 @@ import Modal, { defaultStyles } from '../../components/modal'; import GitHubImportForm, { GitHubImportFormProps } from './form'; import { usePlaygroundClient } from '../../lib/use-playground-client'; import { addURLState, removeURLState } from '../utils'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { setActiveModal } from '../../lib/state/redux/slice-ui'; import { PlaygroundDispatch } from '../../lib/state/redux/store'; import { useDispatch } from 'react-redux'; @@ -30,6 +30,9 @@ export function GithubImportModal({ defaultOpen, onImported }: GithubImportModal const dispatch: PlaygroundDispatch = useDispatch(); const playground = usePlaygroundClient(); const [isOpen, toggleOpen] = useState(defaultOpen || isGitHubModalOpen.value); + useEffect(() => { + toggleOpen(defaultOpen || isGitHubModalOpen.value); + }, [defaultOpen, isGitHubModalOpen.value]); const handleOnClose = () => { toggleOpen(false); closeModal(); From ab78d44607fc8bfa942184bc4e596aab70ed4ce6 Mon Sep 17 00:00:00 2001 From: Agata Date: Wed, 16 Oct 2024 13:33:51 +0200 Subject: [PATCH 4/4] lint --- .../playground/website/src/github/github-export-form/modal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/playground/website/src/github/github-export-form/modal.tsx b/packages/playground/website/src/github/github-export-form/modal.tsx index 2242448c66..f517bb6f85 100644 --- a/packages/playground/website/src/github/github-export-form/modal.tsx +++ b/packages/playground/website/src/github/github-export-form/modal.tsx @@ -8,7 +8,6 @@ import { PlaygroundDispatch } from '../../lib/state/redux/store'; import { useDispatch } from 'react-redux'; import { useEffect, useState } from 'react'; import { setActiveModal } from '../../lib/state/redux/slice-ui'; -import { isGitHubModalOpen } from '../github-import-form'; const query = new URLSearchParams(window.location.search); export const isGitHubExportModalOpen = signal(