feat: change branches

AirWalk-Digital · Sep 11, 2023 · 21fe7a6 · 21fe7a6
1 parent 1e13914
commit 21fe7a6
Show file tree

Hide file tree

Showing 9 changed files with 239 additions and 507 deletions.
diff --git a/components/content/ContentPage.jsx b/components/content/ContentPage.jsx
@@ -19,6 +19,12 @@ import { AsideAndMainContainer, Aside, Main } from '@/components/airview-ui';
 import { TableOfContents } from '@/components/content';
 import { ContentWrapperContext } from '@/components/content';
 import { Etherpad } from '@/components/etherpad';
+import { useSelector, useDispatch } from 'react-redux'
+import store from '@/lib/redux/store'
+import { setBranch } from '@/lib/redux/reducers/branchSlice'
+
+import { useRouter } from 'next/router'
+
 import deepEqual from 'deep-equal';
 import path from 'path';
 
@@ -55,6 +61,20 @@ export function ContentPage({
 
   // ControlBar
   const [controlBarOpen, setControlBarOpen] = useState(false);
+
+  const queryBranch = useRouter()?.query?.branch ?? null; // this loads direct links to the content using ?branch=whatever query parameter
+  const currentState = store.getState();
+  const reduxBranch = currentState.branch.name;
+  if (queryBranch != reduxBranch) {
+    console.log('queryBranch: ', queryBranch, ' : ', reduxBranch)
+    // const dispatch = useDispatch()
+    // dispatch(setBranch(queryBranch))
+    // setControlBarOpen(true)
+    // setChangeBranch(true)
+  } // set the branch from the query parameter ?branch=
+
+
+
   const handleEditMode = (mode) => {
     setEditMode(mode)
     setMenuOpen(!mode)
@@ -71,6 +91,12 @@ export function ContentPage({
   const handleOnNavButtonClick = () => setMenuOpen((prevState) => !prevState);
 
   const { primary, relatedContent } = menuStructure || {};
+
+  function handleRefresh() {
+    // console.log('ContentPage:handleRefresh:context: ', context)
+    handleContentChange(context.file)
+  }
+
   function handlePrint() {
     setPrint(!print);
     setMenuOpen(print);
@@ -116,6 +142,7 @@ export function ContentPage({
           <ControlBar open={controlBarOpen} height={64}
             handleEdit={handleEditMode}
             handlePrint={handlePrint}
+            handleRefresh={handleRefresh}
             handlePresentation={frontmatter?.format === 'presentation' ? handlePresentation : null}
             collection={collection}
           />
@@ -195,7 +222,7 @@ export function ContentPage({
                   handlePageReset={handlePageReset}
                   file={file}
                 />
-                { sideComponent && <SideComponent /> }
+                {sideComponent && <SideComponent />}
                 {frontmatter?.tableOfContents && <TableOfContents tableOfContents={frontmatter.tableOfContents} />}
 
                 {/* <ButtonMenu
@@ -259,9 +286,9 @@ function ContentMenu({ content, file, handleContentChange, handlePageReset, cont
             links: content[directory][collectionItem]
           }
         )
-      } 
+      }
     }
-  
+
     if (content[directory].chapters) {
       chaptersMenu.push(
         {

diff --git a/components/dashboard/TopBar/ControlBar.jsx b/components/dashboard/TopBar/ControlBar.jsx
@@ -1,44 +1,51 @@
-import React, { useState, useContext } from "react";
-import Button from '@mui/material/Button';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import { Menu as MenuIcon, ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
-import ArrowBackIosNewOutlinedIcon from '@mui/icons-material/ArrowBackIosNewOutlined';
-import { Toolbar, AppBar, FormGroup, FormControlLabel, Switch, IconButton, TextField, Stack, Autocomplete } from '@mui/material';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
-import Link from '@mui/material/Link';
-import CloseIcon from "@mui/icons-material/Close";
+import React, { useState } from "react";
+
+import { Toolbar, AppBar,  FormControlLabel, Switch, IconButton, TextField, Stack, Autocomplete } from '@mui/material';
 import PrintIcon from '@mui/icons-material/Print';
 import SlideshowIcon from '@mui/icons-material/Slideshow';
-import { styled } from "@mui/material/styles";
-// import { siteConfig } from "../../site.config.js";
-import {useBranch} from '@/components/content'
+import { useSelector, useDispatch } from 'react-redux'
+import { setBranch } from '@/lib/redux/reducers/branchSlice'
+
 
 
 export function ControlBar({
-    open, height, handleEdit, pageType, handlePrint, handlePresentation, collection }) {
+    open, height, handleEdit, handleRefresh, handlePrint, handlePresentation, collection }) {
     const [edit, setEdit] = useState(false);
 
     const [changeBranch, setChangeBranch] = useState(false);
 
-    const { currentBranch, setCurrentBranch } = useBranch();
-
+    // const queryBranch = useRouter()?.query?.branch ?? null; // this loads direct links to the content using ?branch=whatever query parameter
+    const dispatch = useDispatch()
 
-    const handleBranchClick = () => {
+    const [branches, setBranches] = useState([{ name: 'main' }]);
 
+    const handleBranchClick = async () => { // handles the toggling of the "Change Branch" selector
+        // console.log('handleBranchClick:changeBranch: ', changeBranch)
         if (changeBranch) {
-            setCurrentBranch(collection.repo) // default the branch back
+            await dispatch(setBranch(collection.branch)) // default the branch back
+            // console.log('handleBranchClick:reset: ', collection.branch)
+            handleRefresh(); // reset the page
+        } else {
+            fetchBranches(collection);
         }
         setChangeBranch(!changeBranch);
-
     };
 
+    function fetchBranches(collection) {
+        const branches = async () => {
+            const res = await fetch(`/api/repo/get-branches?owner=${collection.owner}&repo=${collection.repo}`); // fetch draft content to add to the menus.
+            const data = await res.json();
+            setBranches(data)
+        };
+        branches()
+    }
 
-
-    function handleBranch(event, value) {
-        // console.log('handleBranch:value: ', value)
-        setCurrentBranch(value)
+    async function handleBranch(event, value) { // handles the branch selector changing
+        if (value) {
+            // console.log('handleBranch:value: ', value)
+            await dispatch(setBranch(value))
+            handleRefresh(); // reset the page
+        }
         // setSelectedBranch(value);
     }
 
@@ -83,7 +90,7 @@ export function ControlBar({
 
 
                     } label="Change Branch" />
-                    {changeBranch && collection && <FormControlLabel control={<BranchSelector branch={currentBranch} handleBranch={handleBranch} />} label="" />}
+                    {changeBranch && collection && <FormControlLabel control={<BranchSelector defaultBranch={collection.branch} handleBranch={handleBranch} branches={branches} />} label="" />}
                 </div>
                 <div>
                     {handlePrint && <FormControlLabel control={<IconButton
@@ -107,10 +114,16 @@ export function ControlBar({
 
 }
 
-function BranchSelector({ handleBranch, branch }) {
-    const branches = [
-        { name: 'main' },
-    ]
+function BranchSelector({ defaultBranch, handleBranch, branches }) {
+    const { name: reduxBranch } = useSelector((state) => state.branch);
+    let branch;
+
+    if (reduxBranch !== 'none') {
+        branch = defaultBranch
+    } else {
+        branch = reduxBranch
+    }
+
     return (
 
         <Stack spacing={2} sx={{ width: 300 }}>

diff --git a/lib/hooks/usePageContent.js b/lib/hooks/usePageContent.js
@@ -18,6 +18,7 @@ import deepEqual from 'deep-equal';
 import { useMDX } from '@/lib/content/mdx'
 import path from 'path';
 import { siteConfig } from '../../site.config.js';
+import store from '@/lib/redux/store'
 
 
 function loadMDX(source, format = 'mdx', wrapper = null) {
@@ -79,7 +80,6 @@ export function usePageContent(initialContent, initialFile, initialMenuStructure
     content: undefined,
     frontmatter: undefined,
   });
-  const [file, setFile] = useState(initialFile);
 
   const [content, setContent] = useState(initialContent);
   const [contentSource, setContentSource] = useState(null);
@@ -89,13 +89,14 @@ export function usePageContent(initialContent, initialFile, initialMenuStructure
   const [context, setContext] = useState({ file: initialFile, ...collectionName(initialFile, collection) });
 
 
+
   const frontMatterCallback = (frontmatter) => {
     setContent({ frontmatter: frontmatter })
   }
 
   const handlePageReset = () => {
 
-    console.log('reset: ', initialFile, ' :collection: ', collection)
+    // console.log('reset: ', initialFile, ' :collection: ', collection)
 
     setContext({ file: initialFile, ...collectionName(initialFile, collection) });
     setContent(initialContent);
@@ -122,6 +123,7 @@ export function usePageContent(initialContent, initialFile, initialMenuStructure
 
   const handleContentChange = async (url, relative) => {
     // setFile(url);
+
     if (relative !== true && relPage) { // it's not a relative page, clear the previous one
       clearQueryParams();
       setRelPage(null);
@@ -136,9 +138,19 @@ export function usePageContent(initialContent, initialFile, initialMenuStructure
       setContentSource('etherpad:' + frontmatter.padID);
     } else if (url) {
       setContentSource('api');
+
+      let branch = collection.branch
+      const currentState = store.getState();
+      const reduxBranch = currentState.branch.name;
+      // console.debug('handleContentChange:reduxBranch: ', reduxBranch)
+
+      if (reduxBranch != 'none') {
+        branch = reduxBranch
+      }
+
       try {
         const response = await fetch(
-          `/api/content/github/${collection.owner}/${collection.repo}?branch=${collection.branch}&path=${url}`
+          `/api/content/github/${collection.owner}/${collection.repo}?branch=${branch}&path=${url}`
         );
         if (response.ok) {
           const data = await response.text();
@@ -238,8 +250,13 @@ export function usePageContent(initialContent, initialFile, initialMenuStructure
   useEffect(() => { // when the context changes, reprocess it
     // console.log('useEffect[context]:context: ', context)
     // console.log('useEffect[context]:relPage: ', relPage)
+    // let branch = collection.branch
+    //   if (reduxBranch != 'none') {
+    //     branch = reduxBranch
+    //     handleContentChange(context.url)
 
-    console.log('useEffect[context]');
+    //   }
+    // console.log('useEffect[context]');
 
     if (relPage) { // there is a direct link to a file via a queryparameter
       relativeContent(relPage);
@@ -280,7 +297,7 @@ export function usePageContent(initialContent, initialFile, initialMenuStructure
       const padsMenu = await fetchPadMenu();
 
 
-      console.debug('fetchDataAndUpdateState:padsMenu', padsMenu)
+      // console.debug('fetchDataAndUpdateState:padsMenu', padsMenu)
       // console.debug('fetchDataAndUpdateState:menuStructure', menuStructure)
       // console.debug('fetchDataAndUpdateState:collection', collection)
 
@@ -320,7 +337,7 @@ export function usePageContent(initialContent, initialFile, initialMenuStructure
         // console.debug('fetchDataAndUpdateState:mergedPrimary[index]', mergedPrimary[index])
 
       });
-      console.debug('fetchDataAndUpdateState:newRelatedContent', newRelatedContent)
+      // console.debug('fetchDataAndUpdateState:newRelatedContent', newRelatedContent)
 
       // const mergedMenu = mergePadMenu(newPrimary, padsMenu)
 
@@ -366,7 +383,7 @@ function mergePadMenu(newMenuStructure, padsMenu) {
     newMenuStructure.forEach((item, index) => {
 
       if (path.dirname(item.url) === '/' + key) {
-        console.log('mergePadMenu: ', key, ' : ', padsMenu.relatedContent[key])
+        // console.log('mergePadMenu: ', key, ' : ', padsMenu.relatedContent[key])
         if (!mergedStructure[index].children) {
           mergedStructure[index].children = [];
         }

diff --git a/lib/redux/reducers/branchSlice.js b/lib/redux/reducers/branchSlice.js
@@ -0,0 +1,14 @@
+import {createSlice} from '@reduxjs/toolkit';
+const branchSlice = createSlice({
+    name: 'branch',
+    initialState: {
+        name: 'none'
+    },
+    reducers: {
+        setBranch: (state, action) => {
+            state.name = action.payload
+        }
+}})
+
+export const {setBranch} = branchSlice.actions;
+export default branchSlice.reducer;
diff --git a/lib/redux/store.js b/lib/redux/store.js
@@ -0,0 +1,7 @@
+import {configureStore} from '@reduxjs/toolkit';
+import branchReducer from './reducers/branchSlice';
+export default configureStore({
+    reducer:{
+        branch: branchReducer
+    }
+})