diff --git a/client/my-sites/importer/newsletter/subscribers/upload-form.tsx b/client/my-sites/importer/newsletter/subscribers/upload-form.tsx index 56aa7b8e5156ed..6af8e929389114 100644 --- a/client/my-sites/importer/newsletter/subscribers/upload-form.tsx +++ b/client/my-sites/importer/newsletter/subscribers/upload-form.tsx @@ -32,14 +32,10 @@ export default function SubscriberUploadForm( { nextStepUrl, siteId, skipNextSte const [ hasImportError, setHasImportError ] = useState( false ); const { importCsvSubscribers, importCsvSubscribersUpdate } = useDispatch( Subscriber.store ); - const { importSelector } = useSelect( ( select ) => { - const subscriber = select( Subscriber.store ); - - return { - importSelector: subscriber.getImportSubscribersSelector(), - imports: subscriber.getImportJobsSelector(), - }; - }, [] ); + const { importSelector } = useSelect( + ( select ) => ( { importSelector: select( Subscriber.store ).getImportSubscribersSelector() } ), + [] + ); useEffect( () => { if ( importSelector?.error ) { diff --git a/packages/data-stores/src/subscriber/actions.ts b/packages/data-stores/src/subscriber/actions.ts index 6d8807256c67ab..1c0bf28292e2e0 100644 --- a/packages/data-stores/src/subscriber/actions.ts +++ b/packages/data-stores/src/subscriber/actions.ts @@ -1,6 +1,6 @@ import * as oauthToken from '@automattic/oauth-token'; -import { wpcomRequest } from '../wpcom-request-controls'; -import { +import wpcomProxyRequest from 'wpcom-proxy-request'; +import type { AddSubscribersResponse, GetSubscribersImportResponse, GetSubscribersImportsResponse, @@ -16,9 +16,9 @@ export function createActions() { */ const importCsvSubscribersStart = ( siteId: number, - file?: File, - emails: string[] = [], - categories: number[] = [] + file: File | undefined, + emails: string[], + categories: number[] ) => ( { type: 'IMPORT_CSV_SUBSCRIBERS_START' as const, siteId, @@ -44,42 +44,46 @@ export function createActions() { job, } ); - function* importCsvSubscribers( - siteId: number, - file?: File, - emails: string[] = [], - categories: number[] = [], - parseOnly: boolean = false - ) { - yield importCsvSubscribersStart( siteId, file, emails, categories ); - - try { - const token = oauthToken.getToken(); - const formDataEntries: Array< - [ string, string | number | File ] | [ string, File, string ] - > = [ - ...( file ? [ [ 'import', file, file.name ] as [ string, File, string ] ] : [] ), - - ...categories.map( ( categoryId ) => [ 'categories[]', categoryId ] as [ string, number ] ), - - ...emails.map( ( email ) => [ 'emails[]', email ] as [ string, string ] ), - - [ 'parse_only', String( parseOnly ) ] as [ string, string ], - ]; - - const data: ImportSubscribersResponse = yield wpcomRequest( { - path: `/sites/${ encodeURIComponent( siteId ) }/subscribers/import`, - method: 'POST', - apiNamespace: 'wpcom/v2', - token: typeof token === 'string' ? token : undefined, - formData: formDataEntries as ( string | File )[][], - } ); - - yield importCsvSubscribersStartSuccess( siteId, data.upload_id ); - } catch ( error ) { - yield importCsvSubscribersStartFailed( siteId, error as ImportSubscribersError ); - } - } + const importCsvSubscribers = + ( + siteId: number, + file?: File, + emails: string[] = [], + categories: number[] = [], + parseOnly: boolean = false + ) => + async ( { dispatch }: ThunkArgs ) => { + dispatch.importCsvSubscribersStart( siteId, file, emails, categories ); + + try { + const token = oauthToken.getToken(); + const formDataEntries: Array< + [ string, string | number | File ] | [ string, File, string ] + > = [ + ...( file ? [ [ 'import', file, file.name ] as [ string, File, string ] ] : [] ), + + ...categories.map( + ( categoryId ) => [ 'categories[]', categoryId ] as [ string, number ] + ), + + ...emails.map( ( email ) => [ 'emails[]', email ] as [ string, string ] ), + + [ 'parse_only', String( parseOnly ) ] as [ string, string ], + ]; + + const data: ImportSubscribersResponse = await wpcomProxyRequest( { + path: `/sites/${ encodeURIComponent( siteId ) }/subscribers/import`, + method: 'POST', + apiNamespace: 'wpcom/v2', + token: typeof token === 'string' ? token : undefined, + formData: formDataEntries as ( string | File )[][], + } ); + + dispatch.importCsvSubscribersStartSuccess( siteId, data.upload_id ); + } catch ( error ) { + dispatch.importCsvSubscribersStartFailed( siteId, error as ImportSubscribersError ); + } + }; /** * ↓ Add subscribers @@ -100,27 +104,29 @@ export function createActions() { siteId, } ); - function* addSubscribers( siteId: number, emails: string[] ) { - yield addSubscribersStart( siteId ); - - try { - const data: AddSubscribersResponse = yield wpcomRequest( { - path: `/sites/${ encodeURIComponent( siteId ) }/invites/new`, - method: 'POST', - apiNamespace: 'rest/v1.1', - body: { - invitees: emails, - role: 'follower', - source: 'calypso', - is_external: false, - }, - } ); - - yield addSubscribersSuccess( siteId, data ); - } catch ( err ) { - yield addSubscribersFailed( siteId ); - } - } + const addSubscribers = + ( siteId: number, emails: string[] ) => + async ( { dispatch }: ThunkArgs ) => { + dispatch.addSubscribersStart( siteId ); + + try { + const response: AddSubscribersResponse = await wpcomProxyRequest( { + path: `/sites/${ encodeURIComponent( siteId ) }/invites/new`, + method: 'POST', + apiNamespace: 'rest/v1.1', + body: { + invitees: emails, + role: 'follower', + source: 'calypso', + is_external: false, + }, + } ); + + dispatch.addSubscribersSuccess( siteId, response ); + } catch { + dispatch.addSubscribersFailed( siteId ); + } + }; /** * ↓ Get import @@ -131,19 +137,21 @@ export function createActions() { importJob, } ); - function* getSubscribersImport( siteId: number, importId: number ) { - try { - const token = oauthToken.getToken(); - const data: GetSubscribersImportResponse = yield wpcomRequest( { - path: `/sites/${ encodeURIComponent( siteId ) }/subscribers/import/${ importId }`, - method: 'GET', - apiNamespace: 'wpcom/v2', - token: typeof token === 'string' ? token : undefined, - } ); - - yield getSubscribersImportSuccess( siteId, data ); - } catch ( e ) {} - } + const getSubscribersImport = + ( siteId: number, importId: number ) => + async ( { dispatch }: ThunkArgs ) => { + try { + const token = oauthToken.getToken(); + const importJob: GetSubscribersImportResponse = await wpcomProxyRequest( { + path: `/sites/${ encodeURIComponent( siteId ) }/subscribers/import/${ importId }`, + method: 'GET', + apiNamespace: 'wpcom/v2', + token: typeof token === 'string' ? token : undefined, + } ); + + dispatch.getSubscribersImportSuccess( siteId, importJob ); + } catch ( e ) {} + }; /** * ↓ Get imports @@ -157,22 +165,24 @@ export function createActions() { imports, } ); - function* getSubscribersImports( siteId: number, status?: ImportJobStatus ) { - try { - const path = `/sites/${ encodeURIComponent( siteId ) }/subscribers/import`; - const token = oauthToken.getToken(); - const data: GetSubscribersImportsResponse = yield wpcomRequest( { - path: ! status ? path : `${ path }?status=${ encodeURIComponent( status ) }`, - method: 'GET', - apiNamespace: 'wpcom/v2', - token: typeof token === 'string' ? token : undefined, - } ); - - yield getSubscribersImportsSuccess( siteId, data ); - } catch ( error ) { - yield importCsvSubscribersStartFailed( siteId, error as ImportSubscribersError ); - } - } + const getSubscribersImports = + ( siteId: number, status?: ImportJobStatus ) => + async ( { dispatch }: ThunkArgs ) => { + try { + const path = `/sites/${ encodeURIComponent( siteId ) }/subscribers/import`; + const token = oauthToken.getToken(); + const imports: GetSubscribersImportsResponse = await wpcomProxyRequest( { + path: ! status ? path : `${ path }?status=${ encodeURIComponent( status ) }`, + method: 'GET', + apiNamespace: 'wpcom/v2', + token: typeof token === 'string' ? token : undefined, + } ); + + dispatch.getSubscribersImportsSuccess( siteId, imports ); + } catch ( error ) { + dispatch.importCsvSubscribersStartFailed( siteId, error as ImportSubscribersError ); + } + }; return { importCsvSubscribersStart, @@ -193,6 +203,8 @@ export function createActions() { export type ActionCreators = ReturnType< typeof createActions >; +type ThunkArgs = { dispatch: ActionCreators }; + export type Action = ReturnType< | ActionCreators[ 'importCsvSubscribersStart' ] | ActionCreators[ 'importCsvSubscribersStartSuccess' ] diff --git a/packages/data-stores/src/subscriber/index.ts b/packages/data-stores/src/subscriber/index.ts index 05a3b4d2dd4e60..bea7b1ee4c18c8 100644 --- a/packages/data-stores/src/subscriber/index.ts +++ b/packages/data-stores/src/subscriber/index.ts @@ -1,5 +1,4 @@ import { register, createReduxStore } from '@wordpress/data'; -import { controls } from '../wpcom-request-controls'; import { createActions } from './actions'; import { STORE_KEY } from './constants'; import reducer, { State } from './reducers'; @@ -9,7 +8,6 @@ export type { State }; export const store = createReduxStore( STORE_KEY, { actions: createActions(), - controls, reducer, selectors, } );