feat: update EditNavBar to display collection/folder dropdown

This commit updates the EditNavBar layout with a new folderDropdowns
state variable, which is passed to the TemplateNavBar as the
collectionsInfo prop. This gives the TemplateNavBar component the
necessary information to render the dropdown items for collections/folders

src/api.js

@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
 
 import Toast from './components/Toast';
 
-import { DEFAULT_ERROR_TOAST_MSG } from './utils';
+import { DEFAULT_ERROR_TOAST_MSG, parseDirectoryFile, getNavFolderDropdownFromFolderOrder } from './utils';
 
 import elementStyles from './styles/isomer-cms/Elements.module.scss';
 
@@ -44,11 +44,17 @@ const getEditNavBarData = async(siteName) => {
         const resourceResp = await axios.get(`${BACKEND_URL}/sites/${siteName}/resources`)
         resourceContent = resourceResp.data
         const foldersResp = await axios.get(`${BACKEND_URL}/sites/${siteName}/folders/all`)
-        foldersContent = foldersResp.data
 
-        if (foldersContent && foldersContent.allFolderContent) {
+        if (foldersResp.data && foldersResp.data.allFolderContent) {
+            // parse directory files
+            foldersContent = foldersResp.data.allFolderContent.reduce((acc, currFolder) => {
+                const folderOrder = parseDirectoryFile(currFolder.content)
+                acc[currFolder.name.slice(1)] = getNavFolderDropdownFromFolderOrder(folderOrder)
+                return acc
+            }, {})
+
             collectionContent = {
-                collections: foldersContent.allFolderContent.map((folder) => folder.name.slice(1)),
+                collections: foldersResp.data.allFolderContent.map((folder) => folder.name.slice(1)),
             }
         }
 

src/layouts/EditNavBar.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import axios from 'axios';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import update from 'immutability-helper';
@@ -36,6 +35,7 @@ const EditNavBar =  ({ match }) => {
   const [links, setLinks] = useState([])
   const [originalNav, setOriginalNav] = useState()
   const [collections, setCollections] = useState([])
+  const [folderDropdowns, setFolderDropdowns] = useState({})
   const [options, setOptions] = useState([])
   const [displayLinks, setDisplayLinks] = useState([])
   const [displaySublinks, setDisplaySublinks] = useState([])
@@ -142,6 +142,7 @@ const EditNavBar =  ({ match }) => {
         navContent,
         navSha,
         collectionContent,
+        foldersContent,
         resourceContent,
       } = navigationContents
 
@@ -179,6 +180,7 @@ const EditNavBar =  ({ match }) => {
         setDisplayLinks(initialDisplayLinks)
         setDisplaySublinks(initialDisplaySublinks)
         setCollections(initialCollections)
+        setFolderDropdowns(foldersContent)
         setOptions(initialOptions)
         setResources(initialResource.map(resource => deslugifyDirectory(resource.dirName)))
         setOriginalNav(navContent)
@@ -610,7 +612,7 @@ const EditNavBar =  ({ match }) => {
             {/* TODO: update collectionInfo */}
             <TemplateNavBar
               links={links}
-              collectionInfo={null}
+              collectionInfo={folderDropdowns}
               resources={resources}
             />
           </div>

src/templates/NavBar.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const NavDropdownSection = ({ children, link, linkIndex }) => (
+const NavDropdownSection = ({ children, link }) => (
   <div className="navbar-item has-dropdown is-hoverable">
       <a className="navbar-link is-uppercase" href="/" onClick={(event) => event.preventDefault()}>
           { link.title }