From a4c661426cab9e89aba7ef2cbcde35d6fdfe7351 Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Tue, 12 Mar 2024 13:00:29 -0700
Subject: [PATCH] Add connect instagram ui (#7796)

---
 .../SelectArtistScreen/FollowArtistCard.tsx   |  2 +-
 .../nav/desktop/ConnectInstagram.tsx          | 59 +++++++++++++++++++
 .../src/components/nav/desktop/LeftNav.tsx    |  4 ++
 .../hooks/useSocialMediaLoader.ts             |  6 +-
 4 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 packages/web/src/components/nav/desktop/ConnectInstagram.tsx

diff --git a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistCard.tsx b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistCard.tsx
index eadb5c89409..b1ca494e552 100644
--- a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistCard.tsx
+++ b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistCard.tsx
@@ -2,6 +2,7 @@ import type { ChangeEvent } from 'react'
 import { useCallback, useContext } from 'react'
 
 import type { UserMetadata } from '@audius/common/models'
+import { formatCount } from '@audius/common/utils'
 import { css } from '@emotion/native'
 import {
   addFollowArtists,
@@ -39,7 +40,6 @@ import { make, track } from 'app/services/analytics'
 import { EventNames } from 'app/types/analytics'
 
 import { SelectArtistsPreviewContext } from './selectArtistPreviewContext'
-import { formatCount } from '@audius/common/utils'
 
 type FollowArtistCardProps = {
   artist: UserMetadata
diff --git a/packages/web/src/components/nav/desktop/ConnectInstagram.tsx b/packages/web/src/components/nav/desktop/ConnectInstagram.tsx
new file mode 100644
index 00000000000..5d9bf2819a7
--- /dev/null
+++ b/packages/web/src/components/nav/desktop/ConnectInstagram.tsx
@@ -0,0 +1,59 @@
+import { useCallback } from 'react'
+
+import {
+  InstagramProfile,
+  accountSelectors,
+  profilePageActions
+} from '@audius/common/store'
+import { useDispatch, useSelector } from 'react-redux'
+
+import InstagramAuth from 'components/instagram-auth/InstagramAuth'
+import { useSocialMediaLoader } from 'pages/sign-up-page/hooks/useSocialMediaLoader'
+
+const messages = {
+  connect: 'Connect Instagram Profile'
+}
+
+export const ConnectInstagram = () => {
+  const dispatch = useDispatch()
+  const account = useSelector(accountSelectors.getAccountUser)
+
+  const { handleStartSocialMediaLogin, handleErrorSocialMediaLogin } =
+    useSocialMediaLoader({
+      linkedSocialOnThisPagePreviously: false
+    })
+
+  const handleStart = useCallback(() => {
+    handleStartSocialMediaLogin('instagram')
+  }, [handleStartSocialMediaLogin])
+
+  const handleError = useCallback(
+    (e: Error) => {
+      handleErrorSocialMediaLogin(e, 'instagram')
+    },
+    [handleErrorSocialMediaLogin]
+  )
+
+  const handleSuccess = useCallback(
+    (uuid: string, profile: InstagramProfile) => {
+      if (account) {
+        dispatch(
+          profilePageActions.updateProfile({
+            ...account,
+            name: profile.full_name ?? account.name
+          })
+        )
+      }
+    },
+    [account, dispatch]
+  )
+
+  return (
+    <InstagramAuth
+      onClick={handleStart}
+      onFailure={handleError}
+      onSuccess={handleSuccess}
+      text={messages.connect}
+    />
+  )
+}
diff --git a/packages/web/src/components/nav/desktop/LeftNav.tsx b/packages/web/src/components/nav/desktop/LeftNav.tsx
index 5c74d39a10a..80d3a05048d 100644
--- a/packages/web/src/components/nav/desktop/LeftNav.tsx
+++ b/packages/web/src/components/nav/desktop/LeftNav.tsx
@@ -35,6 +35,7 @@ import {
 } from 'utils/route'
 
 import { AccountDetails } from './AccountDetails'
+import { ConnectInstagram } from './ConnectInstagram'
 import { GroupHeader } from './GroupHeader'
 import styles from './LeftNav.module.css'
 import { LeftNavDroppable, LeftNavLink } from './LeftNavLink'
@@ -157,6 +158,9 @@ const LeftNav = (props: NavColumnProps) => {
                     <LeftNavLink to={'/fb/share'}>
                       Share Profile to Facebook
                     </LeftNavLink>
+                    <LeftNavLink>
+                      <ConnectInstagram />
+                    </LeftNavLink>
                   </div>
                 ) : null}
                 <div className={styles.linkGroup}>
diff --git a/packages/web/src/pages/sign-up-page/hooks/useSocialMediaLoader.ts b/packages/web/src/pages/sign-up-page/hooks/useSocialMediaLoader.ts
index 618181e21f2..63b5f425316 100644
--- a/packages/web/src/pages/sign-up-page/hooks/useSocialMediaLoader.ts
+++ b/packages/web/src/pages/sign-up-page/hooks/useSocialMediaLoader.ts
@@ -14,8 +14,8 @@ export const useSocialMediaLoader = ({
   page
 }: {
   linkedSocialOnThisPagePreviously: boolean
-  resetAction: () => AnyAction
-  page: 'create-email' | 'pick-handle'
+  resetAction?: () => AnyAction
+  page?: 'create-email' | 'pick-handle'
 }) => {
   const dispatch = useDispatch()
   const [isWaitingForSocialLogin, setIsWaitingForSocialLogin] = useState(false)
@@ -23,7 +23,7 @@ export const useSocialMediaLoader = ({
   useEffect(() => {
     // If the user goes back to this page in the middle of the flow after they linked
     // their social on this page previously, clear the sign on state.
-    if (linkedSocialOnThisPagePreviously) {
+    if (linkedSocialOnThisPagePreviously && resetAction) {
       dispatch(resetAction())
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps