@automattic/data-stores 3.0.1 → 3.1.0-rc.2

package/src/subscriber/reducers.ts

@@ -0,0 +1,107 @@
+import { combineReducers } from '@wordpress/data';
+import { findIndex } from 'lodash';
+import type { Action } from './actions';
+import type { SubscriberState } from './types';
+import type { Reducer } from 'redux';
+
+export const subscriber: Reducer< SubscriberState, Action > = ( state = {}, action ) => {
+	/**
+	 * ↓ Import subscribers
+	 */
+	if ( action.type === 'IMPORT_CSV_SUBSCRIBERS_START' ) {
+		return Object.assign( {}, state, {
+			import: {
+				inProgress: true,
+				file: action.file,
+				emails: action.emails,
+			},
+		} );
+	} else if ( action.type === 'IMPORT_CSV_SUBSCRIBERS_START_SUCCESS' ) {
+		const imports = Array.from( state.imports || [] );
+		imports.push( {
+			id: action.jobId,
+			status: 'pending',
+		} );
+		return Object.assign( {}, state, {
+			import: {
+				inProgress: true,
+				job: { id: action.jobId },
+			},
+			imports,
+		} );
+	} else if ( action.type === 'IMPORT_CSV_SUBSCRIBERS_START_FAILED' ) {
+		return Object.assign( {}, state, {
+			import: {
+				inProgress: false,
+				error: action.error,
+			},
+		} );
+	} else if ( action.type === 'IMPORT_CSV_SUBSCRIBERS_UPDATE' ) {
+		if ( action.job ) {
+			return Object.assign( {}, state, {
+				import: {
+					inProgress: true,
+					job: action.job,
+				},
+			} );
+		}
+
+		return Object.assign( {}, state, {
+			import: {
+				inProgress: false,
+				error: undefined,
+			},
+		} );
+	}
+
+	/**
+	 * ↓ Add subscribers
+	 */
+	if ( action.type === 'ADD_SUBSCRIBERS_START' ) {
+		return Object.assign( {}, state, {
+			add: { inProgress: true },
+		} );
+	} else if ( action.type === 'ADD_SUBSCRIBERS_SUCCESS' ) {
+		return Object.assign( {}, state, {
+			add: {
+				inProgress: false,
+				response: action.response,
+			},
+		} );
+	} else if ( action.type === 'ADD_SUBSCRIBERS_FAILED' ) {
+		return Object.assign( {}, state, {
+			add: { inProgress: false },
+		} );
+	}
+
+	/**
+	 * ↓ Get import
+	 */
+	if ( action.type === 'GET_SUBSCRIBERS_IMPORT_SUCCESS' ) {
+		const imports = state.imports ? Array.from( state.imports ) : [];
+		const i = findIndex( imports, { id: action.importJob.id } );
+		i !== -1 ? ( imports[ i ] = action.importJob ) : imports.push( action.importJob );
+
+		return Object.assign( {}, state, {
+			imports,
+		} );
+	}
+
+	/**
+	 * ↓ Get imports
+	 */
+	if ( action.type === 'GET_SUBSCRIBERS_IMPORTS_SUCCESS' ) {
+		return Object.assign( {}, state, {
+			imports: action.imports,
+			hydrated: true,
+		} );
+	}
+
+	return state;
+};
+
+const reducers = combineReducers( { subscriber } );
+
+export type State = ReturnType< typeof reducers >;
+
+export default reducers;

package/src/subscriber/selectors.ts

@@ -0,0 +1,7 @@
+import type { State } from './reducers';
+
+export const getState = ( state: State ) => state.subscriber;
+export const getHydrationStatus = ( state: State ) => state.subscriber.hydrated;
+export const getAddSubscribersSelector = ( state: State ) => state.subscriber.add;
+export const getImportSubscribersSelector = ( state: State ) => state.subscriber.import;
+export const getImportJobsSelector = ( state: State ) => state.subscriber.imports;

package/src/subscriber/test/reducers.ts

