Dashboard dev

packages/client/dashboard/src/App.tsx

@@ -23,7 +23,7 @@ import DappModelPlayground from './container/DappModelPlayground'
 import DappDataStatistic from './container/DappDataStatistic'
 import Components from './container/Components'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import ModelList from './components/ModelList'
 import { DappComposite, ModelStream } from './types'
 import { ToastContainer } from 'react-toastify'
@@ -96,9 +96,13 @@ function Layout() {
 }
 
 function DappLayout() {
-  const { loadingDApps } = useAppCtx()
+  const { loadingDApps, setCurrAppId } = useAppCtx()
   const { appId } = useParams()
 
+  useEffect(() => {
+    if (appId) setCurrAppId(appId)
+  }, [appId, setCurrAppId])
+
   if (!appId || loadingDApps) {
     return (
       <main className="container">

packages/client/dashboard/src/api/index.ts

@@ -37,6 +37,14 @@ export function uploadImage({ file }: { file: File }) {
   })
 }
 
+export function getDapp(appId: string) {
+  let host = APP_API_URL
+  return axios({
+    url: host + `/dapps/${appId}`,
+    method: 'GET',
+  })
+}
+
 export function createDapp(
   dapp: ClientDApp,
   didSession: string
@@ -206,15 +214,15 @@ export function getDappComposites({
   didSession,
 }: {
   dapp: ClientDApp
-  didSession: string
+  didSession?: string
 }): AxiosPromise<ApiResp<DappComposite[]>> {
   let host = APP_API_URL
 
   return axios({
     url: host + `/dapps/${id}/composites`,
     method: 'GET',
     headers: {
-      'did-session': didSession,
+      'did-session': didSession || '',
     },
   })
 }
@@ -296,3 +304,20 @@ export function startIndexModel({
     },
   })
 }
+
+export function getStreamsCountWithModels({
+  network,
+  modelStreamIds,
+}: {
+  network: Network
+  modelStreamIds: string
+}): AxiosPromise<ApiResp<number>> {
+  let host = APP_API_URL
+  let net = network === Network.MAINNET ? Network.MAINNET : Network.TESTNET
+  return axios({
+    url:
+      host +
+      `/${net.toUpperCase()}/streams/count?modelStreamIds=${modelStreamIds}`,
+    method: 'GET',
+  })
+}

packages/client/dashboard/src/components/DappSocialEditor.tsx

