feat: update landing page

AirWalk-Digital · May 17, 2023 · 65cf535 · 65cf535
1 parent bdb8a58
commit 65cf535
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,7 +46,9 @@
     "remark-mdx-frontmatter": "^3.0.0",
     "remark-unwrap-images": "^3.0.1",
     "sharp": "^0.31.3",
-    "tls": "^0.0.1"
+    "tls": "^0.0.1",
+    "vfile": "^5.3.7",
+    "vfile-message": "^3.1.4"
   },
   "devDependencies": {
     "@codedependant/semantic-release-docker": "^4.3.0",

diff --git a/pages/api/etherpad/pad.js b/pages/api/etherpad/pad.js
@@ -0,0 +1,24 @@
+
+export default async function handler(req, res) {
+  const axios = require('axios');
+  const client = axios.create({
+    baseURL: process.env.ETHERPAD_BASE_URL,
+    timeout: 1000,
+    params: { 'apikey': process.env.ETHERPAD_API_KEY },
+  });
+  let pad = null;
+  try {
+    let resp = (await client.get('getText', {
+      params: {
+        padID: req.query.pad,
+        rev: req.query.rev,
+      }
+    }))
+    pad = resp.data.data?.text.text
+  } catch (error) {
+    console.log(error)
+    res.status(500).json({error: 'error fetching pad: ' + error})
+  }
+
+  res.status(200).json({ content: pad })
+}
diff --git a/pages/api/files/file.js b/pages/api/files/file.js
@@ -22,7 +22,7 @@ export default async function handler(req, res) {
     console.log('api:file Error: ', error)
 
     // Return an error response if the file couldn't be read
-    res.status(500).json({ error: 'Failed to read the file.' });
+    res.status(500).json({ error: 'Failed to read the file. :' + error });
   }
 
 

diff --git a/pages/index.js b/pages/index.js
@@ -59,8 +59,10 @@ return (
       </Typography>
     </CardContent>
     <CardActions>
-      <Button href={`/pads/ppt/${children}`} size="small">PPT</Button>
-      <Button href={`/pads/print/${children}`}size="small">Print</Button>
+      {/* <Button href={`/pads/ppt/${children}`} size="small">PPT</Button> */}
+      {/* <Button href={`/pads/print/${children}`}size="small">Print</Button> */}
+      <Button href={`/output/pad/${children}?format=ppt`} size="small">PPT</Button>
+      <Button href={`/output/pad/${children}?format=doc`}size="small">Doc</Button>
       <Button href={`https://pad.airview.airwalkconsulting.io/p/${children}`} size="small">Edit</Button>
     </CardActions>
   </Card>
@@ -138,7 +140,8 @@ export default function Home() {
               justifyContent="center"
             >
               <Button href={'https://pad.airview.airwalkconsulting.io'} variant="contained">Create New</Button>
-              <Button href={`/files/mdx/test.mdx`} variant="outlined">Documentation</Button>
+              <Button href={`/output/files/test.mdx?format=doc`} variant="outlined">Documentation (Doc)</Button>
+              <Button href={`/output/files/test.mdx?format=ppt`} variant="outlined">Documentation (PPT)</Button>
             </Stack>
           </Container>
         </Box>

diff --git a/pages/output/[...parms].jsx b/pages/output/[...parms].jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useLayoutEffect, useCallback, useRef } from 'react'
+import React, { useState, useEffect, useCallback, useRef } from 'react'
 import { VFile } from 'vfile'
 import { VFileMessage } from 'vfile-message'
 import * as provider from '@mdx-js/react'
@@ -30,7 +30,7 @@ function removeSection(pad, tagName) {
 
 function useMdx(defaults) {
   const [state, setState] = useState({ ...defaults, file: null })
-  
+
   const { run: setConfig } = useDebounceFn(
     async (config) => {
       const file = new VFile({ basename: 'example.mdx', value: config.value })
@@ -58,7 +58,7 @@ function useMdx(defaults) {
             remarkPlugins,
             // rehypePlugins: [capture('hast')],
             // recmaPlugins: [capture('esast')],
-            
+
           })
         ).default
       } catch (error) {
@@ -111,6 +111,9 @@ export default dynamic(() => Promise.resolve(Page), {
 
 function Page() {
   const router = useRouter();
+  const [refreshToken, setRefreshToken] = useState(Math.random());
+  const [rev, setRev] = useState(0);
+
   let format = 'default';
 
   if (router.query.format) {
@@ -128,7 +131,7 @@ function Page() {
     # No Content Loaded
     `;
 
-    const [state, setConfig] = useMdx({
+  const [state, setConfig] = useMdx({
     gfm: true,
     frontmatter: true,
     math: false,
@@ -138,14 +141,14 @@ function Page() {
 
   const mdxContent = (format, mdx, pageParms) => {
     console.log('pageParms: ', pageParms)
-    if (pageParms && pageParms.parms) { delete pageParms.parms};
-    const {content, data} = matter(mdx);
-    let frontmatter = {...data, ...pageParms};
+    if (pageParms && pageParms.parms) { delete pageParms.parms };
+    const { content, data } = matter(mdx);
+    let frontmatter = { ...data, ...pageParms };
     if (format === 'ppt') {
       mdx = '<SlidePage>\n' + content + '\n</SlidePage>'
     } else if (format === 'pdf') {
       mdx = '<div>\n' + content.replace(/---/g, '') + '\n</div>'
-      mdx = matter.stringify(mdx, {...frontmatter});
+      mdx = matter.stringify(mdx, { ...frontmatter });
     } else if (format === 'print') {
       mdx = '<PrintSlide>\n' + content + '\n</PrintSlide>'
     } else {
@@ -154,6 +157,7 @@ function Page() {
     }
     return mdx
   }
+
 
   // const stats = state.file ? statistics(state.file) : {}
   useEffect(() => {
@@ -177,15 +181,49 @@ function Page() {
           .catch(error => {
             console.log(error)
             return { fileData: null, error: error }
+          })
+          .finally(() => {
+            setTimeout(() => setRefreshToken(Math.random()), 0);
           });
       } else {
         console.log('output:error: no source defined')
       }
 
     }
-    fetchFileContent()
 
-  }, [source] 
+    const fetchPadContent = async () => {
+      fetch(`/api/etherpad/pad-revs?pad=${location}`)
+        .then((res) => res.json())
+        .then(data => {
+          // console.log('data.rev : ', data.rev , 'rev : ', rev)
+          if (data.rev && data.rev > rev) {
+            console.log('new revision :', data.rev)
+            const newrev = data.rev
+            fetch(`/api/etherpad/pad?pad=${location}&format=${format}&rev=${newrev}`)
+              .then((res) => res.json())
+              .then(data => {
+                if (data.content) {
+                  setConfig({ ...state, value: String(mdxContent(format, data.content, router.query)) });
+                  setRev(newrev); // update the revision after successful fetch
+                }
+              })
+              .catch(error => {
+                console.log(error)
+              })
+          }
+
+        })
+        .catch(error => {
+          console.log(error)
+        })
+        .finally(() => {
+          setTimeout(() => setRefreshToken(Math.random()), 5000);
+        });
+    }
+
+    if (source === 'file') {fetchFileContent()} else if (source === 'pad') {fetchPadContent()}
+
+  }, [refreshToken, source]
   );
 
 
@@ -203,9 +241,9 @@ function Page() {
   if (format === 'pdf') {
     if (state.file && state.file.result) { console.log('/output:PrintView:file: ', state.file.result) }
     return (
-    <ErrorBoundary FallbackComponent={ErrorFallback}>
-      {state.file && state.file.result ? (<PrintView><Preview components={mdComponents} /></PrintView>) : null}
-    </ErrorBoundary>
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        {state.file && state.file.result ? (<PrintView><Preview components={mdComponents} /></PrintView>) : null}
+      </ErrorBoundary>
     )
   } else {
 
@@ -256,7 +294,7 @@ function PrintView({ children }) {
 
         <ThemeProvider theme={theme}>
           <CssBaseline />
-            {children && children}
+          {children && children}
         </ThemeProvider>
       </div>
       <div className="pagedjs_page" ref={previewContainer}></div>
@@ -272,7 +310,7 @@ function DefaultView({ children }) {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-        {children && children}
+      {children && children}
     </ThemeProvider>
   )
 };