feat: add copy url

AirWalk-Digital · Sep 24, 2023 · 86961d9 · 86961d9
1 parent 4180d51
commit 86961d9
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 49 deletions.
diff --git a/components/airview-ui/navigation-drawer/navigation-drawer.js b/components/airview-ui/navigation-drawer/navigation-drawer.js
@@ -20,14 +20,15 @@ export function NavigationDrawer({
         width: drawerWidth,
         borderRight: 0,
         borderColor: "grey.300",
-        paddingY: 6,
+        // paddingY: 6,
+        paddingY: '1%',
         paddingX: 3,
         boxSizing: "border-box",
         backgroundColor: "common.white",
         zIndex: 1200,
         overflowY: "auto",
         displayPrint: 'none',
-        borderTop: '1px solid #e0e0e0'
+        // borderTop: '1px solid #e0e0e0'
       }}
     >
       {children}

diff --git a/components/content/ContentPage.jsx b/components/content/ContentPage.jsx
@@ -12,6 +12,7 @@ import { Menu, NavigationDrawer, ButtonMenu } from '@/components/airview-ui';
 import { PagedOutput } from '@/components/display/PagedOutput';
 import { PresentationOutput } from '@/components/display/PresentationOutput';
 import SlideshowIcon from '@mui/icons-material/Slideshow';
+import EditNoteIcon from '@mui/icons-material/EditNote';
 import { IconButton, Typography, MenuItem, Box, Alert, Grid, ButtonBase } from '@mui/material';
 import { FullScreenSpinner } from "@/components/dashboard/index.js";
 