@@ -27,30 +27,34 @@ const IconMap: { [key: string]: () => JSX.Element } = {
 
 export default function DappSocialEditor({
   selectedDapp,
+  isOwner,
 }: {
   selectedDapp: ClientDApp
+  isOwner: boolean
 }) {
   return (
     <DappSocialEditorBox className="items">
       <div className="title">
         <h3>Social Links</h3>
-        <DialogTrigger>
-          <Button>
-            <EditIcon />
-          </Button>
-          <ModalOverlay>
-            <Modal>
-              <Dialog>
-                {({ close }) => (
-                  <EditDappSocial
-                    closeModal={close}
-                    selectedDapp={selectedDapp}
-                  />
-                )}
-              </Dialog>
-            </Modal>
-          </ModalOverlay>
-        </DialogTrigger>
+        {isOwner && (
+          <DialogTrigger>
+            <Button>
+              <EditIcon />
+            </Button>
+            <ModalOverlay>
+              <Modal>
+                <Dialog>
+                  {({ close }) => (
+                    <EditDappSocial
+                      closeModal={close}
+                      selectedDapp={selectedDapp}
+                    />
+                  )}
+                </Dialog>
+              </Modal>
+            </ModalOverlay>
+          </DialogTrigger>
+        )}
       </div>
       <div>
         {selectedDapp.socialLinks?.map((item) => {

packages/client/dashboard/src/components/DappTitleEditor.tsx

@@ -13,8 +13,10 @@ import { Network } from './Selector/EnumSelect'
 
 export default function DappTitleEditor({
   selectedDapp,
+  isOwner,
 }: {
   selectedDapp: ClientDApp
+  isOwner: boolean
 }) {
   return (
     <TitleBox>
@@ -23,20 +25,25 @@ export default function DappTitleEditor({
         <span className="net">{selectedDapp.network || Network.TESTNET}</span>
         <span>{selectedDapp.stage || 'Under Development'}</span>
       </div>
-      <DialogTrigger>
-        <Button>
-          <EditIcon />
-        </Button>
-        <ModalOverlay>
-          <Modal>
-            <Dialog>
-              {({ close }) => (
-                <EditDappInfo closeModal={close} selectedDapp={selectedDapp} />
-              )}
-            </Dialog>
-          </Modal>
-        </ModalOverlay>
-      </DialogTrigger>
+      {isOwner && (
+        <DialogTrigger>
+          <Button>
+            <EditIcon />
+          </Button>
+          <ModalOverlay>
+            <Modal>
+              <Dialog>
+                {({ close }) => (
+                  <EditDappInfo
+                    closeModal={close}
+                    selectedDapp={selectedDapp}
+                  />
+                )}
+              </Dialog>
+            </Modal>
+          </ModalOverlay>
+        </DialogTrigger>
+      )}
     </TitleBox>
   )
 }

packages/client/dashboard/src/components/ModelList.tsx

@@ -7,7 +7,7 @@ import { Modal, ModalOverlay } from 'react-aria-components'
 import PlusIcon from './Icons/PlusIcon'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import useSelectedDapp from '../hooks/useSelectedDapp'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { DappComposite, ModelStream } from '../types'
 import { getStarModels, getDappComposites, deleteDappComposites } from '../api'
 import { Network } from './Selector/EnumSelect'
@@ -22,6 +22,7 @@ import CreateCompositeModal from './CreateCompositeModal'
 import MergeIcon from './Icons/MergeIcon'
 import { shortPubKey } from '../utils/shortPubKey'
 import CopyTint from './CopyTint'
+import useIsOwner from '../hooks/useIsOwner'
 
 export default function ModelList({
   editable,
@@ -38,24 +39,30 @@ export default function ModelList({
   editable?: boolean
 }) {
   const session = useSession()
-  const { loadDapps } = useAppCtx()
+  const { loadDapps, currDapp } = useAppCtx()
   const { appId, selectedDapp } = useSelectedDapp()
   const navigate = useNavigate()
   const [loading, setLoading] = useState(false)
   const [dappModels, setDappModels] = useState<ModelStream[]>()
   const [composites, setComposites] = useState<DappComposite[]>([])
   const location = useLocation()
 
+  const dapp = useMemo(() => {
+    return selectedDapp || currDapp
+  }, [selectedDapp, currDapp])
+
+  const { isOwner } = useIsOwner()
+
   const loadModelsInfo = useCallback(async () => {
-    if (selectedDapp?.models?.length === 0 || !selectedDapp) {
+    if (dapp?.models?.length === 0 || !dapp) {
       setDappModels([])
       return
     }
 
     try {
       const resp = await getStarModels({
-        network: selectedDapp.network as Network,
-        ids: selectedDapp.models || [],
+        network: dapp.network as Network,
+        ids: dapp.models || [],
       })
 
       const list = resp.data.data
@@ -67,22 +74,20 @@ export default function ModelList({
       console.error(error)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedDapp])
+  }, [dapp])
 
   const loadDappComposites = useCallback(async () => {
-    if (!session) return
-    if (!selectedDapp) return
+    if (!dapp) return
     try {
       const resp = await getDappComposites({
-        dapp: selectedDapp,
-        didSession: session.serialize(),
+        dapp,
       })
       if (resp.data.code !== 0) throw new Error(resp.data.msg)
       setComposites(resp.data.data)
     } catch (error) {
       console.error(error)
     }
-  }, [selectedDapp, session])
+  }, [dapp])
 
   const removeModelFromDapp = useCallback(
     async (modelId: string) => {
@@ -168,7 +173,7 @@ export default function ModelList({
         <h3>Models</h3>
         <Favorite />
         <CreateNew />
-        {editable && (
+        {editable && isOwner && (
           <MenuTrigger>
             <Button aria-label="Menu">
               <PlusIcon />
@@ -200,7 +205,7 @@ export default function ModelList({
       </div>
 
       <DappModelList
-        editable={editable}
+        editable={editable && isOwner}
         selected={selectModel}
         setSelected={setSelectModel}
         dappModels={dappModels || []}
@@ -221,7 +226,7 @@ export default function ModelList({
         <>
           <div className="title">
             <h3>Composites</h3>
-            {editable && (
+            {editable && isOwner && (
               <CreateComposite
                 loadDappComposites={loadDappComposites}
                 dappModels={dappModels || []}
@@ -231,14 +236,14 @@ export default function ModelList({
 
           <DappCompositeList
             composites={composites}
-            editable={editable}
+            editable={editable && isOwner}
             selectComposite={selectComposite}
             setSelectedComposite={setSelectComposite}
             removeAction={delDappComposite}
           />
         </>
       )}
-      {editable && (
+      {editable && isOwner && (
         <MergeBox>
           <DialogTrigger>
             <Button className={'merge-btn'}>