Feat/display collection in nav bar

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,23 +44,36 @@ const getFolderContents = async (siteName, folderName, subfolderName) => {
 // EditNavBar
 
 const getEditNavBarData = async(siteName) => {
-    let navContent, collectionContent, resourceContent, navSha
+    let navContent, collectionContent, foldersContent, resourceContent, navSha
       try {
         const resp = await axios.get(`${BACKEND_URL}/sites/${siteName}/navigation`);
         const { content, sha } = resp.data;
         navContent = content
         navSha = sha
-        const collectionResp = await axios.get(`${BACKEND_URL}/sites/${siteName}/collections`)
-        collectionContent = collectionResp.data
         const resourceResp = await axios.get(`${BACKEND_URL}/sites/${siteName}/resources`)
         resourceContent = resourceResp.data
+        const foldersResp = await axios.get(`${BACKEND_URL}/sites/${siteName}/folders/all`)
+
+        if (foldersResp.data && foldersResp.data.allFolderContent) {
+            // parse directory files
+            foldersContent = foldersResp.data.allFolderContent.reduce((acc, currFolder) => {
+                const folderOrder = parseDirectoryFile(currFolder.content)
+                acc[currFolder.name] = getNavFolderDropdownFromFolderOrder(folderOrder)
+                return acc
+            }, {})
+
+            collectionContent = {
+                collections: foldersResp.data.allFolderContent.map((folder) => folder.name),
+            }
+        }
 
         if (!navContent) return
 
         return {
             navContent,
             navSha,
             collectionContent,
+            foldersContent,
             resourceContent,
         }
       } catch (err) {

src/hooks/useSiteColorsHook.jsx

@@ -16,7 +16,6 @@ const useSiteColorsHook = () => {
 
     const retrieveSiteColors = async (siteName) => {
         const siteColors = getLocalStorageSiteColors()
-        console.log(siteColors, 'test')
         // if (!siteColors[siteName]) {
         if (!siteColors || !siteColors[siteName]) {
 

src/layouts/EditNavBar.jsx

@@ -35,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([])
@@ -141,6 +142,7 @@ const EditNavBar =  ({ match }) => {
         navContent,
         navSha,
         collectionContent,
+        foldersContent,
         resourceContent,
       } = navigationContents
 
@@ -178,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)
@@ -609,7 +612,7 @@ const EditNavBar =  ({ match }) => {
             {/* TODO: update collectionInfo */}
             <TemplateNavBar
               links={links}
-              collectionInfo={null}
+              collectionInfo={folderDropdowns}
               resources={resources}
             />
           </div>

src/templates/NavBar.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const NavDropdownSection = ({ children, link, linkIndex }) => (
-  <div className="navbar-item has-dropdown is-hoverable" key={`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 }
       </a>
@@ -21,7 +21,7 @@ const TemplateNavBar = ({ links, collectionInfo, resources }) => (
             links.map((link, linkIndex) => {
               if (link.collection) {
                 return (
-                  <NavDropdownSection link={link} linkIndex={linkIndex}>
+                  <NavDropdownSection link={link} linkIndex={linkIndex} key={linkIndex}>
                     {collectionInfo && collectionInfo[link.collection].map((collection, collectionIndex) => (
                       <a className="navbar-item sub-link" href="/" onClick={(event) => event.preventDefault()} key={`collection-${collectionIndex}`}>
                         { collection }
@@ -32,7 +32,7 @@ const TemplateNavBar = ({ links, collectionInfo, resources }) => (
               }
               if (link.resource_room) {
                 return (
-                  <NavDropdownSection link={link} linkIndex={linkIndex}>
+                  <NavDropdownSection link={link} linkIndex={linkIndex} key={linkIndex}>
                     {resources && resources.map((resource, resourceIndex) => (
                       <a className="navbar-item sub-link" href="/" onClick={(event) => event.preventDefault()} key={`resource-${resourceIndex}`}>
                         { resource }
@@ -43,7 +43,7 @@ const TemplateNavBar = ({ links, collectionInfo, resources }) => (
               }
               if (link.sublinks) {
                 return (
-                  <NavDropdownSection link={link} linkIndex={linkIndex}>
+                  <NavDropdownSection link={link} linkIndex={linkIndex} key={linkIndex}>
                     {link.sublinks && link.sublinks.map((sublink, sublinkIndex) => (
                       <a className="navbar-item sub-link" href="/" onClick={(event) => event.preventDefault()} key={`sublink-${sublinkIndex}`}>
                         { sublink.title }

src/utils.js

@@ -559,6 +559,22 @@ export const updateDirectoryFile = (folderContent, folderOrder) => {
   return Base64.encode(yaml.safeDump(decodedContent))
 }
 
+export const getNavFolderDropdownFromFolderOrder = (folderOrder) => {
+  return folderOrder.reduce((acc, curr) => {
+    const pathArr = curr.split('/') // sample paths: "prize-sponsor.md", "prize-jury/nominating-committee.md"
+
+    if (pathArr.length === 1) {
+      acc.push(deslugifyDirectory(curr.split('.')[0])) // remove file extension
+    }
+
+    if (pathArr.length === 2 && deslugifyDirectory(pathArr[0]) !== acc[acc.length - 1]) {
+      acc.push(deslugifyDirectory(pathArr[0]))
+    }
+
+    return acc
+  }, [])
+}
+
 export const convertFolderOrderToArray = (folderOrder) => {
   let currFolderEntry = {}
   return folderOrder.reduce((acc, curr, currIdx) => {