Code organisation

src/components/LineItem.tsx → 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;

src/components/Layout.tsx → 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 (
-								<LineItem
+								<FlagRow
 									key={flag.id}
 									item={flag}
 									flags={flags}

src/components/SubmitControls.tsx → src/components/flag/SubmitControls.tsx

@@ -1,8 +1,8 @@
 import { Flex, FlexItem, Button } from '@wordpress/components';
-import { Flag } from '../../types';
-import { updateFlags } from '../utils';
+import { Flag } from '../../../types';
+import { updateFlags } from '../../utils';
 import { useState } from '@wordpress/element';
-import Notices from './Snackbar';
+import Notices from '../common/Snackbar';
 import { dispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 

src/components/DeleteModal.tsx → src/components/modals/DeleteModal.tsx

@@ -1,6 +1,6 @@
 import { Modal, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { Flag } from '../../types';
+import { Flag } from '../../../types';
 interface DeleteModalProps {
 	closeModal: () => void;
 	item: Flag;

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 (
+		<Modal
+			title={`SDK for feature flag: ${item.name}`}
+			onRequestClose={closeSdkModal}
+		>
+			<PhpSnippet flag={item.name} />
+			<JsSnippet flag={item.name} />
+			<TsSupport />
+		</Modal>
+	);
+};
+
+export default SdkModal;

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 (
+		<div className="mr-feature-flag-js-snippet-container">
+			<h3>{__('JavaScript Snippet', 'mr-feature-flags')}</h3>
+			<Clipboard
+				text={jsSnippet}
+				style={{
+					color: 'darkgray',
+					float: 'right',
+					position: 'relative',
+					right: 40,
+					top: 24,
+				}}
+			/>
+			<Snippet data={jsSnippet} language={'typescript'} />
+		</div>
+	);
+}

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 (
+		<div className="mr-feature-flag-php-snippet-container">
+			<h3>{__('PHP Snippet', 'mr-feature-flags')}</h3>
+			<Clipboard
+				text={phpSnippet}
+				style={{
+					color: 'darkgray',
+					float: 'right',
+					position: 'relative',
+					right: 40,
+					top: 24,
+				}}
+			/>
+			<Snippet data={phpSnippet} language={'php'} />
+		</div>
+	);
+}

src/components/TsSupport.tsx → 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 (
-		<div className="mr-feature-flags-php-snippet-container">
+		<div className="mr-feature-flags-ts-snippet-container">
 			<h3>{__('TypeScript support', 'mr-feature-flags')}</h3>
 			<p>
 				Create a file named{' '}

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) => {

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(<Layout />, document.getElementById('mr_feature_flags_settings_screen'));
+render(<Flags />, document.getElementById('mr_feature_flags_settings_screen'));