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;
+};