feat: hidden pages (#1422)

* feat: add `hideFromGuildPage` to the `Group` type

* feat(CampaignForm): add "Show on Guild page" switch

* feat(CampaignForm): add switch description

* feat(CampaignCards): handle hidden pages

* copy improvements

* fix(useEditRoleGroup): don't navigate to page from home on edit

---------

Co-authored-by: valid <valid@zgen.hu>

src/components/[guild]/AccessHub/components/CampaignCards/CampaignCards.tsx

@@ -3,10 +3,15 @@ import {
   HStack,
   Img,
   SkeletonCircle,
+  Tag,
+  TagLabel,
+  TagLeftIcon,
   Text,
+  Tooltip,
+  VStack,
   useColorModeValue,
 } from "@chakra-ui/react"
-import { ArrowRight, Plus } from "@phosphor-icons/react"
+import { ArrowRight, EyeSlash, Plus } from "@phosphor-icons/react"
 import useGuild from "components/[guild]/hooks/useGuild"
 import useGuildPermission from "components/[guild]/hooks/useGuildPermission"
 import Button from "components/common/Button"
@@ -36,12 +41,22 @@ const CampaignCards = () => {
 
   if (!groups?.length || !!query.group) return null
 
+  const renderedGroups = isAdmin
+    ? groups
+    : groups.filter((group) => !group.hideFromGuildPage)
+
   return (
     <>
-      {groups.map(({ id, imageUrl, name, urlName }) => {
-        const groupHasRoles = roles.some((role) => role.groupId === id)
+      {renderedGroups.map(({ id, imageUrl, name, urlName, hideFromGuildPage }) => {
+        const groupHasRoles = roles?.some((role) => role.groupId === id)
         if (!isAdmin && !groupHasRoles) return null
 
+        let campaignImage = ""
+        if (typeof imageUrl === "string" && imageUrl.length > 0)
+          campaignImage = imageUrl
+        else if (typeof guildImageUrl === "string" && guildImageUrl.length > 0)
+          campaignImage = guildImageUrl
+
         return (
           <ColorCard
             key={id}
@@ -55,7 +70,7 @@ const CampaignCards = () => {
             {isAdmin && <DynamicCampaignCardMenu groupId={id} />}
 
             <HStack spacing={3} minHeight={10} mb={5}>
-              {imageUrl?.length > 0 || guildImageUrl?.length > 0 ? (
+              {campaignImage.length > 0 ? (
                 <Circle
                   overflow={"hidden"}
                   borderRadius="full"
@@ -64,21 +79,31 @@ const CampaignCards = () => {
                   position="relative"
                   bgColor={imageBgColor}
                 >
-                  {imageUrl?.match("guildLogos") ? (
-                    <Img src={imageUrl} alt="Guild logo" boxSize="40%" />
+                  {campaignImage.match("guildLogos") ? (
+                    <Img src={campaignImage} alt="Guild logo" boxSize="40%" />
                   ) : (
-                    <Image
-                      src={imageUrl || guildImageUrl}
-                      alt={name}
-                      fill
-                      sizes="2.5rem"
-                    />
+                    <Image src={campaignImage} alt={name} fill sizes="2.5rem" />
                   )}
                 </Circle>
               ) : (
                 <SkeletonCircle size="10" />
               )}
-              <Text fontWeight="bold">{name}</Text>
+
+              <VStack alignItems="start">
+                <Text fontWeight="bold">{name}</Text>
+                {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>
+                )}
+              </VStack>
             </HStack>
 
             {groupHasRoles ? (

src/components/[guild]/AccessHub/components/CampaignCards/components/CampaignCardMenu.tsx

@@ -35,7 +35,7 @@ const CampaignCardMenu = ({ groupId }: Props) => {
     <Box position="absolute" top={2} right={2}>
       <PlatformCardMenu>
         <MenuItem icon={<PencilSimple />} onClick={onOpen}>
-          Edit page appearance
+          Customize page
         </MenuItem>
         <MenuItem
           icon={<TrashSimple />}

src/components/[guild]/AccessHub/components/CampaignCards/components/EditCampaignModal.tsx

@@ -15,25 +15,27 @@ import { Modal } from "components/common/Modal"
 import usePinata from "hooks/usePinata"
 import useSubmitWithUpload from "hooks/useSubmitWithUpload"
 import { FormProvider, useForm } from "react-hook-form"
+import { Group } from "types"
 import useEditRoleGroup from "../hooks/useEditRoleGroup"
 
 type Props = {
   isOpen: boolean
   onClose: () => void
   groupId: number
-  onSuccess: () => void
+  onSuccess: (res: Group) => void
 }
 
 const EditCampaignModal = ({ groupId, onSuccess, ...modalProps }: Props) => {
   const group = useRoleGroup(groupId)
-  const { name, imageUrl, description } = group ?? {}
+  const { name, imageUrl, description, hideFromGuildPage } = group ?? {}
 
   const methods = useForm<CampaignFormType>({
     mode: "all",
     defaultValues: {
       name,
       imageUrl: imageUrl ?? "",
       description: description ?? "",
+      hideFromGuildPage,
     },
   })
   const { handleSubmit } = methods

src/components/[guild]/AccessHub/components/CampaignCards/hooks/useEditRoleGroup.ts

@@ -2,14 +2,11 @@ import useGuild from "components/[guild]/hooks/useGuild"
 import useShowErrorToast from "hooks/useShowErrorToast"
 import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
 import useToast from "hooks/useToast"
-import { useRouter } from "next/router"
 import { Group } from "types"
 import fetcher from "utils/fetcher"
 
-const useEditRoleGroup = (groupId: number, onSuccess: () => void) => {
+const useEditRoleGroup = (groupId: number, onSuccess: (res: Group) => void) => {
   const { id, mutateGuild } = useGuild()
-  const { urlName } = useGuild()
-  const { replace } = useRouter()
 
   const toast = useToast()
   const showErrorToast = useShowErrorToast()
@@ -22,7 +19,6 @@ const useEditRoleGroup = (groupId: number, onSuccess: () => void) => {
 
   return useSubmitWithSign<Group>(editRoleGroup, {
     onSuccess: (response) => {
-      replace(`/${urlName}/${response.urlName}`)
       toast({
         status: "success",
         title: "Successfully edited page",
@@ -36,7 +32,7 @@ const useEditRoleGroup = (groupId: number, onSuccess: () => void) => {
         }),
         { revalidate: false }
       )
-      onSuccess()
+      onSuccess(response)
     },
     onError: (error) => showErrorToast(error),
   })

src/components/[guild]/CreateCampaignModal/components/CampaignForm.tsx

@@ -7,15 +7,18 @@ import {
   Textarea,
 } from "@chakra-ui/react"
 import FormErrorMessage from "components/common/FormErrorMessage"
+import Switch from "components/common/Switch"
 import IconSelector from "components/create-guild/IconSelector"
 import { GUILD_NAME_REGEX } from "components/create-guild/Name"
 import { Uploader } from "hooks/usePinata/usePinata"
-import { useFormContext } from "react-hook-form"
+import { ChangeEvent } from "react"
+import { useController, useFormContext } from "react-hook-form"
 
 export type CampaignFormType = {
   imageUrl?: string
   name: string
   description?: string
+  hideFromGuildPage?: boolean
 }
 
 type Props = {
@@ -24,10 +27,19 @@ type Props = {
 
 const CampaignForm = ({ iconUploader }: Props) => {
   const {
+    control,
     register,
     formState: { errors },
   } = useFormContext<CampaignFormType>()
 
+  const {
+    field: {
+      value: hideFromGuildPage,
+      onChange: hideFromGuildPageOnChange,
+      ...hideFromGuildPageField
+    },
+  } = useController({ control, name: "hideFromGuildPage" })
+
   return (
     <Stack spacing={6}>
       <FormControl isInvalid={!!errors.name}>
@@ -57,11 +69,19 @@ const CampaignForm = ({ iconUploader }: Props) => {
 
       <FormControl>
         <FormLabel>Description</FormLabel>
-        <Textarea
-          placeholder="Optional"
-          {...register("description")}
-          size="lg"
-        ></Textarea>
+        <Textarea placeholder="Optional" {...register("description")} size="lg" />
+      </FormControl>
+
+      <FormControl pt="2">
+        <Switch
+          {...hideFromGuildPageField}
+          title="Show on home page"
+          description="If turned off, the page will only be accessible by visiting it's link directly"
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            hideFromGuildPageOnChange(!e.target.checked)
+          }
+          isChecked={!hideFromGuildPage}
+        />
       </FormControl>
     </Stack>
   )

src/components/[guild]/[group]/EditCampaignButton.tsx

@@ -1,16 +1,26 @@
 import { IconButton, useDisclosure } from "@chakra-ui/react"
 import { GearSix } from "@phosphor-icons/react"
+import { useRouter } from "next/router"
+import { Group } from "types"
 import EditCampaignModal from "../AccessHub/components/CampaignCards/components/EditCampaignModal"
 import { useThemeContext } from "../ThemeContext"
+import useGuild from "../hooks/useGuild"
 import useRoleGroup from "../hooks/useRoleGroup"
 
 const EditCampaignButton = () => {
   const group = useRoleGroup()
+  const { urlName } = useGuild()
+  const { replace } = useRouter()
 
   const { textColor, buttonColorScheme } = useThemeContext()
 
   const { isOpen, onOpen, onClose } = useDisclosure()
 
+  const onSuccess = (response: Group) => {
+    onClose()
+    replace(`/${urlName}/${response.urlName}`)
+  }
+
   return (
     <>
       <IconButton
@@ -27,7 +37,7 @@ const EditCampaignButton = () => {
         isOpen={isOpen}
         onClose={onClose}
         groupId={group.id}
-        onSuccess={onClose}
+        onSuccess={onSuccess}
       />
     </>
   )

src/types.ts

@@ -646,6 +646,7 @@ type Group = {
   type?: string
   position?: number
   guildId: number
+  hideFromGuildPage: boolean
 }
 
 type SelectOption<T = string> = {