Merge pull request #55 from stephane-r/fix-export-import

fix: fixing wrong import/export data

package.json

@@ -27,6 +27,7 @@
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
     "@types/uuid": "^9.0.5",
+    "awaiting": "^3.0.0",
     "country-list": "^2.3.0",
     "framer-motion": "^10.16.4",
     "hex-to-rgba": "^2.0.1",

src/components/ExportData.tsx

@@ -1,39 +1,36 @@
-import { Box, Button, Flex } from "@mantine/core";
+import { Box } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
-import { memo, useState } from "react";
+import { memo } from "react";
 import { useTranslation } from "react-i18next";
 
 import { getAllPlaylists } from "../database/utils";
+import { Playlist } from "../types/interfaces/Playlist";
 import { generateAndDownloadFile } from "../utils/generateAndDownloadFile";
-import { TransferList } from "./TransferList";
+import { TransferList, TransferListData } from "./TransferList";
 
-const loadPlaylistData = (data: any[]) => {
+const loadPlaylistData = (playlistsTitle: string[]) => {
   const playlists = getAllPlaylists();
-  return data.map((playlist) =>
-    playlists.find((p) => p.playlistId ?? String(p.ID) === playlist.value),
-  );
+  return playlists.filter((p) => playlistsTitle.includes(p.title));
 };
 
-// const formateToTransferList = (data: Playlist[]) => {
-//   return data
-//     .filter((item) => item.videos.length > 0)
-//     .map((item) => ({
-//       value: item.playlistId ?? String(item.ID),
-//       label: `${item.title} (${item.videos.length} videos)`,
-//     }))
-//     .flat();
-// };
+const formatePlaylistsToExport = (playlists: Playlist[]) => {
+  return playlists.map((p) => ({
+    ...p,
+    videos: p.videos.map((v) => v.videoId),
+  }));
+};
 
 export const ExportData = memo(() => {
+  const userData = getAllPlaylists().map((p) => p.title);
   const { t } = useTranslation("translation", {
     keyPrefix: "settings.data.export",
   });
-  const [data] = useState<any>(getAllPlaylists().map((p) => p.title));
-
-  console.log(data);
 
-  const handleClick = () => {
-    generateAndDownloadFile(loadPlaylistData(data[1]));
+  const handleSubmit = (data: TransferListData) => {
+    const [, importData] = data;
+    const playlists = loadPlaylistData(importData);
+    const formatedPlaylists = formatePlaylistsToExport(playlists);
+    generateAndDownloadFile({ playlists: formatedPlaylists });
     notifications.show({
       title: t("notification.title"),
       message: t("notification.message"),
@@ -43,18 +40,10 @@ export const ExportData = memo(() => {
   return (
     <Box mt="lg">
       <TransferList
-        data={data}
-        // onChange={setData}
-        // titles={[t("left"), t("right")]}
-        // breakpoint="sm"
-        // searchPlaceholder={t("search.placeholder") as string}
-        // nothingFound={t("search.nothing.found")}
+        data={userData}
+        handleSubmit={handleSubmit}
+        buttonSubmitLabel={t("button.submit")}
       />
-      <Flex justify="flex-end" mt="lg">
-        <Button onClick={handleClick} disabled={!data.length}>
-          {t("button.submit")}
-        </Button>
-      </Flex>
     </Box>
   );
 });