From 22684ccb43fd3b966fa20850b75ea2a740e8fd43 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira Date: Mon, 19 Aug 2024 09:53:16 -0300 Subject: [PATCH 1/4] feat: add blueprint code to the blueprint detail screen --- package-lock.json | 9 +++++++++ package.json | 1 + src/api/nanoApi.js | 16 +++++++++++++++ src/index.js | 1 + src/index.scss | 4 ++++ src/screens/nano/BlueprintDetail.js | 31 ++++++++++++++++++++++------- 6 files changed, 55 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index c372c42e..a3c66d75 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "d3-selection": "3.0.0", "d3-zoom": "3.0.0", "font-awesome": "4.7.0", + "highlight.js": "^11.10.0", "jquery": "3.7.1", "lodash": "4.17.21", "npm-run-all": "4.1.5", @@ -11881,6 +11882,14 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "node_modules/highlight.js": { + "version": "11.10.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz", + "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/history": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", diff --git a/package.json b/package.json index d2135905..0d1df4fb 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "d3-selection": "3.0.0", "d3-zoom": "3.0.0", "font-awesome": "4.7.0", + "highlight.js": "^11.10.0", "jquery": "3.7.1", "lodash": "4.17.21", "npm-run-all": "4.1.5", diff --git a/src/api/nanoApi.js b/src/api/nanoApi.js index d0d2d151..23b9294c 100644 --- a/src/api/nanoApi.js +++ b/src/api/nanoApi.js @@ -67,6 +67,22 @@ const nanoApi = { } ); }, + + /** + * Get the blueprint source code + * + * @param {string} blueprintId ID of the blueprint + * + * For more details, see full node api docs + */ + getBlueprintSourceCode(blueprintId) { + const data = { blueprint_id: blueprintId }; + return requestExplorerServiceV1.get(`node_api/nc_blueprint_source_code`, {params: data}).then((res) => { + return res.data + }, (res) => { + throw new Error(res.data.message); + }); + }, }; export default nanoApi; diff --git a/src/index.js b/src/index.js index b201b5fe..63bfd96f 100644 --- a/src/index.js +++ b/src/index.js @@ -13,6 +13,7 @@ import App from './App'; import 'bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; import 'font-awesome/css/font-awesome.min.css'; +import 'highlight.js/styles/github.css'; import './index.css'; import store from './store/index'; diff --git a/src/index.scss b/src/index.scss index 37289a7c..7c6eee8b 100644 --- a/src/index.scss +++ b/src/index.scss @@ -629,4 +629,8 @@ th.sortable { .table-method-arguments tbody tr { background-color: transparent !important; +} + +.source-code { + background-color: #f2f2f2; } \ No newline at end of file diff --git a/src/screens/nano/BlueprintDetail.js b/src/screens/nano/BlueprintDetail.js index 0fd7f1fd..f86c6223 100644 --- a/src/screens/nano/BlueprintDetail.js +++ b/src/screens/nano/BlueprintDetail.js @@ -5,12 +5,16 @@ * LICENSE file in the root directory of this source tree. */ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import Loading from '../../components/Loading'; import nanoApi from '../../api/nanoApi'; +import hljs from 'highlight.js/lib/core'; +import python from 'highlight.js/lib/languages/python'; + +hljs.registerLanguage('python', python); /** - * Details of a Nano Contract + * Details of a Blueprint * * @memberof Screens */ @@ -19,11 +23,15 @@ function BlueprintDetail(props) { // blueprintInformation {Object | null} Blueprint information const [blueprintInformation, setBlueprintInformation] = useState(null); + // blueprintSourceCode {string | null} Blueprint source code + const [blueprintSourceCode, setBlueprintSourceCode] = useState(null); // loading {boolean} Bool to show/hide loading when getting blueprint information const [loading, setLoading] = useState(true); // errorMessage {string | null} Error message in case a request to get nano contract data fails const [errorMessage, setErrorMessage] = useState(null); + const codeRef = useRef(); + useEffect(() => { let ignore = false; @@ -32,18 +40,20 @@ function BlueprintDetail(props) { setBlueprintInformation(null); try { const blueprintInformation = await nanoApi.getBlueprintInformation(blueprintId); + const blueprintSourceCode = await nanoApi.getBlueprintSourceCode(blueprintId); if (ignore) { // This is to prevent setting a state after the component has been already cleaned return; } setBlueprintInformation(blueprintInformation); - setLoading(false); + setBlueprintSourceCode(blueprintSourceCode.source_code); } catch (e) { if (ignore) { // This is to prevent setting a state after the component has been already cleaned return; } setErrorMessage('Error getting blueprint information.'); + } finally { setLoading(false); } } @@ -54,6 +64,12 @@ function BlueprintDetail(props) { }; }, [blueprintId]); + useEffect(() => { + if (codeRef && codeRef.current) { + hljs.highlightBlock(codeRef.current); + } + }, [blueprintSourceCode]); + if (errorMessage) { return

{errorMessage}

; } @@ -132,10 +148,11 @@ function BlueprintDetail(props) { {blueprintInformation.name}

Attributes

- {renderBlueprintAttributes()} - {renderBlueprintMethods('public_methods', 'Public Methods')} - {renderBlueprintMethods('private_methods', 'Private Methods')} -
+ { renderBlueprintAttributes() } + { renderBlueprintMethods('public_methods', 'Public Methods') } + { renderBlueprintMethods('private_methods', 'Private Methods') } +

Source Code

+ 
{blueprintSourceCode}
); From 1ffaaeaea198e95146c39ddc2f3e7c6652e850a9 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira Date: Mon, 19 Aug 2024 20:39:37 -0300 Subject: [PATCH 2/4] feat: add animation to show/hide source code --- src/index.scss | 19 ++++++++++++++++++- src/screens/nano/BlueprintDetail.js | 23 +++++++++++++++++++++-- 2 files changed, 39 insertions(+), 3 deletions(-) diff --git a/src/index.scss b/src/index.scss index 7c6eee8b..384d7d6b 100644 --- a/src/index.scss +++ b/src/index.scss @@ -631,6 +631,23 @@ th.sortable { background-color: transparent !important; } -.source-code { +.source-code code { background-color: #f2f2f2; +} + +.source-code pre { + height: 100%; +} + +.source-code { + -webkit-transition: all 1s ease; + -moz-transition: all 1s ease; + transition: all 1s ease; + height: 0; + opacity: 0; +} + +.source-code.show { + height: auto !important; + opacity: 1 !important; } \ No newline at end of file diff --git a/src/screens/nano/BlueprintDetail.js b/src/screens/nano/BlueprintDetail.js index f86c6223..e5a4f1ec 100644 --- a/src/screens/nano/BlueprintDetail.js +++ b/src/screens/nano/BlueprintDetail.js @@ -29,6 +29,8 @@ function BlueprintDetail(props) { const [loading, setLoading] = useState(true); // errorMessage {string | null} Error message in case a request to get nano contract data fails const [errorMessage, setErrorMessage] = useState(null); + // showCode {boolean} If should show the blueprint source code + const [showCode, setShowCode] = useState(false); const codeRef = useRef(); @@ -135,6 +137,16 @@ function BlueprintDetail(props) { return `${name}(${parameters.join(', ')}): ${returnType === 'null' ? 'None' : returnType}`; }; + /** + * Handle toggle click to hide or show the blueprint source code + * + * @param {Event} e Click event + */ + const onToggleShowCode = (e) => { + e.preventDefault(); + setShowCode(!showCode); + } + return (

Blueprint Information

@@ -151,8 +163,15 @@ function BlueprintDetail(props) { { renderBlueprintAttributes() } { renderBlueprintMethods('public_methods', 'Public Methods') } { renderBlueprintMethods('private_methods', 'Private Methods') } -

Source Code

- 
{blueprintSourceCode}
+
+

Source Code

+ onToggleShowCode(e)}>{showCode ? 'Hide' : 'Show'} +
+
+ 
+            {blueprintSourceCode}
+
+
); From 802ae8fae5ef2e957c76d901e5141f5150e44ef3 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira Date: Mon, 19 Aug 2024 23:50:46 -0300 Subject: [PATCH 3/4] chore: apply linter and prettier code --- src/api/nanoApi.js | 13 ++++++++----- src/screens/nano/BlueprintDetail.js | 30 ++++++++++++++++------------- 2 files changed, 25 insertions(+), 18 deletions(-) diff --git a/src/api/nanoApi.js b/src/api/nanoApi.js index 23b9294c..e81a95a1 100644 --- a/src/api/nanoApi.js +++ b/src/api/nanoApi.js @@ -77,11 +77,14 @@ const nanoApi = { */ getBlueprintSourceCode(blueprintId) { const data = { blueprint_id: blueprintId }; - return requestExplorerServiceV1.get(`node_api/nc_blueprint_source_code`, {params: data}).then((res) => { - return res.data - }, (res) => { - throw new Error(res.data.message); - }); + return requestExplorerServiceV1.get(`node_api/nc_blueprint_source_code`, { params: data }).then( + res => { + return res.data; + }, + res => { + throw new Error(res.data.message); + } + ); }, }; diff --git a/src/screens/nano/BlueprintDetail.js b/src/screens/nano/BlueprintDetail.js index e5a4f1ec..7327c89f 100644 --- a/src/screens/nano/BlueprintDetail.js +++ b/src/screens/nano/BlueprintDetail.js @@ -6,10 +6,10 @@ */ import React, { useEffect, useRef, useState } from 'react'; -import Loading from '../../components/Loading'; -import nanoApi from '../../api/nanoApi'; import hljs from 'highlight.js/lib/core'; import python from 'highlight.js/lib/languages/python'; +import Loading from '../../components/Loading'; +import nanoApi from '../../api/nanoApi'; hljs.registerLanguage('python', python); @@ -41,14 +41,14 @@ function BlueprintDetail(props) { setLoading(true); setBlueprintInformation(null); try { - const blueprintInformation = await nanoApi.getBlueprintInformation(blueprintId); - const blueprintSourceCode = await nanoApi.getBlueprintSourceCode(blueprintId); + const blueprintInformationData = await nanoApi.getBlueprintInformation(blueprintId); + const blueprintSourceCodeData = await nanoApi.getBlueprintSourceCode(blueprintId); if (ignore) { // This is to prevent setting a state after the component has been already cleaned return; } - setBlueprintInformation(blueprintInformation); - setBlueprintSourceCode(blueprintSourceCode.source_code); + setBlueprintInformation(blueprintInformationData); + setBlueprintSourceCode(blueprintSourceCodeData.source_code); } catch (e) { if (ignore) { // This is to prevent setting a state after the component has been already cleaned @@ -142,10 +142,10 @@ function BlueprintDetail(props) { * * @param {Event} e Click event */ - const onToggleShowCode = (e) => { + const onToggleShowCode = e => { e.preventDefault(); setShowCode(!showCode); - } + }; return (
@@ -160,16 +160,20 @@ function BlueprintDetail(props) { {blueprintInformation.name}

Attributes

- { renderBlueprintAttributes() } - { renderBlueprintMethods('public_methods', 'Public Methods') } - { renderBlueprintMethods('private_methods', 'Private Methods') } + {renderBlueprintAttributes()} + {renderBlueprintMethods('public_methods', 'Public Methods')} + {renderBlueprintMethods('private_methods', 'Private Methods')}

Source Code

- onToggleShowCode(e)}>{showCode ? 'Hide' : 'Show'} + onToggleShowCode(e)}> + {showCode ? 'Hide' : 'Show'} + 
-            {blueprintSourceCode}
+            
+              {blueprintSourceCode}
+
From 40aba4857a7fec3680eddd1f6365dee1c2766d82 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira Date: Tue, 20 Aug 2024 14:42:03 -0300 Subject: [PATCH 4/4] chore: fix highlight dependency version --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index a3c66d75..ecad85e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "d3-selection": "3.0.0", "d3-zoom": "3.0.0", "font-awesome": "4.7.0", - "highlight.js": "^11.10.0", + "highlight.js": "11.10.0", "jquery": "3.7.1", "lodash": "4.17.21", "npm-run-all": "4.1.5", diff --git a/package.json b/package.json index 0d1df4fb..4e38e9ad 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "d3-selection": "3.0.0", "d3-zoom": "3.0.0", "font-awesome": "4.7.0", - "highlight.js": "^11.10.0", + "highlight.js": "11.10.0", "jquery": "3.7.1", "lodash": "4.17.21", "npm-run-all": "4.1.5",