feat(RequirementAccessIndicator): simplify re-check button

guildxyz · Oct 1, 2024 · 59620ac · 59620ac
1 parent 79f81d4
commit 59620ac
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 17 deletions.
diff --git a/src/components/[guild]/AddAndOrderRoles/AddAndOrderRoles.tsx b/src/components/[guild]/AddAndOrderRoles/AddAndOrderRoles.tsx
@@ -13,7 +13,7 @@ import { CaretDown, ListNumbers, Plus } from "@phosphor-icons/react"
 import Button from "components/common/Button"
 import useIsStuck from "hooks/useIsStuck"
 import { useEffect, useRef } from "react"
-import RecheckAccessesButton from "../RecheckAccessesButton"
+import { RecheckAccessesButton } from "../RecheckAccessesButton"
 import useGuild from "../hooks/useGuild"
 import AddRoleDrawer from "./components/AddRoleDrawer"
 import OrderRolesModal from "./components/OrderRolesModal"

diff --git a/src/components/[guild]/RecheckAccessesButton.tsx b/src/components/[guild]/RecheckAccessesButton.tsx
@@ -170,5 +170,4 @@ const TopRecheckAccessesButton = (
   />
 )
 
-export default RecheckAccessesButton
-export { TopRecheckAccessesButton }
+export { RecheckAccessesButton, TopRecheckAccessesButton }
diff --git a/src/components/[guild]/Requirements/components/HiddenRequirementAccessIndicator.tsx b/src/components/[guild]/Requirements/components/HiddenRequirementAccessIndicator.tsx
@@ -15,7 +15,7 @@ import {
   Warning,
   X,
 } from "@phosphor-icons/react/dist/ssr"
-import RecheckAccessesButton from "components/[guild]/RecheckAccessesButton"
+import { RecheckAccessesButton } from "components/[guild]/RecheckAccessesButton"
 import useGuild from "components/[guild]/hooks/useGuild"
 import useRequirements from "components/[guild]/hooks/useRequirements"
 import { useRoleMembership } from "components/explorer/hooks/useMembership"

diff --git a/src/components/[guild]/Requirements/components/RequirementAccessIndicator.tsx b/src/components/[guild]/Requirements/components/RequirementAccessIndicator.tsx
@@ -1,13 +1,14 @@
 import { accountModalAtom } from "@/components/Providers/atoms"
-import { Button } from "@/components/ui/Button"
+import { Button, ButtonProps } from "@/components/ui/Button"
 import {
   ArrowSquareIn,
+  ArrowsClockwise,
   Check,
   LockSimple,
   Warning,
   X,
 } from "@phosphor-icons/react/dist/ssr"
-import RecheckAccessesButton from "components/[guild]/RecheckAccessesButton"
+import { useMembershipUpdate } from "components/[guild]/JoinModal/hooks/useMembershipUpdate"
 import { useRoleMembership } from "components/explorer/hooks/useMembership"
 import { useSetAtom } from "jotai"
 import dynamic from "next/dynamic"
@@ -89,12 +90,7 @@ const RequirementAccessIndicator = () => {
           {reqAccessData?.errorMsg
             ? `Error: ${reqAccessData.errorMsg}`
             : `Couldn't check access`}
-          <RecheckAccessesButton
-            roleId={roleId}
-            size="sm"
-            variant="outline"
-            className="ml-2"
-          />
+          <RecheckAccessButton className="ml-2" />
         </p>
       </RequirementAccessIndicatorUI>
     )
@@ -122,19 +118,43 @@ const RequirementAccessIndicator = () => {
               }`}
         </p>
       )}
-      <div className="mt-2 flex justify-end gap-2">
+      <div className="mt-2 flex flex-wrap justify-end gap-2">
         <Button
           size="sm"
           variant="outline"
           rightIcon={<ArrowSquareIn weight="bold" />}
           onClick={() => setIsAccountModalOpen(true)}
+          className="w-full sm:w-max"
         >
           View connections
         </Button>
-        <RecheckAccessesButton roleId={roleId} size="sm" />
+        <RecheckAccessButton className="w-full sm:w-max" />
       </div>
     </RequirementAccessIndicatorUI>
   )
 }
 
+const RecheckAccessButton = (props: ButtonProps) => {
+  const { roleId } = useRequirementContext()
+  const { isLoading, triggerMembershipUpdate } = useMembershipUpdate()
+
+  return (
+    <Button
+      size="sm"
+      variant="outline"
+      leftIcon={<ArrowsClockwise weight="bold" />}
+      isLoading={isLoading}
+      onClick={() =>
+        triggerMembershipUpdate({
+          roleIds: [roleId],
+        })
+      }
+      loadingText="Checking access"
+      {...props}
+    >
+      Re-check access
+    </Button>
+  )
+}
+
 export { RequirementAccessIndicator }
diff --git a/src/components/[guild]/Requirements/components/RequirementAccessIndicatorUI.tsx b/src/components/[guild]/Requirements/components/RequirementAccessIndicatorUI.tsx
@@ -60,7 +60,11 @@ const RequirementAccessIndicatorUI = ({
         </TooltipTrigger>
 
         <TooltipPortal>
-          <TooltipContent variant="popover" side="left" className="p-2.5 text-left">
+          <TooltipContent
+            variant="popover"
+            side="left"
+            className="max-w-[75vw] p-2.5 text-left sm:max-w-none"
+          >
             {!isAlwaysOpen && [5, 10].includes(openCount)
               ? openCount === 5
                 ? "👀"

diff --git a/src/components/[guild]/RoleCard/components/AccessIndicator.tsx b/src/components/[guild]/RoleCard/components/AccessIndicator.tsx
@@ -12,7 +12,7 @@ import {
   X,
 } from "@phosphor-icons/react/dist/ssr"
 import { useOpenJoinModal } from "components/[guild]/JoinModal/JoinModalProvider"
-import RecheckAccessesButton from "components/[guild]/RecheckAccessesButton"
+import { RecheckAccessesButton } from "components/[guild]/RecheckAccessesButton"
 import useGuild from "components/[guild]/hooks/useGuild"
 import useRequirements from "components/[guild]/hooks/useRequirements"
 import useMembership, {

diff --git a/src/components/[guild]/forms/FormNoAccess.tsx b/src/components/[guild]/forms/FormNoAccess.tsx
@@ -13,7 +13,7 @@ import Card from "components/common/Card"
 import ClientOnly from "components/common/ClientOnly"
 import { PropsWithChildren } from "react"
 import { useOpenJoinModal } from "../JoinModal/JoinModalProvider"
-import RecheckAccessesButton from "../RecheckAccessesButton"
+import { RecheckAccessesButton } from "../RecheckAccessesButton"
 
 const FormNoAccess = ({
   isMember,