From b0e8263e2f45b037cf51e52c8ece7910d8f0a645 Mon Sep 17 00:00:00 2001 From: Rostislav Wolny Date: Thu, 15 Dec 2022 14:21:00 +0100 Subject: [PATCH] Hide the task list and store the state in the store [MAILPOET-4826] --- .../js/src/homepage/components/task-list.tsx | 12 ++++++++++-- mailpoet/assets/js/src/homepage/homepage.tsx | 7 ++++--- .../assets/js/src/homepage/store/actions.ts | 3 +++ .../js/src/homepage/store/initial-state.ts | 9 +++++++++ .../assets/js/src/homepage/store/reducer.ts | 17 +++++++++++++++++ .../assets/js/src/homepage/store/selectors.ts | 5 +++++ mailpoet/assets/js/src/homepage/store/store.ts | 18 +++++++----------- mailpoet/assets/js/src/homepage/store/types.ts | 7 +++++++ 8 files changed, 62 insertions(+), 16 deletions(-) create mode 100644 mailpoet/assets/js/src/homepage/store/actions.ts create mode 100644 mailpoet/assets/js/src/homepage/store/initial-state.ts create mode 100644 mailpoet/assets/js/src/homepage/store/reducer.ts create mode 100644 mailpoet/assets/js/src/homepage/store/selectors.ts create mode 100644 mailpoet/assets/js/src/homepage/store/types.ts diff --git a/mailpoet/assets/js/src/homepage/components/task-list.tsx b/mailpoet/assets/js/src/homepage/components/task-list.tsx index 958823cca7..aeabf77ab1 100644 --- a/mailpoet/assets/js/src/homepage/components/task-list.tsx +++ b/mailpoet/assets/js/src/homepage/components/task-list.tsx @@ -1,9 +1,17 @@ import { MailPoet } from 'mailpoet'; +import { useSelect, useDispatch } from '@wordpress/data'; import { DropdownMenu } from '@wordpress/components'; import { moreVertical } from '@wordpress/icons'; +import { storeName } from 'homepage/store/store'; export function TaskList(): JSX.Element { - return ( + const isTaskListHidden = useSelect( + (select) => select(storeName).getIsTaskListHidden(), + [], + ); + const { hideTaskList } = useDispatch(storeName); + + return isTaskListHidden ? null : ( <>

{MailPoet.I18n.t('welcomeToMailPoet')}

{MailPoet.I18n.t('beginByCompletingSetup')}

@@ -13,7 +21,7 @@ export function TaskList(): JSX.Element { controls={[ { title: MailPoet.I18n.t('hideList'), - onClick: () => {}, + onClick: hideTaskList, icon: null, }, ]} diff --git a/mailpoet/assets/js/src/homepage/homepage.tsx b/mailpoet/assets/js/src/homepage/homepage.tsx index 70ed2ff0e2..48b0a7a9c3 100644 --- a/mailpoet/assets/js/src/homepage/homepage.tsx +++ b/mailpoet/assets/js/src/homepage/homepage.tsx @@ -1,5 +1,5 @@ import ReactDOM from 'react-dom'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { GlobalContext, useGlobalContextValue } from 'context/index.jsx'; import { TopBarWithBeamer } from 'common/top_bar/top_bar'; import { HomepageNotices } from 'homepage/notices'; @@ -7,20 +7,21 @@ import { TaskList } from './components/task-list'; import { createStore } from './store/store'; function App(): JSX.Element { + const [isStoreInitialized, setIsStoreInitialized] = useState(false); useEffect(() => { createStore(); + setIsStoreInitialized(true); }, []); return ( - + {isStoreInitialized ? : null} ); } const container = document.getElementById('mailpoet_homepage_container'); - if (container) { ReactDOM.render(, container); } diff --git a/mailpoet/assets/js/src/homepage/store/actions.ts b/mailpoet/assets/js/src/homepage/store/actions.ts new file mode 100644 index 0000000000..5ac05dd14b --- /dev/null +++ b/mailpoet/assets/js/src/homepage/store/actions.ts @@ -0,0 +1,3 @@ +export const hideTaskList = () => ({ + type: 'SET_TASK_LIST_HIDDEN', +}); diff --git a/mailpoet/assets/js/src/homepage/store/initial-state.ts b/mailpoet/assets/js/src/homepage/store/initial-state.ts new file mode 100644 index 0000000000..6a42be90a3 --- /dev/null +++ b/mailpoet/assets/js/src/homepage/store/initial-state.ts @@ -0,0 +1,9 @@ +import { State } from './types'; + +export function getInitialState(): State { + return { + taskList: { + isTaskListHidden: false, + }, + }; +} diff --git a/mailpoet/assets/js/src/homepage/store/reducer.ts b/mailpoet/assets/js/src/homepage/store/reducer.ts new file mode 100644 index 0000000000..4054fec11c --- /dev/null +++ b/mailpoet/assets/js/src/homepage/store/reducer.ts @@ -0,0 +1,17 @@ +import { Action } from '@wordpress/data'; +import { State } from './types'; + +export function reducer(state: State, action: Action): State { + switch (action.type) { + case 'SET_TASK_LIST_HIDDEN': + return { + ...state, + taskList: { + ...state.taskList, + isTaskListHidden: true, + }, + }; + default: + return state; + } +} diff --git a/mailpoet/assets/js/src/homepage/store/selectors.ts b/mailpoet/assets/js/src/homepage/store/selectors.ts new file mode 100644 index 0000000000..1c3e6b0b20 --- /dev/null +++ b/mailpoet/assets/js/src/homepage/store/selectors.ts @@ -0,0 +1,5 @@ +import { State } from './types'; + +export function getIsTaskListHidden(state: State): boolean { + return state.taskList.isTaskListHidden; +} diff --git a/mailpoet/assets/js/src/homepage/store/store.ts b/mailpoet/assets/js/src/homepage/store/store.ts index 7ef4393042..735776612d 100644 --- a/mailpoet/assets/js/src/homepage/store/store.ts +++ b/mailpoet/assets/js/src/homepage/store/store.ts @@ -5,31 +5,27 @@ import { StoreDescriptor, } from '@wordpress/data'; import { OmitFirstArgs } from 'types'; +import { getInitialState } from './initial-state'; +import * as actions from './actions'; +import * as selectors from './selectors'; +import { reducer } from './reducer'; +import { State } from './types'; -const storeName = 'mailpoet/homepage'; -const actions = {}; -const selectors = {}; +export const storeName = 'mailpoet/homepage'; const controls = {}; -const reducer = (state) => state; -const initialState = {}; type StoreType = Omit & { name: typeof storeName; }; -type State = { - [K in string]: never; -}; type EditorStoreConfigType = StoreConfig; - export const createStore = (): StoreType => { const storeConfig = { actions, controls, selectors, reducer, - initialState, + initialState: getInitialState(), } as EditorStoreConfigType; - const store = createReduxStore(storeName, storeConfig) as StoreType; register(store); return store; diff --git a/mailpoet/assets/js/src/homepage/store/types.ts b/mailpoet/assets/js/src/homepage/store/types.ts new file mode 100644 index 0000000000..7565b8123e --- /dev/null +++ b/mailpoet/assets/js/src/homepage/store/types.ts @@ -0,0 +1,7 @@ +export type TaskListState = { + isTaskListHidden: boolean; +}; + +export type State = { + taskList: TaskListState; +};