Replace isContentLoaded getter with state property

When a user submits empty content in the Static Site Editor,
the publish toolbar dissappears because the originalContent
property becomes empty. The isContentLoaded property depends
on the originalContent property to determine if there is
content to display.

This change decouples detecting that content is loaded from
detecting changes in the content

app/assets/javascripts/static_site_editor/components/static_site_editor.vue

@@ -12,8 +12,8 @@ export default {
     Toolbar,
   },
   computed: {
-    ...mapState(['content', 'isLoadingContent', 'isSavingChanges']),
-    ...mapGetters(['isContentLoaded', 'contentChanged']),
+    ...mapState(['content', 'isLoadingContent', 'isSavingChanges', 'isContentLoaded']),
+    ...mapGetters(['contentChanged']),
   },
   mounted() {
     this.loadContent();

app/assets/javascripts/static_site_editor/store/getters.js

-export const isContentLoaded = ({ originalContent }) => Boolean(originalContent);
+// eslint-disable-next-line import/prefer-default-export
 export const contentChanged = ({ originalContent, content }) => originalContent !== content;

app/assets/javascripts/static_site_editor/store/mutations.js

@@ -6,6 +6,7 @@ export default {
   },
   [types.RECEIVE_CONTENT_SUCCESS](state, { title, content }) {
     state.isLoadingContent = false;
+    state.isContentLoaded = true;
     state.title = title;
     state.content = content;
     state.originalContent = content;

app/assets/javascripts/static_site_editor/store/state.js

@@ -6,6 +6,8 @@ const createState = (initialState = {}) => ({
   isLoadingContent: false,
   isSavingChanges: false,
 
+  isContentLoaded: false,
+
   originalContent: '',
   content: '',
   title: '',

spec/frontend/static_site_editor/components/static_site_editor_spec.js

@@ -30,7 +30,6 @@ describe('StaticSiteEditor', () => {
     store = new Vuex.Store({
       state: createState(initialState),
       getters: {
-        isContentLoaded: () => false,
         contentChanged: () => false,
         ...getters,
       },
@@ -43,9 +42,11 @@ describe('StaticSiteEditor', () => {
   };
   const buildContentLoadedStore = ({ initialState, getters } = {}) => {
     buildStore({
-      initialState,
+      initialState: {
+        isContentLoaded: true,
+        ...initialState,
+      },
       getters: {
-        isContentLoaded: () => true,
         ...getters,
       },
     });
@@ -85,7 +86,7 @@ describe('StaticSiteEditor', () => {
     const content = 'edit area content';
 
     beforeEach(() => {
-      buildStore({ initialState: { content }, getters: { isContentLoaded: () => true } });
+      buildContentLoadedStore({ initialState: { content } });
       buildWrapper();
     });
 

spec/frontend/static_site_editor/store/getters_spec.js

 import createState from '~/static_site_editor/store/state';
-import { isContentLoaded, contentChanged } from '~/static_site_editor/store/getters';
+import { contentChanged } from '~/static_site_editor/store/getters';
 import { sourceContent as content } from '../mock_data';
 
 describe('Static Site Editor Store getters', () => {
-  describe('isContentLoaded', () => {
-    it('returns true when originalContent is not empty', () => {
-      expect(isContentLoaded(createState({ originalContent: content }))).toBe(true);
-    });
-
-    it('returns false when originalContent is empty', () => {
-      expect(isContentLoaded(createState({ originalContent: '' }))).toBe(false);
-    });
-  });
-
   describe('contentChanged', () => {
     it('returns true when content and originalContent are different', () => {
       const state = createState({ content, originalContent: 'something else' });

spec/frontend/static_site_editor/store/mutations_spec.js

@@ -19,6 +19,7 @@ describe('Static Site Editor Store mutations', () => {
     mutation                         | stateProperty         | payload                 | expectedValue
     ${types.LOAD_CONTENT}            | ${'isLoadingContent'} | ${undefined}            | ${true}
     ${types.RECEIVE_CONTENT_SUCCESS} | ${'isLoadingContent'} | ${contentLoadedPayload} | ${false}
+    ${types.RECEIVE_CONTENT_SUCCESS} | ${'isContentLoaded'}  | ${contentLoadedPayload} | ${true}
     ${types.RECEIVE_CONTENT_SUCCESS} | ${'title'}            | ${contentLoadedPayload} | ${title}
     ${types.RECEIVE_CONTENT_SUCCESS} | ${'content'}          | ${contentLoadedPayload} | ${content}
     ${types.RECEIVE_CONTENT_SUCCESS} | ${'originalContent'}  | ${contentLoadedPayload} | ${content}