Always display reset modal on success

ts/components/ProfileEditor.stories.tsx

@@ -44,9 +44,6 @@ export default {
     usernameLinkCorrupted: {
       control: 'boolean',
     },
-    usernameLinkRecovered: {
-      control: 'boolean',
-    },
   },
   args: {
     aboutEmoji: '',
@@ -77,7 +74,6 @@ export default {
     showToast: action('showToast'),
     replaceAvatar: action('replaceAvatar'),
     resetUsernameLink: action('resetUsernameLink'),
-    clearUsernameLinkRecovered: action('clearUsernameLinkRecovered'),
     saveAvatarToDisk: action('saveAvatarToDisk'),
     markCompletedUsernameLinkOnboarding: action(
       'markCompletedUsernameLinkOnboarding'

ts/components/ProfileEditor.tsx

@@ -82,7 +82,6 @@ export type PropsDataType = {
   initialEditState?: EditState;
   usernameCorrupted: boolean;
   usernameEditState: UsernameEditState;
-  usernameLinkRecovered: boolean;
   usernameLinkState: UsernameLinkState;
   usernameLinkColor?: number;
   usernameLink?: string;
@@ -100,7 +99,6 @@ type PropsActionType = {
   setUsernameLinkColor: (color: number) => void;
   toggleProfileEditor: () => void;
   resetUsernameLink: () => void;
-  clearUsernameLinkRecovered: () => void;
   deleteUsername: () => void;
   showToast: ShowToastAction;
   openUsernameReservationModal: () => void;
@@ -141,7 +139,6 @@ function getDefaultBios(i18n: LocalizerType): Array<DefaultBio> {
 export function ProfileEditor({
   aboutEmoji,
   aboutText,
-  clearUsernameLinkRecovered,
   color,
   conversationId,
   deleteAvatarFromDisk,
@@ -172,7 +169,6 @@ export function ProfileEditor({
   username,
   usernameCorrupted,
   usernameEditState,
-  usernameLinkRecovered,
   usernameLinkState,
   usernameLinkColor,
   usernameLink,
@@ -535,11 +531,9 @@ export function ProfileEditor({
         username={username ?? ''}
         colorId={usernameLinkColor}
         usernameLinkCorrupted={usernameLinkCorrupted}
-        usernameLinkRecovered={usernameLinkRecovered}
         usernameLinkState={usernameLinkState}
         setUsernameLinkColor={setUsernameLinkColor}
         resetUsernameLink={resetUsernameLink}
-        clearUsernameLinkRecovered={clearUsernameLinkRecovered}
         saveAttachment={saveAttachment}
         showToast={showToast}
         onBack={() => setEditState(EditState.None)}

ts/components/UsernameLinkModalBody.stories.tsx

@@ -35,9 +35,6 @@ export default {
     usernameLinkCorrupted: {
       control: 'boolean',
     },
-    usernameLinkRecovered: {
-      control: 'boolean',
-    },
     usernameLinkState: {
       control: { type: 'select' },
       options: [
@@ -69,7 +66,6 @@ export default {
     showToast: action('showToast'),
     resetUsernameLink: action('resetUsernameLink'),
     setUsernameLinkColor: action('setUsernameLinkColor'),
-    clearUsernameLinkRecovered: action('clearUsernameLinkRecovered'),
     onBack: action('onBack'),
   },
 } satisfies Meta<PropsType>;

ts/components/UsernameLinkModalBody.tsx

@@ -29,11 +29,9 @@ export type PropsType = Readonly<{
   colorId?: number;
   usernameLinkCorrupted: boolean;
   usernameLinkState: UsernameLinkState;
-  usernameLinkRecovered: boolean;
 
   setUsernameLinkColor: (colorId: number) => void;
   resetUsernameLink: () => void;
-  clearUsernameLinkRecovered: () => void;
   saveAttachment: SaveAttachmentActionCreatorType;
   showToast: ShowToastAction;
   onBack: () => void;
@@ -528,18 +526,22 @@ function UsernameLinkColors({
   );
 }
 
+enum ResetModalVisibility {
+  NotMounted = 'NotMounted',
+  Closed = 'Closed',
+  Open = 'Open',
+}
+
 export function UsernameLinkModalBody({
   i18n,
   link,
   username,
   usernameLinkCorrupted,
   usernameLinkState,
-  usernameLinkRecovered,
   colorId: initialColorId = ColorEnum.UNKNOWN,
 
   setUsernameLinkColor,
   resetUsernameLink,
-  clearUsernameLinkRecovered,
   saveAttachment,
   showToast,
 
@@ -548,7 +550,9 @@ export function UsernameLinkModalBody({
   const [pngData, setPngData] = useState<Uint8Array | undefined>();
   const [showColors, setShowColors] = useState(false);
   const [confirmReset, setConfirmReset] = useState(false);
-  const [isRecovered, setIsRecovered] = useState(false);
+  const [resetModalVisibility, setResetModalVisibility] = useState(
+    ResetModalVisibility.NotMounted
+  );
   const [showError, setShowError] = useState(false);
   const [colorId, setColorId] = useState(initialColorId);
 
@@ -694,22 +698,24 @@ export function UsernameLinkModalBody({
     setShowError(true);
   }, [usernameLinkState]);
 
-  useEffect(() => {
+  const onResetModalClose = useCallback(() => {
-    if (usernameLinkRecovered) {
+    setResetModalVisibility(ResetModalVisibility.Closed);
-      setIsRecovered(true);
-
-      // Only show the modal once
-      clearUsernameLinkRecovered();
-    }
-  }, [usernameLinkRecovered, clearUsernameLinkRecovered]);
-
-  const onClearIsRecovered = useCallback(() => {
-    setIsRecovered(false);
   }, []);
 
   const isReady = usernameLinkState === UsernameLinkState.Ready;
   const isResettingLink = usernameLinkCorrupted || !isReady;
 
+  useEffect(() => {
+    setResetModalVisibility(x => {
+      // Initial mount shouldn't show the modal
+      if (x === ResetModalVisibility.NotMounted || isResettingLink) {
+        return ResetModalVisibility.Closed;
+      }
+
+      return ResetModalVisibility.Open;
+    });
+  }, [isResettingLink]);
+
   const info = (
     <>
       <div className={classnames(`${CLASS}__actions`)}>
@@ -862,11 +868,11 @@ export function UsernameLinkModalBody({
           </ConfirmationDialog>
         )}
 
-        {isRecovered && (
+        {resetModalVisibility === ResetModalVisibility.Open && (
           <ConfirmationDialog
             i18n={i18n}
             dialogName="UsernameLinkModal__error"
-            onClose={onClearIsRecovered}
+            onClose={onResetModalClose}
             cancelButtonVariant={ButtonVariant.Secondary}
             cancelText={i18n('icu:ok')}
           >

ts/services/username.ts

@@ -16,7 +16,6 @@ import type { UsernameReservationType } from '../types/Username';
 import {
   ReserveUsernameError,
   ConfirmUsernameResult,
-  ResetUsernameLinkResult,
   getNickname,
   getDiscriminator,
   isCaseChange,
@@ -334,9 +333,7 @@ export async function deleteUsername(
   await updateUsernameAndSyncProfile(undefined);
 }
 
-export async function resetLink(
+export async function resetLink(username: string): Promise<void> {
-  username: string
-): Promise<ResetUsernameLinkResult> {
   const { server } = window.textsecure;
   if (!server) {
     throw new Error('server interface is not available!');
@@ -350,8 +347,6 @@ export async function resetLink(
 
   const { entropy, encryptedUsername } = usernames.createUsernameLink(username);
 
-  const wasCorrupted = window.storage.get('usernameLinkCorrupted');
-
   await window.storage.remove('usernameLink');
 
   const { usernameLinkHandle: serverIdString } =
@@ -368,10 +363,6 @@ export async function resetLink(
 
   me.captureChange('usernameLink');
   storageServiceUploadJob();
-
-  return wasCorrupted
-    ? ResetUsernameLinkResult.OkRecovered
-    : ResetUsernameLinkResult.Ok;
 }
 
 const USERNAME_LINK_ENTROPY_SIZE = 32;

ts/state/ducks/username.ts

@@ -8,7 +8,6 @@ import type { UsernameReservationType } from '../../types/Username';
 import {
   ReserveUsernameError,
   ConfirmUsernameResult,
-  ResetUsernameLinkResult,
 } from '../../types/Username';
 import * as usernameServices from '../../services/username';
 import { storageServiceUploadJob } from '../../services/storage';
@@ -46,7 +45,6 @@ export type UsernameStateType = ReadonlyDeep<{
 
   // UsernameLinkModalBody
   linkState: UsernameLinkState;
-  linkRecovered: boolean;
 
   // EditUsernameModalBody
   usernameReservation: UsernameReservationStateType;
@@ -63,7 +61,6 @@ const RESERVE_USERNAME = 'username/RESERVE_USERNAME';
 const CONFIRM_USERNAME = 'username/CONFIRM_USERNAME';
 const DELETE_USERNAME = 'username/DELETE_USERNAME';
 const RESET_USERNAME_LINK = 'username/RESET_USERNAME_LINK';
-const CLEAR_USERNAME_LINK_RECOVERED = 'username/CLEAR_USERNAME_LINK_RECOVERED';
 
 type SetUsernameEditStateActionType = ReadonlyDeep<{
   type: typeof SET_USERNAME_EDIT_STATE;
@@ -105,11 +102,8 @@ type DeleteUsernameActionType = ReadonlyDeep<
   PromiseAction<typeof DELETE_USERNAME, void>
 >;
 type ResetUsernameLinkActionType = ReadonlyDeep<
-  PromiseAction<typeof RESET_USERNAME_LINK, ResetUsernameLinkResult>
+  PromiseAction<typeof RESET_USERNAME_LINK, void>
 >;
-type ClearUsernameLinkRecoveredActionType = ReadonlyDeep<{
-  type: typeof CLEAR_USERNAME_LINK_RECOVERED;
-}>;
 
 export type UsernameActionType = ReadonlyDeep<
   | SetUsernameEditStateActionType
@@ -121,7 +115,6 @@ export type UsernameActionType = ReadonlyDeep<
   | ConfirmUsernameActionType
   | DeleteUsernameActionType
   | ResetUsernameLinkActionType
-  | ClearUsernameLinkRecoveredActionType
 >;
 
 export const actions = {
@@ -135,7 +128,6 @@ export const actions = {
   deleteUsername,
   markCompletedUsernameOnboarding,
   resetUsernameLink,
-  clearUsernameLinkRecovered,
   setUsernameLinkColor,
   markCompletedUsernameLinkOnboarding,
 };
@@ -361,19 +353,12 @@ function setUsernameLinkColor(
   };
 }
 
-export function clearUsernameLinkRecovered(): ClearUsernameLinkRecoveredActionType {
-  return {
-    type: CLEAR_USERNAME_LINK_RECOVERED,
-  };
-}
-
 // Reducers
 
 export function getEmptyState(): UsernameStateType {
   return {
     editState: UsernameEditState.Editing,
     linkState: UsernameLinkState.Ready,
-    linkRecovered: false,
     usernameReservation: {
       state: UsernameReservationState.Closed,
     },
@@ -629,16 +614,13 @@ export function reducer(
     return {
       ...state,
       linkState: UsernameLinkState.Updating,
-      linkRecovered: false,
     };
   }
 
   if (action.type === 'username/RESET_USERNAME_LINK_FULFILLED') {
-    const { payload } = action;
     return {
       ...state,
       linkState: UsernameLinkState.Ready,
-      linkRecovered: payload === ResetUsernameLinkResult.OkRecovered,
     };
   }
 
@@ -646,14 +628,6 @@ export function reducer(
     return {
       ...state,
       linkState: UsernameLinkState.Error,
-      linkRecovered: false,
-    };
-  }
-
-  if (action.type === 'username/CLEAR_USERNAME_LINK_RECOVERED') {
-    return {
-      ...state,
-      linkRecovered: false,
     };
   }
 

ts/state/selectors/username.ts

@@ -29,11 +29,6 @@ export const getUsernameLinkState = createSelector(
   (state: UsernameStateType): UsernameLinkState => state.linkState
 );
 
-export const getUsernameLinkRecovered = createSelector(
-  getUsernameState,
-  (state: UsernameStateType): boolean => state.linkRecovered
-);
-
 export const getUsernameReservation = createSelector(
   getUsernameState,
   (state: UsernameStateType): UsernameReservationStateType =>

ts/state/smart/ProfileEditorModal.tsx

@@ -24,7 +24,6 @@ import { selectRecentEmojis } from '../selectors/emojis';
 import {
   getUsernameEditState,
   getUsernameLinkState,
-  getUsernameLinkRecovered,
 } from '../selectors/username';
 
 function renderEditUsernameModalBody(props: {
@@ -55,7 +54,6 @@ function mapStateToProps(
     getHasCompletedUsernameLinkOnboarding(state);
   const usernameEditState = getUsernameEditState(state);
   const usernameLinkState = getUsernameLinkState(state);
-  const usernameLinkRecovered = getUsernameLinkRecovered(state);
   const usernameLinkColor = getUsernameLinkColor(state);
   const usernameLink = getUsernameLink(state);
   const usernameCorrupted = getUsernameCorrupted(state);
@@ -82,7 +80,6 @@ function mapStateToProps(
     usernameLinkState,
     usernameLinkColor,
     usernameLinkCorrupted,
-    usernameLinkRecovered,
     usernameLink,
 
     renderEditUsernameModalBody,

ts/types/Username.ts

@@ -27,11 +27,6 @@ export enum ConfirmUsernameResult {
   ConflictOrGone = 'ConflictOrGone',
 }
 
-export enum ResetUsernameLinkResult {
-  Ok = 'Ok',
-  OkRecovered = 'OkRecovered',
-}
-
 export function getUsernameFromSearch(searchTerm: string): string | undefined {
   try {
     window.SignalContext.usernames.hash(searchTerm);