From 0140d78f75801ba890ee12ae2a775f352af15dac Mon Sep 17 00:00:00 2001 From: Mohan Raj Date: Sun, 26 Mar 2023 11:53:01 +0100 Subject: [PATCH] organised components --- src/components/SdkModal.tsx | 72 ------------------- src/components/{ => common}/Clipboard.tsx | 0 src/components/{ => common}/Snackbar.jsx | 0 .../{LineItem.tsx => flag/FlagRow.tsx} | 12 ++-- src/components/{Layout.tsx => flag/Flags.tsx} | 8 +-- src/components/{ => flag}/Header.tsx | 0 src/components/{ => flag}/SubmitControls.tsx | 6 +- .../{ => flag}/__tests__/Header.test.js | 0 src/components/{ => modals}/DeleteModal.tsx | 2 +- src/components/modals/SdkModal.tsx | 25 +++++++ .../__tests__/DeleteModal.test.js | 0 src/components/snippets/JsSnippet.tsx | 34 +++++++++ src/components/snippets/PhpSnippet.tsx | 28 ++++++++ src/components/{ => snippets}/Snippet.tsx | 0 src/components/{ => snippets}/TsSupport.tsx | 4 +- src/index.ts | 1 + src/settings.tsx | 4 +- 17 files changed, 106 insertions(+), 90 deletions(-) delete mode 100644 src/components/SdkModal.tsx rename src/components/{ => common}/Clipboard.tsx (100%) rename src/components/{ => common}/Snackbar.jsx (100%) rename src/components/{LineItem.tsx => flag/FlagRow.tsx} (95%) rename src/components/{Layout.tsx => flag/Flags.tsx} (91%) rename src/components/{ => flag}/Header.tsx (100%) rename src/components/{ => flag}/SubmitControls.tsx (93%) rename src/components/{ => flag}/__tests__/Header.test.js (100%) rename src/components/{ => modals}/DeleteModal.tsx (96%) create mode 100644 src/components/modals/SdkModal.tsx rename src/components/{ => modals}/__tests__/DeleteModal.test.js (100%) create mode 100644 src/components/snippets/JsSnippet.tsx create mode 100644 src/components/snippets/PhpSnippet.tsx rename src/components/{ => snippets}/Snippet.tsx (100%) rename src/components/{ => snippets}/TsSupport.tsx (90%) diff --git a/src/components/SdkModal.tsx b/src/components/SdkModal.tsx deleted file mode 100644 index 254b20e..0000000 --- a/src/components/SdkModal.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { Modal } from '@wordpress/components'; -import Snippet from './Snippet'; -import { useMemo } from '@wordpress/element'; -import { Flag } from '../../types'; -import { __ } from '@wordpress/i18n'; -import TsSupport from './TsSupport'; -import Clipboard from './Clipboard'; - -interface SdkModalProps { - item: Flag; - closeSdkModal: () => void; -} - -const SdkModal = ({ item, closeSdkModal }: SdkModalProps): JSX.Element => { - const jsSnippet = useMemo(() => { - return `import domReady from '@wordpress/dom-ready'; -domReady(function () { - if ( - typeof window?.mrFeatureFlags !== 'undefined' && - window.mrFeatureFlags.isEnabled('Menus') - ) { - // js code goes here... - } -});`; - }, [item.name]); - - const phpSnippet = useMemo(() => { - return `if ( class_exists( 'MR\\FeatureFlags\\Utils' ) && MR\\FeatureFlags\\Utils::is_enabled( '${item.name}' ) ) { - // php code goes here... -}`; - }, [item.name]); - - return ( - -
-

{__('PHP Snippet', 'mr-feature-flags')}

- - -
-
-

{__('JavaScript Snippet', 'mr-feature-flags')}

- - -
-
- -
- - ); -}; - -export default SdkModal; diff --git a/src/components/Clipboard.tsx b/src/components/common/Clipboard.tsx similarity index 100% rename from src/components/Clipboard.tsx rename to src/components/common/Clipboard.tsx diff --git a/src/components/Snackbar.jsx b/src/components/common/Snackbar.jsx similarity index 100% rename from src/components/Snackbar.jsx rename to src/components/common/Snackbar.jsx diff --git a/src/components/LineItem.tsx b/src/components/flag/FlagRow.tsx similarity index 95% rename from src/components/LineItem.tsx rename to src/components/flag/FlagRow.tsx index 56336f5..e1064c9 100644 --- a/src/components/LineItem.tsx +++ b/src/components/flag/FlagRow.tsx @@ -7,11 +7,11 @@ import { BaseControl, } from '@wordpress/components'; import { useState, useRef, useEffect } from '@wordpress/element'; -import { Flag } from '../../types'; -import DeleteModal from './DeleteModal'; -import SdkModal from './SdkModal'; +import { Flag } from '../../../types'; +import DeleteModal from '../modals/DeleteModal'; +import SdkModal from '../modals/SdkModal'; import { __ } from '@wordpress/i18n'; -import { checkIfFlagExists } from '../utils'; +import { checkIfFlagExists } from '../../utils'; interface LineItemProps { flags: Flag[]; @@ -20,7 +20,7 @@ interface LineItemProps { setDisableSave: (toggle: boolean) => void; } -const LineItem = ({ +const FlagRow = ({ flags, setFlags, item, @@ -200,4 +200,4 @@ const LineItem = ({ ); }; -export default LineItem; +export default FlagRow; diff --git a/src/components/Layout.tsx b/src/components/flag/Flags.tsx similarity index 91% rename from src/components/Layout.tsx rename to src/components/flag/Flags.tsx index 7400645..fec3066 100644 --- a/src/components/Layout.tsx +++ b/src/components/flag/Flags.tsx @@ -1,9 +1,9 @@ import { useState, useEffect } from '@wordpress/element'; import { Spinner } from '@wordpress/components'; -import LineItem from './LineItem'; -import { Flag } from '../../types'; +import FlagRow from './FlagRow'; +import { Flag } from '../../../types'; import SubmitControls from './SubmitControls'; -import { getFlags } from '../utils'; +import { getFlags } from '../../utils'; import Header from './Header'; import { __ } from '@wordpress/i18n'; @@ -41,7 +41,7 @@ const Layout = (): JSX.Element => { ) : ( flags?.map((flag: Flag) => { return ( - void; item: Flag; diff --git a/src/components/modals/SdkModal.tsx b/src/components/modals/SdkModal.tsx new file mode 100644 index 0000000..f86d330 --- /dev/null +++ b/src/components/modals/SdkModal.tsx @@ -0,0 +1,25 @@ +import { Modal } from '@wordpress/components'; +import { Flag } from '../../../types'; +import TsSupport from '../snippets/TsSupport'; +import PhpSnippet from '../snippets/PhpSnippet'; +import JsSnippet from '../snippets/JsSnippet'; + +interface SdkModalProps { + item: Flag; + closeSdkModal: () => void; +} + +const SdkModal = ({ item, closeSdkModal }: SdkModalProps): JSX.Element => { + return ( + + + + + + ); +}; + +export default SdkModal; diff --git a/src/components/__tests__/DeleteModal.test.js b/src/components/modals/__tests__/DeleteModal.test.js similarity index 100% rename from src/components/__tests__/DeleteModal.test.js rename to src/components/modals/__tests__/DeleteModal.test.js diff --git a/src/components/snippets/JsSnippet.tsx b/src/components/snippets/JsSnippet.tsx new file mode 100644 index 0000000..396cba8 --- /dev/null +++ b/src/components/snippets/JsSnippet.tsx @@ -0,0 +1,34 @@ +import Snippet from './Snippet'; +import { useMemo } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import Clipboard from '../common/Clipboard'; + +export default function ({ flag }: { flag: string }): JSX.Element { + const jsSnippet = useMemo(() => { + return `import domReady from '@wordpress/dom-ready'; +domReady(function () { + if ( + typeof window?.mrFeatureFlags !== 'undefined' && + window.mrFeatureFlags.isEnabled('${flag}') + ) { + // js code goes here... + } +});`; + }, [flag]); + return ( +
+

{__('JavaScript Snippet', 'mr-feature-flags')}

+ + +
+ ); +} diff --git a/src/components/snippets/PhpSnippet.tsx b/src/components/snippets/PhpSnippet.tsx new file mode 100644 index 0000000..e6830d6 --- /dev/null +++ b/src/components/snippets/PhpSnippet.tsx @@ -0,0 +1,28 @@ +import Snippet from './Snippet'; +import { useMemo } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import Clipboard from '../common/Clipboard'; + +export default function ({ flag }: { flag: string }): JSX.Element { + const phpSnippet = useMemo(() => { + return `if ( class_exists( 'MR\\FeatureFlags\\Utils' ) && MR\\FeatureFlags\\Utils::is_enabled( '${flag}' ) ) { + // php code goes here... +}`; + }, [flag]); + return ( +
+

{__('PHP Snippet', 'mr-feature-flags')}

+ + +
+ ); +} diff --git a/src/components/Snippet.tsx b/src/components/snippets/Snippet.tsx similarity index 100% rename from src/components/Snippet.tsx rename to src/components/snippets/Snippet.tsx diff --git a/src/components/TsSupport.tsx b/src/components/snippets/TsSupport.tsx similarity index 90% rename from src/components/TsSupport.tsx rename to src/components/snippets/TsSupport.tsx index 220e149..2f16f68 100644 --- a/src/components/TsSupport.tsx +++ b/src/components/snippets/TsSupport.tsx @@ -1,6 +1,6 @@ import { useMemo } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import Clipboard from './Clipboard'; +import Clipboard from '../common/Clipboard'; import Snippet from './Snippet'; @@ -20,7 +20,7 @@ export {};`; }, []); return ( -
+

{__('TypeScript support', 'mr-feature-flags')}

Create a file named{' '} diff --git a/src/index.ts b/src/index.ts index ff873d4..5f68277 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,7 @@ const { mrFeatureFlags } = window; import { Flag } from '../types'; +//Appends isEnabled method to global window object. mrFeatureFlags.isEnabled = (flag: string) => { const isFlagExist: Flag | undefined = mrFeatureFlags.flags.find( (item: Flag) => { diff --git a/src/settings.tsx b/src/settings.tsx index 0b250fd..e029616 100644 --- a/src/settings.tsx +++ b/src/settings.tsx @@ -1,4 +1,4 @@ import { render } from '@wordpress/element'; -import Layout from './components/Layout'; +import Flags from './components/flag/Flags'; import './styles/settings.scss'; -render(, document.getElementById('mr_feature_flags_settings_screen')); +render(, document.getElementById('mr_feature_flags_settings_screen'));