feat: using `useAccountSites` to replace `useGetUserSites`

src/components/common/CharacterCard.tsx

@@ -25,7 +25,9 @@ export const CharacterCard: React.FC<{
         if (siteId) {
           siteModel.getSite(siteId).then((site) => setSite(site))
         } else if (address) {
-          siteModel.getUserSites(address).then((sites) => setSite(sites?.[0]))
+          siteModel
+            .getUserSites({ address })
+            .then((sites) => setSite(sites?.[0]))
         }
       } else {
         setSite(undefined)

src/components/common/CommentInput.tsx

@@ -1,5 +1,5 @@
 import { Note, Profile } from "~/lib/types"
-import { useGetCurrentUserSites, useAccountAddress } from "~/queries/site"
+import { useAccountSites, useAccountAddress } from "~/queries/site"
 import { Avatar } from "~/components/ui/Avatar"
 import { Input } from "~/components/ui/Input"
 import { Button } from "~/components/ui/Button"
@@ -17,7 +17,7 @@ export const CommentInput: React.FC<{
   originalId?: string
 }> = ({ pageId, originalId }) => {
   const address = useAccountAddress()
-  const userSites = useGetCurrentUserSites()
+  const userSites = useAccountSites()
   const { show: openConnectModal } = useConnectModal()
   const commentPage = useCommentPage()
   const router = useRouter()

src/components/common/ConnectButton.tsx

@@ -5,7 +5,7 @@ import {
   useAccountBalance,
   GeneralAccount,
 } from "@crossbell/connect-kit"
-import { useGetCurrentUserSites } from "~/queries/site"
+import { useAccountSites } from "~/queries/site"
 import { Avatar } from "~/components/ui/Avatar"
 import { Button } from "~/components/ui/Button"
 import type { HeaderLinkType } from "~/components/site/SiteHeader"
@@ -34,7 +34,7 @@ export const ConnectButton: React.FC<{
   const { balance } = useAccountBalance()
   const [copyLabelDisplay, copyLabel] = useCopyLabel(account)
 
-  const userSites = useGetCurrentUserSites()
+  const userSites = useAccountSites()
 
   const dropdownLinks: HeaderLinkType[] = [
     {

src/components/common/FollowingButton.tsx

@@ -8,7 +8,7 @@ import {
   useGetSubscription,
   useSubscribeToSite,
   useUnsubscribeFromSite,
-  useGetCurrentUserSites,
+  useAccountSites,
   useAccountAddress,
 } from "~/queries/site"
 import { useConnectModal } from "@crossbell/connect-kit"
@@ -26,7 +26,7 @@ export const FollowingButton: React.FC<{
   const unsubscribeFromSite = useUnsubscribeFromSite()
   const { show: openConnectModal } = useConnectModal()
   const [followProgress, setFollowProgress] = useState<boolean>(false)
-  const userSite = useGetCurrentUserSites()
+  const userSite = useAccountSites()
   const router = useRouter()
 
   const handleClickSubscribe = async (e: any) => {

src/components/common/Reactions.tsx

@@ -8,7 +8,7 @@ import {
   useGetMints,
   useCheckMint,
 } from "~/queries/page"
-import { useGetCurrentUserSites, useAccountAddress } from "~/queries/site"
+import { useAccountSites, useAccountAddress } from "~/queries/site"
 import { useConnectModal } from "@crossbell/connect-kit"
 import { useState, useEffect } from "react"
 import { Button } from "../ui/Button"
@@ -35,7 +35,7 @@ export const Reactions: React.FC<{
   const { show: openConnectModal } = useConnectModal()
   const [likeProgress, setLikeProgress] = useState(false)
   const [mintProgress, setMintProgress] = useState(false)
-  const userSite = useGetCurrentUserSites()
+  const userSite = useAccountSites()
   const router = useRouter()
   let [isLikeOpen, setIsLikeOpen] = useState(false)
   let [isMintOpen, setIsMintOpen] = useState(false)

src/components/dashboard/DashboardLayout.tsx

@@ -7,7 +7,7 @@ import { getSiteLink } from "~/lib/helpers"
 import { SEOHead } from "../common/SEOHead"
 import { UniLink } from "../ui/UniLink"
 import { DashboardSidebar } from "./DashboardSidebar"
-import { useGetCurrentUserSites, useAccountAddress } from "~/queries/site"
+import { useAccountSites, useAccountAddress } from "~/queries/site"
 import { ConnectButton } from "~/components/common/ConnectButton"
 import { useGetNotifications, useGetSite, useIsOperators } from "~/queries/site"
 import { getStorage } from "~/lib/storage"
@@ -27,7 +27,7 @@ export function DashboardLayout({
 
   const address = useAccountAddress()
 
-  const userSite = useGetCurrentUserSites()
+  const userSite = useAccountSites()
 
   const notifications = useGetNotifications({
     siteCId: site.data?.metadata?.proof,

src/components/site/SiteLayout.server.tsx

@@ -2,7 +2,6 @@ import {
   prefetchGetSite,
   prefetchGetSiteSubscriptions,
   prefetchGetSiteToSubscriptions,
-  prefetchGetUserSites,
 } from "~/queries/site.server"
 import { prefetchGetPagesBySite } from "~/queries/page.server"
 import { PageVisibilityEnum } from "~/lib/types"

src/lib/utils.ts

@@ -7,3 +7,11 @@ export function truthy<T>(value: T): value is Truthy<T> {
 export function stripHTML(html: string) {
   return html.replace(/<(?:.|\n)*?>/gm, "")
 }
+
+export function isEmail(email: string): boolean {
+  // https://stackoverflow.com/a/46181
+  const regex =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+
+  return regex.test(email)
+}

src/models/site.model.ts

@@ -9,6 +9,8 @@ import axios from "axios"
 import { indexer } from "@crossbell/indexer"
 import type { LinkEntity, NoteEntity, Contract } from "crossbell.js"
 import { CharacterOperatorPermission } from "crossbell.js"
+import { isEmail } from "~/lib/utils"
+import { GeneralAccount } from "@crossbell/connect-kit"
 
 export const checkSubdomain = async ({
   subdomain,
@@ -59,36 +61,73 @@ const expandSite = (site: Profile) => {
   return site
 }
 
-export const getUserSites = async (
-  address?: string,
-  customUnidata?: Unidata,
-) => {
-  if (!address) {
-    return null
-  }
+export type GetUserSitesParams =
+  | {
+      address: string
+      unidata?: Unidata
+    }
+  | {
+      handle: string
+      unidata?: Unidata
+    }
+
+export const getUserSites = async (params: GetUserSitesParams) => {
+  let profiles: UniProfiles | null = null
 
-  let profiles: UniProfiles
   try {
-    profiles = await (customUnidata || unidata).profiles.get({
-      source: "Crossbell Profile",
-      identity: address,
-      platform: "Ethereum",
-      filter: {
-        primary: true,
-      },
-    })
+    const source = "Crossbell Profile"
+    const filter = { primary: true }
+
+    if ("address" in params) {
+      profiles = await (params.unidata || unidata).profiles.get({
+        source,
+        filter,
+        identity: params.address,
+        platform: "Ethereum",
+      })
+    }
+
+    if ("handle" in params) {
+      profiles = await (params.unidata || unidata).profiles.get({
+        source,
+        filter,
+        identity: params.handle,
+        platform: "Crossbell",
+      })
+    }
   } catch (error) {
     return null
   }
 
-  const sites: Profile[] = profiles?.list?.map((profile) => {
-    expandSite(profile)
-    return profile
-  })
+  const sites: Profile[] =
+    profiles?.list?.map((profile) => {
+      expandSite(profile)
+      return profile
+    }) ?? []
 
-  if (!sites || !sites.length) return null
+  return sites.length > 0 ? sites : null
+}
 
-  return sites
+export type GetAccountSitesParams = {
+  account: GeneralAccount
+  unidata?: Unidata
+}
+
+export const getAccountSites = (
+  params: GetAccountSitesParams,
+): Promise<Profile[] | null> => {
+  switch (params.account.type) {
+    case "email":
+      return getUserSites({
+        handle: params.account.character.handle,
+        unidata: params.unidata,
+      })
+    case "wallet":
+      return getUserSites({
+        address: params.account.address,
+        unidata: params.unidata,
+      })
+  }
 }
 
 export const getSite = async (input: string, customUnidata?: Unidata) => {

src/pages/dashboard/index.tsx

@@ -1,10 +1,10 @@
-import { useGetCurrentUserSites } from "~/queries/site"
+import { useAccountSites } from "~/queries/site"
 import { useEffect } from "react"
 import { useRouter } from "next/router"
 
 export default function Dashboard() {
   const router = useRouter()
-  const userSites = useGetCurrentUserSites()
+  const userSites = useAccountSites()
 
   useEffect(() => {
     if (userSites.isSuccess) {

src/pages/dashboard/new-site.tsx

@@ -9,7 +9,7 @@ import { APP_NAME, OUR_DOMAIN } from "~/lib/env"
 import { useCreateSite, useAccountAddress } from "~/queries/site"
 import { BigNumber } from "ethers"
 import { UniLink } from "~/components/ui/UniLink"
-import { useGetCurrentUserSites } from "~/queries/site"
+import { useAccountSites } from "~/queries/site"
 import { getSite } from "~/models/site.model"
 import { useAccountBalance } from "@crossbell/connect-kit"
 
@@ -24,7 +24,7 @@ export default function NewSitePage() {
 
   const [InsufficientBalance, setInsufficientBalance] = useState<boolean>(true)
 
-  const userSites = useGetCurrentUserSites()
+  const userSites = useAccountSites()
 
   useEffect(() => {
     if (userSites.isSuccess) {

src/pages/index.tsx

@@ -19,7 +19,7 @@ import { prefetchGetSites } from "~/queries/site.server"
 import { useGetSites, useAccountAddress } from "~/queries/site"
 import showcase from "../../showcase.json"
 import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
-import { useGetCurrentUserSites, useSubscribeToSites } from "~/queries/site"
+import { useAccountSites, useSubscribeToSites } from "~/queries/site"
 import { SITE_URL } from "~/lib/env"
 import { BoltIcon } from "@heroicons/react/24/outline"
 
@@ -127,7 +127,7 @@ export default function Home({ region }: { region: string | null }) {
   ]
 
   const [followProgress, setFollowProgress] = useState<boolean>(false)
-  const userSite = useGetCurrentUserSites()
+  const userSite = useAccountSites()
   const subscribeToSites = useSubscribeToSites()
 
   const followAll = async (e: any) => {

src/queries/site.server.ts

@@ -65,13 +65,3 @@ export const fetchGetNotifications = async (
     )
   })
 }
-
-export const prefetchGetUserSites = async (
-  address: string,
-  queryClient: QueryClient,
-) => {
-  const key = ["getUserSites", address]
-  await queryClient.prefetchQuery(key, async () => {
-    return cacheGet(key, () => siteModel.getUserSites(address))
-  })
-}

src/queries/site.ts

@@ -5,26 +5,24 @@ import { useAccountState } from "@crossbell/connect-kit"
 import * as siteModel from "~/models/site.model"
 import { useUnidata } from "./unidata"
 
-export const useGetUserSites = (address?: string) => {
-  const unidata = useUnidata()
-  return useQuery(["getUserSites", address], async () => {
-    if (!address) {
-      return []
-    }
-    return siteModel.getUserSites(address, unidata)
-  })
-}
-
 export function useAccountAddress() {
   const account = useAccountState((s) => s.computed.account)
 
   return account?.type === "email" ? account.email : account?.address
 }
 
-export const useGetCurrentUserSites = () => {
-  const address = useAccountAddress()
+export const useAccountSites = () => {
+  const account = useAccountState((s) => s.computed.account)
+  const accountAddress = useAccountAddress()
+  const unidata = useUnidata()
 
-  return useGetUserSites(address)
+  return useQuery(["getUserSites", accountAddress], async () => {
+    if (!account) {
+      return []
+    }
+
+    return siteModel.getAccountSites({ account, unidata })
+  })
 }
 
 export const useGetSite = (input: string) => {