@@ -0,0 +1,220 @@
+import { subscriber } from '../reducers';
+import type { SubscriberState } from '../types';
+
+const EMPTY_STATE = {};
+
+describe( 'Subscriber reducer', () => {
+	/**
+	 * ↓ Import subscribers
+	 */
+	it( 'change import inProgress state', () => {
+		const state = subscriber( EMPTY_STATE, {
+			type: 'IMPORT_CSV_SUBSCRIBERS_START',
+			siteId: 1,
+		} );
+
+		const expectedState = { import: { inProgress: true } };
+
+		expect( state ).toEqual( expectedState );
+	} );
+
+	it( 'import start, update imports array', () => {
+		const initState: SubscriberState = {
+			hydrated: true,
+			import: { inProgress: true },
+			imports: [
+				{
+					id: 11111,
+					status: 'imported',
+					email_count: 10,
+					subscribed_count: 8,
+				},
+			],
+		};
+
+		const state = subscriber( initState, {
+			type: 'IMPORT_CSV_SUBSCRIBERS_START_SUCCESS',
+			siteId: 1,
+			jobId: 11112,
+		} );
+
+		const expectedState = {
+			hydrated: true,
+			import: { inProgress: true, job: { id: 11112 } },
+			imports: [
+				{
+					id: 11111,
+					status: 'imported',
+					email_count: 10,
+					subscribed_count: 8,
+				},
+				{
+					id: 11112,
+					status: 'pending',
+				},
+			],
+		};
+
+		expect( state ).toEqual( expectedState );
+	} );
+
+	/**
+	 * ↓ Add subscribers
+	 */
+	it( 'manually add subscribers start', () => {
+		const state = subscriber( EMPTY_STATE, {
+			type: 'ADD_SUBSCRIBERS_START',
+			siteId: 1,
+		} );
+
+		const expectedState = { add: { inProgress: true } };
+
+		expect( state ).toEqual( expectedState );
+	} );
+
+	it( 'manually add subscribers start success', () => {
+		const state = subscriber( EMPTY_STATE, {
+			type: 'ADD_SUBSCRIBERS_SUCCESS',
+			siteId: 1,
+			response: {
+				subscribed: 2,
+				errors: [],
+			},
+		} );
+
+		const expectedState = {
+			add: {
+				inProgress: false,
+				response: {
+					subscribed: 2,
+					errors: [],
+				},
+			},
+		};
+
+		expect( state ).toEqual( expectedState );
+	} );
+
+	/**
+	 * ↓ Get import
+	 */
+	it( 'get import job, add to `imports` array', () => {
+		const initState: SubscriberState = {
+			hydrated: true,
+			import: { inProgress: true },
+			imports: [
+				{
+					id: 11111,
+					status: 'imported',
+					email_count: 10,
+					subscribed_count: 8,
+				},
+			],
+		};
+
+		const state = subscriber( initState, {
+			type: 'GET_SUBSCRIBERS_IMPORT_SUCCESS',
+			siteId: 1,
+			importJob: {
+				id: 11113,
+				status: 'importing',
+				email_count: 1,
+				subscribed_count: 1,
+			},
+		} );
+
+		const expectedState = {
+			hydrated: true,
+			import: { inProgress: true },
+			imports: [
+				{
+					id: 11111,
+					status: 'imported',
+					email_count: 10,
+					subscribed_count: 8,
+				},
+				{
+					id: 11113,
+					status: 'importing',
+					email_count: 1,
+					subscribed_count: 1,
+				},
+			],
+		};
+
+		expect( state ).toEqual( expectedState );
+	} );
+
+	it( 'get import job, update `imports` array', () => {
+		const initState: SubscriberState = {
+			hydrated: true,
+			import: { inProgress: true },
+			imports: [
+				{
+					id: 11111,
+					status: 'importing',
+					email_count: 10,
+					subscribed_count: 0,
+				},
+			],
+		};
+
+		const state = subscriber( initState, {
+			type: 'GET_SUBSCRIBERS_IMPORT_SUCCESS',
+			siteId: 1,
+			importJob: {
+				id: 11111,
+				status: 'imported',
+				email_count: 10,
+				subscribed_count: 10,
+			},
+		} );
+
+		const expectedState = {
+			hydrated: true,
+			import: { inProgress: true },
+			imports: [
+				{
+					id: 11111,
+					status: 'imported',
+					email_count: 10,
+					subscribed_count: 10,
+				},
+			],
+		};
+
+		expect( state ).toEqual( expectedState );
+	} );
+
+	/**
+	 * ↓ Get imports
+	 */
+	it( 'get imports', () => {
+		const state = subscriber( EMPTY_STATE, {
+			type: 'GET_SUBSCRIBERS_IMPORTS_SUCCESS',
+			siteId: 1,
+			imports: [
+				{
+					id: 11111,
+					status: 'imported',
+					email_count: 10,
+					subscribed_count: 10,
+				},
+			],
+		} );
+
+		const expectedState = {
+			hydrated: true,
+			imports: [
+				{
+					id: 11111,
+					status: 'imported',
+					email_count: 10,
+					subscribed_count: 10,
+				},
+			],
+		};
+
+		expect( state ).toEqual( expectedState );
+	} );
+} );

