Skip to content

Commit

Permalink
Merge branch 'main' of github.com:guildxyz/guild.xyz into profiles-page
Browse files Browse the repository at this point in the history
  • Loading branch information
@dominik-stumpf
dominik-stumpf committed Aug 15, 2024
2 parents e3ed34e + f1bfec5 commit e099066
Show file tree
Hide file tree
Showing 61 changed files with 433 additions and 668 deletions.
137 changes: 20 additions & 117 deletions src/components/[guild]/AccessHub/AccessHub.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,11 @@
import {
Alert,
AlertDescription,
AlertTitle,
Collapse,
Icon,
SimpleGrid,
Stack,
} from "@chakra-ui/react"
import { StarHalf } from "@phosphor-icons/react"
import Card from "components/common/Card"
import { Collapse, SimpleGrid } from "@chakra-ui/react"
import ClientOnly from "components/common/ClientOnly"
import useMembership from "components/explorer/hooks/useMembership"
import dynamic from "next/dynamic"
import PointsRewardCard from "rewards/Points/PointsRewardCard"
import { TokenRewardCard } from "rewards/Token/TokenRewardCard"
import { PlatformType } from "types"
import useGuild from "../hooks/useGuild"
import useGuildPermission from "../hooks/useGuildPermission"
import useRoleGroup from "../hooks/useRoleGroup"
import AccessedGuildPlatformCard from "./components/AccessedGuildPlatformCard"
import CampaignCards from "./components/CampaignCards"
import { useAccessedGuildPoints } from "./hooks/useAccessedGuildPoints"
import { useTokenRewards } from "./hooks/useTokenRewards"

