feat: tcp endpoints

CSUwangj · CSUwangj · commit 6ca64eaf9e3d · 2022-10-05T04:29:22.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode
diff --git a/package-lock.json b/package-lock.json
diff --git a/schema/fragment.gql b/schema/fragment.gql
@@ -3,9 +3,12 @@ fragment Endpoint on Endpoint {
   port
 }
 
-fragment LabWithoutEndpoint on Lab {
+fragment LabWithEndpoint on Lab {
   id
-  endpoints {
+  wsEndpoints {
+    ...Endpoint
+  }
+  tcpEndpoints {
     ...Endpoint
   }
   resources {
@@ -19,7 +22,7 @@ fragment LabCategory on LabCategory {
     ...Translation
   }
   labs {
-    ...LabWithoutEndpoint
+    ...LabWithEndpoint
   }
 }
 
@@ -33,7 +36,10 @@ fragment LabInstance on LabInstance {
   lang
   name
   content
-  endpoints {
+  wsEndpoints {
+    ...Endpoint
+  }
+  tcpEndpoints {
     ...Endpoint
   }
 }
diff --git a/schema/schema.gql b/schema/schema.gql
@@ -8,7 +8,8 @@ type Endpoint {
 
 type Lab {
   id: String!
-  endpoints: [Endpoint!]!
+  wsEndpoints: [Endpoint!]!
+  tcpEndpoints: [Endpoint!]!
   resources: [ResourceWithTranslation!]!
 }
 
@@ -22,7 +23,8 @@ type LabInstance {
   lang: String!
   name: String!
   content: String!
-  endpoints: [Endpoint!]!
+  wsEndpoints: [Endpoint!]!
+  tcpEndpoints: [Endpoint!]!
 }
 
 type Practice {
diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx
@@ -3,6 +3,9 @@ import * as ApolloReactCommon from '@apollo/client';
 import * as ApolloReactHooks from '@apollo/client';
 export type Maybe<T> = T | null;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+const defaultOptions =  {}
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
   ID: string;
@@ -22,7 +25,8 @@ export type Endpoint = {
 export type Lab = {
   __typename?: 'Lab';
   id: Scalars['String'];
-  endpoints: Array<Endpoint>;
+  wsEndpoints: Array<Endpoint>;
+  tcpEndpoints: Array<Endpoint>;
   resources: Array<ResourceWithTranslation>;
 };
 
@@ -38,11 +42,12 @@ export type LabInstance = {
   lang: Scalars['String'];
   name: Scalars['String'];
   content: Scalars['String'];
-  endpoints: Array<Endpoint>;
+  wsEndpoints: Array<Endpoint>;
+  tcpEndpoints: Array<Endpoint>;
 };
 
 export type Practice = {
-  __typename?: 'nav.practice';
+  __typename?: 'Practice';
   labCategories: Array<LabCategory>;
 };
 
@@ -77,10 +82,13 @@ export type EndpointFragment = (
   & Pick<Endpoint, 'host' | 'port'>
 );
 
-export type LabWithoutEndpointFragment = (
+export type LabWithEndpointFragment = (
   { __typename?: 'Lab' }
   & Pick<Lab, 'id'>
-  & { endpoints: Array<(
+  & { wsEndpoints: Array<(
+    { __typename?: 'Endpoint' }
+    & EndpointFragment
+  )>, tcpEndpoints: Array<(
     { __typename?: 'Endpoint' }
     & EndpointFragment
   )>, resources: Array<(
@@ -97,12 +105,12 @@ export type LabCategoryFragment = (
     & TranslationFragment
   )>, labs: Array<(
     { __typename?: 'Lab' }
-    & LabWithoutEndpointFragment
+    & LabWithEndpointFragment
   )> }
 );
 
 export type PracticeFragment = (
-  { __typename?: 'nav.practice' }
+  { __typename?: 'Practice' }
   & { labCategories: Array<(
     { __typename?: 'LabCategory' }
     & LabCategoryFragment
@@ -112,7 +120,10 @@ export type PracticeFragment = (
 export type LabInstanceFragment = (
   { __typename?: 'LabInstance' }
   & Pick<LabInstance, 'lang' | 'name' | 'content'>
-  & { endpoints: Array<(
+  & { wsEndpoints: Array<(
+    { __typename?: 'Endpoint' }
+    & EndpointFragment
+  )>, tcpEndpoints: Array<(
     { __typename?: 'Endpoint' }
     & EndpointFragment
   )> }
@@ -142,7 +153,7 @@ export type PracticesQueryVariables = Exact<{ [key: string]: never; }>;
 export type PracticesQuery = (
   { __typename?: 'Query' }
   & { practice: (
-    { __typename?: 'nav.practice' }
+    { __typename?: 'Practice' }
     & PracticeFragment
   ) }
 );
@@ -180,10 +191,13 @@ export const ResourceWithTranslationFragmentDoc = gql`
   name
 }
     `;
-export const LabWithoutEndpointFragmentDoc = gql`
-    fragment LabWithoutEndpoint on Lab {
+export const LabWithEndpointFragmentDoc = gql`
+    fragment LabWithEndpoint on Lab {
   id
-  endpoints {
+  wsEndpoints {
+    ...Endpoint
+  }
+  tcpEndpoints {
     ...Endpoint
   }
   resources {
@@ -199,11 +213,11 @@ export const LabCategoryFragmentDoc = gql`
     ...Translation
   }
   labs {
-    ...LabWithoutEndpoint
+    ...LabWithEndpoint
   }
 }
     ${TranslationFragmentDoc}
-${LabWithoutEndpointFragmentDoc}`;
+${LabWithEndpointFragmentDoc}`;
 export const PracticeFragmentDoc = gql`
     fragment Practice on Practice {
   labCategories {
@@ -216,7 +230,10 @@ export const LabInstanceFragmentDoc = gql`
   lang
   name
   content
-  endpoints {
+  wsEndpoints {
+    ...Endpoint
+  }
+  tcpEndpoints {
     ...Endpoint
   }
 }
@@ -243,10 +260,12 @@ export const HelloDocument = gql`
  * });
  */
 export function useHelloQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<HelloQuery, HelloQueryVariables>) {
-        return ApolloReactHooks.useQuery<HelloQuery, HelloQueryVariables>(HelloDocument, baseOptions);
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<HelloQuery, HelloQueryVariables>(HelloDocument, options);
       }
 export function useHelloLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<HelloQuery, HelloQueryVariables>) {
-          return ApolloReactHooks.useLazyQuery<HelloQuery, HelloQueryVariables>(HelloDocument, baseOptions);
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<HelloQuery, HelloQueryVariables>(HelloDocument, options);
         }
 export type HelloQueryHookResult = ReturnType<typeof useHelloQuery>;
 export type HelloLazyQueryHookResult = ReturnType<typeof useHelloLazyQuery>;
@@ -275,10 +294,12 @@ export const PracticesDocument = gql`
  * });
  */
 export function usePracticesQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<PracticesQuery, PracticesQueryVariables>) {
-        return ApolloReactHooks.useQuery<PracticesQuery, PracticesQueryVariables>(PracticesDocument, baseOptions);
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<PracticesQuery, PracticesQueryVariables>(PracticesDocument, options);
       }
 export function usePracticesLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<PracticesQuery, PracticesQueryVariables>) {
-          return ApolloReactHooks.useLazyQuery<PracticesQuery, PracticesQueryVariables>(PracticesDocument, baseOptions);
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<PracticesQuery, PracticesQueryVariables>(PracticesDocument, options);
         }
 export type PracticesQueryHookResult = ReturnType<typeof usePracticesQuery>;
 export type PracticesLazyQueryHookResult = ReturnType<typeof usePracticesLazyQuery>;
@@ -309,11 +330,13 @@ export const LabDocument = gql`
  *   },
  * });
  */
-export function useLabQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<LabQuery, LabQueryVariables>) {
-        return ApolloReactHooks.useQuery<LabQuery, LabQueryVariables>(LabDocument, baseOptions);
+export function useLabQuery(baseOptions: ApolloReactHooks.QueryHookOptions<LabQuery, LabQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<LabQuery, LabQueryVariables>(LabDocument, options);
       }
 export function useLabLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<LabQuery, LabQueryVariables>) {
-          return ApolloReactHooks.useLazyQuery<LabQuery, LabQueryVariables>(LabDocument, baseOptions);
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<LabQuery, LabQueryVariables>(LabDocument, options);
         }
 export type LabQueryHookResult = ReturnType<typeof useLabQuery>;
 export type LabLazyQueryHookResult = ReturnType<typeof useLabLazyQuery>;
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -15,6 +15,7 @@ i18n
     resources: {
       'en-US': {
         translations: {
+          'quote': ': ',
           'nav': {
             'home': 'Cryptography Learning Platform',
             'tutorial': 'Tutorial',
@@ -51,7 +52,8 @@ i18n
             'etc-contact': 'You really can give a help hand at CSUwangj@protonmail.com.'
           },
           'lab': {
-            'endpoint': 'Endpoint ',
+            'ws_endpoint': 'Web Endpoint ',
+            'tcp_endpoint': 'Raw TCP Endpoint ',
             'clear': 'Clear'
           },
           'wip': 'Work In Progress',
@@ -63,6 +65,7 @@ i18n
       },
       'zh-CN': {
         translations: {
+          'quote': '：',
           'nav': {
             'home': '密码学学习平台',
             'tutorial': '教程',
@@ -100,7 +103,8 @@ i18n
           },
           'wip': '施工中',
           'lab': {
-            'endpoint': '服务器 ',
+            'ws_endpoint': '网页节点 ',
+            'tcp_endpoint': 'TCP节点 ',
             'clear': '关闭所有'
           },
           i18n: {
diff --git a/src/pages/practice/Lab.tsx b/src/pages/practice/Lab.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useApolloData } from 'hooks/common'
 import { useTranslation } from 'react-i18next'
 import { Endpoint, useLabQuery } from 'generated/graphql'
-import { Button, Card, H3, Intent } from '@blueprintjs/core'
+import { Button, Card, H3, H4, Intent } from '@blueprintjs/core'
 import { useRouteMatch } from 'react-router-dom'
 import { Markdown } from 'components/Markdown'
 import styled from '@emotion/styled/macro'
@@ -35,12 +35,24 @@ const Container = styled.div`
 const BlockWrapper = styled(Card)`
   margin-top: 20px;
 `
-const EndpointContainer = styled(BlockWrapper)`
+const WSEndpointContainer = styled(BlockWrapper)`
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: space-around;
 `
+const TCPEndpointsContainer = styled(BlockWrapper)`
+  display: flex;
+  flex-flow: column wrap;
+  align-items: center;
+  justify-content: space-around;
+`
+
+const TCPEndpointWrapper = styled(Div)`
+  display: flex;
+  align-items: center;
+`
+
 interface Match {
   category: string
   lab: string
@@ -60,25 +72,39 @@ export const Page: React.FC = () => {
   const [ terminals, setTermianls ] = useState<Endpoint[]>([])
 
   const content = useApolloData(query, (data) => {
-    const endpoints = data.lab.endpoints
+    const wsEndpoints = data.lab.wsEndpoints
+    const tcpEndpoints = data.lab.tcpEndpoints
     return <>
       <Markdown source={data.lab.content}></Markdown>
       {
-        !!endpoints.length && <EndpointContainer>
+        !!tcpEndpoints.length && <TCPEndpointsContainer>
+          {
+            tcpEndpoints.map((endpoint, id) => {
+              const source = `\`\`\` bash\nnc ${endpoint.host} ${endpoint.port}\n\`\`\``
+              return <TCPEndpointWrapper key={id}>
+                <H4>{t('lab.tcp_endpoint') + id.toString() + t('quote')}</H4>
+                <Markdown source={source} key={id}></Markdown>
+              </TCPEndpointWrapper>
+            })
+          }
+        </TCPEndpointsContainer>
+      }
+      {
+        !!wsEndpoints.length && <WSEndpointContainer>
           {
-            endpoints.map((endpoint, id) => {
+            wsEndpoints.map((endpoint, id) => {
               const onClick = () => {
                 if(terminals.find(term => term === endpoint)) {
                   setTermianls(terminals.filter(term => term !== endpoint))
                 } else {
                   setTermianls(terminals.concat([endpoint]))
                 }
               }
-              return <Button key={id} onClick={onClick}intent={Intent.PRIMARY} outlined={true}>{t('lab.endpoint') + id.toString()}</Button>
+              return <Button key={id} onClick={onClick}intent={Intent.PRIMARY} outlined={true}>{t('lab.ws_endpoint') + id.toString()}</Button>
             })
           }
           <Button onClick={() => setTermianls([])} intent={Intent.DANGER} outlined={true}>{t('lab.clear')}</Button>
-        </EndpointContainer>
+        </WSEndpointContainer>
       }
     </>
   })

Original file line number	Diff line number	Diff line change
`@@ -3,9 +3,12 @@ fragment Endpoint on Endpoint {`
`3`	`3`	`port`
`4`	`4`	`}`
`5`	`5`
`6`		`-fragment LabWithoutEndpoint on Lab {`
	`6`	`+fragment LabWithEndpoint on Lab {`
`7`	`7`	`id`
`8`		`- endpoints {`
	`8`	`+ wsEndpoints {`
	`9`	`+ ...Endpoint`
	`10`	`+ }`
	`11`	`+ tcpEndpoints {`
`9`	`12`	`...Endpoint`
`10`	`13`	`}`
`11`	`14`	`resources {`
`@@ -19,7 +22,7 @@ fragment LabCategory on LabCategory {`
`19`	`22`	`...Translation`
`20`	`23`	`}`
`21`	`24`	`labs {`
`22`		`- ...LabWithoutEndpoint`
	`25`	`+ ...LabWithEndpoint`
`23`	`26`	`}`
`24`	`27`	`}`
`25`	`28`
`@@ -33,7 +36,10 @@ fragment LabInstance on LabInstance {`
`33`	`36`	`lang`
`34`	`37`	`name`
`35`	`38`	`content`
`36`		`- endpoints {`
	`39`	`+ wsEndpoints {`
	`40`	`+ ...Endpoint`
	`41`	`+ }`
	`42`	`+ tcpEndpoints {`
`37`	`43`	`...Endpoint`
`38`	`44`	`}`
`39`	`45`	`}`