package/src/subscriber/types.ts

@@ -0,0 +1,46 @@
+export interface SubscriberState {
+	add?: {
+		inProgress: boolean;
+		response: AddSubscribersResponse;
+	};
+	import?: {
+		inProgress: boolean;
+		file?: File;
+		emails?: string[];
+		job?: ImportJob;
+		error?: ImportSubscribersError;
+	};
+	imports?: ImportJob[];
+	hydrated?: boolean;
+}
+
+export type ImportJobStatus = 'pending' | 'importing' | 'imported' | 'failed';
+
+export type ImportJob = {
+	id: number;
+	status: ImportJobStatus;
+	email_count?: number;
+	scheduled_at?: string;
+	subscribed_count?: number;
+};
+
+export type GenericError = {
+	code: string;
+	message: string;
+};
+
+export type AddSubscriberError = { email: string } | GenericError;
+
+export type AddSubscribersResponse = {
+	subscribed: number;
+	errors: AddSubscriberError[];
+};
+
+export type ImportSubscribersError = Record< string, unknown > | GenericError;
+
+export type ImportSubscribersResponse = {
+	upload_id: number;
+};
+
+export type GetSubscribersImportResponse = ImportJob;
+export type GetSubscribersImportsResponse = ImportJob[];

package/src/templates/index.ts

@@ -0,0 +1,2 @@
+export { default as useTemplate } from './use-template';
+export type { Template, RequestTemplate } from './types';

package/src/templates/types.ts

@@ -0,0 +1,28 @@
+export type Template = {
+	author: number;
+	content: {
+		block_version: number;
+		raw: string;
+	};
+	description: string;
+	has_theme_file: boolean;
+	id: string;
+	/** Whether the template is custom or not. Custom template is able to be assigned to a page */
+	is_custom: boolean;
+	slug: string;
+	/** Whether the template is from. If the value is custom, then it's created by the user */
+	source: 'theme' | 'custom';
+	status: 'publish';
+	theme: string;
+	title: {
+		raw: string;
+		rendered: string;
+	};
+	type: 'wp_template' | 'wp_template_part';
+	wp_id: number;
+};
+
+export type RequestTemplate = Partial< Omit< Template, 'title' | 'content' > > & {
+	title?: string;
+	content?: string;
+};

package/src/templates/use-template.ts

@@ -0,0 +1,27 @@
+import { useQuery, UseQueryResult, QueryOptions } from '@tanstack/react-query';
+import wpcomRequest from 'wpcom-proxy-request';
+import type { Template } from './types';
+
+interface Options extends QueryOptions< Template > {
+	enabled?: boolean;
+}
+
+const useTemplate = (
+	siteId: string | number,
+	templateId: string,
+	queryOptions: Omit< Options, 'queryKey' > = {}
+): UseQueryResult< Template > => {
+	return useQuery< Template >( {
+		queryKey: [ siteId, 'templates', templateId ],
+		queryFn: () =>
+			wpcomRequest( {
+				path: `/sites/${ siteId }/templates/${ templateId }`,
+				apiNamespace: 'wp/v2',
+			} ),
+		refetchOnMount: 'always',
+		staleTime: Infinity,
+		...queryOptions,
+	} );
+};
+
+export default useTemplate;

