From 32d7d5f06ca87a21dc88d81aae671eaec910364f Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Mon, 17 Oct 2022 15:09:10 -0400
Subject: [PATCH 1/3] Allow user to proceed to next step if they were
 previously on the Email Step

---
 .../features/verification/email_passthru.tsx       | 14 ++++++++++++--
 app/soapbox/features/verification/index.tsx        |  7 +++----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/features/verification/email_passthru.tsx b/app/soapbox/features/verification/email_passthru.tsx
index 2211e6d96..43432c586 100644
--- a/app/soapbox/features/verification/email_passthru.tsx
+++ b/app/soapbox/features/verification/email_passthru.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { useParams } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 
 import snackbar from 'soapbox/actions/snackbar';
 import { confirmEmailVerification } from 'soapbox/actions/verification';
 import { Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import { ChallengeTypes } from './index';
 
 import type { AxiosError } from 'axios';
 
@@ -30,6 +32,14 @@ const messages = defineMessages({
 
 const Success = () => {
   const intl = useIntl();
+  const history = useHistory();
+  const currentChallenge = useAppSelector((state) => state.verification.currentChallenge as ChallengeTypes);
+
+  // Bypass the user straight to the next step.
+  if (currentChallenge === ChallengeTypes.SMS) {
+    history.push('/verify');
+    return null;
+  }
 
   return (
     <Stack space={4} alignItems='center'>
diff --git a/app/soapbox/features/verification/index.tsx b/app/soapbox/features/verification/index.tsx
index 6e1716c32..4470bd4c2 100644
--- a/app/soapbox/features/verification/index.tsx
+++ b/app/soapbox/features/verification/index.tsx
@@ -1,16 +1,15 @@
 import * as React from 'react';
-import { useDispatch } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
 import { fetchVerificationConfig } from 'soapbox/actions/verification';
-import { useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 import Registration from './registration';
 import AgeVerification from './steps/age-verification';
 import EmailVerification from './steps/email-verification';
 import SmsVerification from './steps/sms-verification';
 
-enum ChallengeTypes {
+export enum ChallengeTypes {
   EMAIL = 'email',
   SMS = 'sms',
   AGE = 'age',
@@ -23,7 +22,7 @@ const verificationSteps = {
 };
 
 const Verification = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const isInstanceReady = useAppSelector((state) => state.verification.instance.get('isReady') === true);
   const isRegistrationOpen = useAppSelector(state => state.verification.instance.get('registrations') === true);

From fa7a517a95579a6da59437e725fc56c161362458 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 18 Oct 2022 19:10:16 -0500
Subject: [PATCH 2/3] Pass status to MediaModal, handle status undefined

---
 app/soapbox/components/status-media.tsx                 | 2 +-
 app/soapbox/components/status.tsx                       | 4 ++--
 app/soapbox/features/admin/components/report_status.tsx | 2 +-
 app/soapbox/features/status/index.tsx                   | 2 +-
 app/soapbox/features/ui/components/media-modal.tsx      | 6 +++---
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
index 2721d726b..0052a9564 100644
--- a/app/soapbox/components/status-media.tsx
+++ b/app/soapbox/components/status-media.tsx
@@ -59,7 +59,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
   };
 
   const openMedia = (media: ImmutableList<Attachment>, index: number) => {
-    dispatch(openModal('MEDIA', { media, index }));
+    dispatch(openModal('MEDIA', { media, status, index }));
   };
 
   const openVideo = (media: Attachment, time: number): void => {
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 99de0da5d..27b1731bd 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -117,9 +117,9 @@ const Status: React.FC<IStatus> = (props) => {
 
     if (firstAttachment) {
       if (firstAttachment.type === 'video') {
-        dispatch(openModal('VIDEO', { media: firstAttachment, time: 0 }));
+        dispatch(openModal('VIDEO', { status, media: firstAttachment, time: 0 }));
       } else {
-        dispatch(openModal('MEDIA', { media: status.media_attachments, index: 0 }));
+        dispatch(openModal('MEDIA', { status, media: status.media_attachments, index: 0 }));
       }
     }
   };
diff --git a/app/soapbox/features/admin/components/report_status.tsx b/app/soapbox/features/admin/components/report_status.tsx
index 8ec01792e..4f9ff1af0 100644
--- a/app/soapbox/features/admin/components/report_status.tsx
+++ b/app/soapbox/features/admin/components/report_status.tsx
@@ -27,7 +27,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
   const dispatch = useAppDispatch();
 
   const handleOpenMedia = (media: Attachment, index: number) => {
-    dispatch(openModal('MEDIA', { media, index }));
+    dispatch(openModal('MEDIA', { media, status, index }));
   };
 
   const handleDeleteStatus = () => {
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index c5130b759..2ba338bcc 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -228,7 +228,7 @@ const Thread: React.FC<IThread> = (props) => {
   };
 
   const handleOpenMedia = (media: ImmutableList<AttachmentEntity>, index: number) => {
-    dispatch(openModal('MEDIA', { media, index }));
+    dispatch(openModal('MEDIA', { media, status, index }));
   };
 
   const handleOpenVideo = (media: ImmutableList<AttachmentEntity>, time: number) => {
diff --git a/app/soapbox/features/ui/components/media-modal.tsx b/app/soapbox/features/ui/components/media-modal.tsx
index a04808ece..0ceea724e 100644
--- a/app/soapbox/features/ui/components/media-modal.tsx
+++ b/app/soapbox/features/ui/components/media-modal.tsx
@@ -23,7 +23,7 @@ const messages = defineMessages({
 
 interface IMediaModal {
   media: ImmutableList<Attachment>,
-  status: Status,
+  status?: Status,
   account: Account,
   index: number,
   time?: number,
@@ -96,7 +96,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
   const handleStatusClick: React.MouseEventHandler = e => {
     if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
       e.preventDefault();
-      history.push(`/@${account.acct}/posts/${status.id}`);
+      history.push(`/@${account.acct}/posts/${status?.id}`);
       onClose();
     }
   };
@@ -209,7 +209,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
         <Audio
           src={attachment.url}
           alt={attachment.description}
-          poster={attachment.preview_url !== attachment.url ? attachment.preview_url : (status.getIn(['account', 'avatar_static'])) as string | undefined}
+          poster={attachment.preview_url !== attachment.url ? attachment.preview_url : (status?.getIn(['account', 'avatar_static'])) as string | undefined}
           backgroundColor={attachment.meta.getIn(['colors', 'background']) as string | undefined}
           foregroundColor={attachment.meta.getIn(['colors', 'foreground']) as string | undefined}
           accentColor={attachment.meta.getIn(['colors', 'accent']) as string | undefined}

From ed558ba5cacbe0582253a3b4f8b646bf6ec2f5c1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 18 Oct 2022 19:23:01 -0500
Subject: [PATCH 3/3] MediaModal: fix clicking Audio causes modal to close

---
 app/soapbox/features/ui/components/media-modal.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/ui/components/media-modal.tsx b/app/soapbox/features/ui/components/media-modal.tsx
index 0ceea724e..17bddabeb 100644
--- a/app/soapbox/features/ui/components/media-modal.tsx
+++ b/app/soapbox/features/ui/components/media-modal.tsx
@@ -101,12 +101,12 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
     }
   };
 
-  const handleCloserClick: React.MouseEventHandler = ({ currentTarget }) => {
+  const handleCloserClick: React.MouseEventHandler = ({ target }) => {
     const whitelist = ['zoomable-image'];
     const activeSlide = document.querySelector('.media-modal .react-swipeable-view-container > div[aria-hidden="false"]');
 
-    const isClickOutside = currentTarget === activeSlide || !activeSlide?.contains(currentTarget);
-    const isWhitelisted = whitelist.some(w => currentTarget.classList.contains(w));
+    const isClickOutside = target === activeSlide || !activeSlide?.contains(target as Element);
+    const isWhitelisted = whitelist.some(w => (target as Element).classList.contains(w));
 
     if (isClickOutside || isWhitelisted) {
       onClose();