fix: the canAddMirrorSection method wasn't taking the current number of pages in count

Author: did

app/frontend/editor/components/page/list/index.vue

@@ -18,6 +18,7 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
 import GroupedDropdownsMixin from '@/mixins/grouped-dropdowns'
 import ListItem from './list-item.vue'
 
@@ -40,9 +41,11 @@ export default {
     },
   },
   methods: {
+    ...mapActions(['setOneSinglePage']),
     async fetch() {
       this.isLoading = true
       this.pages = await this.services.page.findAll({ q: this.q })
+      this.setOneSinglePage(this.previewablePages.length === 1)
       this.isLoading = false
     },
   },

app/frontend/editor/components/theme-section-list/index.vue

@@ -58,24 +58,16 @@ export default {
     return { activeCategory: null }
   },
   computed: {
-    ...mapGetters(['categoriesByLayoutGroupId', 'layoutGroupDefinition']),
+    ...mapGetters(['categoriesByLayoutGroupId', 'layoutGroupDefinition', 'canAddMirroredSection']),
     categories() {
       return this.categoriesByLayoutGroupId(this.layoutGroupId)
     },
     noCategories() {
       return this.categories.length === 0
     },
-    canAddMirroredSection() {
-      return this.services.section.canAddMirroredSection({ 
-        numberOfPages: this.currentSite.numberOfPages 
-      })
-    },
-    layoutGroup() {
-      return this.layoutGroupDefinition(this.layoutGroupId)
-    },
     allowSectionMirroring() {
-      return this.currentTheme.mirrorSection && this.layoutGroup.mirrorSection !== false && this.canAddMirroredSection
-    }
+      return this.canAddMirroredSection(this.layoutGroupId)
+    },   
   },
 }
 </script>

app/frontend/editor/services/section.js

@@ -15,8 +15,8 @@ export const calculateMovingIndices = (sectionIds, sectionId, direction) => {
   return { fromIndex, toIndex }
 }
 
-export const canAddMirroredSection = ({ numberOfPages, page, sections, mirrorOf }) => {
-  if (numberOfPages === 1) return false
+export const canAddMirroredSection = ({ hasOneSinglePage, page, sections, mirrorOf }) => {
+  if (hasOneSinglePage) return false
 
   // when canAddMirroredSection is called from the list of sections, let's assume everything is good
   if (mirrorOf === undefined) return true 

app/frontend/editor/store/actions/page.js

@@ -20,6 +20,11 @@ export default (services) => ({
     commit('SET_PAGE', page)
   },
 
+  // Set the oneSinglePage flag
+  setOneSinglePage({ commit }, oneSinglePage) {
+    commit('SET_ONE_SINGLE_PAGE', oneSinglePage)
+  },
+
   // Reload a page: get fresh content + reload the preview iframe
   async reloadPage({ state, dispatch }, { id }) {
     await dispatch('editPage', { id })
@@ -32,43 +37,6 @@ export default (services) => ({
       .findById(site, id)
       .then((page) => commit('SET_PAGE', page))
   },  
-  // Persist the content of a page (including or not the site content)
-  // async persistPage({
-  //   commit,
-  //   dispatch,
-  //   state: { page, site, style },
-  //   getters: { content, defaultPageAttributes },
-  // }) {
-  //   console.log('🚨🚨🚨 services.page.persistPage is DEPRECATED')
-
-  //   commit('SET_SAVE_BUTTON_STATE', 'inProgress')
-
-  //   const pageAttributes = {
-  //     sections: content.pageSections,
-  //     lockVersion: page.lockVersion,
-  //     ...defaultPageAttributes,
-  //   }
-  //   const siteAttributes = isBlank(content.siteSections)
-  //     ? { style }
-  //     : {
-  //         sections: content.siteSections,
-  //         lockVersion: site.lockVersion,
-  //         style,
-  //       }
-
-  //   return services.page
-  //     .update(page.id, pageAttributes, siteAttributes)
-  //     .then(() => {
-  //       commit('SET_SAVE_BUTTON_STATE', 'success')
-  //       commit('RESET_TOUCHED_SECTIONS')
-  //       Promise.all([dispatch('fetchPage', page.id), dispatch('fetchSite')])
-  //     })
-  //     .catch(({ response: { status } }) => {
-  //       commit('SET_SAVE_BUTTON_STATE', 'fail')
-  //       console.log('[Maglev] could not save the page', status)
-  //       if (status === 409) commit('OPEN_ERROR_MODAL', 'staleRecord')
-  //     })
-  // },
   setCurrentPageSettings({ commit }, pageSettings) {
     commit('SET_PAGE_SETTINGS', pageSettings)
   },

app/frontend/editor/store/actions/section.js

@@ -135,5 +135,5 @@ export default (services) => ({
       direction,
     )    
     dispatch('moveSection', { layoutGroupId, from: indices.fromIndex, to: indices.toIndex })
-  },
+  }
 })

app/frontend/editor/store/actions/site.js

@@ -5,6 +5,7 @@ export default (services) => ({
       services.api.setSiteHandle(site.handle)
       commit('SET_SITE', rawSite)
       commit('SET_STYLE', style)
+      commit('SET_ONE_SINGLE_PAGE', site.numberOfPages === 1)
     })
   },
   loadPublishButtonState({ state, commit }) {

app/frontend/editor/store/default-state.js

@@ -18,6 +18,7 @@ export default {
   siteScopedSections: {}, // site-wide sections like headers/footers
   editorSettings: {},
   touchedSections: [],
+  oneSinglePage: true,
   ui: {
     saveButtonState: 'default',
     publishButtonState: {

app/frontend/editor/store/getters.js

@@ -178,9 +178,16 @@ export default (services) => ({
       return services.section.getSettings(sectionBlockDefinition, advanced)
     },
   canAddSection: 
-    ({ theme, page: { layoutId } }, { categoriesByLayoutGroupId }) => 
+    ({}, { categoriesByLayoutGroupId }) => 
     (layoutGroupId) => {
       const categories = categoriesByLayoutGroupId(layoutGroupId)
       return categories.some(({ children }) => children.length > 0)
-    }
+    },
+    canAddMirroredSection: ({ theme, oneSinglePage }, { layoutGroupDefinition }) => 
+    (layoutGroupId) => {
+      const layoutGroup = layoutGroupDefinition(layoutGroupId)
+      return theme.mirrorSection && layoutGroup.mirrorSection !== false && services.section.canAddMirroredSection({ 
+        hasOneSinglePage: oneSinglePage
+      })
+    },
 })

app/frontend/editor/store/mutations.js

@@ -38,6 +38,9 @@ export default (services) => ({
     omitEmpty(attributes)
     state.page = { ...state.page, ...attributes }
   },
+  SET_ONE_SINGLE_PAGE(state, oneSinglePage) {
+    state.oneSinglePage = oneSinglePage
+  },
   // === SECTIONS CONTENT ===
   SET_SECTIONS_CONTENT(state, content) {
     const { entities, result } = services.sectionsContent.normalize(content)