Add segments to the state

[MAILPOET-2677]

assets/js/src/settings/components/segments_select.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import $ from 'jquery';
 import 'select2';
+import { useSelector } from 'settings/store/hooks';
 
 type Props = {
   id?: string
@@ -9,9 +10,9 @@ type Props = {
   setValue: (x: string[]) => any
 }
 
-export default ({
+export default (props: Props) => {
-  id, value, placeholder, setValue,
+  const { id, setValue } = props;
-}: Props) => {
+  const segments = useSelector('getSegments')();
   React.useLayoutEffect(() => {
     const idSelector = `#${id}`;
     $(idSelector).select2();
@@ -20,9 +21,9 @@ export default ({
     });
     return () => $(idSelector).select2('destroy');
   }, [id, setValue]);
-  const segments: any[] = (window as any).mailpoet_segments;
+
   return (
-    <select id={id} data-placeholder={placeholder} defaultValue={value} multiple>
+    <select id={id} data-placeholder={props.placeholder} defaultValue={props.value} multiple>
       {segments.map((seg) => (
         <option key={seg.id} value={seg.id}>
           {`${seg.name} (${seg.subscribers})`}

assets/js/src/settings/store/make_default_state.ts

@@ -11,5 +11,6 @@ export default function makeDefaultState(window: any): State {
       newUser: !!window.mailpoet_is_new_user,
     },
     data: window.mailpoet_settings,
+    segments: window.mailpoet_segments,
   };
 }

assets/js/src/settings/store/selectors.ts

@@ -32,3 +32,7 @@ export function isNewUser(state: State) {
 export function isMssActive(state: State) {
   return _.get(state, 'mta.method') === 'MailPoet';
 }
+
+export function getSegments(state: State) {
+  return state.segments;
+}

assets/js/src/settings/store/types.ts

@@ -40,8 +40,15 @@ export type Settings = {
   // ...
 }
 
+type Segment = {
+  id: string
+  name: string
+  subscribers: string
+}
+
 export type State = {
   data: Settings
+  segments: Segment[]
   flags: {
     woocommerce: boolean
     newUser: boolean