From 14f0f2527eb8ef9960e0e2e8f1ed9d505a3c4418 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny <92519134+BrickheadJohnny@users.noreply.github.com> Date: Wed, 11 Sep 2024 16:37:34 +0200 Subject: [PATCH] feat: `DiscordCardWarning` component (#1474) * cleanup(Reward): remove `GoogleCardWarning` component * fix(GoogleCardWarning): remove unused logic/comments + refactor * feat(AccessedGuildPlatformCard): always display warning component * feat: `CardWarningComponentBase` component * cleanup: remove empty imports * feat: `DiscordCardWarning` component * copy(DiscordCardWarning): add "anymore" to the end * fix(AccessedGuildPlatformCard): destructure `useRolePlatform` return value --------- Co-authored-by: valid --- .../components/AccessedGuildPlatformCard.tsx | 23 +++--- .../EditGuild/components/GuildColorPicker.tsx | 1 - .../[guild]/RoleCard/components/Reward.tsx | 19 +---- .../components/DCServerCard.tsx | 2 +- src/components/common/RewardCard.tsx | 4 +- src/hooks/useServerPermissions.ts | 14 +++- src/rewards/Discord/DiscordCardWarning.tsx | 41 ++++++++++ src/rewards/Discord/components.ts | 2 + src/rewards/Google/GoogleCardWarning.tsx | 74 ++++--------------- .../components/CardWarningComponentBase.tsx | 35 +++++++++ src/rewards/types.ts | 6 +- 11 files changed, 127 insertions(+), 94 deletions(-) create mode 100644 src/rewards/Discord/DiscordCardWarning.tsx create mode 100644 src/rewards/components/CardWarningComponentBase.tsx diff --git a/src/components/[guild]/AccessHub/components/AccessedGuildPlatformCard.tsx b/src/components/[guild]/AccessHub/components/AccessedGuildPlatformCard.tsx index fad99083e6..45eadaed08 100644 --- a/src/components/[guild]/AccessHub/components/AccessedGuildPlatformCard.tsx +++ b/src/components/[guild]/AccessHub/components/AccessedGuildPlatformCard.tsx @@ -2,9 +2,8 @@ import PlatformCard from "components/[guild]/RolePlatforms/components/PlatformCa import { useRolePlatform } from "components/[guild]/RolePlatforms/components/RolePlatformProvider" import useGuild from "components/[guild]/hooks/useGuild" import useGuildPermission from "components/[guild]/hooks/useGuildPermission" -import rewards from "rewards" import { cardPropsHooks } from "rewards/cardPropsHooks" -import rewardComponents from "rewards/components" +import rewardComponentsConfig from "rewards/components" import { PlatformName, PlatformType } from "types" import PlatformAccessButton from "./PlatformAccessButton" @@ -13,25 +12,29 @@ const AccessedGuildPlatformCard = () => { const { isDetailed } = useGuild() const { isAdmin } = useGuildPermission() - if (!rewards[PlatformType[guildPlatform.platformId]]) return null + const rewardComponents = + rewardComponentsConfig[PlatformType[guildPlatform.platformId] as PlatformName] + const useCardProps = cardPropsHooks[PlatformType[guildPlatform.platformId]] + + if (!rewardComponents || !useCardProps) return null const { cardMenuComponent: PlatformCardMenu, cardWarningComponent: PlatformCardWarning, cardButton: PlatformCardButton, - } = rewardComponents[PlatformType[guildPlatform.platformId] as PlatformName] - const useCardProps = cardPropsHooks[PlatformType[guildPlatform.platformId]] + } = rewardComponents return ( - ) : PlatformCardWarning ? ( - - ) : null + <> + {PlatformCardWarning && } + {isAdmin && isDetailed && PlatformCardMenu && ( + + )} + } h="full" p={{ base: 3, sm: 4 }} diff --git a/src/components/[guild]/EditGuild/components/GuildColorPicker.tsx b/src/components/[guild]/EditGuild/components/GuildColorPicker.tsx index 567ad307b8..265e5ddbb5 100644 --- a/src/components/[guild]/EditGuild/components/GuildColorPicker.tsx +++ b/src/components/[guild]/EditGuild/components/GuildColorPicker.tsx @@ -2,7 +2,6 @@ import { ColorPicker } from "@/components/ui/ColorPicker" import { FormControl, FormLabel } from "@chakra-ui/react" import { useThemeContext } from "components/[guild]/ThemeContext" import FormErrorMessage from "components/common/FormErrorMessage" -import {} from "react" import { useFormContext } from "react-hook-form" type Props = { diff --git a/src/components/[guild]/RoleCard/components/Reward.tsx b/src/components/[guild]/RoleCard/components/Reward.tsx index de8dce07ad..3bbf34cb4d 100644 --- a/src/components/[guild]/RoleCard/components/Reward.tsx +++ b/src/components/[guild]/RoleCard/components/Reward.tsx @@ -19,7 +19,6 @@ import useMembership, { } from "components/explorer/hooks/useMembership" import { useMemo, useState } from "react" import rewards from "rewards" -import GoogleCardWarning from "rewards/Google/GoogleCardWarning" import rewardComponents from "rewards/components" import { PlatformType, RolePlatform } from "types" import capitalize from "utils/capitalize" @@ -121,20 +120,10 @@ const Reward = ({ role, platform, withLink, isLinkColorful }: RewardProps) => { } rightElement={ - <> - - - {platform.guildPlatform?.platformId === PlatformType.GOOGLE && ( - - )} - + } /> ) diff --git a/src/components/common/DiscordGuildSetup/components/DCServerCard.tsx b/src/components/common/DiscordGuildSetup/components/DCServerCard.tsx index 674643bbe3..3b6830a876 100644 --- a/src/components/common/DiscordGuildSetup/components/DCServerCard.tsx +++ b/src/components/common/DiscordGuildSetup/components/DCServerCard.tsx @@ -33,7 +33,7 @@ const DCServerCard = ({ isValidating, permissions: existingPermissions, error, - } = useServerPermissions(serverData?.id, !isUsedInCurrentGuild) + } = useServerPermissions(serverData?.id, { shouldFetch: !isUsedInCurrentGuild }) const onSelect = async () => { try { diff --git a/src/components/common/RewardCard.tsx b/src/components/common/RewardCard.tsx index 5086e3cf17..11cb9693c0 100644 --- a/src/components/common/RewardCard.tsx +++ b/src/components/common/RewardCard.tsx @@ -54,9 +54,9 @@ const RewardCard = ({ {...rest} > {cornerButton && ( - + {cornerButton} - + )} 0 +export default function useServerPermissions( + serverId: string, + config: SWRConfiguration & { shouldFetch?: boolean } = { shouldFetch: undefined } +) { + const { shouldFetch, ...swrConfig } = config + const shouldFetchFinal = + (typeof shouldFetch === "undefined" || shouldFetch) && serverId?.length > 0 const { data, error, isLoading, isValidating, mutate } = useSWRImmutable< ReturnType >( shouldFetchFinal ? `/v2/discord/servers/${serverId}/permissions` : null, (url) => fetcher(url).then(mapPermissions), - { shouldRetryOnError: false, revalidateOnMount: false } + { shouldRetryOnError: false, revalidateOnMount: false, ...swrConfig } ) return { permissions: data, - rolePrders: data?.roleOrders, + roleOrders: data?.roleOrders, error, isLoading, isValidating, diff --git a/src/rewards/Discord/DiscordCardWarning.tsx b/src/rewards/Discord/DiscordCardWarning.tsx new file mode 100644 index 0000000000..d5ed98686a --- /dev/null +++ b/src/rewards/Discord/DiscordCardWarning.tsx @@ -0,0 +1,41 @@ +import { useRolePlatform } from "components/[guild]/RolePlatforms/components/RolePlatformProvider" +import useGuildPermission from "components/[guild]/hooks/useGuildPermission" +import useServerPermissions from "hooks/useServerPermissions" +import { ReactNode } from "react" +import { CardWarningComponentBase } from "rewards/components/CardWarningComponentBase" + +const DiscordCardWarning = (): ReactNode => { + const { isAdmin } = useGuildPermission() + if (!isAdmin) return null + + return +} + +const DiscordCardWarningWithLogic = (): ReactNode => { + const rolePlatform = useRolePlatform() + const { roleOrders } = useServerPermissions( + // biome-ignore lint/style/noNonNullAssertion: we can be confident that platformGuildId exists at this point + rolePlatform.guildPlatform?.platformGuildId!, + { + revalidateOnMount: true, + } + ) + + const existingDiscordRoles = roleOrders?.map((role) => role.discordRoleId) + + if ( + !existingDiscordRoles || + !rolePlatform.platformRoleId || + existingDiscordRoles.includes(rolePlatform.platformRoleId) + ) + return null + + return ( + + This reward won't be assigned to users, because the connected Discord role + doesn't exist anymore + + ) +} + +export { DiscordCardWarning } diff --git a/src/rewards/Discord/components.ts b/src/rewards/Discord/components.ts index 715ad09a16..9317a76fd1 100644 --- a/src/rewards/Discord/components.ts +++ b/src/rewards/Discord/components.ts @@ -2,9 +2,11 @@ import dynamic from "next/dynamic" import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner" import { RewardComponentsData } from "rewards/types" import DiscordCardMenu from "./DiscordCardMenu" +import { DiscordCardWarning } from "./DiscordCardWarning" export default { cardMenuComponent: DiscordCardMenu, + cardWarningComponent: DiscordCardWarning, AddRewardPanel: dynamic( () => import( diff --git a/src/rewards/Google/GoogleCardWarning.tsx b/src/rewards/Google/GoogleCardWarning.tsx index 51da9d5568..7fab2d9b18 100644 --- a/src/rewards/Google/GoogleCardWarning.tsx +++ b/src/rewards/Google/GoogleCardWarning.tsx @@ -1,70 +1,24 @@ -import { - Icon, - Popover, - PopoverArrow, - PopoverBody, - PopoverContent, - PopoverTrigger, - Portal, -} from "@chakra-ui/react" -import { WarningCircle } from "@phosphor-icons/react" +import { useRolePlatform } from "components/[guild]/RolePlatforms/components/RolePlatformProvider" import useGuild from "components/[guild]/hooks/useGuild" -import { GuildPlatform } from "types" +import { ReactNode } from "react" +import { CardWarningComponentBase } from "rewards/components/CardWarningComponentBase" -type Props = { - guildPlatform: GuildPlatform - roleMemberCount?: number - size?: "sm" | "md" -} - -const GoogleCardWarning = ({ - guildPlatform, - roleMemberCount, - size = "md", -}: Props): JSX.Element => { +const GoogleCardWarning = (): ReactNode => { + const rolePlatform = useRolePlatform() const { roles } = useGuild() - const rolesWithPlatform = roles.filter((role) => - role.rolePlatforms?.some( - (rolePlatform) => rolePlatform.guildPlatformId === guildPlatform?.id - ) - ) - // const eligibleMembers = useUniqueMembers(rolesWithPlatform) + const roleMemberCount = + roles?.find((role) => role.rolePlatforms.some((rp) => rp.id === rolePlatform.id)) + ?.memberCount ?? 0 - // if (eligibleMembers.length < 600) return null - if ( - roleMemberCount < 0 || - !rolesWithPlatform?.some((role) => role.memberCount >= 600) - ) - return null + if (roleMemberCount <= 600) return null return ( - - - - - - - - - {/* {`Google limits documentum sharing to 600 users, and there're already ${eligibleMembers.length} - eligible members, so you might not get access to this reward.`} */} - {`Google limits documentum sharing to 600 users, and there're already ${ - roleMemberCount ?? - rolesWithPlatform?.find((role) => role.memberCount >= 600)?.memberCount - } + + {`Google limits documentum sharing to 600 users, and there're already ${ + roleMemberCount + } eligible members, so you might not get access to this reward.`} - - - - + ) } diff --git a/src/rewards/components/CardWarningComponentBase.tsx b/src/rewards/components/CardWarningComponentBase.tsx new file mode 100644 index 0000000000..88dc6dd492 --- /dev/null +++ b/src/rewards/components/CardWarningComponentBase.tsx @@ -0,0 +1,35 @@ +import { + Icon, + Popover, + PopoverArrow, + PopoverBody, + PopoverContent, + PopoverTrigger, + Portal, +} from "@chakra-ui/react" +import { WarningCircle } from "@phosphor-icons/react" +import { PropsWithChildren, ReactNode } from "react" + +const CardWarningComponentBase = ({ children }: PropsWithChildren): ReactNode => { + return ( + + + + + + + + {children} + + + + ) +} + +export { CardWarningComponentBase } diff --git a/src/rewards/types.ts b/src/rewards/types.ts index 3027b56ec6..01e40d4fa5 100644 --- a/src/rewards/types.ts +++ b/src/rewards/types.ts @@ -49,7 +49,7 @@ export type RewardData = { export type RewardComponentsData = { cardMenuComponent?: (props: any) => JSX.Element - cardWarningComponent?: (props: any) => JSX.Element + cardWarningComponent?: ComponentType cardButton?: (props: any) => JSX.Element AddRewardPanel?: ComponentType SmallRewardPreview?: ComponentType @@ -80,3 +80,7 @@ export type CardPropsHook = (guildPlatform: GuildPlatformWithOptionalId) => { info?: string | JSX.Element link?: string } + +export type CardWarningComponentProps = { + rolePlatform: NonNullable[number] +}