feat: route with network

us3r-network · Jun 21, 2023 · cf4428a · cf4428a
1 parent 6e1fcc6
commit cf4428a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 40 deletions.
diff --git a/packages/client/scan/src/App.tsx b/packages/client/scan/src/App.tsx
@@ -1,4 +1,4 @@
-import { Routes, Route, Outlet } from 'react-router-dom'
+import { Routes, Route, Outlet, useSearchParams } from 'react-router-dom'
 import styled from 'styled-components'
 import dayjs from 'dayjs'
 import { isMobile } from 'react-device-detect'
@@ -24,14 +24,14 @@ import ModelCreate from './container/ModelCreate'
 import UserModels from './container/UserModels'
 import ModelView from './container/ModelView'
 import ModelMidInfo from './container/ModelMidInfo'
-import { useLocalStorage } from './hooks/useLocalStorage'
 import { Network } from './types'
 import CeramicProvider from './context/CeramicCtx'
 import Header from './components/Header'
 import ModelStreams from './container/ModelStreams'
 import DappCreate from './container/DappCreate'
 import DappInfo from './container/DappInfo'
 import DappEdit from './container/DappEdit'
+import { useEffect, useState } from 'react'
 
 dayjs.extend(relativeTime)
 
@@ -70,15 +70,33 @@ function Routers() {
 }
 
 export default function App() {
-  const [network, setNetwork] = useLocalStorage(
-    'network-select',
-    Network.TESTNET
-  )
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const [network, setNetwork] = useState(Network.TESTNET)
+
+  useEffect(() => {
+    const routerNet = searchParams.get('network')?.toUpperCase()
+    console.log('routerNet', routerNet)
+    if (routerNet) {
+      Object.values(Network).includes(routerNet as Network) &&
+        setNetwork(routerNet as Network)
+    }
+  }, [searchParams, setSearchParams])
+
+  console.log('network', network)
 
   return (
     <Us3rAuthWithRainbowkitProvider>
       <ProfileStateProvider ceramicHost={CERAMIC_TESTNET_HOST}>
-        <CeramicProvider network={network} setNetwork={setNetwork}>
+        <CeramicProvider
+          network={network}
+          setNetwork={(n) => {
+            searchParams.delete('network')
+            searchParams.append('network', n)
+            setSearchParams(searchParams)
+            setNetwork(n)
+          }}
+        >
           <Routers />
         </CeramicProvider>
       </ProfileStateProvider>

diff --git a/packages/client/scan/src/components/ListTable.tsx b/packages/client/scan/src/components/ListTable.tsx
@@ -1,6 +1,5 @@
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
-import multiavatar from '@multiavatar/multiavatar'
 import dayjs from 'dayjs'
 import { isMobile } from 'react-device-detect'
 

diff --git a/packages/client/scan/src/components/Nav.tsx b/packages/client/scan/src/components/Nav.tsx
@@ -5,13 +5,10 @@ import GitHubButton from 'react-github-btn'
 import Logo from './Logo'
 import LoginButton from './LoginButton'
 import { useCeramicCtx } from '../context/CeramicCtx'
-import DappAdd from './icons/DappAdd'
-import { useSession } from '@us3r-network/auth-with-rainbowkit'
 
 export default function Nav() {
   let location = useLocation()
-  const session = useSession()
-  const { dapps } = useCeramicCtx()
+  const { network } = useCeramicCtx()
 
   const homeActive = location.pathname === '/'
   const modelActive = location.pathname.startsWith('/models')
@@ -20,15 +17,15 @@ export default function Nav() {
   return (
     <NavContainer>
       <div className="fixed">
-        <Link to={'/'}>
+        <Link to={`/?network=${network}`}>
           <div className="logo-container">
             <Logo className="App-logo" alt="logo" />
             <span>Alpha</span>
           </div>
         </Link>
 
         <div className="nav">
-          <Link to={'/'}>
+          <Link to={`/?network=${network}`}>
             <div className={`nav-item ${homeActive ? 'active' : ''}`}>
               <HomeIcon stroke={homeActive ? 'white' : '#718096'} />
               <div className="tint-c">
@@ -37,7 +34,7 @@ export default function Nav() {
             </div>
           </Link>
 
-          <Link to={'/streams'}>
+          <Link to={`/streams?network=${network}`}>
             <div className={`nav-item ${streamActive ? 'active' : ''}`}>
               <StreamIcon stroke={streamActive ? 'white' : '#718096'} />
               <div className="tint-c">
@@ -46,38 +43,14 @@ export default function Nav() {
             </div>
           </Link>
 
-          <Link to={'/models'}>
+          <Link to={`/models?network=${network}`}>
             <div className={`nav-item ${modelActive ? 'active' : ''}`}>
               <ModelIcon stroke={modelActive ? 'white' : '#718096'} />
               <div className="tint-c">
                 <div className="tint">ComposeDB Models</div>
               </div>
             </div>
           </Link>
-
-          {/*session && (
-            <div className="dapp">
-              <hr />
-              {dapps
-                ?.filter((item) => item.node)
-                .map((item) => {
-                  return (
-                    <Link to={`/dapp/${item.node.id!}`} key={item.node.id!}>
-                      <div className="icon">
-                        <img src={item.node.icon!} alt="" />
-                      </div>
-                    </Link>
-                  )
-                })}
-
-              <Link to={'/dapp/create'}>
-                <DappAdd />
-                <div className="tint-c">
-                  <div className="tint">Create Application</div>
-                </div>
-              </Link>
-            </div>
-              )*/}
         </div>
 
         <div className="nav-bottom">