Hide the task list and store the state in the store

[MAILPOET-4826]

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 : (
     <>
       <h1>{MailPoet.I18n.t('welcomeToMailPoet')}</h1>
       <h2>{MailPoet.I18n.t('beginByCompletingSetup')}</h2>
@@ -13,7 +21,7 @@ export function TaskList(): JSX.Element {
         controls={[
           {
             title: MailPoet.I18n.t('hideList'),
-            onClick: () => {},
+            onClick: hideTaskList,
             icon: null,
           },
         ]}

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 (
     <GlobalContext.Provider value={useGlobalContextValue(window)}>
       <TopBarWithBeamer />
       <HomepageNotices />
-      <TaskList />
+      {isStoreInitialized ? <TaskList /> : null}
     </GlobalContext.Provider>
   );
 }
 
 const container = document.getElementById('mailpoet_homepage_container');
-
 if (container) {
   ReactDOM.render(<App />, container);
 }

mailpoet/assets/js/src/homepage/store/actions.ts

@@ -0,0 +1,3 @@
+export const hideTaskList = () => ({
+  type: 'SET_TASK_LIST_HIDDEN',
+});

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

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

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

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<StoreDescriptor, 'name'> & {
   name: typeof storeName;
 };
-type State = {
-  [K in string]: never;
-};
 type EditorStoreConfigType = StoreConfig<State>;
-
 export const createStore = (): StoreType => {
   const storeConfig = {
     actions,
     controls,
     selectors,
     reducer,
-    initialState,
+    initialState: getInitialState(),
   } as EditorStoreConfigType;
-
   const store = createReduxStore<State>(storeName, storeConfig) as StoreType;
   register(store);
   return store;

mailpoet/assets/js/src/homepage/store/types.ts

@@ -0,0 +1,7 @@
+export type TaskListState = {
+  isTaskListHidden: boolean;
+};
+
+export type State = {
+  taskList: TaskListState;
+};