diff --git a/packages/data-stores/src/index.ts b/packages/data-stores/src/index.ts index c1cd7bbec9ed7b..3c2ab06d998bfa 100644 --- a/packages/data-stores/src/index.ts +++ b/packages/data-stores/src/index.ts @@ -30,7 +30,6 @@ export * from './templates'; export * from './onboard/types'; export * from './domain-suggestions/types'; export * from './plans/types'; -export * from './subscriber/types'; export * from './launch/types'; export * from './user/types'; diff --git a/packages/data-stores/src/subscriber/index.ts b/packages/data-stores/src/subscriber/index.ts index 8366741fa76b90..05a3b4d2dd4e60 100644 --- a/packages/data-stores/src/subscriber/index.ts +++ b/packages/data-stores/src/subscriber/index.ts @@ -1,4 +1,4 @@ -import { registerStore } from '@wordpress/data'; +import { register, createReduxStore } from '@wordpress/data'; import { controls } from '../wpcom-request-controls'; import { createActions } from './actions'; import { STORE_KEY } from './constants'; @@ -7,16 +7,11 @@ import * as selectors from './selectors'; export * from './types'; export type { State }; -let isRegistered = false; -export function register(): typeof STORE_KEY { - if ( ! isRegistered ) { - isRegistered = true; - registerStore( STORE_KEY, { - actions: createActions(), - controls, - reducer, - selectors, - } ); - } - return STORE_KEY; -} +export const store = createReduxStore( STORE_KEY, { + actions: createActions(), + controls, + reducer, + selectors, +} ); + +register( store ); diff --git a/packages/data-stores/src/subscriber/types.ts b/packages/data-stores/src/subscriber/types.ts index ed6d70d7cbaaf5..aafaef4cd9b5ef 100644 --- a/packages/data-stores/src/subscriber/types.ts +++ b/packages/data-stores/src/subscriber/types.ts @@ -1,7 +1,3 @@ -import * as actions from './actions'; -import * as selectors from './selectors'; -import type { DispatchFromMap, SelectFromMap } from '../mapped-types'; - export interface SubscriberState { add?: { inProgress: boolean; @@ -48,9 +44,3 @@ export type ImportSubscribersResponse = { export type GetSubscribersImportResponse = ImportJob; export type GetSubscribersImportsResponse = ImportJob[]; - -export interface SubscriberDispatch { - dispatch: DispatchFromMap< typeof actions >; -} - -export type SubscriberSelect = SelectFromMap< typeof selectors >; diff --git a/packages/subscriber/src/components/add-form/index.tsx b/packages/subscriber/src/components/add-form/index.tsx index 9640f61cebccc2..5eef7f67838de8 100644 --- a/packages/subscriber/src/components/add-form/index.tsx +++ b/packages/subscriber/src/components/add-form/index.tsx @@ -1,5 +1,6 @@ /* eslint-disable wpcalypso/jsx-classname-namespace */ import { FormInputValidation } from '@automattic/components'; +import { Subscriber } from '@automattic/data-stores'; import { localizeUrl } from '@automattic/i18n-utils'; import { Title, SubTitle, NextButton } from '@automattic/onboarding'; import { TextControl, FormFileUpload, Button } from '@wordpress/components'; @@ -20,9 +21,7 @@ import React, { import { useActiveJobRecognition } from '../../hooks/use-active-job-recognition'; import { useInProgressState } from '../../hooks/use-in-progress-state'; import { RecordTrackEvents, useRecordAddFormEvents } from '../../hooks/use-record-add-form-events'; -import { SUBSCRIBER_STORE } from '../../store'; import { tip } from './icon'; -import type { SubscriberSelect } from '@automattic/data-stores'; import './style.scss'; interface Props { @@ -69,7 +68,7 @@ export const AddSubscriberForm: FunctionComponent< Props > = ( props ) => { importCsvSubscribers, importCsvSubscribersUpdate, getSubscribersImports, - } = useDispatch( SUBSCRIBER_STORE ); + } = useDispatch( Subscriber.store ); /** * ↓ Fields @@ -92,7 +91,7 @@ export const AddSubscriberForm: FunctionComponent< Props > = ( props ) => { const [ submitAttemptCount, setSubmitAttemptCount ] = useState( 0 ); const [ submitBtnReady, setIsSubmitBtnReady ] = useState( isSubmitButtonReady() ); const importSelector = useSelect( - ( s ) => ( s( SUBSCRIBER_STORE ) as SubscriberSelect ).getImportSubscribersSelector(), + ( select ) => select( Subscriber.store ).getImportSubscribersSelector(), [] ); const [ formFileUploadElement ] = useState( diff --git a/packages/subscriber/src/hooks/use-active-job-recognition.ts b/packages/subscriber/src/hooks/use-active-job-recognition.ts index a296a9f030c020..8c4889a200b24c 100644 --- a/packages/subscriber/src/hooks/use-active-job-recognition.ts +++ b/packages/subscriber/src/hooks/use-active-job-recognition.ts @@ -1,8 +1,6 @@ import { Subscriber } from '@automattic/data-stores'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect } from 'react'; -import { SUBSCRIBER_STORE } from '../store'; -import type { SubscriberSelect } from '@automattic/data-stores'; type ImportJob = Subscriber.ImportJob; type ImportJobStatus = Subscriber.ImportJobStatus; @@ -11,13 +9,10 @@ export function useActiveJobRecognition( siteId: number ) { const INTERVAL_ACTIVE = 1000; const INTERVAL_INACTIVE = 5000; const ACTIVE_STATE: ImportJobStatus[] = [ 'pending', 'importing' ]; - const { getSubscribersImports, importCsvSubscribersUpdate } = useDispatch( SUBSCRIBER_STORE ); + const { getSubscribersImports, importCsvSubscribersUpdate } = useDispatch( Subscriber.store ); const imports = - useSelect( - ( s ) => ( s( SUBSCRIBER_STORE ) as SubscriberSelect ).getImportJobsSelector(), - [] - ) || []; + useSelect( ( select ) => select( Subscriber.store ).getImportJobsSelector(), [] ) || []; const jobs = imports.filter( ( x: ImportJob ) => ACTIVE_STATE.includes( x.status ) ); const activeJob = jobs.length ? jobs[ 0 ] : undefined; diff --git a/packages/subscriber/src/hooks/use-in-progress-state.ts b/packages/subscriber/src/hooks/use-in-progress-state.ts index 246af031bd594a..9c199e5fb2ec85 100644 --- a/packages/subscriber/src/hooks/use-in-progress-state.ts +++ b/packages/subscriber/src/hooks/use-in-progress-state.ts @@ -1,10 +1,9 @@ +import { Subscriber } from '@automattic/data-stores'; import { useSelect } from '@wordpress/data'; -import { SUBSCRIBER_STORE } from '../store'; -import type { SubscriberSelect } from '@automattic/data-stores'; export function useInProgressState() { const { addSelector, importSelector } = useSelect( ( select ) => { - const subscriber: SubscriberSelect = select( SUBSCRIBER_STORE ); + const subscriber = select( Subscriber.store ); return { addSelector: subscriber.getAddSubscribersSelector(), importSelector: subscriber.getImportSubscribersSelector(), diff --git a/packages/subscriber/src/hooks/use-record-add-form-events.ts b/packages/subscriber/src/hooks/use-record-add-form-events.ts index af7c603f0e4db9..bee2e32b947352 100644 --- a/packages/subscriber/src/hooks/use-record-add-form-events.ts +++ b/packages/subscriber/src/hooks/use-record-add-form-events.ts @@ -1,8 +1,7 @@ +import { Subscriber } from '@automattic/data-stores/src'; import { useSelect } from '@wordpress/data'; import { useEffect, useRef } from 'react'; -import { SUBSCRIBER_STORE } from '../store'; import { useInProgressState } from './use-in-progress-state'; -import type { SubscriberSelect } from '@automattic/data-stores'; export type RecordTrackEvents = ( eventName: string, @@ -14,11 +13,11 @@ export function useRecordAddFormEvents( recordTracksEvent?: RecordTrackEvents, f const inProgress = useInProgressState(); const prevInProgress = useRef( inProgress ); const addSelector = useSelect( - ( s ) => ( s( SUBSCRIBER_STORE ) as SubscriberSelect ).getAddSubscribersSelector(), + ( select ) => select( Subscriber.store ).getAddSubscribersSelector(), [] ); const importSelector = useSelect( - ( s ) => ( s( SUBSCRIBER_STORE ) as SubscriberSelect ).getImportSubscribersSelector(), + ( select ) => select( Subscriber.store ).getImportSubscribersSelector(), [] ); diff --git a/packages/subscriber/src/index.ts b/packages/subscriber/src/index.ts index 3364b6146fafbb..0067315909cab8 100644 --- a/packages/subscriber/src/index.ts +++ b/packages/subscriber/src/index.ts @@ -1,2 +1 @@ -export * from './store'; export { AddSubscriberForm } from './components/add-form'; diff --git a/packages/subscriber/src/store.ts b/packages/subscriber/src/store.ts deleted file mode 100644 index d28e4b52be689d..00000000000000 --- a/packages/subscriber/src/store.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Subscriber } from '@automattic/data-stores'; - -export const SUBSCRIBER_STORE = Subscriber.register();