@@ -44,7 +45,6 @@ export function ContentPage({
 
   const [frontmatter, setFrontmatter] = useState(pageContent.frontmatter);
   const MenuComponent = menuComponent;
-  const HeaderComponent = headerComponent;
   const SideComponent = sideComponent;
 
   const isEmptyObject = (obj) => {
@@ -152,7 +152,7 @@ export function ContentPage({
           {menuStructure && <MenuComponent
             menu={menuStructure.primary}
             open={menuOpen}
-            top={topBarHeight}
+            top={topBarHeight + 1}
             drawerWidth={navDrawerWidth}
           />}
           <div
@@ -163,55 +163,18 @@ export function ContentPage({
 
             }}
           >
-            {
-              headerComponent ? (
-                <HeaderComponent frontmatter={frontmatter} />
-              ) : (
-                <Typography variant="h1" component="h1" sx={{ pl: 0, mx: '2%' }}>{frontmatter?.title && frontmatter.title}</Typography>
-              )
-            }
-            {frontmatter?.format === 'presentation' && <Grid container alignItems="center" spacing={1} style={{ textAlign: 'center' }} sx={{ background: 'rgb(229, 246, 253)', px: '10px' }}>
-              <Grid xs="auto" item>
-                <Alert severity="info">This is a presentation. View in presentation mode by clicking </Alert>
-              </Grid>
-              <Grid item>
-                <IconButton
-                  size="medium"
-                  onClick={handlePresentation}
-                  color="inherit"
-                >
-                  <SlideshowIcon />
-                </IconButton>
-              </Grid>
-              <Grid xs />
-            </Grid>
-            }
-
-            {frontmatter?.padID && <Grid container alignItems="center" spacing={1} style={{ textAlign: 'center' }} sx={{ background: 'rgb(229, 246, 253)', px: '10px' }}>
-              <Grid>
-                <Alert severity="info">This is draft content from Etherpad edit here: </Alert>
-              </Grid>
-              <Grid>
-                <IconButton
-                  size="medium"
-                  // onClick={handlePresentation}
-                  color="inherit"
-                >
-                  <SlideshowIcon />
-                </IconButton>
-              </Grid>
-              <Grid />
-            </Grid>
-            }
+
 
             <AsideAndMainContainer>
               {/* <Main sx={{}}> */}
               <Main>
+                <Banner frontmatter={frontmatter} handlePresentation={handlePresentation} headerComponent={headerComponent}/>
+
                 <MDXProvider components={mdComponents(context)}>
                   <><Content /></>
                 </MDXProvider>
               </Main>
-              <Aside sx={{ displayPrint: 'none', display: print ? 'none' : '' }}>
+              <Aside sx={{ displayPrint: 'none', display: print ? 'none' : '', pt: '2%' }}>
 
                 <ContentMenu
                   content={relatedContent}
@@ -266,6 +229,73 @@ export function ContentPage({
   }
 }
 
+function Banner({frontmatter,handlePresentation,headerComponent }) {
+  const [environment, setEnvironment] = useState("");
+  const HeaderComponent = headerComponent;
+
+  useEffect(() => {
+    const fetchData = async () =>{
+      const resp = await fetch("/api/environment");
+      const data = await resp.json();
+      console.log(data)
+      setEnvironment(data)
+    }
+    fetchData()
+  },[]);
+
+
+return(
+  <>
+  {
+    headerComponent ? (
+      <HeaderComponent frontmatter={frontmatter} />
+    ) : (
+      <Typography variant="h1" component="h1" sx={{ pl: 0, mx: '0%' }}>{frontmatter?.title && frontmatter.title}</Typography>
+    )
+  }
+  {frontmatter?.format === 'presentation' && <Grid container alignItems="center" spacing={1} style={{ textAlign: 'center' }} sx={{ background: 'rgb(229, 246, 253)', px: '10px', borderRadius: '8px' }}>
+    <Grid>
+      <Alert severity="info">This is a presentation. View in presentation mode by clicking </Alert>
+    </Grid>
+    <Grid>
+      <IconButton
+        size="medium"
+        onClick={handlePresentation}
+        color="inherit"
+      >
+        <SlideshowIcon />
+      </IconButton>
+    </Grid>
+    <Grid/>
+  </Grid>
+  }
+
+  {frontmatter?.padID && <Grid container alignItems="center" spacing={1} style={{ textAlign: 'center' }} sx={{ background: 'rgb(229, 246, 253)', px: '10px',borderRadius: '8px' }}>
+    <Grid>
+      <Alert severity="info">This is draft content from Etherpad edit here: </Alert>
+    </Grid>
+    <Grid>
+      <IconButton
+        size="medium"
+        href={`${environment.ETHERPAD_URL}/p/${frontmatter.padID}`}
+        target="_blank"
+        rel="noopener noreferrer"  // For security reasons
+        color="inherit"
+      >
+        <EditNoteIcon />
+      </IconButton>
+    </Grid>
+    <Grid/>
+  </Grid>
+  }
+  </>
+)
+
+
+}
+
+
+
 
 function ContentMenu({ content, file, handleContentChange, handlePageReset, context }) {
   // let directory = file?.includes("/") ? file.split("/")[1] : file;

diff --git a/components/dashboard/Headers/ServicesHeader.js b/components/dashboard/Headers/ServicesHeader.js
@@ -29,11 +29,11 @@ export function ServicesHeader({ frontmatter, extraData }) {
   }
 
   return (
-    <MuiContainer maxWidth={false} sx={{ paddingTop: 0, paddingBottom: 0 }}>
+    <MuiContainer maxWidth={false} disableGutters sx={{ paddingTop: 0, paddingBottom: 0 }}>
     {/* <Box sx={{ display: "flex" }}>{children}</Box> */}
 
       {/* <Container sx={{ px: '0px', mb: '2%' }}> */}
-      <Grid container spacing={2} alignItems="center" sx={{ mb: '3%' }}>
+      <Grid container spacing={0} alignItems="center" sx={{ mb: '1%' }}>
         <Grid item xs={8}>
           <Typography variant="h1" component="h1">{frontmatter.title}</Typography>
           <Stack direction="row" spacing={1}>

diff --git a/components/etherpad/Etherpad.jsx b/components/etherpad/Etherpad.jsx
@@ -145,7 +145,7 @@ export function Etherpad({ file, frontMatterCallback, editMode }) {
 
 
     return (
-      <Grid container spacing={2}>
+      <Grid container spacing={0} sx={{pt: '0', pl: '0'}}>
         {/* <Grid item xs={12} sx={{ mt: '1%' }}>
           <Button variant="contained" onClick={handleToggleEditor}>
             {isEditorVisible ? 'Hide' : 'Show'} Edit
@@ -157,7 +157,7 @@ export function Etherpad({ file, frontMatterCallback, editMode }) {
             {/* <iframe name="embed_readwrite" src="https://pad.airview.airwalkconsulting.io/p/5072ba3e-90c2-409b-908b-9a89f58f85c8?showControls=true&showChat=true&showLineNumbers=true&useMonospaceFont=false" width="100%" height="600" frameborder="0"></iframe> */}
           </Grid>
         )}
-        <Grid item xs={12} md={editMode ? 6 : 12}>
+        <Grid component="etherpad" item xs={12} md={editMode ? 6 : 12} >
 
           <Content />
 

diff --git a/lib/hooks/usePageContent.js b/lib/hooks/usePageContent.js
@@ -112,6 +112,8 @@ export function usePageContent(initialContent, initialFile, initialMenuStructure
     if (relative !== true && relPage) { // it's not a relative page, clear the previous one
       clearQueryParams();
       setRelPage(null);
+    } else {
+      setQueryParams(url)
     }
 
     // console.debug('handleContentChange:url: ', url)
@@ -348,6 +350,12 @@ export function usePageContent(initialContent, initialFile, initialMenuStructure
     window.history.replaceState({}, document.title, newUrl);
   }
 
+  function setQueryParams(path) {
+    const newUrl = window.location.pathname;
+    window.history.replaceState({}, document.title, newUrl + "?page=" + path);
+
+  }
+
   return {
     pageContent,
     // file,