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

Dashboard dev
us3r-network · Jun 26, 2023 · 47d0894 · 47d0894
2 parents 2fac848 + bf03b9a
commit 47d0894
Show file tree

Hide file tree

Showing 52 changed files with 1,910 additions and 256 deletions.
diff --git a/packages/client/dashboard/public/components-banner.png b/packages/client/dashboard/public/components-banner.png
diff --git a/packages/client/dashboard/public/dapp-home/f1.png b/packages/client/dashboard/public/dapp-home/f1.png
diff --git a/packages/client/dashboard/public/dapp-home/f2.png b/packages/client/dashboard/public/dapp-home/f2.png
diff --git a/packages/client/dashboard/public/dapp-home/f3.png b/packages/client/dashboard/public/dapp-home/f3.png
diff --git a/packages/client/dashboard/public/dapp-home/f4.png b/packages/client/dashboard/public/dapp-home/f4.png
diff --git a/packages/client/dashboard/public/dapp-home/f5.png b/packages/client/dashboard/public/dapp-home/f5.png
diff --git a/packages/client/dashboard/public/dapp-home/step1-0.png b/packages/client/dashboard/public/dapp-home/step1-0.png
diff --git a/packages/client/dashboard/public/dapp-home/step1-1.png b/packages/client/dashboard/public/dapp-home/step1-1.png
diff --git a/packages/client/dashboard/public/dapp-home/step1-2.png b/packages/client/dashboard/public/dapp-home/step1-2.png
diff --git a/packages/client/dashboard/public/dapp-home/step2.png b/packages/client/dashboard/public/dapp-home/step2.png
diff --git a/packages/client/dashboard/public/dapp-home/step3.png b/packages/client/dashboard/public/dapp-home/step3.png
diff --git a/packages/client/dashboard/public/dapp-home/step4.png b/packages/client/dashboard/public/dapp-home/step4.png
diff --git a/packages/client/dashboard/public/fonts/Rubik-Bold.ttf b/packages/client/dashboard/public/fonts/Rubik-Bold.ttf
diff --git a/packages/client/dashboard/public/fonts/Rubik-BoldItalic.ttf b/packages/client/dashboard/public/fonts/Rubik-BoldItalic.ttf
diff --git a/packages/client/dashboard/public/fonts/Rubik-Medium.ttf b/packages/client/dashboard/public/fonts/Rubik-Medium.ttf
diff --git a/packages/client/dashboard/public/fonts/Rubik-Regular.ttf b/packages/client/dashboard/public/fonts/Rubik-Regular.ttf
diff --git a/packages/client/dashboard/public/index.html b/packages/client/dashboard/public/index.html
@@ -25,6 +25,36 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>%REACT_APP_NAME%</title>
+    <style>
+      @font-face {
+        font-family: 'Rubik';
+        src: url('/fonts/Rubik-BoldItalic.ttf') format('truetype');
+        font-style: normal;
+        font-weight: 900;
+        font-display: block;
+      }
+      @font-face {
+        font-family: 'Rubik';
+        src: url('/fonts/Rubik-Bold.ttf') format('truetype');
+        font-style: normal;
+        font-weight: bold;
+        font-display: block;
+      }
+      @font-face {
+        font-family: 'Rubik';
+        src: url('/fonts/Rubik-Medium.ttf') format('truetype');
+        font-style: normal;
+        font-weight: 500;
+        font-display: block;
+      }
+      @font-face {
+        font-family: 'Rubik';
+        src: url('/fonts/Rubik-Regular.ttf') format('truetype');
+        font-style: normal;
+        font-weight: normal;
+        font-display: block;
+      }
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/packages/client/dashboard/src/App.tsx b/packages/client/dashboard/src/App.tsx
@@ -21,8 +21,11 @@ import ExploreModel from './container/ExploreModel'
 import DappModelEditor from './container/DappModelEditor'
 import DappModelPlayground from './container/DappModelPlayground'
 import DappDataStatistic from './container/DappDataStatistic'
