Update components to use new endpoints

src/components/flag/FlagRow.tsx

@@ -18,13 +18,17 @@ interface LineItemProps {
 	setFlags: (flags: Flag[]) => void;
 	item: Flag;
 	setDisableSave: (toggle: boolean) => void;
+	handleSave: () => Promise<void>;
+	handleDeleteFlag: (id: number) => Promise<void>;
 }
 
 const FlagRow = ({
 	flags,
 	setFlags,
 	item,
 	setDisableSave,
+	handleSave,
+	handleDeleteFlag,
 }: LineItemProps): JSX.Element => {
 	const [isOpen, setOpen] = useState(false);
 
@@ -42,12 +46,6 @@ const FlagRow = ({
 		}
 	}, [inputRef, item]);
 
-	const handleDeleteFlag = (flagId: number) => {
-		const updatedFlags = flags.filter((flag: Flag) => flag.id !== flagId);
-		setFlags(updatedFlags);
-		closeModal();
-	};
-
 	const handleFlagToggle = (flagId: number) => {
 		const updatedFlags = flags.map((flag: Flag) => {
 			if (flag.id === flagId) {
@@ -56,6 +54,7 @@ const FlagRow = ({
 			return flag;
 		});
 		setFlags(updatedFlags);
+		handleSave();
 	};
 
 	const handleFlagEdit = (value: string, flagId: number) => {
@@ -82,6 +81,7 @@ const FlagRow = ({
 			}
 			return flag;
 		});
+
 		setFlags(updatedFlags);
 	};
 
@@ -101,6 +101,7 @@ const FlagRow = ({
 			openModal();
 			return;
 		}
+
 		handleDeleteFlag(flag.id);
 	};
 

src/components/flag/Flags.tsx

@@ -1,20 +1,22 @@
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useCallback } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
 import FlagRow from './FlagRow';
 import { Flag } from '../../../types';
 import SubmitControls from './SubmitControls';
-import { getFlags } from '../../utils';
+import { getFlags, updateFlags } from '../../utils';
 import Header from './Header';
 import { __ } from '@wordpress/i18n';
+import { dispatch } from '@wordpress/data';
 
 const Layout = (): JSX.Element => {
 	const [flags, setFlags] = useState<Flag[]>([]);
 	const [isLoading, setIsLoading] = useState<boolean>(true);
+	const [isSaving, setIsSaving] = useState<boolean>(false);
+	// const isFirstRender = useRef(true);
 
 	useEffect(() => {
 		const logFlags = async () => {
 			const fetchedFlags = await getFlags();
-
 			if (fetchedFlags) {
 				setFlags(fetchedFlags);
 			}
@@ -24,10 +26,41 @@ const Layout = (): JSX.Element => {
 		logFlags();
 	}, [setFlags, setIsLoading]);
 
+	const remoteApi = useCallback(async (input: Flag[]) => {
+		await updateFlags({ ...input });
+		//@ts-ignore
+		dispatch('core/notices').createSuccessNotice('Saved successfully!', {
+			type: 'snackbar',
+			id: 'mr-feature-flags-snackbar',
+			icon: <>✅</>,
+		});
+	}, []);
+
 	const [disableSave, setDisableSave] = useState(false);
 
 	const lastFlag = flags?.at(-1)?.id || 0;
 
+	const handleSave = async () => {
+		setIsSaving(true);
+
+		setFlags((prevFlags: Flag[]) => {
+			return prevFlags.filter((f) => f.name !== '');
+		});
+
+		remoteApi(flags);
+		setIsSaving(false);
+	};
+
+	const handleDeleteFlag = async (flagId: number) => {
+		setIsSaving(true);
+
+		const latestFlags = flags.filter((f) => f.id !== flagId);
+		setFlags(latestFlags);
+
+		remoteApi(latestFlags);
+		setIsSaving(false);
+	};
+
 	return (
 		<>
 			<div id="mr-feature-flag-layout">
@@ -47,6 +80,8 @@ const Layout = (): JSX.Element => {
 									flags={flags}
 									setFlags={setFlags}
 									setDisableSave={setDisableSave}
+									handleSave={handleSave}
+									handleDeleteFlag={handleDeleteFlag}
 								/>
 							);
 						})
@@ -58,6 +93,8 @@ const Layout = (): JSX.Element => {
 							flags={flags}
 							lastFlag={lastFlag}
 							disableSave={disableSave}
+							isSaving={isSaving}
+							handleSave={handleSave}
 						/>
 					)}
 				</div>

src/components/flag/SubmitControls.tsx

@@ -1,31 +1,30 @@
 import { Flex, FlexItem, Button } from '@wordpress/components';
 import { Flag } from '../../../types';
-import { updateFlags } from '../../utils';
-import { useState } from '@wordpress/element';
 import Notices from '../common/Snackbar';
-import { dispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 interface SubmitControlsProps {
 	flags: Flag[];
 	setFlags: (flags: Flag[]) => void;
 	lastFlag: number;
 	disableSave: boolean;
+	isSaving: boolean;
+	handleSave: () => Promise<void>;
 }
 
 const SubmitControls = ({
 	flags,
 	setFlags,
 	lastFlag,
 	disableSave,
+	isSaving,
+	handleSave,
 }: SubmitControlsProps): JSX.Element => {
-	const [isSaving, setIsSaving] = useState<boolean>(false);
-
 	const handleNewFlag = () => {
 		const newFlag = {
 			id: lastFlag + 1,
 			name: '',
-			enabled: false,
+			enabled: true,
 		};
 
 		let latestFlags = [];
@@ -39,23 +38,6 @@ const SubmitControls = ({
 		setFlags(latestFlags);
 	};
 
-	const handleSave = async () => {
-		setIsSaving(true);
-		const cleanFlags: Flag[] = flags.filter(
-			(item: Flag) => item.name !== ''
-		);
-
-		await updateFlags({ ...cleanFlags });
-
-		setIsSaving(false);
-
-		//@ts-ignore
-		dispatch('core/notices').createSuccessNotice('Saved successfully!', {
-			type: 'snackbar',
-			id: 'mr-feature-flags-snackbar',
-			icon: <>✅</>,
-		});
-	};
 	return (
 		<div id="mr-feature-flag-submit-controls">
 			<Flex justify={'flex-start'}>

src/utils/index.ts

@@ -17,7 +17,7 @@ export const updateFlags = async (
 		{
 			method: 'POST',
 			path: `${FEATURE_FLAG_NAMESPACE}/${FEATURE_FLAG_ROUTE}`,
-			data: flags,
+			data: { flags },
 		}
 	);
 

types/index.ts

@@ -2,5 +2,4 @@ export interface Flag {
 	id: number;
 	name: string;
 	enabled: boolean;
-	preProdEnabled?: boolean;
 }

webpack.config.js

@@ -11,7 +11,6 @@ const config = {
 	},
 	output: {
 		...defaultConfig.output,
-		// publicPath: '/wp-content/plugins/tm-wp-desknet/build',
 	},
 	module: {
 		...defaultConfig.module,