From f2b1a332615a2bc33ef47ae7092ca78593eed7a2 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 25 Oct 2021 14:26:00 +0100 Subject: [PATCH] restructure form, dial back on overwriting native Formik functionality --- content/publish/form.json | 63 ++++--- src/@context/UserPreferences.tsx | 4 - src/@hooks/useNetworkMetadata/index.ts | 31 +-- src/@hooks/useSiteMetadata/index.ts | 2 +- src/components/@shared/AddToken/index.tsx | 5 - .../@shared/AnnouncementBanner/index.tsx | 6 - .../@shared/AssetList/AssetComputeList.tsx | 32 ++-- .../@shared/AssetTeaser/AssetTeaser.tsx | 72 +++---- src/components/@shared/AssetType/index.tsx | 6 - src/components/@shared/ExplorerLink/index.tsx | 8 - src/components/@shared/FileIcon/index.tsx | 5 - .../Form/FormFields/AdvancedSettings.tsx | 2 +- .../@shared/Form/FormFields/Terms.tsx | 16 +- src/components/@shared/Form/Input/index.tsx | 3 +- src/components/@shared/Page/index.tsx | 2 +- src/components/@shared/Pagination/index.tsx | 14 -- src/components/@shared/Price/PriceUnit.tsx | 4 - src/components/@shared/Publisher/Add.tsx | 4 - src/components/@shared/Publisher/index.tsx | 7 - src/components/@shared/SyncStatus/index.tsx | 4 - .../@shared/TokenApproval/index.tsx | 69 ------- .../@shared/WalletNetworkSwitcher/index.tsx | 10 +- src/components/@shared/Web3Feedback/index.tsx | 5 - src/components/App/index.module.css | 1 + src/components/App/index.tsx | 69 +++---- .../AssetActions/AssetActionHistoryTable.tsx | 8 - .../Asset/AssetActions/Compute/index.tsx | 2 +- .../AssetActions/Edit/EditComputeDataset.tsx | 15 +- .../Asset/AssetActions/Edit/_types.ts | 0 .../Asset/AssetActions/Edit/index.tsx | 17 +- src/components/Asset/AssetContent/index.tsx | 8 - .../Header/UserPreferences/Networks/index.tsx | 4 +- src/components/Header/index.tsx | 4 - src/components/Profile/Header/NumberUnit.tsx | 4 - src/components/Publish/Debug.tsx | 4 +- src/components/Publish/FormAlgoPublish.tsx | 14 +- .../Publish/FormPublish/Metadata/index.tsx | 19 ++ .../Preview/index.module.css} | 0 .../Preview/index.tsx} | 4 +- .../Publish/FormPublish/Pricing/index.tsx | 65 +------ .../Publish/FormPublish/Services/index.tsx | 40 ++++ src/components/Publish/FormPublish/index.tsx | 176 ++---------------- .../Publish/MetadataFeedback.module.css | 43 ----- src/components/Publish/MetadataFeedback.tsx | 94 ---------- src/components/Publish/Title.tsx | 20 +- src/components/Publish/index.tsx | 5 +- src/components/Search/Filters.tsx | 3 +- src/pages/_app.tsx | 9 - src/pages/publish.tsx | 11 +- 49 files changed, 234 insertions(+), 779 deletions(-) delete mode 100644 src/components/Asset/AssetActions/Edit/_types.ts create mode 100644 src/components/Publish/FormPublish/Metadata/index.tsx rename src/components/Publish/{MetadataPreview.module.css => FormPublish/Preview/index.module.css} (100%) rename src/components/Publish/{MetadataPreview.tsx => FormPublish/Preview/index.tsx} (98%) create mode 100644 src/components/Publish/FormPublish/Services/index.tsx delete mode 100644 src/components/Publish/MetadataFeedback.module.css delete mode 100644 src/components/Publish/MetadataFeedback.tsx diff --git a/content/publish/form.json b/content/publish/form.json index 267cb7882..97429af19 100644 --- a/content/publish/form.json +++ b/content/publish/form.json @@ -15,21 +15,6 @@ "type": "textarea", "required": true }, - { - "name": "files", - "label": "File", - "placeholder": "e.g. https://file.com/file.json", - "help": "Please enter the URL to your data set file and click \"ADD FILE\" to validate the data. This URL will be stored encrypted after publishing. For a compute data set, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size.", - "type": "files", - "required": true - }, - { - "name": "links", - "label": "Sample file", - "placeholder": "e.g. https://file.com/samplefile.json", - "help": "Please enter the URL to a sample of your data set file and click \"ADD FILE\" to validate the data. This file should reveal the data structure of your data set, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing.", - "type": "files" - }, { "name": "author", "label": "Author", @@ -55,6 +40,28 @@ "services": { "title": "Create services", "fields": [ + { + "name": "dataTokenOptions", + "label": "Datatoken Name & Symbol", + "type": "datatoken", + "help": "The datatoken for this data set will be created with this name & symbol.", + "required": true + }, + { + "name": "files", + "label": "File", + "placeholder": "e.g. https://file.com/file.json", + "help": "Please enter the URL to your data set file and click \"ADD FILE\" to validate the data. This URL will be stored encrypted after publishing. For a compute data set, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size.", + "type": "files", + "required": true + }, + { + "name": "links", + "label": "Sample file", + "placeholder": "e.g. https://file.com/samplefile.json", + "help": "Please enter the URL to a sample of your data set file and click \"ADD FILE\" to validate the data. This file should reveal the data structure of your data set, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing.", + "type": "files" + }, { "name": "access", "label": "Access Type", @@ -65,14 +72,6 @@ "disclaimer": "Please do not provide downloadable personal data without the consent of the data subjects.", "disclaimerValues": ["Download"] }, - { - "name": "providerUri", - "label": "Custom Provider URL", - "type": "providerUri", - "help": "Enter the URL for your custom provider or leave blank to use the default provider. [Learn more](https://github.com/oceanprotocol/provider/).", - "placeholder": "https://provider.polygon.oceanprotocol.com/", - "advanced": true - }, { "name": "timeout", "label": "Timeout", @@ -82,17 +81,23 @@ "sortOptions": false, "required": true }, + { - "name": "dataTokenOptions", - "label": "Datatoken Name & Symbol", - "type": "datatoken", - "help": "The datatoken for this data set will be created with this name & symbol.", - "required": true + "name": "providerUri", + "label": "Custom Provider URL", + "type": "providerUri", + "help": "Enter the URL for your custom provider or leave blank to use the default provider. [Learn more](https://github.com/oceanprotocol/provider/).", + "placeholder": "https://provider.polygon.oceanprotocol.com/", + "advanced": true } ] }, "pricing": { "title": "Create pricing schema", - "fields": [{ "name": "dummy content" }] + "fields": [ + { + "name": "dummy content, as content is defined under 'create' key in ../price.json" + } + ] } } diff --git a/src/@context/UserPreferences.tsx b/src/@context/UserPreferences.tsx index 3bd078ecb..08d1c9b3e 100644 --- a/src/@context/UserPreferences.tsx +++ b/src/@context/UserPreferences.tsx @@ -7,11 +7,7 @@ import React, { useEffect } from 'react' import { Logger, LogLevel } from '@oceanprotocol/lib' -<<<<<<< HEAD:src/@context/UserPreferences.tsx import { isBrowser } from '@utils/index' -======= -import { isBrowser } from '../utils' ->>>>>>> 14d71ad2 (reorganize all the things):src/context/UserPreferences.tsx import { useSiteMetadata } from '@hooks/useSiteMetadata' interface UserPreferencesValue { diff --git a/src/@hooks/useNetworkMetadata/index.ts b/src/@hooks/useNetworkMetadata/index.ts index 2ac5d5daa..9686bd62a 100644 --- a/src/@hooks/useNetworkMetadata/index.ts +++ b/src/@hooks/useNetworkMetadata/index.ts @@ -1,35 +1,8 @@ -import { useStaticQuery, graphql } from 'gatsby' import { UseNetworkMetadata } from './types' - -const networksQuery = graphql` - query { - allNetworksMetadataJson { - edges { - node { - chain - network - networkId - chainId - rpc - explorers { - url - } - nativeCurrency { - name - symbol - decimals - } - } - } - } - } -` +import networkdata from '../../../content/networks-metadata.json' export default function useNetworkMetadata(): UseNetworkMetadata { - const data = useStaticQuery(networksQuery) - const networksList: { node: EthereumListsChain }[] = - data.allNetworksMetadataJson.edges - + const networksList: EthereumListsChain[] = networkdata return { networksList } } diff --git a/src/@hooks/useSiteMetadata/index.ts b/src/@hooks/useSiteMetadata/index.ts index 40f9d3259..14375221b 100644 --- a/src/@hooks/useSiteMetadata/index.ts +++ b/src/@hooks/useSiteMetadata/index.ts @@ -9,4 +9,4 @@ export function useSiteMetadata(): UseSiteMetadata { } return siteMeta -} +} \ No newline at end of file diff --git a/src/components/@shared/AddToken/index.tsx b/src/components/@shared/AddToken/index.tsx index 11050ee1c..39c55e867 100644 --- a/src/components/@shared/AddToken/index.tsx +++ b/src/components/@shared/AddToken/index.tsx @@ -2,13 +2,8 @@ import React, { ReactElement } from 'react' import classNames from 'classnames/bind' import { addTokenToWallet } from '@utils/web3' import { useWeb3 } from '@context/Web3' -<<<<<<< HEAD:src/components/@shared/AddToken/index.tsx import Button from '@shared/atoms/Button' import styles from './index.module.css' -======= -import Button from './Button' -import styles from './AddToken.module.css' ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/AddToken.tsx const cx = classNames.bind(styles) diff --git a/src/components/@shared/AnnouncementBanner/index.tsx b/src/components/@shared/AnnouncementBanner/index.tsx index 6d3d6e2b6..2e1e532b9 100644 --- a/src/components/@shared/AnnouncementBanner/index.tsx +++ b/src/components/@shared/AnnouncementBanner/index.tsx @@ -1,14 +1,8 @@ import React, { ReactElement } from 'react' import classNames from 'classnames/bind' -<<<<<<< HEAD:src/components/@shared/AnnouncementBanner/index.tsx import Markdown from '@shared/Markdown' import Button from '@shared/atoms/Button' import styles from './index.module.css' -======= -import Markdown from './Markdown' -import Button from './Button' -import styles from './AnnouncementBanner.module.css' ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/AnnouncementBanner.tsx const cx = classNames.bind(styles) diff --git a/src/components/@shared/AssetList/AssetComputeList.tsx b/src/components/@shared/AssetList/AssetComputeList.tsx index 0f5b3d558..13ff2ec1d 100644 --- a/src/components/@shared/AssetList/AssetComputeList.tsx +++ b/src/components/@shared/AssetList/AssetComputeList.tsx @@ -1,7 +1,7 @@ import React from 'react' import Dotdotdot from 'react-dotdotdot' -import { Link } from 'gatsby' -import PriceUnit from '@shared/atoms/Price/PriceUnit' +import Link from 'next/link' +import PriceUnit from '@shared/Price/PriceUnit' import Loader from '@shared/atoms/Loader' import styles from './AssetComputeList.module.css' import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection' @@ -24,22 +24,20 @@ export default function AssetComputeSelection({ ) : ( assets.map((asset: AssetSelectionAsset) => ( - -
-