package/src/theme/index.ts

@@ -0,0 +1 @@
+export * from './utils';

package/src/theme/test/utils.ts

@@ -0,0 +1,13 @@
+import { getThemeIdFromStylesheet } from '../utils';
+
+describe( '#getThemeIdFromStylesheet()', () => {
+	test( "should return the argument if it doesn't contain a slash (/)", () => {
+		const themeId = getThemeIdFromStylesheet( 'twentysixteen' );
+		expect( themeId ).toEqual( 'twentysixteen' );
+	} );
+
+	test( "should return argument's part after the slash if it does contain a slash (/)", () => {
+		const themeId = getThemeIdFromStylesheet( 'pub/twentysixteen' );
+		expect( themeId ).toEqual( 'twentysixteen' );
+	} );
+} );

package/src/theme/utils.ts

@@ -0,0 +1,10 @@
+/**
+ * Given a theme stylesheet string (like 'pub/twentysixteen'), returns the corresponding theme ID ('twentysixteen').
+ */
+export const getThemeIdFromStylesheet = ( stylesheet: string ) => {
+	const [ , slug ] = stylesheet?.split( '/', 2 ) ?? [];
+	if ( ! slug ) {
+		return stylesheet;
+	}
+	return slug;
+};

package/src/user/README.md

@@ -1,20 +1,15 @@
 # User store
 
-This store includes behavior for checking if a current user is logged in, and creating new user accounts.
-
-To log the user in see the [auth store](../auth/README.md).
+This store includes behavior for checking if a user is logged in, and fetching info about the current user.
 
 ## Usage
 
-Register the user store, passing in a valid client ID and secret:
+Register the user store:
 
 ```js
 import { User } from '@automattic/data-stores';
 
-const USER_STORE = User.register( {
-	client_id: 'MY_CLIENT_ID', // ⚠️Replace with your app's ID
-	client_secret: 'MY_CLIENT_SECRET', // ⚠️Replace with your app's secret
-} );
+const USER_STORE = User.register();
 ```
 
 ### Current user
