feat: remember previously used links for migration

src/features/migrate/MigrateList.tsx

@@ -0,0 +1,126 @@
+import {
+  IonItemOption,
+  IonItemOptions,
+  IonItemSliding,
+  IonLabel,
+  IonList,
+  useIonAlert,
+} from "@ionic/react";
+import { InsetIonItem } from "../user/Profile";
+import { useAppDispatch, useAppSelector } from "../../store";
+import { useEffect } from "react";
+import {
+  addMigrationLink,
+  getMigrationLinks,
+  removeMigrationLink,
+} from "./migrationSlice";
+import { getPathname, isValidUrl } from "../../helpers/url";
+import { parseSubsFromLink } from "./MigrateSubsList";
+import useAppToast from "../../helpers/useAppToast";
+import { migrateParseError } from "../../helpers/toastMessages";
+
+export default function MigrateList() {
+  const dispatch = useAppDispatch();
+  const links = useAppSelector((state) => state.migration.links);
+  const presentToast = useAppToast();
+  const [presentAlert] = useIonAlert();
+
+  useEffect(() => {
+    dispatch(getMigrationLinks());
+  });
+
+  function remove(link: string) {
+    dispatch(removeMigrationLink(link));
+  }
+
+  function add() {
+    presentAlert({
+      message: "Paste Multireddit Link",
+      buttons: [
+        {
+          text: "OK",
+          handler: ({ link }) => {
+            if (
+              !isValidUrl(link, { checkProtocol: true, allowRelative: false })
+            ) {
+              presentToast(migrateParseError);
+              return;
+            }
+
+            const subs = parseSubsFromLink(link);
+
+            if (!subs.length) {
+              presentToast(migrateParseError);
+              return;
+            }
+
+            dispatch(addMigrationLink(link));
+          },
+        },
+        "Cancel",
+      ],
+      inputs: [
+        {
+          placeholder: "Multireddit link",
+          name: "link",
+        },
+      ],
+    });
+  }
+
+  return (
+    <>
+      <div className="ion-padding">
+        <p>
+          This tool is designed for Reddit users migrating to Lemmy to easily
+          search for communities similar to subscribed subreddits.
+        </p>
+        <ul>
+          <li>
+            Visit{" "}
+            <a
+              href="https://www.reddit.com/subreddits/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              https://www.reddit.com/subreddits
+            </a>
+          </li>
+          <li>If iOS, open in Safari so you can copy links to clipboard</li>
+          <li>Login</li>
+          <li>
+            Copy the link for &quot;multireddit of your subscriptions&quot; in
+            the sidebar
+          </li>
+          <li>Paste below</li>
+        </ul>
+      </div>
+
+      <IonList inset>
+        {links.map((link) => (
+          <IonItemSliding key={link}>
+            <IonItemOptions side="end" onIonSwipe={() => remove(link)}>
+              <IonItemOption
+                color="danger"
+                expandable
+                onClick={() => remove(link)}
+              >
+                Forget
+              </IonItemOption>
+            </IonItemOptions>
+            <InsetIonItem
+              routerLink={`/settings/reddit-migrate/${encodeURIComponent(link)}`}
+            >
+              <IonLabel class="ion-text-nowrap">{getPathname(link)}</IonLabel>
+            </InsetIonItem>
+          </IonItemSliding>
+        ))}
+        <IonItemSliding>
+          <InsetIonItem onClick={() => add()}>
+            <IonLabel color="primary">Add multireddit link</IonLabel>
+          </InsetIonItem>
+        </IonItemSliding>
+      </IonList>
+    </>
+  );
+}

src/features/migrate/MigrateSubsList.tsx

@@ -0,0 +1,40 @@
+import { IonItem, IonList } from "@ionic/react";
+import { memo, useMemo } from "react";
+
+interface MigrateSubsListProps {
+  link: string;
+}
+
+function MigrateSubsList({ link }: MigrateSubsListProps) {
+  const subs = useMemo(() => {
+    try {
+      return parseSubsFromLink(decodeURIComponent(link));
+    } catch (error) {
+      console.error("Failed to parse link", error);
+      return [];
+    }
+  }, [link]);
+
+  return (
+    <IonList>
+      {subs?.map((sub) => (
+        <IonItem
+          key={sub}
+          routerLink={`/settings/reddit-migrate/${link}/${sub}`}
+        >
+          r/{sub}
+        </IonItem>
+      ))}
+    </IonList>
+  );
+}
+
+export default memo(MigrateSubsList);
+
+export function parseSubsFromLink(multiredditUrl: string) {
+  const { pathname } = new URL(multiredditUrl);
+
+  if (!pathname.startsWith("/r/")) return [];
+
+  return pathname.slice(3).split("+");
+}

src/features/migrate/migrationSlice.ts

@@ -0,0 +1,41 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { AppDispatch } from "../../store";
+import { db } from "../../services/db";
+import { uniq, without } from "lodash";
+
+interface MigrationSlice {
+  links: Array<string>;
+}
+
+const initialState: MigrationSlice = {
+  links: [],
+};
+
+export const migrationSlice = createSlice({
+  name: "migration",
+  initialState,
+  reducers: {
+    setMigrationLinks: (state, action: PayloadAction<string[]>) => {
+      state.links = action.payload;
+    },
+    addMigrationLink: (state, action: PayloadAction<string>) => {
+      state.links = uniq([action.payload, ...state.links]);
+      db.setSetting("migration_links", state.links);
+    },
+    removeMigrationLink: (state, action: PayloadAction<string>) => {
+      state.links = without(state.links, action.payload);
+      db.setSetting("migration_links", state.links);
+    },
+  },
+});
+
+export default migrationSlice.reducer;
+
+export const { setMigrationLinks, addMigrationLink, removeMigrationLink } =
+  migrationSlice.actions;
+
+export const getMigrationLinks = () => async (dispatch: AppDispatch) => {
+  const links = await db.getSetting("migration_links");
+
+  dispatch(setMigrationLinks(links || []));
+};