- - {asset.name} + + +
+

+ + {asset.name} + +

+ + {asset.symbol} | {asset.did} -

- - {asset.symbol} | {asset.did} - -
- + + + )) )} diff --git a/src/components/@shared/AssetTeaser/AssetTeaser.tsx b/src/components/@shared/AssetTeaser/AssetTeaser.tsx index a64966ec2..5ad724560 100644 --- a/src/components/@shared/AssetTeaser/AssetTeaser.tsx +++ b/src/components/@shared/AssetTeaser/AssetTeaser.tsx @@ -1,12 +1,12 @@ import React from 'react' -import { Link } from 'gatsby' +import Link from 'next/link' import Dotdotdot from 'react-dotdotdot' -import Price from '../atoms/Price' +import Price from '@shared/Price' import { DDO } from '@oceanprotocol/lib' import removeMarkdown from 'remove-markdown' -import Publisher from '../atoms/Publisher' -import AssetType from '../atoms/AssetType' -import NetworkName from '../atoms/NetworkName' +import Publisher from '@shared/Publisher' +import AssetType from '@shared/AssetType' +import NetworkName from '@shared/NetworkName' import styles from './AssetTeaser.module.css' declare type AssetTeaserProps = { @@ -29,38 +29,40 @@ const AssetTeaser: React.FC = ({ return ( ) diff --git a/src/components/@shared/AssetType/index.tsx b/src/components/@shared/AssetType/index.tsx index e78e1d047..b7a356620 100644 --- a/src/components/@shared/AssetType/index.tsx +++ b/src/components/@shared/AssetType/index.tsx @@ -1,15 +1,9 @@ import React, { ReactElement } from 'react' import styles from './index.module.css' import classNames from 'classnames/bind' -<<<<<<< HEAD:src/components/@shared/AssetType/index.tsx import Compute from '@images/compute.svg' import Download from '@images/download.svg' import Lock from '@images/lock.svg' -======= -import { ReactComponent as Compute } from '@images/compute.svg' -import { ReactComponent as Download } from '@images/download.svg' -import { ReactComponent as Lock } from '@images/lock.svg' ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/AssetType.tsx const cx = classNames.bind(styles) diff --git a/src/components/@shared/ExplorerLink/index.tsx b/src/components/@shared/ExplorerLink/index.tsx index 257b02c0d..8baf1321c 100644 --- a/src/components/@shared/ExplorerLink/index.tsx +++ b/src/components/@shared/ExplorerLink/index.tsx @@ -1,17 +1,9 @@ import React, { ReactElement, ReactNode, useEffect, useState } from 'react' -<<<<<<< HEAD:src/components/@shared/ExplorerLink/index.tsx import External from '@images/external.svg' import classNames from 'classnames/bind' import { ConfigHelperConfig } from '@oceanprotocol/lib' import { useOcean } from '@context/Ocean' import styles from './index.module.css' -======= -import { ReactComponent as External } from '@images/external.svg' -import classNames from 'classnames/bind' -import { ConfigHelperConfig } from '@oceanprotocol/lib' -import { useOcean } from '@context/Ocean' -import styles from './ExplorerLink.module.css' ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/ExplorerLink.tsx import { getOceanConfig } from '@utils/ocean' const cx = classNames.bind(styles) diff --git a/src/components/@shared/FileIcon/index.tsx b/src/components/@shared/FileIcon/index.tsx index 34d111431..6e3588e17 100644 --- a/src/components/@shared/FileIcon/index.tsx +++ b/src/components/@shared/FileIcon/index.tsx @@ -3,13 +3,8 @@ import { File as FileMetadata } from '@oceanprotocol/lib' import filesize from 'filesize' import classNames from 'classnames/bind' import cleanupContentType from '@utils/cleanupContentType' -<<<<<<< HEAD:src/components/@shared/FileIcon/index.tsx import styles from './index.module.css' import Loader from '@shared/atoms/Loader' -======= -import styles from './File.module.css' -import Loader from './Loader' ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/File.tsx const cx = classNames.bind(styles) diff --git a/src/components/@shared/Form/FormFields/AdvancedSettings.tsx b/src/components/@shared/Form/FormFields/AdvancedSettings.tsx index 94e10f0e1..be54bdc6e 100644 --- a/src/components/@shared/Form/FormFields/AdvancedSettings.tsx +++ b/src/components/@shared/Form/FormFields/AdvancedSettings.tsx @@ -29,7 +29,7 @@ export default function AdvancedSettings(prop: { Advanced Settings {showAdvancedSettings && - prop.content.data.map( + prop.content.fields.map( (field: FormFieldProps) => field.advanced === true && ( -
) diff --git a/src/components/@shared/Form/Input/index.tsx b/src/components/@shared/Form/Input/index.tsx index 573e80b17..0809ee421 100644 --- a/src/components/@shared/Form/Input/index.tsx +++ b/src/components/@shared/Form/Input/index.tsx @@ -7,14 +7,13 @@ import React, { useState } from 'react' import InputElement from './InputElement' -import Help from './Help' import Label from './Label' import styles from './index.module.css' import { ErrorMessage, FieldInputProps } from 'formik' import classNames from 'classnames/bind' import Disclaimer from './Disclaimer' import Tooltip from '@shared/atoms/Tooltip' -import Markdown from '@shared/atoms/Markdown' +import Markdown from '@shared/Markdown' const cx = classNames.bind(styles) diff --git a/src/components/@shared/Page/index.tsx b/src/components/@shared/Page/index.tsx index 08268752d..097894cc6 100644 --- a/src/components/@shared/Page/index.tsx +++ b/src/components/@shared/Page/index.tsx @@ -26,7 +26,7 @@ export default function Page({ {title && !noPageHeader && ( {title}} description={description} center={headerCenter} /> diff --git a/src/components/@shared/Pagination/index.tsx b/src/components/@shared/Pagination/index.tsx index 95a2d12ce..f725bc17c 100644 --- a/src/components/@shared/Pagination/index.tsx +++ b/src/components/@shared/Pagination/index.tsx @@ -1,23 +1,9 @@ import React, { useState, useEffect, ReactElement } from 'react' import ReactPaginate from 'react-paginate' -<<<<<<< HEAD:src/components/@shared/Pagination/index.tsx import styles from './index.module.css' import { MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS } from '@utils/aquarius' import Arrow from '@images/arrow.svg' import { PaginationProps } from './_types' -======= -import styles from './Pagination.module.css' -import { MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS } from '@utils/aquarius' -import { ReactComponent as Arrow } from '@images/arrow.svg' - -interface PaginationProps { - totalPages?: number - currentPage?: number - onChangePage?(selected: number): void - rowsPerPage?: number - rowCount?: number -} ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/Pagination.tsx export default function Pagination({ totalPages, diff --git a/src/components/@shared/Price/PriceUnit.tsx b/src/components/@shared/Price/PriceUnit.tsx index a227259ec..a1baa95dc 100644 --- a/src/components/@shared/Price/PriceUnit.tsx +++ b/src/components/@shared/Price/PriceUnit.tsx @@ -4,11 +4,7 @@ import classNames from 'classnames/bind' import Conversion from './Conversion' import styles from './PriceUnit.module.css' import { useUserPreferences } from '@context/UserPreferences' -<<<<<<< HEAD:src/components/@shared/Price/PriceUnit.tsx import Badge from '@shared/atoms/Badge' -======= -import Badge from '../Badge' ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/Price/PriceUnit.tsx const cx = classNames.bind(styles) diff --git a/src/components/@shared/Publisher/Add.tsx b/src/components/@shared/Publisher/Add.tsx index 0ec19701a..f40437fc7 100644 --- a/src/components/@shared/Publisher/Add.tsx +++ b/src/components/@shared/Publisher/Add.tsx @@ -1,9 +1,5 @@ import React, { ReactElement } from 'react' -<<<<<<< HEAD:src/components/@shared/Publisher/Add.tsx import External from '@images/external.svg' -======= -import { ReactComponent as External } from '@images/external.svg' ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/Publisher/Add.tsx import styles from './Add.module.css' export default function Add(): ReactElement { diff --git a/src/components/@shared/Publisher/index.tsx b/src/components/@shared/Publisher/index.tsx index 9ef9af298..a65951c48 100644 --- a/src/components/@shared/Publisher/index.tsx +++ b/src/components/@shared/Publisher/index.tsx @@ -1,21 +1,14 @@ import React, { ReactElement, useEffect, useState } from 'react' import styles from './index.module.css' import classNames from 'classnames/bind' -<<<<<<< HEAD:src/components/@shared/Publisher/index.tsx import Link from 'next/link' -======= -import { Link } from 'gatsby' ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/Publisher/index.tsx import get3BoxProfile from '@utils/profile' import { accountTruncate } from '@utils/web3' import axios from 'axios' import Add from './Add' import { useWeb3 } from '@context/Web3' import { getEnsName } from '@utils/ens' -<<<<<<< HEAD:src/components/@shared/Publisher/index.tsx import { useIsMounted } from '@hooks/useIsMounted' -======= ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/Publisher/index.tsx const cx = classNames.bind(styles) diff --git a/src/components/@shared/SyncStatus/index.tsx b/src/components/@shared/SyncStatus/index.tsx index 9ffbdce8a..e92a22cf1 100644 --- a/src/components/@shared/SyncStatus/index.tsx +++ b/src/components/@shared/SyncStatus/index.tsx @@ -2,11 +2,7 @@ import React, { ReactElement } from 'react' import Tooltip from '@shared/atoms/Tooltip' import Status from '@shared/atoms/Status' import { useGraphSyncStatus } from '@hooks/useGraphSyncStatus' -<<<<<<< HEAD:src/components/@shared/SyncStatus/index.tsx import styles from './index.module.css' -======= -import styles from './SyncStatus.module.css' ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/SyncStatus.tsx export default function SyncStatus(): ReactElement { const { isGraphSynced, blockGraph, blockHead } = useGraphSyncStatus() diff --git a/src/components/@shared/TokenApproval/index.tsx b/src/components/@shared/TokenApproval/index.tsx index e25e7f467..590da0660 100644 --- a/src/components/@shared/TokenApproval/index.tsx +++ b/src/components/@shared/TokenApproval/index.tsx @@ -1,79 +1,10 @@ import React, { ReactElement, useCallback, useEffect, useState } from 'react' -<<<<<<< HEAD:src/components/@shared/TokenApproval/index.tsx import { useOcean } from '@context/Ocean' import { useAsset } from '@context/Asset' import { useWeb3 } from '@context/Web3' import Decimal from 'decimal.js' import { getOceanConfig } from '@utils/ocean' import { ButtonApprove } from './ButtonApprove' -======= -import Button from '@shared/atoms/Button' -import { useOcean } from '@context/Ocean' -import { useAsset } from '@context/Asset' -import Loader from '@shared/atoms/Loader' -import { useWeb3 } from '@context/Web3' -import { useUserPreferences } from '@context/UserPreferences' -import Tooltip from '@shared/atoms/Tooltip' -import { graphql, useStaticQuery } from 'gatsby' -import Decimal from 'decimal.js' -import { getOceanConfig } from '@utils/ocean' - -const query = graphql` - query { - content: allFile(filter: { relativePath: { eq: "price.json" } }) { - edges { - node { - childContentJson { - pool { - tooltips { - approveSpecific - approveInfinite - } - } - } - } - } - } - } -` - -function ButtonApprove({ - amount, - coin, - approveTokens, - isLoading -}: { - amount: string - coin: string - approveTokens: (amount: string) => void - isLoading: boolean -}) { - // Get content - const data = useStaticQuery(query) - const content = data.content.edges[0].node.childContentJson.pool.tooltips - - const { infiniteApproval } = useUserPreferences() - - return isLoading ? ( - - ) : infiniteApproval ? ( - - ) : ( - - ) -} ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/TokenApproval.tsx export default function TokenApproval({ actionButton, diff --git a/src/components/@shared/WalletNetworkSwitcher/index.tsx b/src/components/@shared/WalletNetworkSwitcher/index.tsx index a0b593d72..1d5fe9f35 100644 --- a/src/components/@shared/WalletNetworkSwitcher/index.tsx +++ b/src/components/@shared/WalletNetworkSwitcher/index.tsx @@ -1,20 +1,12 @@ import React, { ReactElement } from 'react' import { useWeb3 } from '@context/Web3' -import { addCustomNetwork } from '@utils/web3' import Button from '@shared/atoms/Button' import styles from './index.module.css' +import { addCustomNetwork } from '@utils/web3' import useNetworkMetadata, { getNetworkDataById, getNetworkDisplayName } from '@hooks/useNetworkMetadata' -import { - addCustomNetwork, - getNetworkDisplayName, - getNetworkDataById -} from '@utils/web3' -import Button from '@shared/atoms/Button' -import styles from './WalletNetworkSwitcher.module.css' -import useNetworkMetadata from '@hooks/useNetworkMetadata' import { useAsset } from '@context/Asset' export default function WalletNetworkSwitcher(): ReactElement { diff --git a/src/components/@shared/Web3Feedback/index.tsx b/src/components/@shared/Web3Feedback/index.tsx index 3e99b988e..94bbffe4d 100644 --- a/src/components/@shared/Web3Feedback/index.tsx +++ b/src/components/@shared/Web3Feedback/index.tsx @@ -1,13 +1,8 @@ import React, { ReactElement, useEffect, useState } from 'react' import { useWeb3 } from '@context/Web3' import Status from '@shared/atoms/Status' -<<<<<<< HEAD:src/components/@shared/Web3Feedback/index.tsx import styles from './index.module.css' import WalletNetworkSwitcher from '../WalletNetworkSwitcher' -======= -import styles from './Web3Feedback.module.css' -import WalletNetworkSwitcher from './WalletNetworkSwitcher' ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/Web3Feedback.tsx import { useGraphSyncStatus } from '@hooks/useGraphSyncStatus' export declare type Web3Error = { diff --git a/src/components/App/index.module.css b/src/components/App/index.module.css index 187bca1d9..15ff20498 100644 --- a/src/components/App/index.module.css +++ b/src/components/App/index.module.css @@ -1,6 +1,7 @@ .app { height: 100%; background: url('../../../node_modules/@oceanprotocol/art/waves/waves.svg') + no-repeat center 13.5rem; /* sticky footer technique */ display: flex; diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index dd5079e60..b88d859f7 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -1,69 +1,50 @@ import React, { ReactElement } from 'react' -import { graphql, PageProps, useStaticQuery } from 'gatsby' import Alert from '@shared/atoms/Alert' import Footer from '../Footer/Footer' import Header from '../Header' -import StylesGlobal from '../../stylesGlobal/StylesGlobal' import { useWeb3 } from '@context/Web3' import { useSiteMetadata } from '@hooks/useSiteMetadata' import { useAccountPurgatory } from '@hooks/useAccountPurgatory' import AnnouncementBanner from '@shared/AnnouncementBanner' import PrivacyPreferenceCenter from '../Privacy/PrivacyPreferenceCenter' import styles from './index.module.css' - -const contentQuery = graphql` - query AppQuery { - purgatory: allFile(filter: { relativePath: { eq: "purgatory.json" } }) { - edges { - node { - childContentJson { - account { - title - description - } - } - } - } - } - } -` +import { ToastContainer } from 'react-toastify' +import { useRouter } from 'next/router' +// import waves from '@oceanprotocol/art/waves/waves.png' +import content from '../../../content/purgatory.json' export default function App({ - children, - ...props + children }: { children: ReactElement }): ReactElement { - const data = useStaticQuery(contentQuery) - const purgatory = data.purgatory.edges[0].node.childContentJson.account + const router = useRouter() const { warning, appConfig } = useSiteMetadata() const { accountId } = useWeb3() const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId) return ( - -
- {(props as PageProps).uri === '/' && ( - - )} -
+
+ {router.pathname === '/' && } +
- {isInPurgatory && ( - - )} -
{children}
-
+ {isInPurgatory && ( + + )} +
{children}
+
- {appConfig.privacyPreferenceCenter === 'true' && ( - - )} -
- + {appConfig.privacyPreferenceCenter === 'true' && ( + + )} + + +
) } diff --git a/src/components/Asset/AssetActions/AssetActionHistoryTable.tsx b/src/components/Asset/AssetActions/AssetActionHistoryTable.tsx index b456f4b2d..129620b89 100644 --- a/src/components/Asset/AssetActions/AssetActionHistoryTable.tsx +++ b/src/components/Asset/AssetActions/AssetActionHistoryTable.tsx @@ -1,15 +1,7 @@ -<<<<<<< HEAD:src/components/Asset/AssetActions/AssetActionHistoryTable.tsx import React, { ReactElement, ReactNode, useState } from 'react' import Button from '@shared/atoms/Button' import styles from './AssetActionHistoryTable.module.css' import Caret from '@images/caret.svg' -======= -import React, { ReactElement, useState } from 'react' -import Button from '@shared/atoms/Button' -import styles from './AssetActionHistoryTable.module.css' -import { ReactComponent as Caret } from '@images/caret.svg' -import { ReactNode } from 'react-markdown' ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/AssetActionHistoryTable.tsx export default function AssetActionHistoryTable({ title, diff --git a/src/components/Asset/AssetActions/Compute/index.tsx b/src/components/Asset/AssetActions/Compute/index.tsx index 5b8bef148..f481818ba 100644 --- a/src/components/Asset/AssetActions/Compute/index.tsx +++ b/src/components/Asset/AssetActions/Compute/index.tsx @@ -34,7 +34,7 @@ import { secondsToString } from '@utils/metadata' import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection' import AlgorithmDatasetsListForCompute from '../../AssetContent/AlgorithmDatasetsListForCompute' import { getPreviousOrders, getPrice } from '@utils/subgraph' -import AssetActionHistoryTable from '@shared/AssetActionHistoryTable' +import AssetActionHistoryTable from '../AssetActionHistoryTable' import ComputeJobs from '../../../Profile/History/ComputeJobs' import { useCancelToken } from '@hooks/useCancelToken' import { useIsMounted } from '@hooks/useIsMounted' diff --git a/src/components/Asset/AssetActions/Edit/EditComputeDataset.tsx b/src/components/Asset/AssetActions/Edit/EditComputeDataset.tsx index d2f028e27..62345f966 100644 --- a/src/components/Asset/AssetActions/Edit/EditComputeDataset.tsx +++ b/src/components/Asset/AssetActions/Edit/EditComputeDataset.tsx @@ -11,7 +11,6 @@ import styles from './index.module.css' import { transformComputeFormToServiceComputePrivacy } from '@utils/compute' import { setMinterToDispenser, setMinterToPublisher } from '@utils/freePrice' import Web3Feedback from '@shared/Web3Feedback' -import MetadataFeedback from '../../../Publish/MetadataFeedback' import { getInitialValues, validationSchema } from './_constants' import content from '../../../../../content/pages/editComputeDataset.json' @@ -106,19 +105,7 @@ export default function EditComputeDataset({ > {({ values, isSubmitting }) => isSubmitting || hasFeedback ? ( - { - await refreshDdo() - setShowEdit(false) - } - }} - /> +
) : ( <>

{content.description}

diff --git a/src/components/Asset/AssetActions/Edit/_types.ts b/src/components/Asset/AssetActions/Edit/_types.ts deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/components/Asset/AssetActions/Edit/index.tsx b/src/components/Asset/AssetActions/Edit/index.tsx index 284a48872..6f5c331e4 100644 --- a/src/components/Asset/AssetActions/Edit/index.tsx +++ b/src/components/Asset/AssetActions/Edit/index.tsx @@ -12,8 +12,6 @@ import { Logger } from '@oceanprotocol/lib' import { useWeb3 } from '@context/Web3' import { useOcean } from '@context/Ocean' import { setMinterToDispenser, setMinterToPublisher } from '@utils/freePrice' -import { MetadataPreview } from '../../../Publish/MetadataPreview' -import MetadataFeedback from '../../../Publish/MetadataFeedback' import content from '../../../../../content/pages/edit.json' export default function Edit({ @@ -139,19 +137,7 @@ export default function Edit({ > {({ isSubmitting, values, initialValues }) => isSubmitting || hasFeedback ? ( - { - await refreshDdo() - setShowEdit(false) - } - }} - /> +
) : ( <>

{content.description}

@@ -166,7 +152,6 @@ export default function Edit({ /> */} diff --git a/src/components/Asset/AssetContent/index.tsx b/src/components/Asset/AssetContent/index.tsx index 88f467b46..b232f0a98 100644 --- a/src/components/Asset/AssetContent/index.tsx +++ b/src/components/Asset/AssetContent/index.tsx @@ -16,14 +16,6 @@ import EditHistory from './EditHistory' import { useWeb3 } from '@context/Web3' import styles from './index.module.css' import NetworkName from '@shared/NetworkName' -import NetworkName from '@shared/atoms/NetworkName' - -export interface AssetContentProps { - path?: string -} - -const contentQuery = graphql` - query AssetContentQuery { import content from '../../../../content/purgatory.json' export default function AssetContent(): ReactElement { diff --git a/src/components/Header/UserPreferences/Networks/index.tsx b/src/components/Header/UserPreferences/Networks/index.tsx index f775bc869..be4d90afc 100644 --- a/src/components/Header/UserPreferences/Networks/index.tsx +++ b/src/components/Header/UserPreferences/Networks/index.tsx @@ -3,8 +3,8 @@ import Label from '@shared/Form/Input/Label' import { useSiteMetadata } from '@hooks/useSiteMetadata' import FormHelp from '@shared/Form/Input/Help' import Tooltip from '@shared/atoms/Tooltip' -import { ReactComponent as Caret } from '@images/caret.svg' -import { ReactComponent as Network } from '@images/network.svg' +import Caret from '@images/caret.svg' +import Network from '@images/network.svg' import NetworksList from './NetworksList' import stylesIndex from '../index.module.css' import styles from './index.module.css' diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 4ce8549cb..88a9c5194 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,10 +1,6 @@ import React, { ReactElement } from 'react' import Menu from './Menu' -<<<<<<< HEAD:src/components/Header/index.tsx import styles from './index.module.css' -======= -import styles from './Header.module.css' ->>>>>>> 14d71ad2 (reorganize all the things):src/components/Header/Header.tsx export default function Header(): ReactElement { return ( diff --git a/src/components/Profile/Header/NumberUnit.tsx b/src/components/Profile/Header/NumberUnit.tsx index e11b48f33..6ca1800ff 100644 --- a/src/components/Profile/Header/NumberUnit.tsx +++ b/src/components/Profile/Header/NumberUnit.tsx @@ -1,9 +1,5 @@ import React, { ReactElement } from 'react' -<<<<<<< HEAD:src/components/Profile/Header/NumberUnit.tsx import Markdown from '@shared/Markdown' -======= -import Markdown from '@shared/atoms/Markdown' ->>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/NumberUnit.tsx import Tooltip from '@shared/atoms/Tooltip' import styles from './NumberUnit.module.css' diff --git a/src/components/Publish/Debug.tsx b/src/components/Publish/Debug.tsx index 0b45c1c82..def510f68 100644 --- a/src/components/Publish/Debug.tsx +++ b/src/components/Publish/Debug.tsx @@ -1,7 +1,7 @@ import React, { ReactElement } from 'react' -import DebugOutput from '@shared/atoms/DebugOutput' +import DebugOutput from '@shared/DebugOutput' import styles from './index.module.css' -import { transformPublishFormToMetadata } from '@utils/metadata' +// import { transformPublishFormToMetadata } from '@utils/metadata' import { FormPublishData } from './_types' export default function Debug({ diff --git a/src/components/Publish/FormAlgoPublish.tsx b/src/components/Publish/FormAlgoPublish.tsx index ee3e62670..6ea94201f 100644 --- a/src/components/Publish/FormAlgoPublish.tsx +++ b/src/components/Publish/FormAlgoPublish.tsx @@ -1,10 +1,10 @@ -// import React, { -// ReactElement, -// useEffect, -// useState, -// FormEvent, -// ChangeEvent -// } from 'react' +import React, { + ReactElement, + useEffect, + useState, + FormEvent, + ChangeEvent +} from 'react' // import { useStaticQuery, graphql } from 'gatsby' // import { useFormikContext, Field, Form, FormikContextType } from 'formik' // import Input from '../../atoms/Input' diff --git a/src/components/Publish/FormPublish/Metadata/index.tsx b/src/components/Publish/FormPublish/Metadata/index.tsx new file mode 100644 index 000000000..abb3a6fd9 --- /dev/null +++ b/src/components/Publish/FormPublish/Metadata/index.tsx @@ -0,0 +1,19 @@ +import Input from '@shared/Form/Input' +import { Field } from 'formik' +import React, { ReactElement } from 'react' +import content from '../../../../../content/publish/form.json' + +export default function MetadataFields(): ReactElement { + return ( + <> + {content.metadata.fields.map((field: FormFieldProps) => ( + + ))} + + ) +} diff --git a/src/components/Publish/MetadataPreview.module.css b/src/components/Publish/FormPublish/Preview/index.module.css similarity index 100% rename from src/components/Publish/MetadataPreview.module.css rename to src/components/Publish/FormPublish/Preview/index.module.css diff --git a/src/components/Publish/MetadataPreview.tsx b/src/components/Publish/FormPublish/Preview/index.tsx similarity index 98% rename from src/components/Publish/MetadataPreview.tsx rename to src/components/Publish/FormPublish/Preview/index.tsx index e6573328e..bb46ab726 100644 --- a/src/components/Publish/MetadataPreview.tsx +++ b/src/components/Publish/FormPublish/Preview/index.tsx @@ -2,7 +2,7 @@ import React, { FormEvent, ReactElement, useState } from 'react' import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File' import Markdown from '@shared/Markdown' import Tags from '@shared/atoms/Tags' -import MetaItem from '../../components/Asset/AssetContent/MetaItem' +import MetaItem from '../../../Asset/AssetContent/MetaItem' import FileIcon from '@shared/FileIcon' import Button from '@shared/atoms/Button' import { transformTags } from '@utils/metadata' @@ -11,7 +11,7 @@ import { useWeb3 } from '@context/Web3' import styles from './MetadataPreview.module.css' import Web3Feedback from '@shared/Web3Feedback' import { useAsset } from '@context/Asset' -import { FormPublishData } from './_types' +import { FormPublishData } from '../../_types' function Description({ description }: { description: string }) { const [fullDescription, setFullDescription] = useState(false) diff --git a/src/components/Publish/FormPublish/Pricing/index.tsx b/src/components/Publish/FormPublish/Pricing/index.tsx index debca6ccc..45758d87a 100644 --- a/src/components/Publish/FormPublish/Pricing/index.tsx +++ b/src/components/Publish/FormPublish/Pricing/index.tsx @@ -1,7 +1,6 @@ import React, { ReactElement, useEffect } from 'react' import { useFormikContext } from 'formik' import { DDO } from '@oceanprotocol/lib' -import { graphql, useStaticQuery } from 'gatsby' import { useSiteMetadata } from '@hooks/useSiteMetadata' import Tabs from '@shared/atoms/Tabs' import { isValidNumber } from '@utils/numbers' @@ -10,57 +9,9 @@ import { FormPublishData } from '../../_types' import Dynamic from './Dynamic' import Fixed from './Fixed' import Free from './Free' +import content from '../../../../../content/price.json' -const query = graphql` - query PricingQuery { - content: allFile(filter: { relativePath: { eq: "price.json" } }) { - edges { - node { - childContentJson { - create { - empty { - title - info - action { - name - help - } - } - fixed { - title - info - tooltips { - communityFee - marketplaceFee - } - } - dynamic { - title - info - tooltips { - poolInfo - swapFee - communityFee - marketplaceFee - } - } - free { - title - info - } - } - } - } - } - } - } -` - -export default function Pricing(): ReactElement { - // Get content - const data = useStaticQuery(query) - const content = data.content.edges[0].node.childContentJson.create - +export default function PricingFields(): ReactElement { const { appConfig } = useSiteMetadata() // Connect with main publish form @@ -96,20 +47,20 @@ export default function Pricing(): ReactElement { const tabs = [ appConfig.allowFixedPricing === 'true' ? { - title: content.fixed.title, - content: + title: content.create.fixed.title, + content: } : undefined, appConfig.allowDynamicPricing === 'true' ? { - title: content.dynamic.title, - content: + title: content.create.dynamic.title, + content: } : undefined, appConfig.allowFreePricing === 'true' ? { - title: content.free.title, - content: + title: content.create.free.title, + content: } : undefined ].filter((tab) => tab !== undefined) diff --git a/src/components/Publish/FormPublish/Services/index.tsx b/src/components/Publish/FormPublish/Services/index.tsx new file mode 100644 index 000000000..f4747742e --- /dev/null +++ b/src/components/Publish/FormPublish/Services/index.tsx @@ -0,0 +1,40 @@ +import Input from '@shared/Form/Input' +import { Field } from 'formik' +import React, { ReactElement } from 'react' +import IconDownload from '@images/download.svg' +import IconCompute from '@images/compute.svg' +import content from '../../../../../content/publish/form.json' + +const accessTypeOptions = [ + { + name: 'Download', + title: 'Download', + icon: + }, + { + name: 'Compute', + title: 'Compute', + icon: + } +] + +export default function ServicesFields(): ReactElement { + return ( + <> + {content.services.fields.map( + (field: FormFieldProps) => + field.advanced !== true && ( + + ) + )} + + ) +} diff --git a/src/components/Publish/FormPublish/index.tsx b/src/components/Publish/FormPublish/index.tsx index 4f3546fc6..cc0559d51 100644 --- a/src/components/Publish/FormPublish/index.tsx +++ b/src/components/Publish/FormPublish/index.tsx @@ -1,169 +1,35 @@ -import React, { - ReactElement, - useEffect, - FormEvent, - ChangeEvent, - useState -} from 'react' -import { useStaticQuery, graphql } from 'gatsby' -import { useFormikContext, Field, Form, FormikContextType } from 'formik' -import Input from '@shared/Form/Input' -import { ReactComponent as Download } from '@images/download.svg' -import { ReactComponent as Compute } from '@images/compute.svg' +import React, { ReactElement, FormEvent } from 'react' +import { useFormikContext, Form, FormikContextType } from 'formik' import FormActions from './FormActions' -import AdvancedSettings from '@shared/Form/FormFields/AdvancedSettings' import { FormPublishData } from '../_types' import styles from './index.module.css' import { initialValues } from '../_constants' import Tabs from '@shared/atoms/Tabs' -import Pricing from './Pricing' +import PricingFields from './Pricing' import Debug from '../Debug' - -const query = graphql` - query { - content: publishJson { - metadata { - title - fields { - name - placeholder - label - help - type - required - options - disclaimer - disclaimerValues - advanced - } - } - services { - title - fields { - name - placeholder - label - help - type - required - options - disclaimer - disclaimerValues - advanced - } - } - pricing { - title - fields { - name - placeholder - label - help - type - required - options - disclaimer - disclaimerValues - advanced - } - } - warning - } - } -` - -const accessTypeOptions = [ - { - name: 'Download', - title: 'Download', - icon: - }, - { - name: 'Compute', - title: 'Compute', - icon: - } -] +import MetadataFields from './Metadata' +import ServicesFields from './Services' +import content from '../../../../content/publish/form.json' export default function FormPublish(): ReactElement { - const { content } = useStaticQuery(query) - - const { - setStatus, - isValid, - values, - setErrors, - setTouched, - resetForm, - validateField, - setFieldValue - }: FormikContextType = useFormikContext() - - const [computeTypeSelected, setComputeTypeSelected] = useState(false) + const { isValid, values, resetForm }: FormikContextType = + useFormikContext() // reset form validation on every mount - useEffect(() => { - setErrors({}) - setTouched({}) + // useEffect(() => { + // setErrors({}) + // setTouched({}) - // setSubmitting(false) - }, [setErrors, setTouched]) - - const computeTypeOptions = ['1 day', '1 week', '1 month', '1 year'] - - // Manually handle change events instead of using `handleChange` from Formik. - // Workaround for default `validateOnChange` not kicking in - function handleFieldChange( - e: ChangeEvent, - field: FormFieldProps - ) { - const value = - field.type === 'terms' ? !JSON.parse(e.target.value) : e.target.value - - if (field.name === 'access' && value === 'Compute') { - setComputeTypeSelected(true) - if (values.timeout === 'Forever') - setFieldValue('timeout', computeTypeOptions[0]) - } else { - if (field.name === 'access' && value === 'Download') { - setComputeTypeSelected(false) - } - } - - validateField(field.name) - setFieldValue(field.name, value) - } + // // setSubmitting(false) + // }, [setErrors, setTouched]) const resetFormAndClearStorage = (e: FormEvent) => { e.preventDefault() + resetForm({ values: initialValues as FormPublishData, status: 'empty' }) - setStatus('empty') - } - - function getStepContentFields(contentStep: FormStepContent) { - return contentStep.fields.map( - (field: FormFieldProps) => - field.advanced !== true && ( - ) => - handleFieldChange(e, field) - } - /> - ) - ) } const tabs = [ @@ -171,11 +37,7 @@ export default function FormPublish(): ReactElement { title: content.metadata.title, content: ( <> - {getStepContentFields(content.metadata)} - + - {getStepContentFields(content.services)} - + - + void - to?: string -} - -function ActionSuccess({ action }: { action: Action }) { - const { name, onClick, to } = action - - return ( - - ) -} - -function ActionError({ setError }: { setError: (error: string) => void }) { - return ( - - ) -} - -export default function MetadataFeedback({ - title, - error, - success, - loading, - successAction, - setError -}: { - title: string - error: string - success: string - loading?: string - successAction: Action - setError: (error: string) => void -}): ReactElement { - const [moreInfo, setMoreInfo] = useState(false) - - function toggleMoreInfo(e: FormEvent) { - e.preventDefault() - moreInfo === true ? setMoreInfo(false) : setMoreInfo(true) - } - - return ( -
-
-

{title}

- {error ? ( - <> -

Sorry, something went wrong. Please try again.

- {moreInfo && } - - - - ) : success ? ( - } - /> - ) : ( - - )} -
-
- ) -} diff --git a/src/components/Publish/Title.tsx b/src/components/Publish/Title.tsx index c9ecc0179..058403c13 100644 --- a/src/components/Publish/Title.tsx +++ b/src/components/Publish/Title.tsx @@ -3,27 +3,9 @@ import NetworkName from '@shared/NetworkName' import Tooltip from '@shared/atoms/Tooltip' import { useWeb3 } from '@context/Web3' import styles from './Title.module.css' - -import { graphql, useStaticQuery } from 'gatsby' - -const query = graphql` - query { - content: allFile(filter: { relativePath: { eq: "publish/index.json" } }) { - edges { - node { - childPublishJson { - title - tooltipNetwork - } - } - } - } - } -` +import content from '../../../content/publish/index.json' export default function Title(): ReactElement { - const data = useStaticQuery(query) - const content = data.content.edges[0].node.childPublishJson const { networkId } = useWeb3() return ( diff --git a/src/components/Publish/index.tsx b/src/components/Publish/index.tsx index f1768f689..2e332bbc9 100644 --- a/src/components/Publish/index.tsx +++ b/src/components/Publish/index.tsx @@ -1,5 +1,4 @@ import React, { ReactElement, useState, useEffect } from 'react' -import Permission from '@shared/Permission' import { Formik, FormikState } from 'formik' import { usePublish } from '@hooks/usePublish' import { initialValues, validationSchema } from './_constants' @@ -81,6 +80,10 @@ export default function PublishPage({ // } // } + return ( + <> + } description={content.description} /> + {isInPurgatory && purgatoryData ? null : ( >>>>>> 4a56991b (more refactor):src/components/App/ContextProviders.tsx return ( diff --git a/src/pages/publish.tsx b/src/pages/publish.tsx index 8d1eb85b8..f7ae3b2b6 100644 --- a/src/pages/publish.tsx +++ b/src/pages/publish.tsx @@ -2,7 +2,7 @@ import React, { ReactElement } from 'react' import Publish from '../components/Publish' import Page from '@shared/Page' import OceanProvider from '@context/Ocean' -import content from '../../content/pages/publish/index.json' +import content from '../../content/publish/index.json' import router from 'next/router' export default function PagePublish(): ReactElement { @@ -10,9 +10,14 @@ export default function PagePublish(): ReactElement { return ( - + ) -} \ No newline at end of file +}