CRM: Resolves 3389 - remove axios dependencies (#34315)

* Add key props and wrap table data in proper tags * Replace axios with native fetch * Add changelog
Automattic · Dec 4, 2023 · cd94ffd · cd94ffd
1 parent 8da4bd3
commit cd94ffd
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 21 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/plugins/crm/changelog/fix-crm-3389-remove_axios_dependencies b/projects/plugins/crm/changelog/fix-crm-3389-remove_axios_dependencies
@@ -0,0 +1,5 @@
+Significance: patch
+Type: removed
+Comment: Replaced axios with native fetch.
+
+
diff --git a/projects/plugins/crm/package.json b/projects/plugins/crm/package.json
@@ -29,7 +29,6 @@
 		"@wordpress/element": "5.24.0",
 		"@wordpress/i18n": "4.47.0",
 		"@wordpress/icons": "9.38.0",
-		"axios": "1.6.2",
 		"classnames": "2.3.2",
 		"prop-types": "15.8.1",
 		"react": "18.2.0",

diff --git a/projects/plugins/crm/src/js/components/automations-admin/components/workflow-row/index.tsx b/projects/plugins/crm/src/js/components/automations-admin/components/workflow-row/index.tsx
@@ -70,7 +70,7 @@ export const WorkflowRow: React.FC< WorkflowRowProps > = props => {
 					<div className={ styles.triggers }>
 						{ workflow.triggers.map( ( trigger: Trigger ) => {
 							return (
-								<div className={ styles.triggers__item }>
+								<div key={ trigger.slug } className={ styles.triggers__item }>
 									{ trigger.title }
 									<IconTooltip
 										title={ trigger.title }

diff --git a/projects/plugins/crm/src/js/components/automations-admin/components/workflow-table/index.tsx b/projects/plugins/crm/src/js/components/automations-admin/components/workflow-table/index.tsx
@@ -34,6 +34,7 @@ export const WorkflowTable: React.FC< WorkflowTableProps > = props => {
 	const getSortableWorkflowTableHeader = ( column: SortableWorkflowTableColumn ) => {
 		return (
 			<WorkflowTableHeader
+				key={ column }
 				column={ column }
 				onClick={ getSortableHeaderOnClick( column ) }
 				selectedForSort={ sortedColumn === column }
@@ -49,14 +50,22 @@ export const WorkflowTable: React.FC< WorkflowTableProps > = props => {
 	return (
 		<div className={ styles.container }>
 			<table className={ styles.table }>
-				<tr className={ styles[ 'header-row' ] }>
-					<WorkflowTableHeader column={ 'checkbox' } />
-					{ sortableColumns.map( column => getSortableWorkflowTableHeader( column ) ) }
-					<WorkflowTableHeader column={ 'edit' } />
-				</tr>
-				{ sortedWorkflows.map( workflow => (
-					<WorkflowRow workflow={ workflow } refetchWorkflows={ refetchWorkflows } />
-				) ) }
+				<thead>
+					<tr className={ styles[ 'header-row' ] }>
+						<WorkflowTableHeader column={ 'checkbox' } />
+						{ sortableColumns.map( column => getSortableWorkflowTableHeader( column ) ) }
+						<WorkflowTableHeader column={ 'edit' } />
+					</tr>
+				</thead>
+				<tbody>
+					{ sortedWorkflows.map( workflow => (
+						<WorkflowRow
+							key={ workflow.id }
+							workflow={ workflow }
+							refetchWorkflows={ refetchWorkflows }
+						/>
+					) ) }
+				</tbody>
 			</table>
 		</div>
 	);

diff --git a/projects/plugins/crm/src/js/data/query-functions.ts b/projects/plugins/crm/src/js/data/query-functions.ts
@@ -1,4 +1,3 @@
-import axios from 'axios';
 import { Workflow, ServerPreparedWorkflow } from 'crm/state/automations-admin/types';
 import { getServerPreparedWorkflow } from 'crm/state/automations-admin/util';
 
@@ -7,24 +6,43 @@ declare let jpcrmAutomationsInitialState: any;
 
 const v4ApiRoot = `${ jpcrmAutomationsInitialState.apiRoot }jetpack-crm/v4`;
 
-const api = axios.create( {
-	baseURL: v4ApiRoot,
-	headers: { 'X-WP-Nonce': jpcrmAutomationsInitialState.apiNonce },
-} );
+type fetchAutomationsAPIOptions = {
+	headers: HeadersInit;
+	method: string;
+	body?: string;
+};
+
+const callAutomationsAPI = async ( relative_url: string, payload?: object ) => {
+	const options: fetchAutomationsAPIOptions = {
+		headers: {
+			'X-WP-Nonce': jpcrmAutomationsInitialState.apiNonce,
+			'Content-Type': 'application/json',
+		},
+		method: 'GET',
+	};
+	if ( payload ) {
+		options.method = 'POST';
+		options.body = JSON.stringify( payload );
+	}
+	const response = await fetch( v4ApiRoot + relative_url, options );
+	return await response.json();
+};
 
 // /wp-json/jetpack-crm/v4/automation/workflows
 export const getAutomationWorkflows =
 	( hydrate: ( workflows: Workflow[] ) => void ) => async () => {
-		const result = await api.get< Workflow[] >( '/automation/workflows' );
-		result.data && hydrate( result.data );
+		const result: Workflow[] = await callAutomationsAPI( '/automation/workflows' );
+		result && hydrate( result );
 		return result;
 	};
 
 // /wp-json/jetpack-crm/v4/automation/workflows/:id
 export const postAutomationWorkflow = async ( workflow: Workflow ) => {
 	const serverPreparedWorkflow = getServerPreparedWorkflow( workflow );
-	return await api.post< ServerPreparedWorkflow >(
+
+	const result: ServerPreparedWorkflow = await callAutomationsAPI(
 		`/automation/workflows/${ workflow.id }`,
 		serverPreparedWorkflow
 	);
+	return result;
 };