src/helpers/routes.ts

@@ -12,8 +12,13 @@ export function useBuildGeneralBrowseLink() {
   const tabName = useContext(TabNameContext);
 
   const buildGeneralBrowseLink = useCallback(
-    (path: string) =>
-      `/${tabName || tabRef?.current}/${connectedInstance}${path}`,
+    (path: string) => {
+      const tab = tabName || tabRef?.current;
+      // /settings/lemmy.world is invalid. Posts tab is special case
+      if (tab !== "posts" && (!path || path === "/")) return `/${tab}`;
+
+      return `/${tab}/${connectedInstance}${path}`;
+    },
     // tab should never dynamically change for a rendered buildGeneralBrowseLink tab. So don't re-render
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [connectedInstance],

src/helpers/toastMessages.ts

@@ -175,3 +175,9 @@ export const loginSuccess: AppToastOptions = {
   centerText: true,
   icon: checkmark,
 };
+
+export const migrateParseError: AppToastOptions = {
+  message:
+    "Problem parsing link. Please make sure the link you entered is correct.",
+  color: "warning",
+};

src/helpers/url.ts

@@ -18,7 +18,7 @@ export function isValidUrl(
   return url.protocol === "http:" || url.protocol === "https:";
 }
 
-function getPathname(url: string): string | undefined {
+export function getPathname(url: string): string | undefined {
   try {
     return new URL(url).pathname;
   } catch {

src/routes/pages/settings/RedditDataMigratePage.tsx

@@ -2,104 +2,20 @@ import {
   IonBackButton,
   IonButtons,
   IonHeader,
-  IonInput,
-  IonItem,
-  IonList,
   IonPage,
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
 import AppContent from "../../../features/shared/AppContent";
-import { useEffect, useRef, useState } from "react";
-import { InsetIonItem } from "../profile/ProfileFeedItemsPage";
-import { isValidUrl } from "../../../helpers/url";
-import useAppToast from "../../../helpers/useAppToast";
+import { useRef } from "react";
 import { useSetActivePage } from "../../../features/auth/AppContext";
+import MigrateList from "../../../features/migrate/MigrateList";
 
 export default function RedditMigratePage() {
   const pageRef = useRef<HTMLElement>(null);
 
-  const presentToast = useAppToast();
-  const [subs, setSubs] = useState<string[] | undefined>();
-  const [link, setLink] = useState("");
-
   useSetActivePage(pageRef);
 
-  useEffect(() => {
-    if (!isValidUrl(link, { checkProtocol: true, allowRelative: false }))
-      return;
-
-    const subs = parseSubsFromLink(link);
-
-    if (!subs.length) {
-      presentToast({
-        message:
-          "Problem parsing link. Please make sure the link you entered is correct.",
-        color: "warning",
-      });
-      setLink("");
-      return;
-    }
-
-    setSubs(subs);
-  }, [link, presentToast]);
-
-  function renderUpload() {
-    return (
-      <>
-        <div className="ion-padding">
-          <p>
-            This tool is designed for Reddit users migrating to Lemmy to easily
-            search for communities similar to subscribed subreddits.
-          </p>
-          <ul>
-            <li>
-              Visit{" "}
-              <a
-                href="https://www.reddit.com/subreddits/"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                https://www.reddit.com/subreddits
-              </a>
-            </li>
-            <li>If iOS, open in Safari so you can copy links to clipboard</li>
-            <li>Login</li>
-            <li>
-              Copy the link for &quot;multireddit of your subscriptions&quot; in
-              the sidebar
-            </li>
-            <li>Paste below</li>
-          </ul>
-        </div>
-        <IonList inset>
-          <label htmlFor="upload-csv">
-            <InsetIonItem>
-              <IonInput
-                label="Multireddit link"
-                type="text"
-                value={link}
-                onIonInput={(e) => setLink(e.target.value as string)}
-              />
-            </InsetIonItem>
-          </label>
-        </IonList>
-      </>
-    );
-  }
-
-  function renderSubs() {
-    return (
-      <IonList>
-        {subs?.map((sub) => (
-          <IonItem key={sub} routerLink={`/settings/reddit-migrate/${sub}`}>
-            r/{sub}
-          </IonItem>
-        ))}
-      </IonList>
-    );
-  }
-
   return (
     <IonPage ref={pageRef} className="grey-bg">
       <IonHeader>
@@ -111,15 +27,9 @@ export default function RedditMigratePage() {
           <IonTitle>Migrate</IonTitle>
         </IonToolbar>
       </IonHeader>
-      <AppContent scrollY>{!subs ? renderUpload() : renderSubs()}</AppContent>
+      <AppContent scrollY>
+        <MigrateList />
+      </AppContent>
     </IonPage>
   );
 }
-
-function parseSubsFromLink(multiredditUrl: string) {
-  const { pathname } = new URL(multiredditUrl);
-
-  if (!pathname.startsWith("/r/")) return [];
-
-  return pathname.slice(3).split("+");
-}