From de258d80b29118a6d9331d40588ef1e055e46171 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leon=20Gr=C3=BCnewald?= Date: Sun, 27 Mar 2022 23:49:10 +0200 Subject: [PATCH 1/3] File Field: Migrate to wp apiFetch and add localStorage cache --- core/REST_API/Router.php | 10 ++- packages/core/fields/file/index.js | 61 +++++++++++++------ .../metaboxes/components/container/index.js | 2 - 3 files changed, 47 insertions(+), 26 deletions(-) diff --git a/core/REST_API/Router.php b/core/REST_API/Router.php index b7257bdae..597a741f1 100644 --- a/core/REST_API/Router.php +++ b/core/REST_API/Router.php @@ -62,7 +62,7 @@ class Router { 'path' => '/attachment', 'callback' => 'get_attachment_data', 'permission_callback' => 'allow_access', - 'methods' => 'GET', + 'methods' => 'POST', 'args' => 'attachment_data_args_schema', ), 'block_renderer' => array( @@ -368,11 +368,9 @@ public function get_association_options() { * * @return array */ - public function get_attachment_data() { - $type = sanitize_text_field( $_GET['type'] ); - $value = sanitize_text_field( $_GET['value'] ); - - return Helper::get_attachment_metadata( $value, $type ); + public function get_attachment_data( $request ) { + $options = $request->get_params(); + return Helper::get_attachment_metadata( $options['value'], $options['type'] ); } /** diff --git a/packages/core/fields/file/index.js b/packages/core/fields/file/index.js index b179cd85e..68739d75d 100644 --- a/packages/core/fields/file/index.js +++ b/packages/core/fields/file/index.js @@ -9,7 +9,7 @@ import { get } from 'lodash'; */ import './style.scss'; import MediaLibrary from '../../components/media-library'; -import apiFetch from '../../utils/api-fetch'; +import apiFetch from '@wordpress/api-fetch'; class FileField extends Component { /** @@ -27,25 +27,50 @@ class FileField extends Component { * @return {void} */ componentDidMount() { - const { value, field } = this.props; - - if ( value ) { - let endpoint = ''; - - if ( window.wpApiSettings.root.indexOf( '?rest_route' ) !== -1 ) { - endpoint = `${ window.wpApiSettings.root }carbon-fields/v1/attachment&type=${ field.value_type }&value=${ value }`; - } else { - endpoint = `${ window.wpApiSettings.root }carbon-fields/v1/attachment?type=${ field.value_type }&value=${ value }`; - } - - // TODO: Refactor this to use `@wordpress/api-fetch` package. - apiFetch( - endpoint, - 'get' - ).then( this.handleFileDataChange ); - } + this.fetchMetadata(); } + getCachedMetadata(cacheKey) { + return JSON.parse(localStorage.getItem(cacheKey)); + } + + setCachedMetadata(cacheKey, value) { + localStorage.setItem(cacheKey, JSON.stringify(value)); + } + + fetchMetadata() { + const { value, field } = this.props; + let cacheKey = 'cf_filefield_cache_'; + + if (field.value_type === 'id') { + cacheKey += value; + } else { + cacheKey += value; + } + + if (field) { + let data = this.getCachedMetadata(cacheKey); + + if (data !== null) { + this.handleFileDataChange(data); + return; + } + + apiFetch({ + method: 'post', + path: `/wp-json/carbon-fields/v1/attachment`, + data: { + type: field.value_type, + value: value + } + }).then( (data) => { + this.setCachedMetadata(cacheKey, data); + this.handleFileDataChange(data); + }); + + } + } + /** * Returns an URL to the attachment's thumbnail. * diff --git a/packages/metaboxes/components/container/index.js b/packages/metaboxes/components/container/index.js index 71c4d7c80..2afc50522 100644 --- a/packages/metaboxes/components/container/index.js +++ b/packages/metaboxes/components/container/index.js @@ -109,7 +109,6 @@ class Container extends Component { [ `cf-container--tabbed cf-container--${ container.layout }` ]: hasTabs } ] ); - return (
{ map( fieldNames, ( fieldName ) => { const field = find( container.fields, [ 'name', fieldName ] ); - return this.renderField( field ); } ) }
From 122912ae4bd44ee52612872ec828b8a96bc48857 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leon=20Gr=C3=BCnewald?= Date: Mon, 28 Mar 2022 01:03:47 +0200 Subject: [PATCH 2/3] File Field: Add cache for file picker, change cache method for url --- packages/core/fields/file/index.js | 44 ++++++++++++++++++++++-------- 1 file changed, 33 insertions(+), 11 deletions(-) diff --git a/packages/core/fields/file/index.js b/packages/core/fields/file/index.js index 68739d75d..4bd244f6e 100644 --- a/packages/core/fields/file/index.js +++ b/packages/core/fields/file/index.js @@ -30,6 +30,17 @@ class FileField extends Component { this.fetchMetadata(); } + getCacheKey(field, value) { + let cacheKey = 'cf_filefield_cache_'; + if (field.value_type === 'id') { + cacheKey += value; + } else { + cacheKey += btoa(value); + } + + return cacheKey; + } + getCachedMetadata(cacheKey) { return JSON.parse(localStorage.getItem(cacheKey)); } @@ -40,15 +51,9 @@ class FileField extends Component { fetchMetadata() { const { value, field } = this.props; - let cacheKey = 'cf_filefield_cache_'; - if (field.value_type === 'id') { - cacheKey += value; - } else { - cacheKey += value; - } - - if (field) { + if (value) { + let cacheKey = this.getCacheKey(field, value); let data = this.getCachedMetadata(cacheKey); if (data !== null) { @@ -58,7 +63,7 @@ class FileField extends Component { apiFetch({ method: 'post', - path: `/wp-json/carbon-fields/v1/attachment`, + path: '/wp-json/carbon-fields/v1/attachment', data: { type: field.value_type, value: value @@ -142,10 +147,27 @@ class FileField extends Component { } = this.props; const [ file ] = files; - onChange( id, get( file, field.value_type, file.id ) ); - this.handleFileDataChange( file ); + let value; + switch (field.value_type) { + case 'id': + value = file.id; + break; + case 'url': + value = file.url; + break; + default: + break; + } + + this.setCachedMetadata(this.getCacheKey(field, value), { + id: file.id, + filename: file.filename, + sizes: file.sizes + }); + + this.handleFileDataChange( file ); } /** From 0d3bea2f56046c135a35d61a1488542f2671ae3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leon=20Gr=C3=BCnewald?= Date: Mon, 28 Mar 2022 01:11:09 +0200 Subject: [PATCH 3/3] Router: Add GET back to attachments route --- core/REST_API/Router.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/REST_API/Router.php b/core/REST_API/Router.php index 597a741f1..13d3ae575 100644 --- a/core/REST_API/Router.php +++ b/core/REST_API/Router.php @@ -62,7 +62,7 @@ class Router { 'path' => '/attachment', 'callback' => 'get_attachment_data', 'permission_callback' => 'allow_access', - 'methods' => 'POST', + 'methods' => array( 'GET', 'POST' ), 'args' => 'attachment_data_args_schema', ), 'block_renderer' => array(