[#67] added export calendar functionnality (#294)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Calendar/AccessTab.tsx

@@ -1,4 +1,5 @@
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
 import {
   Box,
   IconButton,
@@ -6,13 +7,19 @@ import {
   Button,
   Typography,
   InputAdornment,
+  Backdrop,
+  CircularProgress,
 } from "@mui/material";
 import { useState, useEffect } from "react";
-import { getSecretLink } from "../../features/Calendars/CalendarApi";
+import {
+  exportCalendar,
+  getSecretLink,
+} from "../../features/Calendars/CalendarApi";
 import { Calendars } from "../../features/Calendars/CalendarTypes";
 import { FieldWithLabel } from "../Event/components/FieldWithLabel";
 import { SnackbarAlert } from "../Loading/SnackBarAlert";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { ErrorSnackbar } from "../Error/ErrorSnackbar";
 
 export function AccessTab({ calendar }: { calendar: Calendars }) {
   const { t } = useI18n();
@@ -45,6 +52,35 @@ export function AccessTab({ calendar }: { calendar: Calendars }) {
     setSecretLink(newSecret.secretLink);
   };
 
+  const [exportLoading, setExportLoading] = useState(false);
+  const [exportError, setExportError] = useState("");
+
+  const handleExport = async () => {
+    try {
+      setExportLoading(true);
+      const exportedData = await exportCalendar(
+        calendar.link.replace(".json", "")
+      );
+      const blob = new Blob([exportedData], {
+        type: "text/calendar",
+      });
+      const url = URL.createObjectURL(blob);
+
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `${calendar.id.split("/")[1]}.ics`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (e) {
+      setExportError((e as Error).message);
+      setExportLoading(false);
+    } finally {
+      setExportLoading(false);
+    }
+  };
+
   return (
     <>
       <FieldWithLabel label={t("calendar.caldav_access")} isExpanded={false}>
@@ -84,24 +120,49 @@ export function AccessTab({ calendar }: { calendar: Calendars }) {
               ),
             }}
           />
-          <Button variant="outlined" onClick={handleResetSecretLink}>
+          <Button variant="contained" onClick={handleResetSecretLink}>
             {t("actions.reset")}
           </Button>
         </Box>
+        <Typography
+          variant="body2"
+          sx={{ color: "text.secondary", mt: 1, lineHeight: 1.5 }}
+        >
+          {t("calendar.secretUrlDesc")}
+        </Typography>
       </FieldWithLabel>
 
-      <Typography
-        variant="body2"
-        sx={{ color: "text.secondary", mt: 1, lineHeight: 1.5 }}
-      >
-        {t("calendar.secretUrlDesc")}
-      </Typography>
+      <FieldWithLabel label={t("calendar.exportCalendar")} isExpanded={false}>
+        <Typography
+          variant="body2"
+          sx={{ color: "text.secondary", m: 1, lineHeight: 1.5 }}
+        >
+          {t("calendar.exportDesc")}
+        </Typography>
+
+        <Button
+          variant="contained"
+          onClick={handleExport}
+          startIcon={!exportLoading && <FileDownloadOutlinedIcon />}
+          disabled={exportLoading}
+        >
+          {exportLoading ? (
+            <Box display="flex" alignItems="center" gap={1}>
+              <CircularProgress size={18} />
+              {t("actions.exporting")}
+            </Box>
+          ) : (
+            t("actions.export")
+          )}
+        </Button>
+      </FieldWithLabel>
 
       <SnackbarAlert
         setOpen={setOpen}
         open={open}
         message={t("common.link_copied")}
       />
+      <ErrorSnackbar error={exportError} type="calendar" />
     </>
   );
 }