Store that fullsreen is enabled and toggle is-fullscreen class

[MAILPOET-3205]

assets/js/src/form_editor/components/editor.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import '@wordpress/core-data';
 import { select, useSelect, useDispatch } from '@wordpress/data';
 import {
@@ -43,6 +43,10 @@ export default () => {
     (sel) => sel('mailpoet-form-editor').getSidebarOpened(),
     []
   );
+  const isFullscreen = useSelect(
+    (sel) => sel('mailpoet-form-editor').isFullscreenEnabled(),
+    []
+  );
   const canUserUpload = useSelect(
     (sel) => sel('core').canUser('create', 'media'),
     []
@@ -63,6 +67,14 @@ export default () => {
 
   const { blocksChangedInBlockEditor } = useDispatch('mailpoet-form-editor');
 
+  useEffect(() => {
+    if (isFullscreen) {
+      document.body.classList.add('is-fullscreen-mode');
+    } else {
+      document.body.classList.remove('is-fullscreen-mode');
+    }
+  }, [isFullscreen]);
+
   // Editor settings - see @wordpress/block-editor/src/store/defaults.js
   const editorSettings = {
     mediaUpload: canUserUpload ? uploadMedia : null,

assets/js/src/form_editor/components/header.jsx

@@ -29,8 +29,16 @@ const Header = ({ isInserterOpened, setIsInserterOpened }) => {
     (select) => select('mailpoet-form-editor').getIsPreviewShown(),
     []
   );
-  const isFullsScreen = true;
-  const { toggleSidebar, saveForm, showPreview } = useDispatch('mailpoet-form-editor');
+  const isFullscreen = useSelect(
+    (select) => select('mailpoet-form-editor').isFullscreenEnabled(),
+    []
+  );
+  const {
+    toggleSidebar,
+    saveForm,
+    showPreview,
+    toggleFullscreen,
+  } = useDispatch('mailpoet-form-editor');
 
   return (
     <div className="edit-post-header">
@@ -71,8 +79,8 @@ const Header = ({ isInserterOpened, setIsInserterOpened }) => {
                 shortcut="Ctrl+Shift+Alt+F"
                 label="Fullscreen mode"
                 info="Work without distraction"
-                isActive={isFullsScreen}
-                onToggle={() => console.log('click')}
+                isActive={isFullscreen}
+                onToggle={() => toggleFullscreen(!isFullscreen)}
               />
             </MenuGroup>
           )}

assets/js/src/form_editor/store/actions.ts

@@ -21,6 +21,18 @@ export function toggleForm(enabled) {
   };
 }
 
+export function* toggleFullscreen(toggleTo) {
+  yield {
+    type: 'STORE_LOCALLY',
+    key: 'mailpoet_form_view_options',
+    value: toggleTo,
+  };
+  yield {
+    type: 'TOGGLE_FULLSCREEN',
+    toggleTo,
+  };
+}
+
 export function changeFormBlocks(blocks) {
   return {
     type: 'CHANGE_FORM_BLOCKS',

assets/js/src/form_editor/store/reducer.jsx

@@ -34,6 +34,7 @@ import {
   disableForm,
   enableForm,
 } from './reducers/toggle_form';
+import toggleFullscreen from './reducers/toggle_fullscreen';
 
 const createCustomFieldStarted = createCustomFieldStartedFactory(MailPoet);
 const saveFormStarted = saveFormStartedFactory(MailPoet);
@@ -42,6 +43,7 @@ export default (defaultState) => (state = defaultState, action) => {
   switch (action.type) {
     case 'ENABLE_FORM': return enableForm(state);
     case 'DISABLE_FORM': return disableForm(state);
+    case 'TOGGLE_FULLSCREEN': return toggleFullscreen(state, action);
     case 'CREATE_CUSTOM_FIELD_DONE': return createCustomFieldDone(state, action);
     case 'CREATE_CUSTOM_FIELD_FAILED': return createCustomFieldFailed(state, action);
     case 'CREATE_CUSTOM_FIELD_STARTED': return createCustomFieldStarted(state, action);

assets/js/src/form_editor/store/reducers/toggle_fullscreen.ts

@@ -0,0 +1,4 @@
+export default (state, action) => ({
+  ...state,
+  fullscreenStatus: action.toggleTo,
+});

assets/js/src/form_editor/store/selectors.jsx

@@ -19,6 +19,9 @@ export default {
   isFormEnabled(state) {
     return state.formData.status === 'enabled';
   },
+  isFullscreenEnabled(state) {
+    return state.fullscreenStatus;
+  },
   getSidebarOpened(state) {
     return state.sidebarOpened;
   },

assets/js/src/form_editor/store/store.jsx

@@ -42,6 +42,13 @@ export default () => {
     // We just keep it null
   }
 
+  let fullscreenStatus = null;
+  try {
+    fullscreenStatus = JSON.parse(window.localStorage.getItem('mailpoet_form_view_options'));
+  } catch (e) {
+    fullscreenStatus = 'disabled';
+  }
+
   const defaultState = {
     formBlocks,
     formData: mapFormDataAfterLoading(formData),
@@ -63,6 +70,7 @@ export default () => {
       openedPanels: ['basic-settings'],
     },
     previewSettings,
+    fullscreenStatus,
     editorUrl: window.location.href,
     previewPageUrl: window.mailpoet_form_preview_page,
     closeIconsUrl: window.mailpoet_close_icons_url,