added export functionality

components/Modal/Collection/TeamManagement.tsx

@@ -156,7 +156,9 @@ export default function TeamManagement({
         </div>
       ) : null}
 
-      {permissions !== true && collection.isPublic && <hr />}
+      {permissions !== true && collection.isPublic && (
+        <hr className="mb-3 border border-sky-100 dark:border-neutral-700" />
+      )}
 
       {permissions === true && (
         <>

components/Modal/User/PrivacySettings.tsx

@@ -1,7 +1,11 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import Checkbox from "../../Checkbox";
 import useAccountStore from "@/store/account";
-import { AccountSettings } from "@/types/global";
+import {
+  AccountSettings,
+  MigrationFormat,
+  MigrationRequest,
+} from "@/types/global";
 import { signOut, useSession } from "next-auth/react";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import SubmitButton from "../../SubmitButton";
@@ -50,7 +54,7 @@ export default function PrivacySettings({
     return wordsArray;
   };
 
-  const postBookmarkFile = async (e: any) => {
+  const importBookmarks = async (e: any, format: MigrationFormat) => {
     const file: File = e.target.files[0];
 
     if (file) {
@@ -59,9 +63,16 @@ export default function PrivacySettings({
       reader.onload = async function (e) {
         const load = toast.loading("Importing...");
 
+        const request: string = e.target?.result as string;
+
+        const body: MigrationRequest = {
+          format,
+          data: request,
+        };
+
         const response = await fetch("/api/migration", {
           method: "POST",
-          body: e.target?.result,
+          body: JSON.stringify(body),
         });
 
         const data = await response.json();
@@ -180,7 +191,7 @@ export default function PrivacySettings({
               >
                 <div className="cursor-pointer rounded-md">
                   <label
-                    htmlFor="import-file"
+                    htmlFor="import-html-file"
                     title="HTML File"
                     className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
                   >
@@ -188,10 +199,29 @@ export default function PrivacySettings({
                     <input
                       type="file"
                       name="photo"
-                      id="import-file"
+                      id="import-html-file"
                       accept=".html"
                       className="hidden"
-                      onChange={postBookmarkFile}
+                      onChange={(e) =>
+                        importBookmarks(e, MigrationFormat.htmlFile)
+                      }
+                    />
+                  </label>
+                  <label
+                    htmlFor="import-linkwarden-file"
+                    title="JSON File"
+                    className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
+                  >
+                    Linkwarden...
+                    <input
+                      type="file"
+                      name="photo"
+                      id="import-linkwarden-file"
+                      accept=".json"
+                      className="hidden"
+                      onChange={(e) =>
+                        importBookmarks(e, MigrationFormat.linkwarden)
+                      }
                     />
                   </label>
                 </div>
@@ -199,12 +229,11 @@ export default function PrivacySettings({
             ) : null}
           </div>
 
-          {/* Commented out for now. */}
+          <Link className="w-fit" href="/api/migration">
-          {/* <Link className="w-fit" href="/api/migration">
             <div className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
               Export Data
             </div>
-          </Link> */}
+          </Link>
         </div>
       </div>
 

components/SettingsSidebar.tsx

@@ -6,6 +6,7 @@ import {
   faBoxArchive,
   faLock,
   faKey,
+  faRightLeft,
 } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -93,6 +94,25 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           </div>
         </Link>
 
+        <Link href="/settings/migration">
+          <div
+            className={`${
+              active === `/settings/migration`
+                ? "bg-sky-200 dark:bg-sky-800"
+                : "hover:bg-slate-200 hover:dark:bg-neutral-700"
+            } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faRightLeft}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Import & Export
+            </p>
+          </div>
+        </Link>
+
         <Link href="/settings/privacy">
           <div
             className={`${

lib/api/controllers/migration/exportData.ts

@@ -20,5 +20,18 @@ export default async function exportData(userId: number) {
 
   const { password, id, image, ...userData } = user;
 
+  function redactIds(obj: any) {
+    if (Array.isArray(obj)) {
+      obj.forEach((o) => redactIds(o));
+    } else if (obj !== null && typeof obj === "object") {
+      delete obj.id;
+      for (let key in obj) {
+        redactIds(obj[key]);
+      }
+    }
+  }
+
+  redactIds(userData);
+
   return { response: userData, status: 200 };
 }

lib/api/controllers/migration/importFromHTMLFile.ts

@@ -3,7 +3,10 @@ import { Backup } from "@/types/global";
 import createFolder from "@/lib/api/storage/createFolder";
 import { JSDOM } from "jsdom";
 
-export default async function importData(userId: number, rawData: string) {
+export default async function importFromHTMLFile(
+  userId: number,
+  rawData: string
+) {
   try {
     const dom = new JSDOM(rawData);
     const document = dom.window.document;

lib/api/controllers/migration/importFromLinkwarden.ts

@@ -0,0 +1,91 @@
+import { prisma } from "@/lib/api/db";
+import { Backup } from "@/types/global";
+import createFolder from "@/lib/api/storage/createFolder";
+
+export default async function getData(userId: number, rawData: string) {
+  const data: Backup = JSON.parse(rawData);
+
+  console.log(typeof data);
+
+  // Import collections
+  try {
+    for (const e of data.collections) {
+      e.name = e.name.trim();
+
+      const findCollection = await prisma.user.findUnique({
+        where: {
+          id: userId,
+        },
+        select: {
+          collections: {
+            where: {
+              name: e.name,
+            },
+          },
+        },
+      });
+
+      const checkIfCollectionExists = findCollection?.collections[0];
+
+      let collectionId = findCollection?.collections[0]?.id;
+
+      if (!checkIfCollectionExists) {
+        const newCollection = await prisma.collection.create({
+          data: {
+            owner: {
+              connect: {
+                id: userId,
+              },
+            },
+            name: e.name,
+            description: e.description,
+            color: e.color,
+          },
+        });
+
+        createFolder({ filePath: `archives/${newCollection.id}` });
+
+        collectionId = newCollection.id;
+      }
+
+      // Import Links
+      for (const link of e.links) {
+        const newLink = await prisma.link.create({
+          data: {
+            url: link.url,
+            name: link.name,
+            description: link.description,
+            collection: {
+              connect: {
+                id: collectionId,
+              },
+            },
+            // Import Tags
+            tags: {
+              connectOrCreate: link.tags.map((tag) => ({
+                where: {
+                  name_ownerId: {
+                    name: tag.name.trim(),
+                    ownerId: userId,
+                  },
+                },
+                create: {
+                  name: tag.name.trim(),
+                  owner: {
+                    connect: {
+                      id: userId,
+                    },
+                  },
+                },
+              })),
+            },
+          },
+        });
+      }
+    }
+  } catch (err) {
+    console.log(err);
+  }
+
+  return { response: "Success.", status: 200 };
+}

pages/api/migration/index.ts

@@ -2,7 +2,9 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "@/pages/api/auth/[...nextauth]";
 import exportData from "@/lib/api/controllers/migration/exportData";
-import importData from "@/lib/api/controllers/migration/importData";
+import importFromHTMLFile from "@/lib/api/controllers/migration/importFromHTMLFile";
+import importFromLinkwarden from "@/lib/api/controllers/migration/importFromLinkwarden";
+import { MigrationFormat, MigrationRequest } from "@/types/global";
 
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
   const session = await getServerSession(req, res, authOptions);
@@ -25,7 +27,15 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
         .status(data.status)
         .json(data.response);
   } else if (req.method === "POST") {
-    const data = await importData(session.user.id, req.body);
+    const request: MigrationRequest = JSON.parse(req.body);
-    return res.status(data.status).json({ response: data.response });
+
+    let data;
+    if (request.format === MigrationFormat.htmlFile)
+      data = await importFromHTMLFile(session.user.id, request.data);
+
+    if (request.format === MigrationFormat.linkwarden)
+      data = await importFromLinkwarden(session.user.id, request.data);
+
+    if (data) return res.status(data.status).json({ response: data.response });
   }
 }

pages/settings/migration.tsx

@@ -0,0 +1,10 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import React from "react";
+
+export default function appearance() {
+  return (
+    <SettingsLayout>
+      <div>Migration</div>
+    </SettingsLayout>
+  );
+}

types/global.ts

@@ -86,6 +86,16 @@ export interface Backup extends Omit<User, "password" | "id" | "image"> {
   collections: CollectionIncludingLinks[];
 }
 
+export type MigrationRequest = {
+  format: MigrationFormat;
+  data: string;
+};
+
+export enum MigrationFormat {
+  linkwarden,
+  htmlFile,
+}
+
 export enum Plan {
   monthly,
   yearly,