Toggle auto updates from component

Author: emeaguiar

assets/src/settings/components/integrations/index.js

@@ -13,16 +13,12 @@ import { useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import SettingsContext from '../../context';
-import { UPDATERS, ACTIONS } from '../../constants';
+import { UPDATERS } from '../../constants';
 import Updater from './updater';
 import Api from './api';
 
 const Integrations = () => {
-	const { state, dispatch } = useContext( SettingsContext );
-
-	const handleUpdateChange = type => {
-		dispatch( { type: ACTIONS.TOGGLE_UPDATES, payload: { type } } );
-	};
+	const { state } = useContext( SettingsContext );
 
 	return (
 		<div className="material-settings__integrations">
@@ -66,9 +62,6 @@ const Integrations = () => {
 						checked={ state.updaters[ key ].autoUpdates }
 						lastUpdated={ state.updaters[ key ].lastUpdated }
 						type={ UPDATERS[ key ].type }
-						onChange={ () => {
-							handleUpdateChange( UPDATERS[ key ].type );
-						} }
 					/>
 				) ) }
 			</div>

assets/src/settings/components/integrations/updater.js

@@ -17,16 +17,9 @@ import { ACTIONS } from '../../constants';
 import SettingsContext from '../../context';
 import Switch from './switch';
 import Button from '../../../wizard/components/navigation/button';
-import { update } from '../../utils';
+import { update, toggleAutoUpdate } from '../../utils';
 
-const Updater = ( {
-	title,
-	lastUpdated,
-	needsKey,
-	checked,
-	type,
-	onChange,
-} ) => {
+const Updater = ( { title, lastUpdated, needsKey, checked, type } ) => {
 	const [ id ] = useState( _uniqueId( 'updater-' ) );
 	const { state, dispatch } = useContext( SettingsContext );
 	const isDisabled = needsKey && 'ok' !== state.apiStatus;
@@ -54,6 +47,11 @@ const Updater = ( {
 
 	};
 
+	const handleAutoUpdateToggle = () => {
+		dispatch( { type: ACTIONS.TOGGLE_UPDATES, payload: { type } } );
+		toggleAutoUpdate( type );
+	};
+
 	return (
 		<div className="material-settings__updater">
 			<div className="mdc-layout-grid">
@@ -91,7 +89,11 @@ const Updater = ( {
 
 					<div className="mdc-layout-grid__cell mdc-layout-grid__cell--span-2 mdc-layout-grid__cell--align-middle material-settings__cell--justify-end">
 						{ ! isDisabled && (
-							<Switch checked={ checked } onChange={ onChange } id={ id } />
+							<Switch
+								checked={ checked }
+								onChange={ handleAutoUpdateToggle }
+								id={ id }
+							/>
 						) }
 					</div>
 

assets/src/settings/constants.js

@@ -23,15 +23,15 @@ export const UPDATERS = {
 		lastUpdated: parseInt( getConfig( 'fontsLastUpdated' ), 10 ),
 		needsKey: true,
 		updateAvailable: false,
-		autoUpdates: false,
+		autoUpdates: parseInt( getConfig( 'fontsAutoUpdate' ), 10 ),
 	},
 	ICONS: {
 		title: __( 'Material Icons', 'material-design' ),
 		type: 'ICONS',
 		lastUpdated: parseInt( getConfig( 'iconsLastUpdated' ), 10 ),
 		needsKey: false,
 		updateAvailable: true,
-		autoUpdates: false,
+		autoUpdates: parseInt( getConfig( 'iconsAutoUpdate' ), 10 ),
 	},
 };
 

assets/src/settings/context.js

@@ -25,9 +25,6 @@ const initialState = {
 	error: {},
 };
 
-initialState.updaters[ UPDATERS.FONTS.type ].autoUpdates = true;
-initialState.updaters[ UPDATERS.ICONS.type ].autoUpdates = false;
-
 /**
  * Creates a wrapper in order to use our custom reducer
  *

assets/src/settings/utils.js

@@ -58,6 +58,12 @@ const updateIcons = () => {
 	} );
 };
 
+/**
+ * Save API Key in database
+ *
+ * @param {string} key API
+ * @return {Promise} Request response
+ */
 export const setApiKey = key => {
 	return new Promise( ( resolve, reject ) => {
 		apiFetch( {
@@ -72,3 +78,24 @@ export const setApiKey = key => {
 			.catch( reject );
 	} );
 };
+
+/**
+ * Turn auto updates on/off
+ *
+ * @param {string} type Item to toggle updates
+ * @return {Promise} Request response
+ */
+export const toggleAutoUpdate = type => {
+	return new Promise( ( resolve, reject ) => {
+		apiFetch( {
+			path: getConfig( 'assetsRestPath' ) + 'toggle-auto-updates',
+			method: 'POST',
+			data: { type },
+			headers: {
+				'X-WP-Nonce': getConfig( 'nonce' ),
+			},
+		} )
+			.then( resolve )
+			.catch( reject );
+	} );
+};

plugin/php/class-admin.php

@@ -303,6 +303,8 @@ public function enqueue_assets() {
 					'apiStatus'        => esc_html( $this->plugin->assets_rest_controller->get_api_status() ),
 					'fontsLastUpdated' => esc_html( $this->plugin->assets_rest_controller->get_fonts_last_updated() ),
 					'iconsLastUpdated' => esc_html( $this->plugin->assets_rest_controller->get_icons_last_updated() ),
+					'fontsAutoUpdate'  => esc_html( $this->plugin->assets_rest_controller->get_fonts_auto_update() ),
+					'iconsAutoUpdate'  => esc_html( $this->plugin->assets_rest_controller->get_icons_auto_update() ),
 				]
 			);
 		}

plugin/php/class-design-assets-rest-controller.php

@@ -297,6 +297,24 @@ public function get_icons_last_updated() {
 		return absint( Update_Icons::get_last_updated() ) * 1000;
 	}
 
+	/**
+	 * Return auto update from database
+	 *
+	 * @return int Auto update option
+	 */
+	public function get_fonts_auto_update() {
+		return absint( get_option( Update_Fonts::AUTO_UPDATE_SLUG ) );
+	}
+
+	/**
+	 * Return auto update from database
+	 *
+	 * @return int Auto update option
+	 */
+	public function get_icons_auto_update() {
+		return absint( get_option( Update_Icons::AUTO_UPDATE_SLUG ) );
+	}
+
 	/**
 	 * Look for API in database.
 	 *