+import Components from './container/Components'
+
 import { useState } from 'react'
 import ModelList from './components/ModelList'
+import { DappComposite, ModelStream } from './types'
 
 dayjs.extend(relativeTime)
 
@@ -42,6 +45,7 @@ function Routers() {
           <Route path="info" element={<DappInfo />} />
           <Route path="explore" element={<ExploreModel />} />
           <Route path="favorite" element={<ExploreModel />} />
+          <Route path="components" element={<Components />} />
         </Route>
       </Route>
       <Route path="*" element={<NoMatch />} />
@@ -97,22 +101,30 @@ function DappLayout() {
 }
 
 function ModelEditorLayout() {
-  const [selectModelId, setSelectModelId] = useState<string>('')
-  const [selectModelName, setSelectModelName] = useState<string>('')
+  const [selectModel, setSelectModel] = useState<ModelStream>()
+  const [selectComposite, setSelectComposite] = useState<DappComposite>()
 
   const { pathname } = useLocation()
 
   return (
     <EditorLayoutContainer>
       <ModelList
-        setSelectModelId={setSelectModelId}
-        setSelectModelName={setSelectModelName}
+        selectModel={selectModel}
+        setSelectModel={(data) => {
+          setSelectModel(data)
+          setSelectComposite(undefined)
+        }}
+        setSelectComposite={(data) => {
+          setSelectModel(undefined)
+          setSelectComposite(data)
+        }}
+        selectComposite={selectComposite}
         editable={pathname.includes('model-editor')}
       />
       <Outlet
         context={{
-          selectModelId,
-          selectModelName,
+          selectModel,
+          selectComposite,
         }}
       />
     </EditorLayoutContainer>

diff --git a/packages/client/dashboard/src/api/index.ts b/packages/client/dashboard/src/api/index.ts
@@ -2,6 +2,7 @@ import axios, { AxiosPromise } from 'axios'
 import { APP_API_URL, UPLOAD_API_URL } from '../constants'
 import {
   ClientDApp,
+  DappComposite,
   ModeCreateResult,
   ModeQueryResult,
   ModelMid,
@@ -195,3 +196,64 @@ export function getModelInfo({
     },
   })
 }
+
+export function getDappComposites({
+  dapp: { id },
+  didSession,
+}: {
+  dapp: ClientDApp
+  didSession: string
+}): AxiosPromise<ApiResp<DappComposite[]>> {
+  let host = APP_API_URL
+
+  return axios({
+    url: host + `/dapps/${id}/composites`,
+    method: 'GET',
+    headers: {
+      'did-session': didSession,
+    },
+  })
+}
+
+export function createDappComposites({
+  didSession,
+  dapp,
+  data,
+  name,
+}: {
+  didSession: string
+  dapp: ClientDApp
+  data: string
+  name: string
+}) {
+  let host = APP_API_URL
+  return axios({
+    url: host + `/dapps/${dapp.id}/composites`,
+    method: 'POST',
+    headers: {
+      'did-session': didSession,
+    },
+    data: { graphql: data, name },
+  })
+}
+
+export function updateDappComposites() {}
+
+export function deleteDappComposites({
+  compositeId,
+  dapp,
+  didSession,
+}: {
+  compositeId: number
+  dapp: ClientDApp
+  didSession: string
+}) {
+  let host = APP_API_URL
+  return axios({
+    url: host + `/dapps/${dapp.id}/composites/${compositeId}`,
+    method: 'DELETE',
+    headers: {
+      'did-session': didSession,
+    },
+  })
+}
diff --git a/packages/client/dashboard/src/components/CompositeDefinition.tsx b/packages/client/dashboard/src/components/CompositeDefinition.tsx
@@ -0,0 +1,199 @@
+import { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import FileSaver from 'file-saver'
+import { GraphQLEditor, PassedSchema } from 'graphql-editor'
+import { DappComposite } from '../types'
+import { schemas } from '../utils/composedb-types/schemas'
+
+export default function CompositeDefinition({
+  composite,
+}: {
+  composite: DappComposite
+}) {
+  const [gqlSchema, setGqlSchema] = useState<PassedSchema>({
+    code: composite.graphql,
+    libraries: schemas.library,
+  })
+
+  useEffect(() => {
+    setGqlSchema({
+      code: composite.graphql,
+      libraries: schemas.library,
+    })
+  }, [composite])
+
+  const download = (text: string, filename: string) => {
+    const blob = new Blob([text], {
+      type: 'text/plain;charset=utf-8',
+    })
+
+    FileSaver.saveAs(blob, filename)
+  }
+
+  return (
+    <DefinitionBox>
+      <div className="title">
+        <span>{composite.name}</span>
+      </div>
+      <EditorBox>
+        <GraphQLEditor
+          setSchema={(props) => {
+            setGqlSchema(props)
+          }}
+          schema={gqlSchema}
+        />
+      </EditorBox>
+      <ResultBox>
+        {composite.composite && (
+          <div>
+            <div className="title">
+              <h3>Model's composite</h3>
+              <button
+                onClick={() => {
+                  download(composite.composite, 'composite.json')
+                }}
+              >
+                Download
+              </button>
+            </div>
+            <div className="result-text">
+              <pre>
+                <code>
+                  {JSON.stringify(JSON.parse(composite.composite), null, 2)}
+                </code>
+              </pre>
+            </div>
+          </div>
+        )}
+        {composite.runtimeDefinition && (
+          <div>
+            <div className="title">
+              <h3>Model's runtime definition</h3>
+              <button
+                onClick={() => {
+                  download(
+                    `// This is an auto-generated file, do not edit manually
+  export const definition = ${composite.runtimeDefinition}`,
+                    'runtime-composite.js'
+                  )
+                }}
+              >
+                Download
+              </button>
+            </div>
+            <div className="result-text">
+              <pre>
+                <code>
+                  {JSON.stringify(
+                    JSON.parse(composite.runtimeDefinition),
+                    null,
+                    2
+                  )}
+                </code>
+              </pre>
+            </div>
+          </div>
+        )}
+      </ResultBox>
+    </DefinitionBox>
+  )
+}
+
+const DefinitionBox = styled.div`
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #14171a;
+    margin-bottom: 20px;
+
+    > span {
+      font-style: italic;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: #ffffff;
+    }
+  }
+`
+
+const EditorBox = styled.div`
+  height: calc(100vh - 300px);
+  max-height: 800px;
+  background: #14171a;
+  border: 1px solid #39424c;
+  border-radius: 20px;
+  overflow: hidden;
+  width: inherit;
+  * {
+    box-sizing: border-box;
+  }
+`
+
+const ResultBox = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  > div {
+    background: #1b1e23;
+    border: 1px solid #39424c;
+    border-radius: 20px;
+    overflow: hidden;
+  }
+  div {
+    margin: 20px 0px;
+    padding: 10px;
+    box-sizing: border-box;
+    background-color: #1a1a1c;
+    .title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 0;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      font-style: italic;
+      color: #ffffff;
+
+      button {
+        background: #ffffff;
+      }
+
+      h3 {
+        margin: 0;
+        padding: 0;
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 24px;
+      }
+    }
+  }
+  .result-text {
+    word-wrap: break-word;
+    color: #718096;
+    overflow: scroll;
+    width: 100%;
+  }
+
+  button {
+    cursor: pointer;
+    border: none;
+    outline: none;
+    /* width: 100px; */
+    padding: 0 15px;
+    height: 36px;
+
+    border-radius: 100px;
+    background: #14171a;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+    font-weight: 400;
+    color: #a0aec0;
+    text-transform: capitalize;
+    background: #718096;
+    font-weight: 500;
+    color: #14171a;
+  }
+`