fixing up quite a few of the sliders

0xStation · Mar 28, 2023 · 2f8a917 · 2f8a917
1 parent 2caf244
commit 2f8a917
Show file tree

Hide file tree

Showing 13 changed files with 61 additions and 20 deletions.
diff --git a/src/components/automation/CreateAutomationDropdown.tsx b/src/components/automation/CreateAutomationDropdown.tsx
@@ -51,7 +51,7 @@ export const CreateAutomationDropdown = () => {
               return (
                 <span
                   onClick={() => {
-                    setActiveSlider(Sliders.CREATE_AUTOMATION)
+                    setActiveSlider(Sliders.CREATE_AUTOMATION, { value: true })
                   }}
                 >
                   Revenue share

diff --git a/src/components/claim/ClaimListView.tsx b/src/components/claim/ClaimListView.tsx
@@ -8,6 +8,7 @@ import { addressesAreEqual } from "lib/utils"
 import { useAccountItemsToClaim } from "models/account/hooks"
 import { RevShareWithdraw } from "models/automation/types"
 import { RequestFrob } from "models/request/types"
+import { useRouter } from "next/router"
 import { useReducer, useState } from "react"
 
 enum BatchEvent {
@@ -93,7 +94,15 @@ const batchReducer = (
 }
 
 const ClaimListView = ({ recipientAddress }: { recipientAddress: string }) => {
-  const { isLoading, items, mutate } = useAccountItemsToClaim(recipientAddress)
+  const router = useRouter()
+  // check if profile page vs terminal page
+  let recipientAddressParam = router.query.address as string
+  const { isLoading, items, mutate, error } = useAccountItemsToClaim(
+    recipientAddressParam,
+  )
+  console.log("error", error)
+  console.log("items", items)
+
   const [claimDrawerItemPending, setClaimDrawerItemPending] =
     useState<boolean>(false)
   const [claimDrawerOpen, setClaimDrawerOpen] = useState<boolean>(false)

diff --git a/src/components/claim/ProfileReadyToClaim.tsx b/src/components/claim/ProfileReadyToClaim.tsx
@@ -29,7 +29,7 @@ export const ProfileReadyToClaim = () => {
           <span
             className="cursor-pointer"
             onClick={() => {
-              setActiveSlider(Sliders.CLAIM_TOKENS)
+              setActiveSlider(Sliders.CLAIM_TOKENS, { value: true })
             }}
           >
             <ReadyToClaim address={accountAddress} />

diff --git a/src/components/claim/TerminalReadyToClaim.tsx b/src/components/claim/TerminalReadyToClaim.tsx
@@ -31,7 +31,7 @@ export const TerminalReadyToClaim = () => {
           <span
             className="cursor-pointer"
             onClick={() => {
-              setActiveSlider(Sliders.CLAIM_TOKENS)
+              setActiveSlider(Sliders.CLAIM_TOKENS, { value: true })
             }}
           >
             <ReadyToClaim address={address as string} />

diff --git a/src/components/core/AccountNavBar/AccountDropdown.tsx b/src/components/core/AccountNavBar/AccountDropdown.tsx
@@ -89,7 +89,9 @@ export const AccountNavBar = () => {
                         variant="unemphasized"
                         size="base"
                         onClick={() => {
-                          setActiveSlider(Sliders.CREATE_TERMINAL)
+                          setActiveSlider(Sliders.CREATE_TERMINAL, {
+                            value: true,
+                          })
                         }}
                       >
                         + New Project
@@ -101,8 +103,13 @@ export const AccountNavBar = () => {
             </div>
             <NetworkDropdown />
             <div
-              className="h-8 w-8 rounded bg-gray-90 p-1"
-              onClick={() => setNotificationOpen(true)}
+              className="h-8 w-8 cursor-pointer rounded bg-gray-90 p-1"
+              onClick={() => {
+                setNotificationOpen(true)
+                setActiveSlider(Sliders.EMAIL_NOTIFICATIONS, {
+                  value: true,
+                })
+              }}
             >
               <BellIcon />
             </div>

diff --git a/src/components/core/SliderManager.tsx b/src/components/core/SliderManager.tsx
@@ -140,7 +140,7 @@ const SliderManager = () => {
       setActiveSlider(Sliders.CREATE_AUTOMATION)
     } else if (isQueryParamSet("createTerminalOpen")) {
       setActiveSlider(Sliders.CREATE_TERMINAL)
-    } else if (isQueryParamSet("automationDetailsOpen")) {
+    } else if (isQueryParamSet("automationId")) {
       setActiveSlider(Sliders.AUTOMATION_DETAILS)
     } else if (isQueryParamSet("claimTokensOpen")) {
       setActiveSlider(Sliders.CLAIM_TOKENS)

diff --git a/src/components/pages/automationDetails/components/AutomationDetailsContent.tsx b/src/components/pages/automationDetails/components/AutomationDetailsContent.tsx
@@ -1,5 +1,6 @@
 import { PencilIcon } from "@heroicons/react/24/solid"
 import { ArrowLeft } from "@icons"
+import { getQueryParam } from "lib/utils/updateQueryParam"
 import { useAutomation } from "models/automation/hooks"
 import { RevShareFrob } from "models/automation/types"
 import Link from "next/link"
@@ -11,12 +12,20 @@ import { AutomationTabBar } from "../../../automation/AutomationTabBar"
 
 export const AutomationDetailsContent = () => {
   const router = useRouter()
-  const { automation } = useAutomation(router.query.automationId as string)
+  let { automationId } = router.query
+  // if the query param is set "shallowly" next router doesn't pick up on it
+  // this happens on desktop, if the user clicks a request from the list
+  // we can still grab it from the url manually
+  if (!automationId) {
+    automationId = getQueryParam("automationId") as string
+  }
+
+  const { automation } = useAutomation(automationId as string)
   const [revShare, setRevShare] = useState<RevShareFrob>()
 
   // prevents sliders from making content invisible as they disappear when query param is unset
   useEffect(() => {
-    if (automation && router.query.automationId) {
+    if (automation && automationId) {
       setRevShare(automation)
     }
   }, [automation, router.query.automationId])

diff --git a/src/components/pages/automations/components/AutomationsPageContent.tsx b/src/components/pages/automations/components/AutomationsPageContent.tsx
@@ -94,7 +94,9 @@ const AutomationsPageContent = () => {
                             `/${router.query.chainNameAndSafeAddress}/automations/new`,
                           )
                         } else {
-                          setActiveSlider(Sliders.CREATE_AUTOMATION)
+                          setActiveSlider(Sliders.CREATE_AUTOMATION, {
+                            value: true,
+                          })
                         }
                       }}
                     >
@@ -126,7 +128,9 @@ const AutomationsPageContent = () => {
                 automation={automation}
                 key={`automation-${automation.id}`}
                 onClick={() => {
-                  setActiveSlider(Sliders.AUTOMATION_DETAILS)
+                  setActiveSlider(Sliders.AUTOMATION_DETAILS, {
+                    id: automation.id,
+                  })
                 }}
               />
             ))}

diff --git a/src/components/pages/members/components/MembersPageContent.tsx b/src/components/pages/members/components/MembersPageContent.tsx
@@ -75,7 +75,7 @@ const MembersPageContent = () => {
                   <Button
                     size="base"
                     onClick={() => {
-                      setActiveSlider(Sliders.EDIT_MEMBERS)
+                      setActiveSlider(Sliders.EDIT_MEMBERS, { value: true })
                     }}
                   >
                     + Add
@@ -98,7 +98,9 @@ const MembersPageContent = () => {
                 }
                 return (
                   <EditButton
-                    onClick={() => setActiveSlider(Sliders.EDIT_MEMBERS)}
+                    onClick={() =>
+                      setActiveSlider(Sliders.EDIT_MEMBERS, { value: true })
+                    }
                     className="ml-2 rounded border border-gray-80"
                   />
                 )

diff --git a/src/components/pages/requestDetails/components/RequestDetailsContent.tsx b/src/components/pages/requestDetails/components/RequestDetailsContent.tsx
@@ -37,8 +37,6 @@ export const RequestDetailsContent = ({
     requestId = getQueryParam("requestId") as string
   }
 
-  console.log(requestId)
-
   const { address } = useAccount()
   const { request } = useRequest(requestId as string)
 

diff --git a/src/components/pages/terminalDetails/Desktop.tsx b/src/components/pages/terminalDetails/Desktop.tsx
@@ -21,7 +21,11 @@ const Desktop = ({ terminal }: { terminal: Terminal }) => {
           <>
             <div className="absolute right-[48px] top-[72px]">
               <EditButton
-                onClick={() => setActiveSlider(Sliders.EDIT_TERMINAL_DETAILS)}
+                onClick={() =>
+                  setActiveSlider(Sliders.EDIT_TERMINAL_DETAILS, {
+                    value: true,
+                  })
+                }
                 className="rounded border border-gray-80"
               />
             </div>

diff --git a/src/components/request/ProfileRequestsList.tsx b/src/components/request/ProfileRequestsList.tsx
@@ -112,7 +112,9 @@ export const ProfileRequestsList = ({ address }: { address: string }) => {
                                   key={`request-${idx}`}
                                   request={request}
                                   triggerDetails={(request) => {
-                                    setActiveSlider(Sliders.REQUEST_DETAILS)
+                                    setActiveSlider(Sliders.REQUEST_DETAILS, {
+                                      id: request.id,
+                                    })
                                   }}
                                 />
                               )

diff --git a/src/components/terminal/ProfileTerminalsList.tsx b/src/components/terminal/ProfileTerminalsList.tsx
@@ -4,15 +4,21 @@ import { Button } from "@ui/Button"
 import { TabsContent } from "@ui/Tabs"
 import LoadingTerminalList from "components/core/LoadingTerminalList"
 import { EmptyState } from "components/emptyStates/EmptyState"
-import { addQueryParam } from "lib/utils/updateQueryParam"
 import { useRouter } from "next/router"
 import { useEffect } from "react"
+import {
+  Sliders,
+  useSliderManagerStore,
+} from "../../hooks/stores/useSliderManagerStore"
 import useStore from "../../hooks/stores/useStore"
 import { useTerminalsBySigner } from "../../models/terminal/hooks"
 import { ProfileTab } from "../core/TabBars/ProfileTabBar"
 import TerminalListItem from "./TerminalListItem"
 
 export const ProfileTerminalsList = ({ address }: { address: string }) => {
+  const setActiveSlider = useSliderManagerStore(
+    (state) => state.setActiveSlider,
+  )
   const { isLoading, terminals } = useTerminalsBySigner(address)
   const { primaryWallet } = useDynamicContext()
   const router = useRouter()
@@ -55,7 +61,7 @@ export const ProfileTerminalsList = ({ address }: { address: string }) => {
                     if (isMobile) {
                       router.push("/project/new")
                     } else {
-                      addQueryParam(router, "createTerminalSliderOpen", "true")
+                      setActiveSlider(Sliders.CREATE_TERMINAL, { value: true })
                     }
                   }}
                 >