const DynamicGuildPinRewardCard = dynamic(
() => import("./components/GuildPinRewardCard")
Expand All @@ -31,128 +15,47 @@ const DynamicCreatedPageCard = dynamic(() =>
import("./components/CreatePageCard").then((m) => m.CreatePageCard)
)

export const useAccessedGuildPlatforms = (groupId?: number) => {
const { guildPlatforms, roles } = useGuild()
const { isAdmin } = useGuildPermission()
const { roleIds } = useMembership()

const relevantRoles = groupId
? roles.filter((role) => role.groupId === groupId)
: roles.filter((role) => !role.groupId)

const relevantGuildPlatformIds = relevantRoles.flatMap((role) =>
role.rolePlatforms.map((rp) => rp.guildPlatformId)
)
const relevantGuildPlatforms = guildPlatforms.filter(
(gp) =>
relevantGuildPlatformIds.includes(gp.id) &&
gp.platformId !== PlatformType.POINTS &&
gp.platformId !== PlatformType.ERC20
)

// Displaying CONTRACT_CALL rewards for everyone, even for users who aren't members
const contractCallGuildPlatforms =
relevantGuildPlatforms?.filter(
(guildPlatform) => guildPlatform.platformId === PlatformType.CONTRACT_CALL
) ?? []

if (isAdmin) return relevantGuildPlatforms

if (!roleIds) return contractCallGuildPlatforms

const accessedRoles = roles.filter((role) => roleIds.includes(role.id))
const accessedRolePlatforms = accessedRoles
.map((role) => role.rolePlatforms)
.flat()
.filter((rolePlatform) => !!rolePlatform)
const accessedGuildPlatformIds = [
...new Set(
accessedRolePlatforms.map((rolePlatform) => rolePlatform.guildPlatformId)
),
]
const accessedGuildPlatforms = relevantGuildPlatforms?.filter(
(guildPlatform) =>
accessedGuildPlatformIds.includes(guildPlatform.id) ||
guildPlatform.platformId === PlatformType.CONTRACT_CALL
)

return accessedGuildPlatforms
}

const AccessHub = (): JSX.Element => {
const { featureFlags, guildPin, groups, roles } = useGuild()

const group = useRoleGroup()
const { isAdmin } = useGuildPermission()
const { isMember } = useMembership()

const accessedGuildPlatforms = useAccessedGuildPlatforms(group?.id)
const accessedGuildPoints = useAccessedGuildPoints("ACCESSED_ONLY")
const accessedGuildTokens = useTokenRewards(!isAdmin)

const shouldShowGuildPin =
!group &&
featureFlags.includes("GUILD_CREDENTIAL") &&
featureFlags?.includes("GUILD_CREDENTIAL") &&
((isMember && guildPin?.isActive) || isAdmin)

const hasVisiblePages = !!groups?.length && roles?.some((role) => !!role.groupId)

const showAccessHub =
isAdmin ||
isMember ||
!!accessedGuildPlatforms?.length ||
(hasVisiblePages && !group)
const showAccessHub = isAdmin || (hasVisiblePages && !group) || shouldShowGuildPin

return (
<ClientOnly>
<Collapse in={showAccessHub} unmountOnExit style={{ width: "100%" }}>
<Collapse
in={showAccessHub}
unmountOnExit
style={{
width: "calc(100% + 20px)",
paddingBottom: 10,
marginBottom: -10,
paddingInline: 10,
marginInline: -10,
}}
>
<SimpleGrid
templateColumns={{
base: "repeat(auto-fit, minmax(250px, 1fr))",
md: "repeat(auto-fit, minmax(250px, .5fr))",
columns={{
base: 1,
md: 2,
lg: 3,
xl: 4,
}}
gap={4}
>
<CampaignCards />

{accessedGuildPlatforms?.map((platform) => (
<AccessedGuildPlatformCard key={platform.id} platform={platform} />
))}

{accessedGuildPoints?.map((pointPlatform) => (
<PointsRewardCard key={pointPlatform.id} guildPlatform={pointPlatform} />
))}

{accessedGuildTokens?.map((platform) => (
<TokenRewardCard platform={platform} key={platform.id} />
))}

{(isMember || isAdmin) &&
(!group ? !groups?.length : true) &&
!shouldShowGuildPin &&
!accessedGuildPlatforms?.length &&
!accessedGuildPoints?.length &&
!accessedGuildTokens?.length && (
<Card>
<Alert status="info" h="full">
<Icon as={StarHalf} boxSize="5" mr="2" mt="1px" weight="regular" />
<Stack>
<AlertTitle>
{!group ? "No accessed reward" : "No rewards yet"}
</AlertTitle>
<AlertDescription>
{!!group && isAdmin
? "This page doesn’t have any auto-managed rewards yet. Add some roles below so their rewards will appear here!"
: "You're a member of the guild, but your roles don't give you any auto-managed rewards. The owner might add some in the future or reward you another way!"}
</AlertDescription>
</Stack>
</Alert>
</Card>
)}

{shouldShowGuildPin && <DynamicGuildPinRewardCard />}

{isAdmin && <DynamicCreatedPageCard />}
{shouldShowGuildPin && <DynamicGuildPinRewardCard />}
</SimpleGrid>
</Collapse>
</ClientOnly>
Expand Down
26 changes: 15 additions & 11 deletions src/components/[guild]/AccessHub/components/AccessedGuildPlatformCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,46 @@
import PlatformCard from "components/[guild]/RolePlatforms/components/PlatformCard"
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 { GuildPlatform, PlatformName, PlatformType } from "types"
import { PlatformName, PlatformType } from "types"
import PlatformAccessButton from "./PlatformAccessButton"

const AccessedGuildPlatformCard = ({ platform }: { platform: GuildPlatform }) => {
const AccessedGuildPlatformCard = () => {
const { guildPlatform } = useRolePlatform()
const { isDetailed } = useGuild()
const { isAdmin } = useGuildPermission()

if (!rewards[PlatformType[platform.platformId]]) return null
if (!rewards[PlatformType[guildPlatform.platformId]]) return null

const {
// cardPropsHook: useCardProps,
cardMenuComponent: PlatformCardMenu,
cardWarningComponent: PlatformCardWarning,
cardButton: PlatformCardButton,
} = rewardComponents[PlatformType[platform.platformId] as PlatformName]
const useCardProps = cardPropsHooks[PlatformType[platform.platformId]]
} = rewardComponents[PlatformType[guildPlatform.platformId] as PlatformName]
const useCardProps = cardPropsHooks[PlatformType[guildPlatform.platformId]]

return (
<PlatformCard
usePlatformCardProps={useCardProps}
guildPlatform={platform}
guildPlatform={guildPlatform}
cornerButton={
isAdmin && isDetailed && PlatformCardMenu ? (
<PlatformCardMenu platformGuildId={platform.platformGuildId} />
<PlatformCardMenu platformGuildId={guildPlatform.platformGuildId} />
) : PlatformCardWarning ? (
<PlatformCardWarning guildPlatform={platform} />
<PlatformCardWarning guildPlatform={guildPlatform} />
) : null
}
h="full"
p={{ base: 3, sm: 4 }}
boxShadow="none"
>
{PlatformCardButton ? (
<PlatformCardButton platform={platform} />
<PlatformCardButton platform={guildPlatform} />
) : (
<PlatformAccessButton platform={platform} />
<PlatformAccessButton platform={guildPlatform} />
)}
</PlatformCard>
)
Expand Down
107 changes: 35 additions & 72 deletions src/components/[guild]/AccessHub/components/CampaignCards/CampaignCards.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,13 @@
import {
Circle,
HStack,
Img,
SkeletonCircle,
Tag,
TagLabel,
TagLeftIcon,
Text,
Tooltip,
VStack,
useColorModeValue,
} from "@chakra-ui/react"
import { ArrowRight, EyeSlash, Plus } from "@phosphor-icons/react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
import { Badge } from "@/components/ui/Badge"
import { Card } from "@/components/ui/Card"
import { Skeleton } from "@/components/ui/Skeleton"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
import { ArrowRight, EyeSlash, Plus } from "@phosphor-icons/react/dist/ssr"
import useGuild from "components/[guild]/hooks/useGuild"
import useGuildPermission from "components/[guild]/hooks/useGuildPermission"
import Button from "components/common/Button"
import ColorCard from "components/common/ColorCard"
import ColorCardLabel from "components/common/ColorCard/ColorCardLabel"
import dynamic from "next/dynamic"
import Image from "next/image"
import Link from "next/link"
import { useRouter } from "next/router"

Expand All @@ -37,8 +26,6 @@ const CampaignCards = () => {
} = useGuild()
const { query } = useRouter()

const imageBgColor = useColorModeValue("gray.700", "gray.600")

if (!groups?.length || !!query.group) return null

const renderedGroups = isAdmin
Expand All @@ -58,60 +45,46 @@ const CampaignCards = () => {
campaignImage = guildImageUrl

return (
<ColorCard
<Card
key={id}
color={groupHasRoles ? "primary.500" : "gray.500"}
borderStyle={groupHasRoles ? "solid" : "dashed"}
pt={{ base: 10, sm: 11 }}
display="flex"
flexDir="column"
justifyContent="space-between"
className="relative flex flex-col justify-between p-5 sm:p-6"
>
{isAdmin && <DynamicCampaignCardMenu groupId={id} />}

<HStack spacing={3} minHeight={10} mb={5}>
{campaignImage.length > 0 ? (
<Circle
overflow={"hidden"}
borderRadius="full"
size={10}
flexShrink={0}
position="relative"
bgColor={imageBgColor}
>
{campaignImage.match("guildLogos") ? (
<Img src={campaignImage} alt="Guild logo" boxSize="40%" />
) : (
<Image src={campaignImage} alt={name} fill sizes="2.5rem" />
)}
</Circle>
) : (
<SkeletonCircle size="10" />
)}
<div className="mb-5 flex items-center gap-3">
<Avatar className="size-10">
<AvatarImage src={campaignImage} alt={name} width={40} height={40} />
<AvatarFallback>
<Skeleton className="size-full" />
</AvatarFallback>
</Avatar>

<VStack alignItems="start">
<Text fontWeight="bold">{name}</Text>
<div className="flex flex-col">
<span className="font-bold">{name}</span>
{hideFromGuildPage && (
<Tooltip
label="Members don't see this, they can only access this page by visiting it's link directly"
hasArrow
placement="bottom"
>
<Tag>
<TagLeftIcon as={EyeSlash} />
<TagLabel>Hidden</TagLabel>
</Tag>
<Tooltip>
<TooltipTrigger asChild>
<Badge>
<EyeSlash weight="bold" />
<span>Hidden</span>
</Badge>
</TooltipTrigger>
<TooltipContent side="bottom">
<p>
Members don't see this, they can only access this page by
visiting it's link directly
</p>
</TooltipContent>
</Tooltip>
)}
</VStack>
</HStack>

</div>
</div>
{groupHasRoles ? (
<Button
as={Link}
colorScheme="primary"
href={`/${guildUrlName}/${urlName}`}
rightIcon={<ArrowRight />}
rightIcon={<ArrowRight weight="bold" />}
prefetch={false}
>
View page
Expand All @@ -121,23 +94,13 @@ const CampaignCards = () => {
as={Link}
variant="outline"
href={`/${guildUrlName}/${urlName}`}
leftIcon={<Plus />}
leftIcon={<Plus weight="bold" />}
prefetch={false}
>
Add roles
</Button>
)}

<ColorCardLabel
fallbackColor="white"
backgroundColor={groupHasRoles ? "primary.500" : "gray.500"}
label="Page"
top="-2px"
left="-2px"
borderBottomRightRadius="xl"
borderTopLeftRadius="2xl"
/>
</ColorCard>
</Card>
)
})}
</>
Expand Down
Loading

0 comments on commit e099066

Please sign in to comment.