From 2b2d35eaf51b4129188a89ec3a8336f4b81f2dc2 Mon Sep 17 00:00:00 2001 From: Cheslav Zhuravsky Date: Mon, 2 Oct 2023 06:10:42 +0400 Subject: [PATCH] feat(oracle): focus on learning - stub landing - better surfing - cool filters and sortings - search by ipfs hash - explicite ranks by @ dasein @El-NIVVO @master --- .storybook/_template.tsx | 10 +- .storybook/preview.tsx | 18 +- .vscode/settings.json | 5 +- package.json | 1 - src/components/ContentItem/contentItem.tsx | 22 +- src/components/Dropdown/Dropdown.module.scss | 68 +++ src/components/Dropdown/Dropdown.stories.tsx | 47 +++ src/components/Dropdown/Dropdown.tsx | 58 +++ src/components/PDF/index.tsx | 8 +- src/components/Rank/Rank.module.scss | 30 ++ src/components/Rank/Rank.stories.tsx | 36 ++ src/components/Rank/rank.jsx | 106 ----- src/components/Rank/rank.tsx | 118 ++++++ src/components/SearchItem/searchItem.tsx | 9 +- src/components/Table/Table.tsx | 10 +- .../TextMarkdown/styles.module.scss | 12 +- src/components/account/account.tsx | 6 +- src/components/actionBar/index.tsx | 14 +- .../ButtonsGroup/ButtonsGroup.module.scss | 53 +++ .../buttons/ButtonsGroup/ButtonsGroup.tsx | 51 +++ .../Display/Display.module.scss | 21 +- .../Display/Display.stories.tsx | 7 + .../containerGradient/Display/Display.tsx | 4 + .../Display/variables.module.scss | 2 + .../component/Audio/Audio.module.scss | 4 + .../contentIpfs/component/Audio/Audio.tsx | 18 + src/components/contentIpfs/contentIpfs.tsx | 37 +- .../search/Spark/Meta/Links/Links.module.scss | 18 + .../search/Spark/Meta/Links/Links.stories.tsx | 25 ++ .../search/Spark/Meta/Links/Links.tsx | 51 +++ .../search/Spark/Meta/Links/link.svg | 9 + .../search/Spark/Meta/Meta.module.scss | 19 + .../search/Spark/Meta/Meta.stories.tsx | 28 ++ src/components/search/Spark/Meta/Meta.tsx | 44 ++ src/components/search/Spark/Spark.module.scss | 47 +++ src/components/search/Spark/Spark.stories.tsx | 29 ++ src/components/search/Spark/Spark.tsx | 134 ++++++ src/components/search/Spark/stub.ts | 13 + src/containers/Objects/index.jsx | 44 +- src/containers/Search/ActionBarContainer.jsx | 2 +- .../Search/Filters/Filters.module.scss | 29 ++ src/containers/Search/Filters/Filters.tsx | 160 +++++++ src/containers/Search/SearchResults.jsx | 391 ------------------ src/containers/Search/SearchResults.tsx | 212 ++++++++++ .../Search/_FirstItems.refactor.tsx | 118 ++++++ src/containers/Search/constants.ts | 1 + src/containers/Search/types.ts | 20 + src/containers/Search/useSearchData.tsx | 289 +++++++++++++ src/containers/application/App.tsx | 4 +- src/containers/application/AppMenu.tsx | 5 +- .../Header/Commander/Commander.module.scss | 2 +- .../Header/Commander/Commander.tsx | 14 +- .../SwitchNetwork/SwitchNetwork.module.scss | 7 + .../Header/SwitchNetwork/SwitchNetwork.tsx | 1 + src/containers/ipfs/IPFS.module.scss | 76 ++++ .../ipfs/components/ContentIpfsCid.tsx | 7 +- src/containers/ipfs/components/backlinks.tsx | 57 --- src/containers/ipfs/components/community.tsx | 31 -- src/containers/ipfs/components/creator.tsx | 28 -- src/containers/ipfs/components/metaInfo.tsx | 2 +- src/containers/ipfs/hooks/useGetBackLink.ts | 77 ++-- src/containers/ipfs/hooks/useGetDiscussion.ts | 81 ++-- src/containers/ipfs/ipfs.tsx | 255 ++++++------ src/containers/ipfs/tab/answers.tsx | 90 ---- src/containers/ipfs/tab/discussion.tsx | 99 ----- src/containers/ipfs/tab/index.jsx | 5 - src/containers/ipfs/tab/meta.tsx | 46 --- src/containers/oracle/index.jsx | 3 +- .../components/avataIpfs/AvataImgIpfs.tsx | 2 +- .../components/avataIpfs/containerAvatar.jsx | 2 +- .../{styles.scss => styles.module.scss} | 0 .../{mainContainer.jsx => mainContainer.tsx} | 16 +- .../temple/components/Carousel/Carousel.tsx | 6 +- .../adviser/Adviser/Adviser.module.scss | 10 + src/features/adviser/Adviser/Adviser.tsx | 1 + .../adviser/AdviserContainer.module.scss | 4 +- src/hooks/useGraphQL.ts | 30 ++ src/hooks/useHover.ts | 32 ++ src/hooks/useQueueIpfsContent.ts | 7 +- src/layouts/Main.module.scss | 7 + src/layouts/Main.tsx | 3 +- src/pages/Search/Learn/Learn.module.scss | 0 src/pages/Search/Learn/Learn.tsx | 14 + src/pages/Search/Search.module.scss | 254 ++++++++++++ src/pages/Search/Search.tsx | 109 +++++ src/pages/Search/img.png | Bin 0 -> 32363 bytes src/pages/Search/oracle.png | Bin 0 -> 31885 bytes src/pages/robot/Layout/Layout.module.scss | 1 + src/router.tsx | 31 +- src/routes.ts | 15 +- src/services/QueueManager/QueueManager.d.ts | 2 +- src/soft.js/api/search.ts | 13 + src/style/components.css | 14 - src/style/index.scss | 2 + src/utils/helpers.ts | 1 - src/utils/ipfs/content-utils.ts | 2 + src/utils/search/{utils.js => utils.ts} | 39 +- src/utils/utils.ts | 2 +- yarn.lock | 7 - 99 files changed, 2794 insertions(+), 1180 deletions(-) create mode 100644 src/components/Dropdown/Dropdown.module.scss create mode 100644 src/components/Dropdown/Dropdown.stories.tsx create mode 100644 src/components/Dropdown/Dropdown.tsx create mode 100644 src/components/Rank/Rank.module.scss create mode 100644 src/components/Rank/Rank.stories.tsx delete mode 100644 src/components/Rank/rank.jsx create mode 100644 src/components/Rank/rank.tsx create mode 100644 src/components/buttons/ButtonsGroup/ButtonsGroup.module.scss create mode 100644 src/components/buttons/ButtonsGroup/ButtonsGroup.tsx create mode 100644 src/components/containerGradient/Display/variables.module.scss create mode 100644 src/components/contentIpfs/component/Audio/Audio.module.scss create mode 100644 src/components/contentIpfs/component/Audio/Audio.tsx create mode 100644 src/components/search/Spark/Meta/Links/Links.module.scss create mode 100644 src/components/search/Spark/Meta/Links/Links.stories.tsx create mode 100644 src/components/search/Spark/Meta/Links/Links.tsx create mode 100644 src/components/search/Spark/Meta/Links/link.svg create mode 100644 src/components/search/Spark/Meta/Meta.module.scss create mode 100644 src/components/search/Spark/Meta/Meta.stories.tsx create mode 100644 src/components/search/Spark/Meta/Meta.tsx create mode 100644 src/components/search/Spark/Spark.module.scss create mode 100644 src/components/search/Spark/Spark.stories.tsx create mode 100644 src/components/search/Spark/Spark.tsx create mode 100644 src/components/search/Spark/stub.ts create mode 100644 src/containers/Search/Filters/Filters.module.scss create mode 100644 src/containers/Search/Filters/Filters.tsx delete mode 100644 src/containers/Search/SearchResults.jsx create mode 100644 src/containers/Search/SearchResults.tsx create mode 100644 src/containers/Search/_FirstItems.refactor.tsx create mode 100644 src/containers/Search/constants.ts create mode 100644 src/containers/Search/types.ts create mode 100644 src/containers/Search/useSearchData.tsx delete mode 100644 src/containers/ipfs/components/backlinks.tsx delete mode 100644 src/containers/ipfs/components/community.tsx delete mode 100644 src/containers/ipfs/components/creator.tsx delete mode 100644 src/containers/ipfs/tab/answers.tsx delete mode 100644 src/containers/ipfs/tab/discussion.tsx delete mode 100644 src/containers/ipfs/tab/index.jsx delete mode 100644 src/containers/ipfs/tab/meta.tsx rename src/containers/portal/components/avataIpfs/{styles.scss => styles.module.scss} (100%) rename src/containers/portal/components/mainContainer/{mainContainer.jsx => mainContainer.tsx} (59%) create mode 100644 src/hooks/useGraphQL.ts create mode 100644 src/hooks/useHover.ts create mode 100644 src/layouts/Main.module.scss create mode 100644 src/pages/Search/Learn/Learn.module.scss create mode 100644 src/pages/Search/Learn/Learn.tsx create mode 100644 src/pages/Search/Search.module.scss create mode 100644 src/pages/Search/Search.tsx create mode 100644 src/pages/Search/img.png create mode 100644 src/pages/Search/oracle.png create mode 100644 src/soft.js/api/search.ts rename src/utils/search/{utils.js => utils.ts} (96%) diff --git a/.storybook/_template.tsx b/.storybook/_template.tsx index 6f4b14804..8b0c6d92d 100644 --- a/.storybook/_template.tsx +++ b/.storybook/_template.tsx @@ -2,11 +2,11 @@ import { Meta, StoryObj } from '@storybook/react'; -import $Component from './$Component'; +import _Component from './_Component'; -const meta: Meta = { - component: $Component, - title: 'atoms/$Component', +const meta: Meta = { + component: _Component, + title: 'atoms/_Component', parameters: { design: { type: 'figma', @@ -16,7 +16,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; +type Story = StoryObj; const defaultArgs = {}; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 12f90a518..b9f5acad8 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -10,6 +10,8 @@ import './styles.scss'; // storybook error that React not defined, may be fixed in future import React from 'react'; import { QueryClientProvider, QueryClient } from '@tanstack/react-query'; +import store from '../src/redux/store'; +import { Provider } from 'react-redux'; window.React = React; export const queryClient = new QueryClient({ @@ -39,13 +41,15 @@ const preview: Preview = { (Story) => (
- - - - - - - + + + + + + + + +
), diff --git a/.vscode/settings.json b/.vscode/settings.json index db5fea899..b4799cd4c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,15 +1,16 @@ { "cSpell.words": [ + "bech32", "Bostrom", "cybercongress", "cyberlink", "cyberlinks", + "denoms", "investmint", "Ipfs", "Keplr", "stylelint", - "denoms", - "bech32", + "superintelligence", "websockets" ] } diff --git a/package.json b/package.json index 66dac5ff2..cc23909dc 100644 --- a/package.json +++ b/package.json @@ -212,7 +212,6 @@ "react-dom": "^18.0.0", "react-force-graph": "^1.39.5", "react-helmet": "^6.1.0", - "react-infinite-scroller": "^1.2.6", "react-localization": "^1.0.15", "react-markdown": "^7.1.1", "react-number-format": "^5.1.2", diff --git a/src/components/ContentItem/contentItem.tsx b/src/components/ContentItem/contentItem.tsx index f33673e34..c0e14b32c 100644 --- a/src/components/ContentItem/contentItem.tsx +++ b/src/components/ContentItem/contentItem.tsx @@ -3,7 +3,11 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { $TsFixMe } from 'src/types/tsfix'; import useQueueIpfsContent from 'src/hooks/useQueueIpfsContent'; -import { IPFSContentDetails, IPFSContentMaybe } from 'src/utils/ipfs/ipfs'; +import { + IPFSContentDetails, + IPFSContentMaybe, + IpfsContentType, +} from 'src/utils/ipfs/ipfs'; import { parseRawIpfsData } from 'src/utils/ipfs/content-utils'; import SearchItem from '../SearchItem/searchItem'; @@ -17,29 +21,39 @@ type ContentItemProps = { grade?: $TsFixMe; className?: string; parent?: string; + setType?: (type: IpfsContentType) => void; }; function ContentItem({ item, cid, grade, + linkType, parent: parentId, + setType, className, }: ContentItemProps): JSX.Element { - const { status, content } = useQueueIpfsContent(cid, item.rank, parentId); + const { status, content } = useQueueIpfsContent(cid, item?.rank, parentId); return ( - + ); diff --git a/src/components/Dropdown/Dropdown.module.scss b/src/components/Dropdown/Dropdown.module.scss new file mode 100644 index 000000000..71190b3ce --- /dev/null +++ b/src/components/Dropdown/Dropdown.module.scss @@ -0,0 +1,68 @@ +.dropdown { + display: inline-block; + padding: 0 15px; + + > button { + color: var(--blue-light); + + display: flex; + align-items: center; + + &::after { + content: '▼'; + font-size: 8px; + position: relative; + top: 3px; + margin-left: 10px; + } + } + position: relative; + + ul { + margin-top: 15px; + &::before { + background-color: rgba(0, 17, 22, 0.37); + filter: blur(10px); + content: ''; + height: 100%; + left: 0; + z-index: -1; + position: absolute; + top: 0; + width: 100%; + } + position: absolute; + padding: 15px; + + z-index: 1; + left: 0; + right: 0; + list-style-type: none; + + li + li { + margin-top: 12px; + } + + li { + &.active { + button { + color: var(--blue-light); + } + } + transition: all 300ms ease-out; + + button { + color: rgba(255, 255, 255, 0.5); + + &:hover { + color: var(--blue-light); + } + } + } + } + + button { + text-transform: lowercase; + font-size: 1rem; + } +} diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx new file mode 100644 index 000000000..49afaf0a4 --- /dev/null +++ b/src/components/Dropdown/Dropdown.stories.tsx @@ -0,0 +1,47 @@ +/* eslint-disable import/no-unused-modules */ + +import { Meta, StoryObj } from '@storybook/react'; + +import { useState } from 'react'; +import Dropdown from './Dropdown'; + +const defaultArgs = { + options: [ + { + label: 'Rank', + value: 'rank', + }, + { + label: 'Date', + value: 'date', + }, + { + label: 'Size', + value: 'size', + }, + ], +}; + +const meta: Meta = { + component: Dropdown, + title: 'atoms/Dropdown', + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/7i0Ly3YF587km0F8iDZod4/cyb?type=design&node-id=20608-4734&mode=dev', + }, + }, +}; +export default meta; + +type Story = StoryObj; + +function Wrapper() { + const [value, setValue] = useState(defaultArgs.options[0].value); + + return ; +} + +export const Main: Story = { + render: Wrapper, +}; diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx new file mode 100644 index 000000000..f9e96aa08 --- /dev/null +++ b/src/components/Dropdown/Dropdown.tsx @@ -0,0 +1,58 @@ +import React, { useState } from 'react'; +import styles from './Dropdown.module.scss'; +import { CSSTransition } from 'react-transition-group'; +import cx from 'classnames'; + +type Props = { + options: { + label: string; + value: string; + }[]; + + value: string; + onChange: (value: string) => void; +}; + +function Dropdown({ options = [], value, onChange }: Props) { + const [isOpen, setIsOpen] = useState(false); + + return ( +
+ + + {isOpen && ( + // + + // +
    + {options.map(({ label, value: val }) => { + return ( +
  • + +
  • + ); + })} +
+ )} +
+ ); +} + +export default Dropdown; diff --git a/src/components/PDF/index.tsx b/src/components/PDF/index.tsx index f02abe204..404fbe2de 100644 --- a/src/components/PDF/index.tsx +++ b/src/components/PDF/index.tsx @@ -1,10 +1,16 @@ import Iframe from '../Iframe/Iframe'; -function Pdf({ content, search }) { +type Props = { + content: string; + search?: boolean; +}; + +function Pdf({ content, search }: Props) { return (