From ba10ee629d5d08653dbccc70d61acdb582b7b955 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Mon, 18 Jul 2022 16:33:57 +0300 Subject: [PATCH] chore: download packages --- package-lock.json | 243 +++++++++++++----- package.json | 1 + .../CommentsSection/CommentsSection.tsx | 27 +- .../CommentsSection/comments.worker.ts | 7 + .../pages/PostDetailsPage/PostDetailsPage.tsx | 4 + 5 files changed, 220 insertions(+), 62 deletions(-) create mode 100644 src/features/Posts/Components/Comments/CommentsSection/comments.worker.ts diff --git a/package-lock.json b/package-lock.json index 23ad93c..a0fa799 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@reduxjs/toolkit": "^1.8.1", "@remirror/pm": "^1.0.16", "@remirror/react": "^1.0.34", + "@shopify/react-web-worker": "^5.0.1", "@szhsin/react-menu": "^3.0.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", @@ -6810,6 +6811,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@remote-ui/rpc": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@remote-ui/rpc/-/rpc-1.3.2.tgz", + "integrity": "sha512-pvwKS4/kB4viT3G6UDLduvIDzzcMQPcjSh+1lq8lMMexsFIWLfrCkV0rUh03PKEh8ZpiXeJc6An0fJ3GfAsCJA==" + }, "node_modules/@repeaterjs/repeater": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@repeaterjs/repeater/-/repeater-3.0.4.tgz", @@ -6920,6 +6926,69 @@ "resolved": "https://registry.npmjs.org/@seznam/compose-react-refs/-/compose-react-refs-1.0.6.tgz", "integrity": "sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q==" }, + "node_modules/@shopify/react-hooks": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@shopify/react-hooks/-/react-hooks-3.0.1.tgz", + "integrity": "sha512-RfTrJoEgDQ4TZhD1iT8Tg1u3Bjobo/ZceL9xgGssXjA8Qih1/VOgkdbnH3jKOkj1L2nDT4lfuo/DsTSFwLTQ9A==", + "engines": { + "node": "^14.17.0 || >=16.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0 <19.0.0" + } + }, + "node_modules/@shopify/react-web-worker": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@shopify/react-web-worker/-/react-web-worker-5.0.1.tgz", + "integrity": "sha512-bV9J65Bb4m/eGVug6A8XG4G46eGIZSdaQjvyG4uCOpgtLyvAgx8MZPUEc+qkMRpIMOpJkbYBB3qsCqOVQpWrgA==", + "dependencies": { + "@shopify/react-hooks": "^3.0.1", + "@shopify/useful-types": "^5.0.0", + "@shopify/web-worker": "^5.0.0" + }, + "engines": { + "node": "^14.17.0 || >=16.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0 <19.0.0", + "react-dom": ">=16.8.0 <19.0.0" + } + }, + "node_modules/@shopify/useful-types": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@shopify/useful-types/-/useful-types-5.0.0.tgz", + "integrity": "sha512-3T9AZNKK3Tjxz++Z10DFtNnAXfdoE9kPkJTiCfsRcxZ3IVfFORzAUKTv4mgKT5P8IyRbIRtmxfzZzRCxn4fIgQ==", + "engines": { + "node": "^14.17.0 || >=16.0.0" + } + }, + "node_modules/@shopify/web-worker": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@shopify/web-worker/-/web-worker-5.0.0.tgz", + "integrity": "sha512-7NeRu05OkPqUP23zQPNrtGhJDPClfWQvRA6snz0YlE/qUZ7oxVoB3WLaoQ686JaRyx//XQShYjRxTyqA1O/Wdw==", + "dependencies": { + "@remote-ui/rpc": "^1.2.5" + }, + "engines": { + "node": "^14.17.0 || >=16.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "webpack": "^5.38.0", + "webpack-virtual-modules": "^0.4.3" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "webpack": { + "optional": true + }, + "webpack-virtual-modules": { + "optional": true + } + } + }, "node_modules/@sindresorhus/is": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz", @@ -9038,6 +9107,24 @@ "source-map": "~0.6.1" } }, + "node_modules/@storybook/builder-webpack4/node_modules/webpack-virtual-modules": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.2.2.tgz", + "integrity": "sha512-kDUmfm3BZrei0y+1NTHJInejzxfhtU8eDj2M7OKb2IWrPFAeO1SOH2KuQ68MSZu9IGEHcxbkKKR1v18FrUSOmA==", + "dev": true, + "dependencies": { + "debug": "^3.0.0" + } + }, + "node_modules/@storybook/builder-webpack4/node_modules/webpack-virtual-modules/node_modules/debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.1" + } + }, "node_modules/@storybook/builder-webpack4/node_modules/webpack/node_modules/cacache": { "version": "12.0.4", "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz", @@ -9373,12 +9460,6 @@ "webpack": "^4.0.0 || ^5.0.0" } }, - "node_modules/@storybook/builder-webpack5/node_modules/webpack-virtual-modules": { - "version": "0.4.3", - "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz", - "integrity": "sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==", - "dev": true - }, "node_modules/@storybook/channel-postmessage": { "version": "6.4.22", "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.4.22.tgz", @@ -11970,6 +12051,15 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/@storybook/manager-webpack4/node_modules/debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.1" + } + }, "node_modules/@storybook/manager-webpack4/node_modules/enhanced-resolve": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz", @@ -12767,6 +12857,15 @@ "source-map": "~0.6.1" } }, + "node_modules/@storybook/manager-webpack4/node_modules/webpack-virtual-modules": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.2.2.tgz", + "integrity": "sha512-kDUmfm3BZrei0y+1NTHJInejzxfhtU8eDj2M7OKb2IWrPFAeO1SOH2KuQ68MSZu9IGEHcxbkKKR1v18FrUSOmA==", + "dev": true, + "dependencies": { + "debug": "^3.0.0" + } + }, "node_modules/@storybook/manager-webpack4/node_modules/webpack/node_modules/cacache": { "version": "12.0.4", "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz", @@ -13122,12 +13221,6 @@ "webpack": "^4.0.0 || ^5.0.0" } }, - "node_modules/@storybook/manager-webpack5/node_modules/webpack-virtual-modules": { - "version": "0.4.3", - "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz", - "integrity": "sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==", - "dev": true - }, "node_modules/@storybook/node-logger": { "version": "6.4.22", "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.4.22.tgz", @@ -66811,22 +66904,10 @@ } }, "node_modules/webpack-virtual-modules": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.2.2.tgz", - "integrity": "sha512-kDUmfm3BZrei0y+1NTHJInejzxfhtU8eDj2M7OKb2IWrPFAeO1SOH2KuQ68MSZu9IGEHcxbkKKR1v18FrUSOmA==", - "dev": true, - "dependencies": { - "debug": "^3.0.0" - } - }, - "node_modules/webpack-virtual-modules/node_modules/debug": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", - "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", - "dev": true, - "dependencies": { - "ms": "^2.1.1" - } + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.4.tgz", + "integrity": "sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==", + "devOptional": true }, "node_modules/webpack/node_modules/eslint-scope": { "version": "5.1.1", @@ -72554,6 +72635,11 @@ } } }, + "@remote-ui/rpc": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@remote-ui/rpc/-/rpc-1.3.2.tgz", + "integrity": "sha512-pvwKS4/kB4viT3G6UDLduvIDzzcMQPcjSh+1lq8lMMexsFIWLfrCkV0rUh03PKEh8ZpiXeJc6An0fJ3GfAsCJA==" + }, "@repeaterjs/repeater": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@repeaterjs/repeater/-/repeater-3.0.4.tgz", @@ -72627,6 +72713,35 @@ "resolved": "https://registry.npmjs.org/@seznam/compose-react-refs/-/compose-react-refs-1.0.6.tgz", "integrity": "sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q==" }, + "@shopify/react-hooks": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@shopify/react-hooks/-/react-hooks-3.0.1.tgz", + "integrity": "sha512-RfTrJoEgDQ4TZhD1iT8Tg1u3Bjobo/ZceL9xgGssXjA8Qih1/VOgkdbnH3jKOkj1L2nDT4lfuo/DsTSFwLTQ9A==", + "requires": {} + }, + "@shopify/react-web-worker": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@shopify/react-web-worker/-/react-web-worker-5.0.1.tgz", + "integrity": "sha512-bV9J65Bb4m/eGVug6A8XG4G46eGIZSdaQjvyG4uCOpgtLyvAgx8MZPUEc+qkMRpIMOpJkbYBB3qsCqOVQpWrgA==", + "requires": { + "@shopify/react-hooks": "^3.0.1", + "@shopify/useful-types": "^5.0.0", + "@shopify/web-worker": "^5.0.0" + } + }, + "@shopify/useful-types": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@shopify/useful-types/-/useful-types-5.0.0.tgz", + "integrity": "sha512-3T9AZNKK3Tjxz++Z10DFtNnAXfdoE9kPkJTiCfsRcxZ3IVfFORzAUKTv4mgKT5P8IyRbIRtmxfzZzRCxn4fIgQ==" + }, + "@shopify/web-worker": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@shopify/web-worker/-/web-worker-5.0.0.tgz", + "integrity": "sha512-7NeRu05OkPqUP23zQPNrtGhJDPClfWQvRA6snz0YlE/qUZ7oxVoB3WLaoQ686JaRyx//XQShYjRxTyqA1O/Wdw==", + "requires": { + "@remote-ui/rpc": "^1.2.5" + } + }, "@sindresorhus/is": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz", @@ -74278,6 +74393,26 @@ "source-map": "~0.6.1" } }, + "webpack-virtual-modules": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.2.2.tgz", + "integrity": "sha512-kDUmfm3BZrei0y+1NTHJInejzxfhtU8eDj2M7OKb2IWrPFAeO1SOH2KuQ68MSZu9IGEHcxbkKKR1v18FrUSOmA==", + "dev": true, + "requires": { + "debug": "^3.0.0" + }, + "dependencies": { + "debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + } + } + }, "y18n": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", @@ -74444,12 +74579,6 @@ "range-parser": "^1.2.1", "schema-utils": "^3.0.0" } - }, - "webpack-virtual-modules": { - "version": "0.4.3", - "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz", - "integrity": "sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==", - "dev": true } } }, @@ -76555,6 +76684,15 @@ } } }, + "debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + }, "enhanced-resolve": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz", @@ -77278,6 +77416,15 @@ "source-map": "~0.6.1" } }, + "webpack-virtual-modules": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.2.2.tgz", + "integrity": "sha512-kDUmfm3BZrei0y+1NTHJInejzxfhtU8eDj2M7OKb2IWrPFAeO1SOH2KuQ68MSZu9IGEHcxbkKKR1v18FrUSOmA==", + "dev": true, + "requires": { + "debug": "^3.0.0" + } + }, "y18n": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", @@ -77447,12 +77594,6 @@ "range-parser": "^1.2.1", "schema-utils": "^3.0.0" } - }, - "webpack-virtual-modules": { - "version": "0.4.3", - "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz", - "integrity": "sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==", - "dev": true } } }, @@ -118600,24 +118741,10 @@ "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==" }, "webpack-virtual-modules": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.2.2.tgz", - "integrity": "sha512-kDUmfm3BZrei0y+1NTHJInejzxfhtU8eDj2M7OKb2IWrPFAeO1SOH2KuQ68MSZu9IGEHcxbkKKR1v18FrUSOmA==", - "dev": true, - "requires": { - "debug": "^3.0.0" - }, - "dependencies": { - "debug": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", - "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", - "dev": true, - "requires": { - "ms": "^2.1.1" - } - } - } + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.4.tgz", + "integrity": "sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==", + "devOptional": true }, "websocket-driver": { "version": "0.7.4", diff --git a/package.json b/package.json index be89451..b93d63e 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@reduxjs/toolkit": "^1.8.1", "@remirror/pm": "^1.0.16", "@remirror/react": "^1.0.34", + "@shopify/react-web-worker": "^5.0.1", "@szhsin/react-menu": "^3.0.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", diff --git a/src/features/Posts/Components/Comments/CommentsSection/CommentsSection.tsx b/src/features/Posts/Components/Comments/CommentsSection/CommentsSection.tsx index a2dc515..ce90195 100644 --- a/src/features/Posts/Components/Comments/CommentsSection/CommentsSection.tsx +++ b/src/features/Posts/Components/Comments/CommentsSection/CommentsSection.tsx @@ -1,15 +1,34 @@ -import React, { useMemo } from 'react' +import React, { useEffect, useMemo } from 'react' import Comment from '../Comment/Comment' import AddComment from '../AddComment/AddComment' import { convertCommentsToTree } from '../helpers' import { Comment as IComment } from '../types' +import { createWorkerFactory, useWorker } from '@shopify/react-web-worker' + + +const createWorker = createWorkerFactory(() => import('./comments.worker')); + interface Props { comments: IComment[] } export default function CommentsSection({ comments }: Props) { - const commentsTree = useMemo(() => convertCommentsToTree(comments), [comments]) + const worker = useWorker(createWorker); + // const commentsTree = useMemo(() => convertCommentsToTree(comments), [comments]) + + useEffect(() => { + (async () => { + // Note: in your actual app code, make sure to check if Home + // is still mounted before setting state asynchronously! + const webWorkerMessage = await worker.now('prefix'); + // worker + // alert(webWorkerMessage); + + // setMessage(webWorkerMessage); + })(); + }, [worker]) + return (
@@ -17,9 +36,9 @@ export default function CommentsSection({ comments }: Props) {
-
+ {/*
{commentsTree.map(comment => )} -
+
*/}
) } diff --git a/src/features/Posts/Components/Comments/CommentsSection/comments.worker.ts b/src/features/Posts/Components/Comments/CommentsSection/comments.worker.ts new file mode 100644 index 0000000..9cf9e36 --- /dev/null +++ b/src/features/Posts/Components/Comments/CommentsSection/comments.worker.ts @@ -0,0 +1,7 @@ +import dayjs from 'dayjs' + +export function now(prefix: string) { + const hell = window.localStorage.getItem('test'); + if (!hell) window.localStorage.setItem('test', 'test'); + return hell + prefix + dayjs() +} \ No newline at end of file diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx index 2bfd33a..82aed5d 100644 --- a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx +++ b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx @@ -6,6 +6,7 @@ import NotFoundPage from 'src/features/Shared/pages/NotFoundPage/NotFoundPage' import { usePostDetailsQuery } from 'src/graphql' import { capitalize } from 'src/utils/helperFunctions' import { useAppSelector, } from 'src/utils/hooks' +import { CommentsSection } from '../../Components/Comments' import TrendingCard from '../../Components/TrendingCard/TrendingCard' import AuthorCard from './Components/AuthorCard/AuthorCard' import PageContent from './Components/PageContent/PageContent' @@ -70,6 +71,9 @@ export default function PostDetailsPage() { +
+ +
)