Add connect instagram ui (#7796)

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

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}
+    />
+  )
+}

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}>

packages/web/src/pages/sign-up-page/hooks/useSocialMediaLoader.ts

@@ -14,16 +14,16 @@ 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)
 
   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