@@ -29,74 +24,3 @@ function MyComponent() {
 	// …snip
 }
 ```
-
-### Creating a new account
-
-Creating an account defaults to a passwordless account creation. Pass in `is_passwordless: false` and a `password` param to use the default full account creation.
-
-```js
-import { useDispatch } from '@wordpress/data';
-
-function MyComponent() {
-	const { createAccount } = useDispatch( USER_STORE );
-	const submitHandler = () => createAccount( { email: 'example@example.com' } );
-	// …snip
-}
-```
-
-### Display account creation form, loader and error state
-
-Put altogether, a minimalist signup form can be created with:
-
-```js
-import { User } from '@automattic/data-stores';
-import { Button, Notice, Spinner, TextControl } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import React, { useState } from 'react';
-
-const USER_STORE = User.register(/* app credentials… */);
-
-function SignupComponent() {
-	const [ email, setEmail ] = useState( '' );
-
-	const currentUser = useSelect( ( select ) => select( USER_STORE ).getCurrentUser() );
-	const newUser = useSelect( ( select ) => select( USER_STORE ).getNewUser() );
-	const newUserError = useSelect( ( select ) => select( USER_STORE ).getNewUserError() );
-	const isFetchingNewUser = useSelect( ( select ) => select( USER_STORE ).isFetchingNewUser() );
-
-	const { createAccount } = useDispatch( USER_STORE );
-
-	if ( currentUser ) {
-		return (
-			<div>
-				<span>User is logged in as { currentUser.username }</span>
-			</div>
-		);
-	} else if ( newUser ) {
-		return (
-			<div>
-				<span>New user created: { newUser.username }</span>
-			</div>
-		);
-	}
-	return (
-		<div>
-			{ newUserError && <Notice status="error"> { newUserError.message } </Notice> }
-			{ isFetchingNewUser ? (
-				<span>Loading…</span>
-			) : (
-				<form onSubmit={ () => createAccount( { email } ) }>
-					<TextControl
-						label="Email address"
-						value={ email }
-						onChange={ ( newEmail ) => setEmail( newEmail ) }
-					/>
-					<Button isPrimary isLarge type="submit" value="Submit">
-						Create Account
-					</Button>
-				</form>
-			) }
-		</div>
-	);
-}
-```

package/src/user/actions.ts

@@ -1,14 +1,6 @@
-import { stringify } from 'qs';
-import { wpcomRequest, requestAllBlogsAccess, reloadProxy } from '../wpcom-request-controls';
-import type { WpcomClientCredentials } from '../shared-types';
-import type {
-	CurrentUser,
-	CreateAccountParams,
-	NewUserErrorResponse,
-	NewUserSuccessResponse,
-} from './types';
+import type { CurrentUser } from './types';
 
-export function createActions( clientCreds: WpcomClientCredentials ) {
+export function createActions() {
 	const receiveCurrentUser = ( currentUser: CurrentUser ) => ( {
 		type: 'RECEIVE_CURRENT_USER' as const,
 		currentUser,
@@ -18,83 +10,25 @@ export function createActions( clientCreds: WpcomClientCredentials ) {
 		type: 'RECEIVE_CURRENT_USER_FAILED' as const,
 	} );
 
-	const fetchNewUser = () => ( {
-		type: 'FETCH_NEW_USER' as const,
+	const setIsNewUser = ( isNewUser: boolean ) => ( {
+		type: 'SET_IS_NEW_USER' as const,
+		isNewUser,
 	} );
 
-	const receiveNewUser = ( response: NewUserSuccessResponse ) => ( {
-		type: 'RECEIVE_NEW_USER' as const,
-		response,
-	} );
-
-	const receiveNewUserFailed = ( error: NewUserErrorResponse ) => ( {
-		type: 'RECEIVE_NEW_USER_FAILED' as const,
-		error,
-	} );
-
-	const clearErrors = () => ( {
-		type: 'CLEAR_ERRORS' as const,
-	} );
-
-	function* createAccount( params: CreateAccountParams ) {
-		yield fetchNewUser();
-		try {
-			const newUser: NewUserSuccessResponse = yield wpcomRequest( {
-				body: {
-					// defaults
-					is_passwordless: true,
-					signup_flow_name: 'gutenboarding',
-					locale: 'en',
-
-					...clientCreds,
-					...params,
-
-					// Set to false because account validation should be a separate action
-					validate: false,
-				},
-				path: '/users/new',
-				apiVersion: '1.1',
-				method: 'post',
-				query: stringify( { locale: params.locale } ),
-			} );
-
-			yield reloadProxy();
-
-			// Need to rerequest access after the proxy is reloaded
-			yield requestAllBlogsAccess();
-
-			yield receiveNewUser( newUser );
-
-			return { ok: true } as const;
-		} catch ( error ) {
-			const newUserError: NewUserErrorResponse = error as NewUserErrorResponse;
-			yield receiveNewUserFailed( newUserError as NewUserErrorResponse );
-
-			return { ok: false, newUserError } as const;
-		}
-	}
-
 	return {
 		receiveCurrentUser,
 		receiveCurrentUserFailed,
-		fetchNewUser,
-		receiveNewUser,
-		receiveNewUserFailed,
-		clearErrors,
-		createAccount,
+		setIsNewUser,
 	};
 }
 
-type ActionCreators = ReturnType< typeof createActions >;
+export type ActionCreators = ReturnType< typeof createActions >;
 
 export type Action =
 	| ReturnType<
 			| ActionCreators[ 'receiveCurrentUser' ]
 			| ActionCreators[ 'receiveCurrentUserFailed' ]
-			| ActionCreators[ 'fetchNewUser' ]
-			| ActionCreators[ 'receiveNewUser' ]
-			| ActionCreators[ 'receiveNewUserFailed' ]
-			| ActionCreators[ 'clearErrors' ]
+			| ActionCreators[ 'setIsNewUser' ]
 	  >
 	// Type added so we can dispatch actions in tests, but has no runtime cost
 	| { type: 'TEST_ACTION' };