From 4458b8587871587ae671cd9cbcc88758f148ec5a Mon Sep 17 00:00:00 2001
From: Rob Ellison <rob.ellison@r&r.org.uk>
Date: Thu, 27 Jul 2023 11:14:48 +0000
Subject: [PATCH] feat: revert etherpad landing page

---
 pages/etherpad/index.js | 371 +++++++++++++++++++++++++++++-----------
 1 file changed, 275 insertions(+), 96 deletions(-)

diff --git a/pages/etherpad/index.js b/pages/etherpad/index.js
index a0821860..df9d8f8b 100644
--- a/pages/etherpad/index.js
+++ b/pages/etherpad/index.js
@@ -1,34 +1,26 @@
-import * as React from "react";
-import { useState, useEffect } from "react";
-import AppBar from "@mui/material/AppBar";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import SlideshowIcon from "@mui/icons-material/Slideshow";
-import Card from "@mui/material/Card";
-import CardActions from "@mui/material/CardActions";
-import CardContent from "@mui/material/CardContent";
-import CssBaseline from "@mui/material/CssBaseline";
-import Grid from "@mui/material/Grid";
-import Stack from "@mui/material/Stack";
-import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
-import Container from "@mui/material/Container";
-import Link from "@mui/material/Link";
-import { ThemeProvider } from "@mui/material/styles";
-import { theme } from "../../constants/theme";
-
-function Copyright() {
-  return (
-    <Typography variant="body2" color="text.main" align="center">
-      {"Copyright © "}
-      <Link color="inherit" href="https://airwalkreply.com/">
-        airwalkreply.com
-      </Link>{" "}
-      {new Date().getFullYear()}
-      {"."}
-    </Typography>
-  );
-}
+import * as React from 'react';
+import { useState, useEffect, } from 'react';
+import { TopBar } from '@/components/dashboard';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import SlideshowIcon from '@mui/icons-material/Slideshow';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CssBaseline from '@mui/material/CssBaseline';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { Skeleton, FormControl, Link, Dialog, DialogTitle, DialogContent, ButtonGroup, DialogContentText, Select, MenuItem, DialogActions, TextField, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+import { baseTheme } from '../../constants/baseTheme';
+import * as matter from 'gray-matter';
+import { v4 as uuidv4 } from 'uuid';
+import { dirname, basename } from 'path';
+
+import { NewPadDialog } from '@/components/etherpad';
 
 function Pad({ endpoint, padID, title }) {
   return (
@@ -45,7 +37,7 @@ function Pad({ endpoint, padID, title }) {
     /> */}
         <CardContent sx={{ flexGrow: 1 }}>
           <Typography gutterBottom variant="h5" component="h2">
-            Etherpad
+            
           </Typography>
           <Typography variant="p" sx={{ fontSize: "1rem" }}>
             {title}
@@ -54,10 +46,10 @@ function Pad({ endpoint, padID, title }) {
         <CardActions>
           {/* <Button href={`/pads/ppt/${children}`} size="small">PPT</Button> */}
           {/* <Button href={`/pads/print/${children}`}size="small">Print</Button> */}
-          <Button href={`/result/pad/${padID}?format=ppt`} size="small">
+          <Button href={`/output/pad/${padID}?format=ppt`} size="small">
             PPT
           </Button>
-          <Button href={`/result/pad/${padID}?format=doc`} size="small">
+          <Button href={`/output/pad/${padID}?format=doc`} size="small">
             Doc
           </Button>
           <Button
@@ -76,54 +68,194 @@ function Pad({ endpoint, padID, title }) {
 
 export default function Home() {
   const [padList, setPadList] = useState(0);
-  const [environment, setEnvironment] = useState("");
   const [refreshToken, setRefreshToken] = useState(Math.random());
 
-  useEffect(() => {
-    fetch(`/api/etherpad/all-pads`)
-      .then((res) => res.json())
-      .then((data) => {
-        setPadList(data.pads);
-      })
-      .catch((error) => {
-        // console.log(error)
-      })
-      .finally(() => {
-        setTimeout(() => setRefreshToken(Math.random()), 5000);
+  const [airviewPads, setAirviewPads] = useState(null);
+
+  // dialogs
+  // New Pad
+  const [createOpen, setCreateOpen] = useState(false);
+
+  function handleCreateDialog() {
+    setCreateOpen(!createOpen);
+  };
+
+
+  // Import Pad
+  const [importOpen, setImportOpen] = useState(false);
+  const [padData, setPadData] = useState(null);
+  const [padMetadata, setPadMetadata] = useState(null);
+
+  const [padId, setPadId] = useState(null);
+  const [siteContent, setSiteContent] = useState(null);
+
+
+  const handleImportDialog = () => {
+    setPadData(null)
+    setImportOpen(!importOpen);
+  };
+  const handleImport = async () => {
+    // console.log('import pad')
+
+
+    // const resPadRevs = await fetch(`/api/etherpad/pad-revs?pad=${padId}`);
+    // const dataPadRevs = await resPadRevs.json();
+    // const response = await fetch(`/api/etherpad/pad?pad=${padId}`);
+    // // console.log('fetch response:', response.json())
+    if (!padData) {
+      try {
+        fetch(`/api/etherpad/pad?pad=${padId}`)
+          .then((res) => res.json())
+          .then(data => {
+            if (data.content) {
+              const matterData = matter(data.content, { excerpt: false }).data || null;
+              const dataArray = Object.entries(matterData).map(([key, value]) => ({ key, value }));
+              setPadData(data.content);
+              setPadMetadata(dataArray);
+
+            }
+          })
+      } catch (error) {
+        console.error('Error:', error);
+      }
+    } else {
+      try {
+        const response = await fetch(`/api/etherpad/new?padID=${padId}&import=true`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ initialContent: padData }),
+        });
+
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        } else {
+          handleImportDialog();
+        }
+
+      } catch (error) {
+        console.error('Error:', error);
+      }
+    }
+
+    refreshPads()
+
+  };
+
+  const handleImportAll = async () => {
+    try {
+      const res = await fetch(`/api/etherpad/all-pads`);
+      const data = await res.json();
+      // console.log('handleImportAll:', data.pads);
+
+      //   const padPromises = data.pads.map((pad) =>
+      //   fetch(`/api/etherpad/pad?pad=${pad}`).then((res) => res.json())
+      // );
+      const padPromises = data.pads.map((pad) =>
+        fetch(`/api/etherpad/pad?pad=${pad}`)
+          .then((res) => res.json())
+          .then((data) => ({ pad, ...data }))
+      );
+
+
+      const padResponses = await Promise.all(padPromises);
+      // console.log('handleImportAll:padResponses: ', padResponses)
+      padResponses.forEach((data) => {
+        if (data.content) {
+          const matterData = matter(data.content, { excerpt: false }).data || null;
+
+          if (matterData && matterData.type && matterData.title && data.pad && !matterData.archived) {
+
+            try {
+              const response = fetch(`/api/etherpad/new?padID=${data.pad}&import=true`, {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ initialContent: matter.stringify('', { ...matterData }) }),
+              });
+              
+              if (!response.ok) {
+                throw new Error('handleImportAll:Network response was not ok:', response);
+              }
+
+            } catch (error) {
+              console.error('Error:', error);
+            }
+
+          }
+        }
       });
-  }, [refreshToken]);
+      refreshPads()
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+
+
+  // useEffect(() => {
+  //   fetch(`/api/etherpad/all-pads`)
+  //     .then((res) => res.json())
+  //     .then((data) => {
+  //       setPadList(data.pads);
+  //     })
+  //     .catch((error) => {
+  //       // console.log(error)
+  //     })
+  //     .finally(() => {
+  //       setTimeout(() => setRefreshToken(Math.random()), 5000);
+  //     });
+  // }, [refreshToken]);
+
+
+  const refreshPads = async () => {
+    const fetchPads = async () => {
+      const res = await fetch(`/api/etherpad/imported`);
+      const data = await res.json();
+      return data;
+    };
+
+    const fetchDataAndUpdateState = async () => {
+      const pads = await fetchPads();
+      setAirviewPads(pads);
+    }
+
+    fetchDataAndUpdateState()
+  }
+
 
   useEffect(() => {
-    const fetchData = async () => {
-      const resp = await fetch("/api/environment");
-      const data = await resp.json();
-      console.log(data);
-      setEnvironment(data);
+    const fetchPads = async () => {
+      const res = await fetch(`/api/etherpad/imported`);
+      const data = await res.json();
+      return data;
     };
-    fetchData();
+
+    const fetchDataAndUpdateState = async () => {
+      const pads = await fetchPads();
+      setAirviewPads(pads);
+      // console.log('useEffect:LoadPads: ', pads)
+    }
+
+    fetchDataAndUpdateState()
   }, []);
 
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={baseTheme}>
       <CssBaseline />
-      <AppBar color="primary" position="relative">
-        <Toolbar>
-          <SlideshowIcon sx={{ mr: 2 }} />
-          <Typography variant="h6" color="inherit" noWrap>
-            Presentations as Code
-          </Typography>
-        </Toolbar>
-      </AppBar>
+      <TopBar />
       <main>
         {/* Hero unit */}
         <Box
           sx={{
             bgcolor: "background.paper",
             pt: 8,
-            pb: 6,
+            pb: 1,
           }}
         >
-          <Container maxWidth="m" sx={{ mt: "1%" }}>
+          <Container maxWidth="m" sx={{mt: '1%'}}>
             <Typography
               component="h1"
               variant="h2"
@@ -131,7 +263,7 @@ export default function Home() {
               color="text.main"
               gutterBottom
             >
-              Presentations as Code
+              Collaboration
             </Typography>
             <Typography
               variant="h5"
@@ -139,7 +271,7 @@ export default function Home() {
               color="text.highlight"
               paragraph
             >
-              Create Presentations using Markdown or MDX.
+              Create and collaborate on <strong>Documents</strong> and  <strong>Presentations</strong> using Markdown or MDX.
             </Typography>
             <Stack
               sx={{ pt: 4 }}
@@ -147,61 +279,111 @@ export default function Home() {
               spacing={2}
               justifyContent="center"
             >
-              <Button href={environment.ETHERPAD_URL} variant="contained">
+              <Button
+                onClick={handleCreateDialog}
+                variant="contained"
+              >
                 Create New
               </Button>
+              <NewPadDialog dialogOpen={createOpen} handleDialog={handleCreateDialog} siteContent={siteContent} />
               <Button
-                href={`/result/file/markdown/test.mdx?format=doc`}
+                onClick={handleImportDialog}
                 variant="outlined"
               >
-                Documentation (Doc)
+                Import
               </Button>
               <Button
-                href={`/result/file/markdown/test.mdx?format=ppt`}
+                onClick={handleImportAll}
                 variant="outlined"
               >
-                Documentation (PPT)
+                Import ALL
+              </Button>
+              <Dialog open={importOpen} onClose={handleImportDialog}>
+                <DialogTitle>Import Pad</DialogTitle>
+                <DialogContent>
+                  <DialogContentText>
+                    Enter the Pad ID to import:
+                  </DialogContentText>
+                  <TextField
+                    autoFocus
+                    margin="dense"
+                    label="Pad ID"
+                    type="text"
+                    fullWidth
+                    value={padId}
+                    onChange={(event) => setPadId(event.target.value)} />
+                  <TableContainer>
+                    <Table>
+                      <TableHead>
+                        <TableRow>
+                          <TableCell>Field</TableCell>
+                          <TableCell>Value</TableCell>
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        {padMetadata && padMetadata.map((row) => (
+                          <TableRow key={row.key}>
+                            <TableCell>{row.key}</TableCell>
+                            <TableCell>{row.value}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </TableContainer>
+                </DialogContent>
+                <DialogActions>
+                  <Button onClick={handleImportDialog}>
+                    Cancel
+                  </Button>
+                  <Button onClick={handleImport}>
+                    {padData ? "Import" : "Load"}
+                  </Button>
+                </DialogActions>
+              </Dialog>
+              <Button
+                href={`/output/file/markdown/test.mdx?format=doc`}
+                variant="outlined"
+              >
+                Documentation
               </Button>
             </Stack>
           </Container>
         </Box>
-        <Container sx={{ py: 8 }} maxWidth="md">
+        <Container sx={{ py: 0 }} maxWidth="md">
           {/* End hero unit */}
+          {airviewPads ? (
+            <PadView pads={airviewPads.collections} />) : (
+            <>
+              <h3>loading........</h3>
+              <Skeleton animation="wave" />
+            </>
+          )}
 
-          <Grid container spacing={4}>
-            {padList ||
-              ["Etherpad Error"].map((pad, i) => (
-                <Pad endpoint={environment.ETHERPAD_URL} key={i} pad={pad} />
-              ))}
-          </Grid>
         </Container>
       </main>
-      {/* Footer */}
-      <Box sx={{ bgcolor: "background.paper", p: 6 }} component="footer">
-        <Copyright />
-      </Box>
-      {/* End footer */}
+
     </ThemeProvider>
   );
 }
 
+
 function PadView(pads) {
   const [environment, setEnvironment] = useState("");
 
   useEffect(() => {
-    const fetchData = async () => {
+    const fetchData = async () =>{
       const resp = await fetch("/api/environment");
       const data = await resp.json();
-      console.log(data);
-      setEnvironment(data);
-    };
-    fetchData();
-  }, []);
+      console.log(data)
+      setEnvironment(data)
+    }
+    fetchData()
+  },[]);
 
   // console.log('PadView:pads: ', pads)
   const collections = Object.entries(pads.pads).map(([key, value]) => {
     return {
-      [key]: Object.values(value),
+      [key]: Object.values(value)
     };
   });
 
@@ -213,12 +395,9 @@ function PadView(pads) {
         <div key={category}>
           <h2>{capitalizeFirstLetter(category)}</h2>
           <Grid container spacing={4}>
+
             {elements.map((element, index) => (
-              <Pad
-                endpoint={environment.ETHERPAD_URL}
-                padID={element.padID}
-                title={element.title}
-              />
+              <Pad key={index} endpoint={environment.ETHERPAD_URL} padID={element.padID} title={element.title} />
             ))}
           </Grid>
         </div>
@@ -229,4 +408,4 @@ function PadView(pads) {
 
 const capitalizeFirstLetter = (string) => {
   return string.charAt(0).toUpperCase() + string.slice(1);
-};
+};
\ No newline at end of file