🐛 Re: #172 - Moves section filtering to higher order

src/components/LinkItems/Section.vue

@@ -8,7 +8,6 @@
     :rows="displayData.rows"
     :color="displayData.color"
     :customStyles="displayData.customStyles"
-    v-if="isSectionVisibleToUser()"
   >
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet
@@ -52,7 +51,7 @@
 import Item from '@/components/LinkItems/Item.vue';
 import Collapsable from '@/components/LinkItems/Collapsable.vue';
 import IframeModal from '@/components/LinkItems/IframeModal.vue';
-import { getCurrentUser, isLoggedInAsGuest } from '@/utils/Auth';
+// import { isSectionVisibleToUser } from '@/utils/ConfigHelpers';
 
 export default {
   name: 'Section',
@@ -87,9 +86,6 @@ export default {
         ? `grid-template-rows: repeat(${this.displayData.itemCountY}, 1fr);` : '';
       return styles;
     },
-    currentUser() {
-      return getCurrentUser();
-    },
   },
   methods: {
     /* Returns a unique lowercase string, based on name, for section ID */
@@ -117,34 +113,9 @@ export default {
       return interval;
     },
     /* Returns false if this section should not be rendered for the current user/ guest */
-    isSectionVisibleToUser() {
+    // isSectionVisibleToUser() {
-      const determineVisibility = (visibilityList, currentUser) => {
+    //   return isSectionVisibleToUser(this.displayData);
-        let isFound = false;
+    // },
-        visibilityList.forEach((userInList) => {
-          if (userInList.toLowerCase() === currentUser) isFound = true;
-        });
-        return isFound;
-      };
-      const checkVisiblity = () => {
-        if (!this.currentUser) return true;
-        const hideFor = this.displayData.hideForUsers || [];
-        const currentUser = this.currentUser.user.toLowerCase();
-        return !determineVisibility(hideFor, currentUser);
-      };
-      const checkHiddenability = () => {
-        if (!this.currentUser) return true;
-        const currentUser = this.currentUser.user.toLowerCase();
-        const showForUsers = this.displayData.showForUsers || [];
-        if (showForUsers.length < 1) return true;
-        return determineVisibility(showForUsers, currentUser);
-      };
-      const checkIfHideForGuest = () => {
-        const hideForGuest = this.displayData.hideForGuests;
-        const isGuest = isLoggedInAsGuest();
-        return !(hideForGuest && isGuest);
-      };
-      return checkVisiblity() && checkHiddenability() && checkIfHideForGuest();
-    },
   },
 };
 </script>

src/utils/CheckSectionVisibility.js

@@ -0,0 +1,64 @@
+/**
+ * A helper function that filters all the sections based on current users permissions
+ * Checks each sections displayData for hideForUsers, showForUsers and hideForGuests
+ * Returns an array of sections that the current logged in user has permissions for
+ */
+
+// Import helper functions from auth, to get current user, and check if guest
+import { getCurrentUser, isLoggedInAsGuest } from '@/utils/Auth';
+
+/* Helper function, checks if a given username appears in a user array */
+const determineVisibility = (visibilityList, cUsername) => {
+  let isFound = false;
+  visibilityList.forEach((userInList) => {
+    if (userInList.toLowerCase() === cUsername) isFound = true;
+  });
+  return isFound;
+};
+
+/* Returns false if this section should not be rendered for the current user/ guest */
+const isSectionVisibleToUser = (displayData, currentUser, isGuest) => {
+  // Checks if user explicitly has access to a certain section
+  const checkVisiblity = () => {
+    if (!currentUser) return true;
+    const hideFor = displayData.hideForUsers || [];
+    const cUsername = currentUser.user.toLowerCase();
+    return !determineVisibility(hideFor, cUsername);
+  };
+  // Checks if user is explicitly prevented from viewing a certain section
+  const checkHiddenability = () => {
+    if (!currentUser) return true;
+    const cUsername = currentUser.user.toLowerCase();
+    const showForUsers = displayData.showForUsers || [];
+    if (showForUsers.length < 1) return true;
+    return determineVisibility(showForUsers, cUsername);
+  };
+  // Checks if the current user is a guest, and if section allows for guests
+  const checkIfHideForGuest = () => {
+    const hideForGuest = displayData.hideForGuests;
+    return !(hideForGuest && isGuest);
+  };
+  return checkVisiblity() && checkHiddenability() && checkIfHideForGuest();
+};
+
+/* Putting it all together, the function to export */
+const filterSectionVisibility = (sections) => {
+  const currentUser = getCurrentUser(); // Get current user object
+  const isGuest = isLoggedInAsGuest(); // Check if current user is a guest
+  // const sectionsToReturn = [];
+  // sections.forEach((currentSection) => {
+  //   const displayData = currentSection.displayData || {};
+  //   if (isSectionVisibleToUser(displayData, currentUser, isGuest)) {
+  //     sectionsToReturn.push(currentSection);
+  //   }
+  // });
+
+  const filteredSections = sections.filter((currentSection) => {
+    const displayData = currentSection.displayData || {};
+    return isSectionVisibleToUser(displayData, currentUser, isGuest);
+  });
+
+  return filteredSections;
+};
+
+export default filterSectionVisibility;

src/utils/ConfigHelpers.js

@@ -1,4 +1,5 @@
 import ConfigAccumulator from '@/utils/ConfigAccumalator';
+import filterUserSections from '@/utils/CheckSectionVisibility';
 import { languages } from '@/utils/languages';
 import {
   visibleComponents,
@@ -13,7 +14,12 @@ import {
  */
 export const config = (() => {
   const Accumulator = new ConfigAccumulator();
-  return Accumulator.config();
+  // return Accumulator.config();
+  return {
+    appConfig: Accumulator.appConfig(),
+    pageInfo: Accumulator.pageInfo(),
+    sections: filterUserSections(Accumulator.sections()),
+  };
 })();
 
 /**