From ed854142752d6c5d90b4256fb14170e71e115e6d Mon Sep 17 00:00:00 2001 From: Rajdeep Bharati Date: Fri, 10 Apr 2020 18:34:14 +0530 Subject: [PATCH] Refactor HelpCenter to make it more scalable. Create Guide and GuidesList components which fetch data from a REST API. Mock API available here: - https://my-json-server.typicode.com/am1e/sample-api/guidesList - https://my-json-server.typicode.com/am1e/sample-api/guidesList/1 Each Guide also has a list of steps. --- package-lock.json | 200 +++++++++++++++++++++++++++ package.json | 1 + src/components/HelpCenter.jsx | 11 +- src/components/guides/Guide.jsx | 37 +++++ src/components/guides/GuidesList.jsx | 66 +++++++++ 5 files changed, 313 insertions(+), 2 deletions(-) create mode 100644 src/components/guides/Guide.jsx create mode 100644 src/components/guides/GuidesList.jsx diff --git a/package-lock.json b/package-lock.json index 904bab7..1bf59ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2303,6 +2303,36 @@ } } }, + "@polkadot/react-identicon": { + "version": "0.48.1", + "resolved": "https://registry.npmjs.org/@polkadot/react-identicon/-/react-identicon-0.48.1.tgz", + "integrity": "sha512-ctGhMZ1MUFgnEtShTtRU0PUs+1vNM8JhHjcjEA/CiP8VhMRDxE6sFChZAJonSlT39MVP8rY60DhsSHBMciCIrw==", + "requires": { + "@babel/runtime": "^7.8.3", + "@polkadot/ui-settings": "^0.48.1", + "@polkadot/ui-shared": "^0.48.1", + "@types/react-copy-to-clipboard": "^4.3.0", + "color": "^3.1.2", + "jdenticon": "2.2.0", + "react-copy-to-clipboard": "^5.0.2", + "styled-components": "^5.0.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.9.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz", + "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "regenerator-runtime": { + "version": "0.13.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz", + "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==" + } + } + }, "@polkadot/rpc-core": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@polkadot/rpc-core/-/rpc-core-1.0.1.tgz", @@ -2528,6 +2558,56 @@ } } }, + "@polkadot/ui-settings": { + "version": "0.48.1", + "resolved": "https://registry.npmjs.org/@polkadot/ui-settings/-/ui-settings-0.48.1.tgz", + "integrity": "sha512-pUyNaMdTR4qDdsz6/lkpXJIojdZOeMKIkPuiXz+0Dc4ucZJns1p6LY/U2dfGoWEuWCiNQ39y7d54e3RGpMmh4w==", + "requires": { + "@babel/runtime": "^7.8.3", + "@types/store": "^2.0.2", + "store": "^2.0.12" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.9.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz", + "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "regenerator-runtime": { + "version": "0.13.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz", + "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==" + } + } + }, + "@polkadot/ui-shared": { + "version": "0.48.1", + "resolved": "https://registry.npmjs.org/@polkadot/ui-shared/-/ui-shared-0.48.1.tgz", + "integrity": "sha512-giXjkilv6WwrmuSh3rx1GewIsUdMA1kZVCQnJ+vqN2sMSC15ss/IL5xiq6gB2ZYJaGeIJPOzPS/ZG8vZNNyDsA==", + "requires": { + "@babel/runtime": "^7.8.3", + "@types/color": "^3.0.1", + "color": "^3.1.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.9.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz", + "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "regenerator-runtime": { + "version": "0.13.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz", + "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==" + } + } + }, "@polkadot/util": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@polkadot/util/-/util-2.0.1.tgz", @@ -3094,6 +3174,22 @@ "base-x": "^3.0.6" } }, + "@types/color": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.1.tgz", + "integrity": "sha512-oeUWVaAwI+xINDUx+3F2vJkl/vVB03VChFF/Gl3iQCdbcakjuoJyMOba+3BXRtnBhxZ7uBYqQBi9EpLnvSoztA==", + "requires": { + "@types/color-convert": "*" + } + }, + "@types/color-convert": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-1.9.0.tgz", + "integrity": "sha512-OKGEfULrvSL2VRbkl/gnjjgbbF7ycIlpSsX7Nkab4MOWi5XxmgBYvuiQ7lcCFY5cPDz7MUNaKgxte2VRmtr4Fg==", + "requires": { + "@types/color-name": "*" + } + }, "@types/color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", @@ -3196,6 +3292,14 @@ "csstype": "^2.2.0" } }, + "@types/react-copy-to-clipboard": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-4.3.0.tgz", + "integrity": "sha512-iideNPRyroENqsOFh1i2Dv3zkviYS9r/9qD9Uh3Z9NNoAAqqa2x53i7iGndGNnJFIo20wIu7Hgh77tx1io8bgw==", + "requires": { + "@types/react": "*" + } + }, "@types/react-dom": { "version": "16.9.4", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.4.tgz", @@ -3217,6 +3321,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==" }, + "@types/store": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/store/-/store-2.0.2.tgz", + "integrity": "sha512-ZPHnXkzmGMfk+pHqAGzTSpA9CbsHmJLgkvOl5w52LZ0XTxB1ZIHWZzQ7lEtjTNWScBbsQekg8TjApMXkMe4nkw==" + }, "@types/styled-system": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/@types/styled-system/-/styled-system-5.0.1.tgz", @@ -4155,6 +4264,17 @@ "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.5.tgz", "integrity": "sha512-sGhfINU+AuMw9oFAdIn/nD5sem3pn/WgxAfDZ//Q3CnF+5uaho7C7shh2rKLk6sKE/XkfmyibghocwKdVjLIKg==" }, + "babel-plugin-styled-components": { + "version": "1.10.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz", + "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11" + } + }, "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", @@ -4848,6 +4968,11 @@ } } }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -4864,6 +4989,11 @@ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001015.tgz", "integrity": "sha512-/xL2AbW/XWHNu1gnIrO8UitBGoFthcsDgU9VLK1/dpsoxbaD5LscHozKze05R6WLsBvLhqv78dAPozMFQBYLbQ==" }, + "canvas-renderer": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/canvas-renderer/-/canvas-renderer-2.1.1.tgz", + "integrity": "sha512-/V0XetN7s1Mk3NO7x2wxPZYv0pLMQtGAhecuOuKR88beiYCUle1AbCcFZNLu+4NVzi9RVHS0rXtIgzPEaKidLw==" + }, "capture-exit": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz", @@ -5932,6 +6062,11 @@ "postcss": "^7.0.5" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -6022,6 +6157,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -9233,6 +9378,15 @@ "handlebars": "^4.1.2" } }, + "jdenticon": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/jdenticon/-/jdenticon-2.2.0.tgz", + "integrity": "sha512-WGqwpjN9pab/Sah9pGnFH5tQc3HF3WbLV/tPVbykvk5nuAkxG/zhzQYWC2owvpnS+/A0HmlSx35rtY8kyN+x7Q==", + "requires": { + "@types/node": "*", + "canvas-renderer": "~2.1.1" + } + }, "jest": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/jest/-/jest-24.9.0.tgz", @@ -14126,6 +14280,15 @@ "@babel/runtime": "^7.0.0" } }, + "react-copy-to-clipboard": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz", + "integrity": "sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==", + "requires": { + "copy-to-clipboard": "^3", + "prop-types": "^15.5.8" + } + }, "react-dev-utils": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.0.0.tgz", @@ -15897,6 +16060,11 @@ "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz", "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=" }, + "store": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/store/-/store-2.0.12.tgz", + "integrity": "sha1-jFNOKguDH3K3X8XxEZhXxE711ZM=" + }, "stream-browserify": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", @@ -16064,6 +16232,38 @@ "schema-utils": "^2.0.1" } }, + "styled-components": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.1.0.tgz", + "integrity": "sha512-0Qs2wEkFBXHFlysz6CV831VG6HedcrFUwChjnWylNivsx14MtmqQsohi21rMHZxzuTba063dEyoe/SR6VGJI7Q==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.8", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "dependencies": { + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + } + } + }, "styled-system": { "version": "5.0.5", "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.0.5.tgz", diff --git a/package.json b/package.json index fb79539..06f41aa 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "react-icons": "^3.8.0", "react-konva": "^16.10.1-0", "react-media": "^1.10.0", + "react-router": "^5.1.2", "react-router-dom": "^5.1.2", "react-scripts": "^3.3.0", "react-vertical-timeline-component": "^2.5.0", diff --git a/src/components/HelpCenter.jsx b/src/components/HelpCenter.jsx index 36d8581..768d97f 100644 --- a/src/components/HelpCenter.jsx +++ b/src/components/HelpCenter.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { Route, Link } from "react-router-dom"; +import { Route } from "react-router-dom"; import { Box, Heading, @@ -13,7 +13,8 @@ import { Link as ChakraLink } from "@chakra-ui/core"; import FAQs from "./FAQs"; -import HowToStake from "./guides/HowToStake"; +import GuidesList from "./guides/GuidesList"; +// import HowToStake from "./guides/HowToStake"; import LogEvent from './LogEvent'; import Helmet from "react-helmet"; import Footer from "./Footer"; @@ -57,6 +58,9 @@ export default function HelpCenter() { Guides {/* List of guides */} + + +{/* @@ -68,6 +72,7 @@ export default function HelpCenter() { +*/} {/* FAQs Section */} @@ -88,9 +93,11 @@ export default function HelpCenter() { {/* Guides */} + {/** + */}