realms navigation and query cluster improvements (solana-labs#39)

* cluster as query param

* better navigation in realms and default dao mode

* fix dao navigation

components/OrganzationsBackNav.tsx

@@ -1,20 +1,27 @@
 import React from 'react'
 import useRealm from '../hooks/useRealm'
+import { useRouter } from 'next/router'
 import { GlobeAltIcon } from '@heroicons/react/outline'
 import { ArrowLeftIcon } from '@heroicons/react/solid'
 import Link from 'next/link'
 import { TwitterIcon } from '../components/icons'
+import { EndpointTypes } from '../models/types'
 
 const OrganzationsBackNav = () => {
-  const { symbol, realm, realmInfo } = useRealm()
-  const { REALM } = process.env
+  const router = useRouter()
+  const { cluster } = router.query
+  const { realm, realmInfo } = useRealm()
+
+  const endpoint = cluster ? (cluster as EndpointTypes) : 'mainnet'
   const realmName = realmInfo?.displayName ?? realm?.info?.name
+  const hideBackNav = !router.asPath.includes('dao') // only hide backnav when on default realm
+  const backNavLink =
+    endpoint === 'mainnet' ? '/realms' : `/realms?cluster=${endpoint}`
 
-  const hideBackNav = REALM != symbol // only hide backnav when on default realm
   return (
     <div className="pb-4">
       {hideBackNav ? (
-        <Link href={`/realms`}>
+        <Link href={backNavLink}>
           <a className="default-transition flex items-center mb-6 text-fgd-3 text-sm transition-all hover:text-fgd-1">
             <ArrowLeftIcon className="h-4 w-4 mr-1 text-primary-light" />
             Back

components/ProposalCard.tsx

@@ -9,6 +9,7 @@ import useProposalVotes from '../hooks/useProposalVotes'
 import VoteResultsBar from './VoteResultsBar'
 import ProposalTimeStatus from './ProposalTimeStatus'
 import useWalletStore from '../stores/useWalletStore'
+import useRealmContext from '../hooks/useRealmContext'
 
 type ProposalCardProps = {
   id: string
@@ -27,6 +28,7 @@ const StyledCardWrapepr = styled.div`
 
 const ProposalCard = ({ id, proposal }: ProposalCardProps) => {
   const { symbol } = useRealm()
+  const { urlContext } = useRealmContext()
   const {
     yesVoteProgress,
     relativeNoVotes,
@@ -41,7 +43,7 @@ const ProposalCard = ({ id, proposal }: ProposalCardProps) => {
 
   return (
     <div>
-      <Link href={`/dao/${symbol}/proposal/${id}`}>
+      <Link href={`/${urlContext}/${symbol}/proposal/${id}`}>
         <a>
           <StyledCardWrapepr className="bg-bkg-2 border border-bkg-3 default-transition rounded-lg hover:bg-bkg-3">
             <div className="px-6 py-4">

hooks/useHydrateStore.tsx

@@ -7,8 +7,8 @@ import useWalletStore, { ENDPOINTS } from '../stores/useWalletStore'
 
 export default function useHydrateStore() {
   const router = useRouter()
-  const { symbol, endpoint, pk } = router.query
-  const apiEndpoint = endpoint ? (endpoint[0] as EndpointTypes) : 'mainnet'
+  const { symbol, cluster, pk } = router.query
+  const apiEndpoint = cluster ? (cluster as EndpointTypes) : 'mainnet'
   const mints = useWalletStore((s) => s.mints)
   const setWalletStore = useWalletStore((s) => s.set)
   const { fetchAllRealms, fetchRealm, fetchProposal } = useWalletStore(

hooks/useRealm.tsx

@@ -7,8 +7,8 @@ import useWalletStore from '../stores/useWalletStore'
 
 export default function useRealm() {
   const router = useRouter()
-  const { symbol, endpoint } = router.query
-  const apiEndpoint = endpoint ? (endpoint[0] as EndpointTypes) : 'mainnet'
+  const { symbol, cluster } = router.query
+  const apiEndpoint = cluster ? (cluster as EndpointTypes) : 'mainnet'
   const connected = useWalletStore((s) => s.connected)
   const wallet = useWalletStore((s) => s.current)
   const tokenAccounts = useWalletStore((s) => s.tokenAccounts)

hooks/useRealmContext.tsx

@@ -0,0 +1,9 @@
+import { useRouter } from 'next/router'
+
+export default function useRealmContext() {
+  const router = useRouter()
+  const urlContext = router.asPath.includes('realm') ? 'realm' : 'dao'
+  return {
+    urlContext,
+  }
+}

models/registry/api.ts

@@ -90,7 +90,6 @@ export function getRealmInfo(
   if (!symbol) {
     return undefined
   }
-  console.log(endpoint === 'devnet', '@@@@@@@@')
   if (endpoint === 'devnet') {
     let devRealmInfo = getAllRealmInfos('devnet').find((r) =>
       equalsIgnoreCase(r.symbol, symbol)

next.config.js

@@ -19,4 +19,12 @@ module.exports = withTM({
   env: {
     REALM: process.env.REALM,
   },
+  async rewrites() {
+    return [
+      {
+        source: '/realm/:symbol*',
+        destination: '/dao/:symbol*',
+      },
+    ]
+  },
 })

pages/dao/[symbol]/proposal/[pk].tsx

@@ -15,8 +15,10 @@ import useProposalVotes from '../../../../hooks/useProposalVotes'
 import VoteResultsBar from '../../../../components/VoteResultsBar'
 import ProposalTimeStatus from '../../../../components/ProposalTimeStatus'
 import { option } from '../../../../tools/core/option'
+import useRealmContext from '../../../../hooks/useRealmContext'
 
 const Proposal = () => {
+  const { urlContext } = useRealmContext()
   const { symbol } = useRealm()
   const { proposal, description, instructions } = useProposal()
   const {
@@ -41,7 +43,7 @@ const Proposal = () => {
       <div className="bg-bkg-2 border border-bkg-3 rounded-lg p-6 col-span-8 space-y-3">
         {proposal ? (
           <>
-            <Link href={`/dao/${symbol}/`}>
+            <Link href={`/${urlContext}/${symbol}/`}>
               <a className="flex items-center text-fgd-3 text-sm transition-all hover:text-fgd-1">
                 <ArrowLeftIcon className="h-4 w-4 mr-1 text-primary-light" />
                 Back

pages/realms/[[...endpoint]].tsx → pages/realms/index.tsx

@@ -12,17 +12,16 @@ import { EndpointTypes } from '../../models/types'
 
 const Realms = () => {
   const router = useRouter()
+  const { cluster } = router.query
 
+  const endpoint = cluster ? (cluster as EndpointTypes) : 'mainnet'
   //TODO when we fetch realms data from api add loader handling
   const [isLoading] = useState(false)
   const [realms, setRealms] = useState([])
   //   const [realmsSearchResults, setSearchResult] = useState([])
   //   const [search, setSerach] = useState('')
   //   const [viewType, setViewType] = useState(ROW)
   const { actions, selectedRealm } = useWalletStore((s) => s)
-  const endpoint = router.query.endpoint
-    ? (router.query.endpoint[0] as EndpointTypes)
-    : 'mainnet'
 
   useEffect(() => {
     const data: RealmInfo[] = getAllRealmInfos(endpoint)
@@ -40,7 +39,10 @@ const Realms = () => {
   //   }, [search, realms])
 
   const goToRealm = ({ symbol }) => {
-    router.push(`/dao/${symbol}`)
+    router.push({
+      pathname: `/realm/${symbol}`,
+      query: endpoint !== 'mainnet' ? { cluster: endpoint } : null,
+    })
   }
 
   return (