Add up connect discord functionality

api/creator/creatorKeys.ts

@@ -16,6 +16,8 @@ export const CREATOR_QUERY_KEYS = Object.freeze({
 	DELETE: 'delete',
 	RECOVER: 'recover',
 	FOLLOW: 'follow',
+	GET_DISCORD_AUTHORIZATION: 'get-discord-authorization',
+	UPDATE_CREATOR_DISCORD: 'update-creator-discord',
 })
 
 export const creatorKeys = Object.freeze({

api/creator/queries/index.ts

@@ -12,3 +12,5 @@ export * from './useUpdateCreatorBanner'
 export * from './useUpdateCreatorLogo'
 export * from './useUpdateCreatorPassword'
 export * from './useVerifyCreatorEmail'
+export * from './usefetchDiscordAuthorization'
+export * from './useUpdateCreatorDiscord'

api/creator/queries/useUpdateCreatorDiscord.ts

@@ -0,0 +1,33 @@
+import http from 'api/http'
+import { CREATOR_QUERY_KEYS, creatorKeys } from '../creatorKeys'
+import { useToaster } from '@/providers/ToastProvider'
+import { useMutation, useQueryClient } from 'react-query'
+
+const { CREATOR, UPDATE_CREATOR_DISCORD } = CREATOR_QUERY_KEYS
+
+const updateCreatorDiscord = async (slug: string, code: string) => {
+	try {
+		await http.patch<string>(`${CREATOR}/${UPDATE_CREATOR_DISCORD}/${slug}?code=${code}`)
+		return { success: true }
+	} catch (error) {
+		throw error
+	}
+}
+
+export const useUpdateCreatorDiscord = () => {
+	const toaster = useToaster()
+	const queryClient = useQueryClient()
+	return useMutation({
+		mutationFn: ({ slug, code }: { slug: string; code: string }) => updateCreatorDiscord(slug, code),
+		onSuccess: (data, { slug }) => {
+			if (data.success) {
+				toaster.add('Discord updated!', 'success')
+				queryClient.invalidateQueries(creatorKeys.get(slug))
+				queryClient.invalidateQueries(creatorKeys.getMe)
+			}
+		},
+		onError: () => {
+			toaster.add('Failed to update Discord. Please try again.', 'error')
+		},
+	})
+}

api/creator/queries/usefetchDiscordAuthorization.ts

@@ -0,0 +1,25 @@
+import http from 'api/http'
+import { CREATOR_QUERY_KEYS } from '../creatorKeys'
+import { useQuery } from 'react-query'
+import { useToaster } from '@/providers/ToastProvider'
+import { useCreatorAuth } from '@/providers/CreatorAuthProvider'
+
+const { CREATOR, GET_DISCORD_AUTHORIZATION } = CREATOR_QUERY_KEYS
+
+const fetchDiscordAuthorization = async (): Promise<string> => {
+	const res = await http.get<string>(`${CREATOR}/${GET_DISCORD_AUTHORIZATION}`)
+	return res.data
+}
+
+export const useFetchDiscordAuthorization = (enabled: boolean) => {
+	const toaster = useToaster()
+	const { isAuthenticated } = useCreatorAuth()
+
+	return useQuery({
+		queryKey: `${CREATOR}/${GET_DISCORD_AUTHORIZATION}`,
+		staleTime: 1000 * 60 * 60 * 1,
+		enabled: isAuthenticated && enabled,
+		queryFn: () => fetchDiscordAuthorization(),
+		onError: toaster.onQueryError,
+	})
+}

app/styles/forms/edit-creator-visual-identity-form.module.scss

@@ -46,3 +46,6 @@
 		margin-top: 20px;
 	}
 }
+.discord-button {
+	margin-bottom: 20px;
+}

components/forms/UpdateCreatorSocialsForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import Button from 'components/Button'
 import Label from './Label'
@@ -22,13 +22,17 @@ import {
 	prependLynkfire,
 } from '@/utils/helpers'
 import { useToaster } from '@/providers/ToastProvider'
+import { useFetchDiscordAuthorization } from '@/api/creator/queries/usefetchDiscordAuthorization'
+import { useUpdateCreatorDiscord } from '@/api/creator/queries/useUpdateCreatorDiscord'
 
 const UpdateCreatorSocialsForm: React.FC = () => {
 	const toaster = useToaster()
-
+	const [prevCode, setPrevCode] = useState<string | null>(null)
 	const { data: me } = useFetchMe()
 	const { mutateAsync: updateCreator } = useUpdateCreator(me?.slug || '')
-
+	const { refetch: fetchDiscordAuthorization } = useFetchDiscordAuthorization(false)
+	const [discordUpdated, setDiscordUpdated] = useState(false)
+	const { mutateAsync: updateCreatorDiscord } = useUpdateCreatorDiscord()
 	const { register, handleSubmit, reset } = useForm<UpdateCreatorData>({
 		defaultValues: {
 			twitter: removeTwitter(me?.twitter),
@@ -67,6 +71,39 @@ const UpdateCreatorSocialsForm: React.FC = () => {
 		}, toaster.onFormError)()
 	}
 
+	const onConnectDiscordClick = async () => {
+		try {
+			const { data: authorizationUri } = await fetchDiscordAuthorization()
+			if (authorizationUri) {
+				window.location.href = authorizationUri
+			}
+		} catch (error) {
+			toaster.add('Failed to fetch Discord authorization URI.', 'error')
+		}
+	}
+
+	useEffect(() => {
+		const params = new URLSearchParams(window.location.search)
+		const code = params.get('code')
+		if (code && code !== prevCode) {
+			updateCreatorDiscord({ slug: me?.slug || '', code })
+				.then(() => {
+					setDiscordUpdated(true)
+				})
+				.catch((error) => {
+					console.error('Failed to update Discord ID:', error)
+				})
+			setPrevCode(code)
+		}
+	}, [me, prevCode, updateCreatorDiscord])
+
+	useEffect(() => {
+		if (discordUpdated) {
+			setTimeout(() => {
+				window.location.href = '/profile'
+			}, 2000)
+		}
+	}, [discordUpdated])
 	return (
 		<Form fullWidth>
 			<div className='social-media-wrapper'>
@@ -87,6 +124,11 @@ const UpdateCreatorSocialsForm: React.FC = () => {
 					<Input {...register('website')} prefix='https://' />
 				</div>
 			</div>
+			<div className='discord-button'>
+				<Button type='button' onClick={onConnectDiscordClick} backgroundColor='transparent' borderColor='grey-100'>
+					Connect Discord
+				</Button>
+			</div>
 
 			<FormActions>
 				<Button type='submit' onClick={onSubmitClick} backgroundColor='green-500' className='action-button'>

models/creator/index.ts

@@ -17,6 +17,7 @@ export interface BasicCreator {
 	twitter: string
 	instagram: string
 	lynkfire: string
+	discord: string
 }
 
 export interface Creator extends BasicCreator {
@@ -27,7 +28,15 @@ export interface Creator extends BasicCreator {
 export type UpdateCreatorData = Partial<
 	Pick<
 		Creator,
-		'email' | 'description' | 'flavorText' | 'tippingAddress' | 'website' | 'twitter' | 'instagram' | 'lynkfire'
+		| 'email'
+		| 'description'
+		| 'flavorText'
+		| 'tippingAddress'
+		| 'website'
+		| 'twitter'
+		| 'instagram'
+		| 'lynkfire'
+		| 'discord'
 	>
 >