Merge pull request #120 from us3r-network/dashboard-dev

Dashboard dev
us3r-network · Jun 19, 2023 · 2fac848 · 2fac848
2 parents b64c4f1 + 829e49c
commit 2fac848
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 46 deletions.
diff --git a/.github/workflows/dashboard-firebase-hosting-merge.yml b/.github/workflows/dashboard-firebase-hosting-merge.yml
@@ -32,6 +32,7 @@ jobs:
           REACT_APP_CERAMIC_MAINNET_HOST: '${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}'
           REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
           REACT_APP_S3_SCAN_URL: '${{ vars.REACT_APP_S3_SCAN_URL }}'
+          REACT_APP_DOCS_URL: '${{ vars.REACT_APP_DOCS_URL }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
@@ -64,6 +65,7 @@ jobs:
           REACT_APP_CERAMIC_MAINNET_HOST: '${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}'
           REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
           REACT_APP_S3_SCAN_URL: '${{ vars.REACT_APP_S3_SCAN_URL }}'
+          REACT_APP_DOCS_URL: '${{ vars.REACT_APP_DOCS_URL }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

diff --git a/.github/workflows/dashboard-firebase-hosting-pull-request.yml b/.github/workflows/dashboard-firebase-hosting-pull-request.yml
@@ -32,6 +32,7 @@ jobs:
           REACT_APP_CERAMIC_MAINNET_HOST: '${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}'
           REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
           REACT_APP_S3_SCAN_URL: '${{ vars.REACT_APP_S3_SCAN_URL }}'
+          REACT_APP_DOCS_URL: '${{ vars.REACT_APP_DOCS_URL }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
@@ -63,6 +64,7 @@ jobs:
           REACT_APP_CERAMIC_MAINNET_HOST: '${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}'
           REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
           REACT_APP_S3_SCAN_URL: '${{ vars.REACT_APP_S3_SCAN_URL }}'
+          REACT_APP_DOCS_URL: '${{ vars.REACT_APP_DOCS_URL }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

diff --git a/packages/client/dashboard/src/App.tsx b/packages/client/dashboard/src/App.tsx
@@ -41,6 +41,7 @@ function Routers() {
           </Route>
           <Route path="info" element={<DappInfo />} />
           <Route path="explore" element={<ExploreModel />} />
+          <Route path="favorite" element={<ExploreModel />} />
         </Route>
       </Route>
       <Route path="*" element={<NoMatch />} />

diff --git a/packages/client/dashboard/src/components/MergeModal.tsx b/packages/client/dashboard/src/components/MergeModal.tsx
@@ -81,30 +81,40 @@ export default function MergeModal({
             setModels(v)
           }}
         >
-          <Label>Models</Label>
-          {dappModels.map((item) => {
-            return (
-              <Checkbox value={item.stream_id} key={item.stream_id}>
-                <div className="checkbox" aria-hidden="true">
-                  <svg viewBox="0 0 18 18">
-                    <polyline points="1 9 7 14 15 4" />
-                  </svg>
-                </div>
-                {item.stream_content.name}
-              </Checkbox>
-            )
-          })}
+          {(dappModels.length === 0 && (
+            <p>This Dapp has no model available to be merged.</p>
+          )) || (
+            <>
+              <Label>Models</Label>
+              {dappModels.map((item) => {
+                return (
+                  <Checkbox value={item.stream_id} key={item.stream_id}>
+                    <div className="checkbox" aria-hidden="true">
+                      <svg viewBox="0 0 18 18">
+                        <polyline points="1 9 7 14 15 4" />
+                      </svg>
+                    </div>
+                    {item.stream_content.name}
+                  </Checkbox>
+                )
+              })}
+            </>
+          )}
         </CheckboxGroup>
       </div>
 
       <div className="btns">
         <button onClick={closeModal}>Cancel</button>
-        {loading ? (
-          <button>
-            <img src="/loading.gif" alt="loading" />
-          </button>
-        ) : (
-          <button onClick={mergeModelAction}>Merge</button>
+        {dappModels.length !== 0 && (
+          <>
+            {loading ? (
+              <button>
+                <img src="/loading.gif" alt="loading" />
+              </button>
+            ) : (
+              <button onClick={mergeModelAction}>Merge</button>
+            )}
+          </>
         )}
       </div>
     </MergeModalBox>

diff --git a/packages/client/dashboard/src/components/ModelList.tsx b/packages/client/dashboard/src/components/ModelList.tsx
@@ -7,7 +7,7 @@ import { Modal, ModalOverlay } from 'react-aria-components'
 import PlusIcon from './Icons/PlusIcon'
 import { useNavigate } from 'react-router-dom'
 import useSelectedDapp from '../hooks/useSelectedDapp'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { ModelStream } from '../types'
 import { getStarModels } from '../api'
 import { Network } from './Selector/EnumSelect'
@@ -73,8 +73,14 @@ export default function ModelList({
     [loadDapps, selectedDapp, session]
   )
 
+  const isFirstRenderRef = useRef(true)
+
   useEffect(() => {
-    setLoading(true)
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false
+      setLoading(true)
+    }
+
     loadModelsInfo().finally(() => setLoading(false))
   }, [loadModelsInfo])
 
@@ -145,10 +151,14 @@ export default function ModelList({
             setSelectModel(model)
           }}
           removeModelAction={async (id: string) => {
+            await removeModelFromDapp(id)
             if (id === selectModel?.stream_id) {
               setSelectModel(undefined)
+              setSelectModelId('')
+              setSelectModelName && setSelectModelName('')
+              setDappModels(undefined)
+              setSelected(undefined)
             }
-            await removeModelFromDapp(id)
           }}
         />
       )}

diff --git a/packages/client/dashboard/src/components/Nav.tsx b/packages/client/dashboard/src/components/Nav.tsx
@@ -83,30 +83,12 @@ export default function Nav({ appId }: { appId: string }) {
             )}
           </NavLink>
 
-          <div
-            className="item star"
-            onClick={() => {
-              if (!pathname.endsWith('explore')) {
-                navigate(`/dapp/${appId}/explore?filterStar=filter`)
-                return
-              }
-              if (filterStar) {
-                setSearchParams((params) => {
-                  params.delete('filterStar')
-                  return params
-                })
-              } else {
-                setSearchParams((params) => {
-                  params.set('filterStar', 'filter')
-                  return params
-                })
-              }
-            }}
-          >
-            {(filterStar && <StarGoldIcon />) || <StarIcon />}
-            <span>Favorite Models</span>
-          </div>
-
+          <NavLink to={`/dapp/${appId}/favorite?filterStar=filter`}>
+            <div className={'item star'}>
+              {(filterStar && <StarGoldIcon />) || <StarIcon />}
+              <span>Favorite Models</span>
+            </div>
+          </NavLink>
           <Link to={DOCS_URL} target="_blank">
             <div className="item">
               <DocIcon />
@@ -163,6 +145,11 @@ const NavContainer = styled.nav<{ open?: boolean }>`
         width: 150px;
         transition: opacity 0.09s ease-in-out;
       }
+
+      &.active {
+        background: #14171a;
+        color: #fff;
+      }
     }
 
     .top {