feat: remember previously used links for migration

src/features/community/migrationSlice.ts

@@ -0,0 +1,70 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { AppDispatch, RootState } from "../../store";
+import { db } from "../../services/db";
+import { uniq } 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;
+    },
+  },
+});
+
+export default migrationSlice.reducer;
+
+export const addMigrationLink =
+  (link: string) =>
+  async (dispatch: AppDispatch, getState: () => RootState) => {
+    const userHandle = getState().auth.accountData?.activeHandle;
+    const links = uniq([link, ...getState().migration.links]);
+
+    if (!userHandle) return;
+
+    dispatch(setMigrationLinks(links));
+
+    db.setSetting("migration_links", links, {
+      user_handle: userHandle,
+    });
+  };
+
+export const getMigrationLinks =
+  () => async (dispatch: AppDispatch, getState: () => RootState) => {
+    const userHandle = getState().auth.accountData?.activeHandle;
+
+    if (!userHandle) {
+      dispatch(setMigrationLinks([]));
+      return;
+    }
+
+    const links = await db.getSetting("migration_links", {
+      user_handle: userHandle,
+    });
+
+    dispatch(setMigrationLinks(links || []));
+  };
+
+export const resetMigrationLinks =
+  () => async (dispatch: AppDispatch, getState: () => RootState) => {
+    const userHandle = getState().auth.accountData?.activeHandle;
+
+    if (!userHandle) return;
+
+    dispatch(setMigrationLinks([]));
+
+    db.setSetting("migration_links", [], {
+      user_handle: userHandle,
+    });
+  };
+
+const { setMigrationLinks } = migrationSlice.actions;

src/pages/settings/RedditDataMigratePage.tsx

@@ -1,5 +1,6 @@
 import {
   IonBackButton,
+  IonButton,
   IonButtons,
   IonHeader,
   IonInput,
@@ -16,6 +17,11 @@ import { InsetIonItem } from "../profile/ProfileFeedItemsPage";
 import { isValidUrl } from "../../helpers/url";
 import useAppToast from "../../helpers/useAppToast";
 import { useSetActivePage } from "../../features/auth/AppContext";
+import { useAppDispatch, useAppSelector } from "../../store";
+import {
+  addMigrationLink,
+  resetMigrationLinks,
+} from "../../features/community/migrationSlice";
 
 export default function RedditMigratePage() {
   const pageRef = useRef<HTMLElement>(null);
@@ -24,6 +30,10 @@ export default function RedditMigratePage() {
   const [subs, setSubs] = useState<string[] | undefined>();
   const [link, setLink] = useState("");
 
+  const links = useAppSelector((state) => state.migration.links);
+
+  const dispatch = useAppDispatch();
+
   useSetActivePage(pageRef);
 
   useEffect(() => {
@@ -42,8 +52,9 @@ export default function RedditMigratePage() {
       return;
     }
 
+    dispatch(addMigrationLink(link));
     setSubs(subs);
-  }, [link, presentToast]);
+  }, [link, presentToast, dispatch]);
 
   function renderUpload() {
     return (
@@ -87,6 +98,33 @@ export default function RedditMigratePage() {
             </InsetIonItem>
           </label>
         </IonList>
+        <IonList inset>
+          {links.length > 0 ? (
+            <IonItem>
+              <IonLabel>Previous Links</IonLabel>
+              <IonButton
+                fill="clear"
+                onClick={(e) => {
+                  e.preventDefault();
+                  dispatch(resetMigrationLinks());
+                }}
+              >
+                Clear
+              </IonButton>
+            </IonItem>
+          ) : undefined}
+          {links.map((link, idx) => (
+            <InsetIonItem
+              key={idx}
+              onClick={(e) => {
+                e.preventDefault();
+                setLink(link);
+              }}
+            >
+              <IonLabel>{link}</IonLabel>
+            </InsetIonItem>
+          ))}
+        </IonList>
       </>
     );
   }
@@ -108,7 +146,19 @@ export default function RedditMigratePage() {
       <IonHeader>
         <IonToolbar>
           <IonButtons slot="start">
-            <IonBackButton defaultHref="/settings" text="Settings" />
+            {subs ? (
+              <IonButton
+                onClick={(e) => {
+                  e.preventDefault();
+                  setLink("");
+                  setSubs(undefined);
+                }}
+              >
+                Back
+              </IonButton>
+            ) : (
+              <IonBackButton defaultHref="/settings" text="Settings" />
+            )}
           </IonButtons>
 
           <IonTitle>Migrate</IonTitle>

src/services/db.ts

@@ -253,6 +253,7 @@ export type SettingValueTypes = {
   compact_thumbnail_size: CompactThumbnailSizeType;
   blur_nsfw: PostBlurNsfwType;
   favorite_communities: string[];
+  migration_links: string[];
   default_comment_sort: CommentDefaultSort;
   disable_marking_posts_read: boolean;
   mark_read_on_scroll: boolean;

src/store.tsx

@@ -33,6 +33,9 @@ import resolveSlice from "./features/resolve/resolveSlice";
 import biometricSlice, {
   initializeBiometricSliceDataIfNeeded,
 } from "./features/settings/biometric/biometricSlice";
+import migrationSlice, {
+  getMigrationLinks,
+} from "./features/community/migrationSlice";
 import modSlice from "./features/moderation/modSlice";
 
 const store = configureStore({
@@ -50,6 +53,7 @@ const store = configureStore({
     resolve: resolveSlice,
     biometric: biometricSlice,
     mod: modSlice,
+    migration: migrationSlice,
   },
 });
 export type RootState = ReturnType<typeof store.getState>;
@@ -74,6 +78,7 @@ const activeHandleChange = () => {
   lastActiveHandle = activeHandle;
 
   store.dispatch(getFavoriteCommunities());
+  store.dispatch(getMigrationLinks());
   store.dispatch(getBlurNsfw());
   store.dispatch(getFilteredKeywords());
   store.dispatch(getDefaultFeed());