Merge pull request #162 from us3r-network/F-editorCode-ttang

F editor code ttang
us3r-network · Jul 10, 2023 · 9bf78e6 · 9bf78e6
2 parents fc97d33 + e5635cd
commit 9bf78e6
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 6 deletions.
diff --git a/packages/client/dashboard/src/components/CopyTint.tsx b/packages/client/dashboard/src/components/CopyTint.tsx
@@ -0,0 +1,47 @@
+import { useCallback, useState } from 'react'
+import CopyIcon from './Icons/CopyIcon'
+import styled from 'styled-components'
+
+export default function CopyTint({ data }: { data: string }) {
+  const [showCopyTint, setShowCopyTint] = useState(false)
+  const copyId = useCallback(async (appId: string) => {
+    try {
+      await navigator.clipboard.writeText(appId)
+      setShowCopyTint(true)
+      setTimeout(() => {
+        setShowCopyTint(false)
+      }, 2000)
+    } catch (error) {
+      console.error(error)
+    }
+  }, [])
+  return (
+    <CopyBox>
+      <button
+        onClick={() => {
+          copyId(data)
+        }}
+      >
+        <CopyIcon />
+      </button>
+      {showCopyTint && <span>Copied</span>}
+    </CopyBox>
+  )
+}
+
+const CopyBox = styled.div`
+  position: relative;
+  > span {
+    position: absolute;
+    font-size: 13px;
+    color: inherit;
+    left: 0;
+    bottom: -12px;
+    /* transform: translate(-50%, 50%); */
+  }
+  > button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`
diff --git a/packages/client/dashboard/src/components/CreateCompositeModal.tsx b/packages/client/dashboard/src/components/CreateCompositeModal.tsx
@@ -9,20 +9,39 @@ import { schemas } from '../utils/composedb-types/schemas'
 import useSelectedDapp from '../hooks/useSelectedDapp'
 import { createDappComposites } from '../api'
 import { useSession } from '@us3r-network/auth-with-rainbowkit'
+import { ModelStream } from '../types'
+
+const TINT_WORD = `# Edit the model's relation based on your business needs.
+# See Example below
+# https://composedb.js.org/docs/0.4.x/guides/data-modeling/relations-container-of-items
+
+`
 
 export default function CreateCompositeModal({
   closeModal,
   loadDappComposites,
+  dappModels,
 }: {
   closeModal: () => void
   loadDappComposites: () => Promise<void>
+  dappModels: ModelStream[]
 }) {
   const { selectedDapp } = useSelectedDapp()
   const session = useSession()
   const [submitting, setSubmitting] = useState(false)
   const [name, setName] = useState('')
   const [gqlSchema, setGqlSchema] = useState<PassedSchema>({
-    code: schemas.code,
+    code:
+      TINT_WORD +
+      dappModels
+        .map((item) => {
+          return `
+type ${item.stream_content.name} @loadModel(id: "${item.stream_id}") {
+  id: ID!
+}
+`
+        })
+        .join('\n'),
     libraries: schemas.library,
   })
 
@@ -84,6 +103,10 @@ export default function CreateCompositeModal({
             setGqlSchema(props)
           }}
           schema={gqlSchema}
+          sidebarExpanded={false}
+          routeState={{
+            code: 'on',
+          }}
         />
       </EditorBox>
       <div className="btns">

diff --git a/packages/client/dashboard/src/components/CreateNewModel.tsx b/packages/client/dashboard/src/components/CreateNewModel.tsx
@@ -68,6 +68,10 @@ export default function CreateNewModel({
             setGqlSchema(props)
           }}
           schema={gqlSchema}
+          sidebarExpanded={false}
+          routeState={{
+            code: 'on',
+          }}
         />
       </EditorBox>
       <div className="btns">

diff --git a/packages/client/dashboard/src/components/ModelList.tsx b/packages/client/dashboard/src/components/ModelList.tsx
@@ -20,6 +20,8 @@ import MergeModal from './MergeModal'
 import CreateNewModel from './CreateNewModel'
 import CreateCompositeModal from './CreateCompositeModal'
 import MergeIcon from './Icons/MergeIcon'
+import { shortPubKey } from '../utils/shortPubKey'
+import CopyTint from './CopyTint'
 
 export default function ModelList({
   editable,
@@ -58,13 +60,14 @@ export default function ModelList({
 
       const list = resp.data.data
       setDappModels(list)
-      if (list.length > 0 && !selectModel && !selectComposite) {
+      if (list.length > 0) {
         setSelectModel(list[0])
       }
     } catch (error) {
       console.error(error)
     }
-  }, [selectComposite, selectModel, selectedDapp, setSelectModel])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDapp])
 
   const loadDappComposites = useCallback(async () => {
     if (!session) return
@@ -218,7 +221,10 @@ export default function ModelList({
           <div className="title">
             <h3>Composites</h3>
             {editable && (
-              <CreateComposite loadDappComposites={loadDappComposites} />
+              <CreateComposite
+                loadDappComposites={loadDappComposites}
+                dappModels={dappModels || []}
+              />
             )}
           </div>
 
@@ -353,8 +359,16 @@ function DappModelList({
             {active && (
               <>
                 <hr />
+                <div className="id-copy">
+                  <p>ID: {shortPubKey(selected.stream_id, { len: 7 })}</p>
+                  <div>
+                    <CopyTint data={selected.stream_id} />
+                  </div>
+                </div>
                 <p>{selected.stream_content.description}</p>
-                <p>Streams:{selected.useCount}</p>
+                <p>
+                  Streams: <span>{selected.useCount}</span>
+                </p>
               </>
             )}
           </div>
@@ -443,8 +457,10 @@ function CreateNew() {
 
 function CreateComposite({
   loadDappComposites,
+  dappModels,
 }: {
   loadDappComposites: () => Promise<void>
+  dappModels: ModelStream[]
 }) {
   return (
     <DialogTrigger>
@@ -458,6 +474,7 @@ function CreateComposite({
               <CreateCompositeModal
                 closeModal={close}
                 loadDappComposites={loadDappComposites}
+                dappModels={dappModels}
               />
             )}
           </Dialog>
@@ -536,6 +553,16 @@ const DappModelsListBox = styled.div`
     background: rgba(113, 128, 150, 0.3);
     border: 1px solid #718096;
     border-radius: 12px;
+
+    .id-copy {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      > p {
+        margin: 0;
+      }
+    }
   }
 
   hr {
@@ -545,6 +572,14 @@ const DappModelsListBox = styled.div`
 
   p {
     color: #718096;
+    > span {
+      color: #ffffff;
+      font-size: 16px;
+      font-family: Rubik;
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+    }
   }
 
   .removing {

diff --git a/packages/client/dashboard/src/components/Selector/DappSelector.tsx b/packages/client/dashboard/src/components/Selector/DappSelector.tsx
@@ -24,7 +24,6 @@ export default function DappSelector({
       items={dappItems}
       selectedKey={Number(selected)}
       onSelectionChange={(k) => {
-        console.log({ k })
         if (k === 0) {
           navigate('/dapp/create')
           return