feat(export): show last export date

src/components/ExportData.tsx

@@ -1,9 +1,11 @@
-import { Box } from "@mantine/core";
+import { Box, Text } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
+import { format } from "date-fns";
 import { memo, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { getAllPlaylists } from "../database/utils";
+import { useSettings } from "../providers/Settings";
 import { generateAndDownloadFile } from "../utils/generateAndDownloadFile";
 import { ModalExportFilename } from "./ModalExportFilename";
 import { TransferList } from "./TransferList";
@@ -38,6 +40,7 @@ export const ExportData = memo(() => {
 
   return (
     <Box mt="lg">
+      <BlockLastExport />
       <TransferList
         data={userData}
         handleSubmit={handleSubmit}
@@ -51,3 +54,21 @@ export const ExportData = memo(() => {
     </Box>
   );
 });
+
+const BlockLastExport = memo(() => {
+  const settings = useSettings();
+  const { t } = useTranslation();
+
+  if (settings.exportLastDate === "") {
+    return null;
+  }
+
+  return (
+    <Text mb="md">
+      {t("settings.data.export.last.date")} :{" "}
+      <strong>
+        {format(new Date(settings.exportLastDate as string), "dd-MM-yyyy")}
+      </strong>
+    </Text>
+  );
+});

src/components/ModalExportFilename.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 
 import { db } from "../database";
 import { useSetSettings, useSettings } from "../providers/Settings";
-import type { Settings } from "../types/interfaces/Settings";
 import { Modal } from "./Modal";
 
 const getDefaultExportFileName = () =>
@@ -28,13 +27,17 @@ export const ModalExportFilename: FC<ModalExportFilenameProps> = memo(
 
     const handleSubmit = () => {
       if (fileName !== getDefaultExportFileName()) {
-        db.update("settings", { ID: 1 }, (data: Settings) => ({
+        const settingsUpdated = {
           exportFileName: fileName,
+          exportLastDate: new Date().toISOString(),
+        };
+        db.update("settings", { ID: 1 }, () => ({
+          ...settingsUpdated,
         }));
         db.commit();
         setSettings((previousState) => ({
           ...previousState,
-          filename: fileName,
+          ...settingsUpdated,
         }));
       }
 

src/database/index.ts

@@ -95,12 +95,17 @@ const initDb = () => {
     db.commit();
   }
 
+  if (!db.columnExists("settings", "exportLastDate")) {
+    db.alterTable("settings", "exportLastDate", "");
+    db.commit();
+  }
+
   if (!db.columnExists("settings", "analytics")) {
     db.alterTable("settings", "analytics", true);
     db.commit();
 
     db.update("settings", { ID: 1 }, (data: Settings) => ({
-      analytics: true
+      analytics: true,
     }));
     db.commit();
   }

src/translations/en.json

@@ -50,6 +50,7 @@
   "settings.data.export.button.submit": "Export my data",
   "settings.data.export.notification.title": "Export data",
   "settings.data.export.notification.message": "Your data has been exported",
+  "settings.data.export.last.date": "Last export date",
   "settings.data.save": "Save",
   "settings.data.save.text": "Save your data and sync from other device",
   "settings.data.save.notification.title": "Data saved",

src/translations/fr.json

@@ -50,6 +50,7 @@
   "settings.data.export.button.submit": "Exporter mes données",
   "settings.data.export.notification.title": "Export de données",
   "settings.data.export.notification.message": "Les données ont été exportées",
+  "settings.data.export.last.date": "Date du dernier export",
   "settings.data.save": "Sauvegarder",
   "settings.data.save.text": "Sauvegarder vos données afin de les synchroniser sur un autre appareil.",
   "settings.data.save.notification.title": "Données sauvegardées",

src/types/interfaces/Settings.ts

@@ -11,4 +11,5 @@ export interface Settings {
   sponsorBlockCategories: string[];
   analytics: boolean;
   exportFileName: string | null;
+  exportLastDate: string | null;
 }