From 0d71cab5ffa7a23cd5be8500abd211f2d9c3afd9 Mon Sep 17 00:00:00 2001 From: Stijn van der Kolk Date: Wed, 28 Feb 2024 17:02:02 +0100 Subject: [PATCH 1/2] feat(settings): small upgrades to connections page --- src/pages/settings/connections.tsx | 53 +++++++++++++++++------------- 1 file changed, 31 insertions(+), 22 deletions(-) diff --git a/src/pages/settings/connections.tsx b/src/pages/settings/connections.tsx index 0d16052c..b3de7b7c 100644 --- a/src/pages/settings/connections.tsx +++ b/src/pages/settings/connections.tsx @@ -9,18 +9,18 @@ import type { SSRProps } from '@/utils/ssrUtils'; import { fetchUser } from '@/utils/ssrUtils'; import { event } from 'nextjs-google-analytics'; -const PlatformStatus = { - LOADING: 'LOADING', - CONNECTED: 'CONNECTED', - DISCONNECTED: 'DISCONNECTED', -} as const; +enum PlatformStatus { + LOADING = 'LOADING', + CONNECTED = 'CONNECTED', + DISCONNECTED = 'DISCONNECTED', +} -type PlatformType = { +type SocialPlatform = { status: keyof typeof PlatformStatus; key: string; name: string; icon: string; - can_refresh?: boolean; + canRefresh?: boolean; description: string; connection: UserSocialMediaConnection | null; connect: () => void; @@ -28,19 +28,19 @@ type PlatformType = { disconnect: () => void; }; -const useConnections = () => { +const useSocials = () => { const api = useApi(); - const initialPlatforms: PlatformType[] = [ + const initialPlatforms: SocialPlatform[] = [ { status: PlatformStatus.LOADING, key: 'discord', name: 'Discord', icon: 'https://cdn.stats.fm/file/statsfm/images/brands/discord/color.svg', description: - 'Connect your Discord account to get access to personalized commands with the stats.fm Discord bot', - connection: null as UserSocialMediaConnection | null, - can_refresh: true, + 'Connect your Discord account to get access to personalized commands with the stats.fm Discord bot, and show your Discord profile on your stats.fm profile.', + connection: null, + canRefresh: true, // TODO: optimistic updates for connecting connect: () => { event('SETTINGS_connections_discord_connect'); @@ -74,7 +74,7 @@ const useConnections = () => { const refetch = async () => { const userConnections = await api.me.socialMediaConnections(); - const hydratedPlatforms = platforms.map((platform) => { + const hydratedPlatforms = platforms.map((platform) => { const connection = userConnections.find( (connection) => connection.platform.name === platform.name ); @@ -92,10 +92,11 @@ const useConnections = () => { disconnect: async () => { await api.me.removeSocialMediaConnection(connection.id); - const optimisticPlatforms = platforms.map((platform) => - platform.name === connection.platform.name - ? { ...platform, status: PlatformStatus.DISCONNECTED } - : platform + const optimisticPlatforms = platforms.map( + (platform) => + platform.name === connection.platform.name + ? { ...platform, status: PlatformStatus.DISCONNECTED } + : platform ); setPlatforms(optimisticPlatforms); platform.disconnect(); @@ -113,16 +114,24 @@ const useConnections = () => { return platforms; }; +// const useStreamingServices = () => { +// return []; +// }; + // TODO: prefetch connections on the server const ConnectionsList = () => { - const platforms = useConnections(); + // const streamingServices = useStreamingServices(); + const socials = useSocials(); return (
+

Streaming services

+

Coming soon...

+

Socials

    - {platforms.map((platform) => ( + {socials.map((platform) => (
  • {
{platform.status === PlatformStatus.CONNECTED && - platform.can_refresh && + platform.canRefresh && 'update' in platform && ( {user?.isPlus && (
- - + ))} ) : ( @@ -226,24 +248,20 @@ const GiftPage: NextPage = ({ plans }) => { Loading... )} - - * you can redeem a coupon yourself or send the coupon to a friend -

How does it work?
- {user && } - + + + ); +}; + +const GiftPage: NextPage = (props) => { + const { user } = useAuth(); + if (!user) return null; + + return ( + + + ); }; diff --git a/src/pages/gift/success.tsx b/src/pages/settings/gift/success.tsx similarity index 91% rename from src/pages/gift/success.tsx rename to src/pages/settings/gift/success.tsx index 56fa1434..e26f955c 100644 --- a/src/pages/gift/success.tsx +++ b/src/pages/settings/gift/success.tsx @@ -55,13 +55,13 @@ const SuccessPage: NextPage = ({ gif }) => {

Your gift codes will show up on the{' '} - + gift page . If they aren't on the{' '} - + gift page @@ -70,7 +70,10 @@ const SuccessPage: NextPage = ({ gif }) => { after 24 hours, send an email with your order id (sent by Stripe in your email) to support@stats.fm

- diff --git a/src/pages/settings/profile.tsx b/src/pages/settings/profile.tsx index 39688c72..55dbad02 100644 --- a/src/pages/settings/profile.tsx +++ b/src/pages/settings/profile.tsx @@ -362,10 +362,15 @@ const DeleteAccount: FC = () => { ); }; -const AccountPrivacyInfoForm: FC<{ +type AccountPrivacyInfoFormProps = { pronouns: Pronoun[]; user: UserPrivate; -}> = ({ pronouns, user }) => { +}; + +const AccountPrivacyInfoForm: FC = ({ + pronouns, + user, +}) => { const { displayName: [displayName, setDisplayName], customId: [customId, setCustomId],