From c58bf1a3794042cea3cc6256c4bf1646b429bf8f Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 26 Oct 2020 12:18:43 +0700 Subject: [PATCH 01/34] made simple full-width image container --- src/components/node/NodeImageTinySlider/index.tsx | 8 ++++++++ .../node/NodeImageTinySlider/styles.module.scss | 11 +++++++++++ src/containers/App.tsx | 1 + src/redux/node/constants.ts | 4 +++- 4 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 src/components/node/NodeImageTinySlider/index.tsx create mode 100644 src/components/node/NodeImageTinySlider/styles.module.scss diff --git a/src/components/node/NodeImageTinySlider/index.tsx b/src/components/node/NodeImageTinySlider/index.tsx new file mode 100644 index 00000000..a906c1ed --- /dev/null +++ b/src/components/node/NodeImageTinySlider/index.tsx @@ -0,0 +1,8 @@ +import React, { FC } from 'react'; +import styles from './styles.module.scss'; + +interface IProps {} + +const NodeImageTinySlider: FC = () =>
Slider :3
; + +export { NodeImageTinySlider }; diff --git a/src/components/node/NodeImageTinySlider/styles.module.scss b/src/components/node/NodeImageTinySlider/styles.module.scss new file mode 100644 index 00000000..183dc118 --- /dev/null +++ b/src/components/node/NodeImageTinySlider/styles.module.scss @@ -0,0 +1,11 @@ +.wrap { + //padding-bottom: $radius; + background-color: $red; + + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; +} diff --git a/src/containers/App.tsx b/src/containers/App.tsx index d90a8e15..70677195 100644 --- a/src/containers/App.tsx +++ b/src/containers/App.tsx @@ -25,6 +25,7 @@ const Component: FC = ({ modal: { is_shown } }) => {
+ diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 76d421b0..edea89bd 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -16,6 +16,7 @@ import { Filler } from '~/components/containers/Filler'; import { modalShowPhotoswipe } from '../modal/actions'; import { IEditorComponentProps } from '~/redux/node/types'; import { EditorFiller } from '~/components/editors/EditorFiller'; +import { NodeImageTinySlider } from '~/components/node/NodeImageTinySlider'; const prefix = 'NODE.'; export const NODE_ACTIONS = { @@ -90,7 +91,8 @@ export type INodeComponentProps = { export type INodeComponents = Record, FC>; export const NODE_HEADS: INodeComponents = { - [NODE_TYPES.IMAGE]: NodeImageSlideBlock, + // [NODE_TYPES.IMAGE]: NodeImageSlideBlock, + [NODE_TYPES.IMAGE]: NodeImageTinySlider, }; export const NODE_COMPONENTS: INodeComponents = { From fefec524db4e67e2ee005652f1e43d4905e6031d Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 26 Oct 2020 17:48:50 +0700 Subject: [PATCH 02/34] made simple full-width image container --- .../node/NodeImageTinySlider/index.tsx | 41 ++++++++++++++++++- .../NodeImageTinySlider/styles.module.scss | 15 ++++++- src/styles/global.scss | 2 + 3 files changed, 54 insertions(+), 4 deletions(-) diff --git a/src/components/node/NodeImageTinySlider/index.tsx b/src/components/node/NodeImageTinySlider/index.tsx index a906c1ed..6ca0e61a 100644 --- a/src/components/node/NodeImageTinySlider/index.tsx +++ b/src/components/node/NodeImageTinySlider/index.tsx @@ -1,8 +1,45 @@ -import React, { FC } from 'react'; +import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import styles from './styles.module.scss'; interface IProps {} -const NodeImageTinySlider: FC = () =>
Slider :3
; +const NodeImageTinySlider: FC = () => { + const sample = useRef(null); + const [clientWidth, setClientWidth] = useState(document.documentElement.clientWidth); + + const style = useMemo(() => { + if (!sample.current) return { display: 'none' }; + + const { width } = sample.current.getBoundingClientRect(); + const { clientWidth } = document.documentElement; + + return { + // width: clientWidth, + // transform: `translate(-${(clientWidth - width) / 2}px, 0)`, + }; + }, [sample.current, clientWidth]); + + const onResize = useCallback(() => setClientWidth(document.documentElement.clientWidth), []); + + useEffect(() => { + window.addEventListener('resize', onResize); + document.body.addEventListener('overflow', onResize); + document.body.addEventListener('overflowchanged', console.log); + + document.body.addEventListener('resize', console.log); + + return () => { + window.removeEventListener('resize', onResize); + window.removeEventListener('overflow', onResize); + }; + }, []); + + return ( +
+
+
+
+ ); +}; export { NodeImageTinySlider }; diff --git a/src/components/node/NodeImageTinySlider/styles.module.scss b/src/components/node/NodeImageTinySlider/styles.module.scss index 183dc118..f96e7258 100644 --- a/src/components/node/NodeImageTinySlider/styles.module.scss +++ b/src/components/node/NodeImageTinySlider/styles.module.scss @@ -1,11 +1,22 @@ .wrap { - //padding-bottom: $radius; - background-color: $red; + background: $red; +} +.sample { + width: 100%; + display: block; + height: 24px; + background: green; +} + +.slider { + background: blue; + height: 20px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; + box-sizing: border-box; } diff --git a/src/styles/global.scss b/src/styles/global.scss index 961fc74d..b856a237 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -2,6 +2,8 @@ html { min-height: 100vh; + box-sizing: border-box; + overflow: auto; } body { From 531bd3626aba09339c17c03d42f66ddde43a8396 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 26 Oct 2020 19:14:41 +0700 Subject: [PATCH 03/34] added working tiny-slider! --- package.json | 2 + src/components/containers/FullWidth/index.tsx | 46 +++++++++++++ .../containers/FullWidth/styles.module.scss | 10 +++ .../node/NodeImageTinySlider/index.tsx | 69 +++++++++---------- .../NodeImageTinySlider/styles.module.scss | 23 +------ src/utils/node.ts | 12 +++- yarn.lock | 17 +++++ 7 files changed, 122 insertions(+), 57 deletions(-) create mode 100644 src/components/containers/FullWidth/index.tsx create mode 100644 src/components/containers/FullWidth/styles.module.scss diff --git a/package.json b/package.json index 7332d17b..1767cc16 100644 --- a/package.json +++ b/package.json @@ -110,6 +110,8 @@ "scrypt": "^6.0.3", "sticky-sidebar": "^3.3.1", "throttle-debounce": "^2.1.0", + "tiny-slider-react": "^0.5.3", + "tiny-slider": "2.9.2", "tinycolor": "^0.0.1", "tslint": "^5.20.0", "tslint-config-airbnb": "^5.11.2", diff --git a/src/components/containers/FullWidth/index.tsx b/src/components/containers/FullWidth/index.tsx new file mode 100644 index 00000000..f2f8a603 --- /dev/null +++ b/src/components/containers/FullWidth/index.tsx @@ -0,0 +1,46 @@ +import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import styles from './styles.module.scss'; +import ResizeSensor from 'resize-sensor'; + +const FullWidth: FC = ({ children }) => { + const sample = useRef(null); + const [clientWidth, setClientWidth] = useState(document.documentElement.clientWidth); + + const style = useMemo(() => { + if (!sample.current) return { display: 'none' }; + + const { width } = sample.current.getBoundingClientRect(); + const { clientWidth } = document.documentElement; + + return { + width: clientWidth, + transform: `translate(-${(clientWidth - width) / 2}px, 0)`, + }; + }, [sample.current, clientWidth]); + + const onResize = useCallback(() => setClientWidth(document.documentElement.clientWidth), []); + + useEffect(() => { + if (!sample.current) return; + + window.addEventListener('resize', onResize); + new ResizeSensor(document.body, onResize); + + return () => { + window.removeEventListener('resize', onResize); + ResizeSensor.detach(document.body, onResize); + }; + }, []); + + return ( +
+
+ {children} +
+ +
+
+ ); +}; + +export { FullWidth }; diff --git a/src/components/containers/FullWidth/styles.module.scss b/src/components/containers/FullWidth/styles.module.scss new file mode 100644 index 00000000..c1541aec --- /dev/null +++ b/src/components/containers/FullWidth/styles.module.scss @@ -0,0 +1,10 @@ +.sample { + width: 100%; + display: block; + background: green; + height: 0; +} + +.slider { + max-height: calc(100vh - 125px); +} diff --git a/src/components/node/NodeImageTinySlider/index.tsx b/src/components/node/NodeImageTinySlider/index.tsx index 6ca0e61a..070339bc 100644 --- a/src/components/node/NodeImageTinySlider/index.tsx +++ b/src/components/node/NodeImageTinySlider/index.tsx @@ -1,44 +1,41 @@ -import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { FC } from 'react'; +import { INodeComponentProps } from '~/redux/node/constants'; +import { FullWidth } from '~/components/containers/FullWidth'; +import { useNodeImages } from '~/utils/node'; +import { getURL } from '~/utils/dom'; +import { PRESETS } from '~/constants/urls'; +import TinySlider from 'tiny-slider-react'; import styles from './styles.module.scss'; -interface IProps {} +const settings = { + nav: false, + buttons: false, + mouseDrag: true, + gutter: 10, + center: true, + lazyload: true, + items: 1, + edgePadding: 150, + loop: true, + arrowKeys: false, + prevButton: false, + nextButton: false, + swipeAngle: 45, +}; -const NodeImageTinySlider: FC = () => { - const sample = useRef(null); - const [clientWidth, setClientWidth] = useState(document.documentElement.clientWidth); - - const style = useMemo(() => { - if (!sample.current) return { display: 'none' }; - - const { width } = sample.current.getBoundingClientRect(); - const { clientWidth } = document.documentElement; - - return { - // width: clientWidth, - // transform: `translate(-${(clientWidth - width) / 2}px, 0)`, - }; - }, [sample.current, clientWidth]); - - const onResize = useCallback(() => setClientWidth(document.documentElement.clientWidth), []); - - useEffect(() => { - window.addEventListener('resize', onResize); - document.body.addEventListener('overflow', onResize); - document.body.addEventListener('overflowchanged', console.log); - - document.body.addEventListener('resize', console.log); - - return () => { - window.removeEventListener('resize', onResize); - window.removeEventListener('overflow', onResize); - }; - }, []); +const NodeImageTinySlider: FC = ({ node }) => { + const images = useNodeImages(node); return ( -
-
-
-
+ +
+ + {images.map(image => ( + + ))} + +
+ ); }; diff --git a/src/components/node/NodeImageTinySlider/styles.module.scss b/src/components/node/NodeImageTinySlider/styles.module.scss index f96e7258..98fe700e 100644 --- a/src/components/node/NodeImageTinySlider/styles.module.scss +++ b/src/components/node/NodeImageTinySlider/styles.module.scss @@ -1,22 +1,5 @@ -.wrap { - background: $red; -} - -.sample { - width: 100%; - display: block; - height: 24px; - background: green; -} - .slider { - background: blue; - height: 20px; - width: 100vw; - position: relative; - left: 50%; - right: 50%; - margin-left: -50vw; - margin-right: -50vw; - box-sizing: border-box; + img { + max-height: calc(100vh - 140px); + } } diff --git a/src/utils/node.ts b/src/utils/node.ts index 286b3fe2..8ccd2946 100644 --- a/src/utils/node.ts +++ b/src/utils/node.ts @@ -1,8 +1,10 @@ import { USER_ROLES } from '~/redux/auth/constants'; -import { INode, IComment, ICommentGroup } from '~/redux/types'; +import { INode, IComment, ICommentGroup, IFile } from '~/redux/types'; import { IUser } from '~/redux/auth/types'; import path from 'ramda/es/path'; import { NODE_TYPES } from '~/redux/node/constants'; +import { useMemo } from 'react'; +import { UPLOAD_TYPES } from '~/redux/uploads/constants'; export const canEditNode = (node: Partial, user: Partial): boolean => path(['role'], user) === USER_ROLES.ADMIN || @@ -19,3 +21,11 @@ export const canStarNode = (node: Partial, user: Partial): boolean node.type === NODE_TYPES.IMAGE && path(['role'], user) && path(['role'], user) === USER_ROLES.ADMIN; + +export const useNodeImages = (node: INode): IFile[] => { + return useMemo( + () => + (node && node.files && node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) || [], + [node.files] + ); +}; diff --git a/yarn.lock b/yarn.lock index 7c74c586..6686f3f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9564,6 +9564,23 @@ tiny-invariant@^1.0.2: resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73" integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA== +tiny-slider-react@^0.5.3: + version "0.5.3" + resolved "https://registry.yarnpkg.com/tiny-slider-react/-/tiny-slider-react-0.5.3.tgz#0e96f6b9a6cdafaac7b1bc29cfc9cb9a356760f5" + integrity sha512-miTPlaWgwfg2U7WBDxdR40LFhAncIS2fF03tuNE5nqVIF5tuvjVFHGz1V0LSJWoNeOtXgoWs94JB2/hdxrCWqA== + dependencies: + tiny-slider "^2.9.2" + +tiny-slider@2.9.2: + version "2.9.2" + resolved "https://registry.yarnpkg.com/tiny-slider/-/tiny-slider-2.9.2.tgz#dcd70ac79054a4d170bc2cfde3efbdaa2cc0c75f" + integrity sha512-2sgEJpVbpIbbgiYM/xGa0HMvvtUZSJvXeZJmLWBux6VgFqh/MQG8LXBR59ZLYpa/1OtwM0E6/ic55oLOJN9Mnw== + +tiny-slider@^2.9.2: + version "2.9.3" + resolved "https://registry.yarnpkg.com/tiny-slider/-/tiny-slider-2.9.3.tgz#94d8158f704f3192fef1634c0ae6779fb14ea04e" + integrity sha512-KZY45m+t3fb3Kwlqsic0PIos1lgTNXBEC5N/AhI3aNEcryrd0nXohZMbVPMkcNYdbLjY1IUJAXWYAO6/RGJnKw== + tiny-warning@^1.0.0, tiny-warning@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" From 5da9a0547de2fd7467971741766b9a98dfd4ee2d Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 27 Oct 2020 11:42:20 +0700 Subject: [PATCH 04/34] fixed tiny slider on bigger resolutions --- .../node/NodeImageTinySlider/index.tsx | 14 ++++++++------ .../NodeImageTinySlider/styles.module.scss | 19 +++++++++++++++++-- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/components/node/NodeImageTinySlider/index.tsx b/src/components/node/NodeImageTinySlider/index.tsx index 070339bc..8c9ce2e3 100644 --- a/src/components/node/NodeImageTinySlider/index.tsx +++ b/src/components/node/NodeImageTinySlider/index.tsx @@ -6,20 +6,20 @@ import { getURL } from '~/utils/dom'; import { PRESETS } from '~/constants/urls'; import TinySlider from 'tiny-slider-react'; import styles from './styles.module.scss'; +import { TinySliderSettings } from 'tiny-slider'; -const settings = { +const settings: TinySliderSettings & { center: boolean } = { nav: false, - buttons: false, mouseDrag: true, gutter: 10, center: true, lazyload: true, items: 1, edgePadding: 150, - loop: true, + loop: false, arrowKeys: false, - prevButton: false, - nextButton: false, + // prevButton: false, + // nextButton: false, swipeAngle: 45, }; @@ -31,7 +31,9 @@ const NodeImageTinySlider: FC = ({ node }) => {
{images.map(image => ( - +
+ +
))}
diff --git a/src/components/node/NodeImageTinySlider/styles.module.scss b/src/components/node/NodeImageTinySlider/styles.module.scss index 98fe700e..980681f2 100644 --- a/src/components/node/NodeImageTinySlider/styles.module.scss +++ b/src/components/node/NodeImageTinySlider/styles.module.scss @@ -1,5 +1,20 @@ .slider { - img { - max-height: calc(100vh - 140px); + padding-bottom: 15px; + + :global(.tns-controls) { + display: none; + } +} + +.slide { + align-items: center; + display: flex; + justify-content: center; + text-align: center; + + img { + max-height: calc(100vh - 150px); + max-width: 100%; + border-radius: $radius; } } From dfb66e3742b309542e0217c0e42a362ca0781c52 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 27 Oct 2020 15:05:42 +0700 Subject: [PATCH 05/34] made proof-of-concept for image previewing --- .../node/NodeImageSlideBlock/index.tsx | 30 +++++++++++++------ .../node/NodeImageSlideBlock/styles.scss | 1 - 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx index 3f67b153..3da8172d 100644 --- a/src/components/node/NodeImageSlideBlock/index.tsx +++ b/src/components/node/NodeImageSlideBlock/index.tsx @@ -77,8 +77,8 @@ const NodeImageSlideBlock: FC = ({ ]); // update outside hooks - useEffect(() => updateLayout(), [loaded, height, images]); - useEffect(() => updateSizes(), [refs, current, loaded, images]); + useEffect(updateLayout, [loaded, height, images]); + useEffect(updateSizes, [refs, current, loaded, images]); useEffect(() => { const timeout = setTimeout(updateLayout, 300); @@ -300,14 +300,26 @@ const NodeImageSlideBlock: FC = ({ ref={setRef(index)} key={node.updated_at + file.id} > - + style={{ maxHeight: max_height, width: file.metadata.width }} + > + + + { + + }
))}
diff --git a/src/components/node/NodeImageSlideBlock/styles.scss b/src/components/node/NodeImageSlideBlock/styles.scss index c1d00973..e821d329 100644 --- a/src/components/node/NodeImageSlideBlock/styles.scss +++ b/src/components/node/NodeImageSlideBlock/styles.scss @@ -155,7 +155,6 @@ align-items: center; justify-content: center; background: $content_bg; - z-index: 0; pointer-events: none; touch-action: none; transition: opacity 2s; From 51873064011c7aa0c15319b8a89930652e502601 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 27 Oct 2020 16:35:45 +0700 Subject: [PATCH 06/34] added blurred image for preloading --- .../node/NodeImageSlideBlock/index.tsx | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx index 3da8172d..6ba8c19b 100644 --- a/src/components/node/NodeImageSlideBlock/index.tsx +++ b/src/components/node/NodeImageSlideBlock/index.tsx @@ -306,9 +306,28 @@ const NodeImageSlideBlock: FC = ({ - + + + + + + + + + + + { Date: Thu, 29 Oct 2020 20:14:24 +0700 Subject: [PATCH 07/34] made simple tiny slider --- src/components/containers/FullWidth/index.tsx | 10 ++- .../containers/FullWidth/styles.module.scss | 2 +- .../node/NodeImageSlideBlock/index.tsx | 25 +------ .../node/NodeImageTinySlider/index.tsx | 65 ++++++++++++++++--- .../NodeImageTinySlider/styles.module.scss | 6 +- src/utils/{hooks.ts => hooks/index.ts} | 0 src/utils/hooks/keys.ts | 23 +++++++ 7 files changed, 95 insertions(+), 36 deletions(-) rename src/utils/{hooks.ts => hooks/index.ts} (100%) create mode 100644 src/utils/hooks/keys.ts diff --git a/src/components/containers/FullWidth/index.tsx b/src/components/containers/FullWidth/index.tsx index f2f8a603..3c3eefed 100644 --- a/src/components/containers/FullWidth/index.tsx +++ b/src/components/containers/FullWidth/index.tsx @@ -2,7 +2,11 @@ import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 're import styles from './styles.module.scss'; import ResizeSensor from 'resize-sensor'; -const FullWidth: FC = ({ children }) => { +interface IProps { + onRefresh?: (width: number) => void; +} + +const FullWidth: FC = ({ children, onRefresh }) => { const sample = useRef(null); const [clientWidth, setClientWidth] = useState(document.documentElement.clientWidth); @@ -12,11 +16,13 @@ const FullWidth: FC = ({ children }) => { const { width } = sample.current.getBoundingClientRect(); const { clientWidth } = document.documentElement; + onRefresh(clientWidth); + return { width: clientWidth, transform: `translate(-${(clientWidth - width) / 2}px, 0)`, }; - }, [sample.current, clientWidth]); + }, [sample.current, clientWidth, onRefresh]); const onResize = useCallback(() => setClientWidth(document.documentElement.clientWidth), []); diff --git a/src/components/containers/FullWidth/styles.module.scss b/src/components/containers/FullWidth/styles.module.scss index c1541aec..f318d3c4 100644 --- a/src/components/containers/FullWidth/styles.module.scss +++ b/src/components/containers/FullWidth/styles.module.scss @@ -6,5 +6,5 @@ } .slider { - max-height: calc(100vh - 125px); + display: block; } diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx index 3f67b153..27f7b42f 100644 --- a/src/components/node/NodeImageSlideBlock/index.tsx +++ b/src/components/node/NodeImageSlideBlock/index.tsx @@ -8,6 +8,7 @@ import { PRESETS } from '~/constants/urls'; import { LoaderCircle } from '~/components/input/LoaderCircle'; import { throttle } from 'throttle-debounce'; import { Icon } from '~/components/input/Icon'; +import { useArrows } from '~/utils/hooks/keys'; interface IProps extends INodeComponentProps {} @@ -239,29 +240,7 @@ const NodeImageSlideBlock: FC = ({ images, ]); - const onKeyDown = useCallback( - event => { - if ( - (event.target.tagName && ['TEXTAREA', 'INPUT'].includes(event.target.tagName)) || - is_modal_shown - ) - return; - - switch (event.key) { - case 'ArrowLeft': - return onPrev(); - case 'ArrowRight': - return onNext(); - } - }, - [onNext, onPrev, is_modal_shown] - ); - - useEffect(() => { - window.addEventListener('keydown', onKeyDown); - - return () => window.removeEventListener('keydown', onKeyDown); - }, [onKeyDown]); + useArrows(onNext, onPrev, is_modal_shown); useEffect(() => { setOffset(0); diff --git a/src/components/node/NodeImageTinySlider/index.tsx b/src/components/node/NodeImageTinySlider/index.tsx index 8c9ce2e3..a84d9b50 100644 --- a/src/components/node/NodeImageTinySlider/index.tsx +++ b/src/components/node/NodeImageTinySlider/index.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { INodeComponentProps } from '~/redux/node/constants'; import { FullWidth } from '~/components/containers/FullWidth'; import { useNodeImages } from '~/utils/node'; @@ -6,7 +6,8 @@ import { getURL } from '~/utils/dom'; import { PRESETS } from '~/constants/urls'; import TinySlider from 'tiny-slider-react'; import styles from './styles.module.scss'; -import { TinySliderSettings } from 'tiny-slider'; +import { TinySliderInstance, TinySliderSettings } from 'tiny-slider'; +import { useArrows } from '~/utils/hooks/keys'; const settings: TinySliderSettings & { center: boolean } = { nav: false, @@ -20,19 +21,67 @@ const settings: TinySliderSettings & { center: boolean } = { arrowKeys: false, // prevButton: false, // nextButton: false, + autoHeight: true, swipeAngle: 45, + responsive: { + 0: { + edgePadding: 10, + gutter: 40, + }, + 768: { + edgePadding: 50, + }, + 1024: { + edgePadding: 150, + }, + }, }; const NodeImageTinySlider: FC = ({ node }) => { + const ref = useRef(null); + const slides = useRef([]); const images = useNodeImages(node); + const [current, setCurrent] = useState(0); + const [height, setHeight] = useState(images[0]?.metadata?.height || 0); + + const onResize = useCallback(() => { + if (!ref.current) return; + ref.current.slider.refresh(); + const el = slides.current[current]; + if (!el) return; + const { height } = el.getBoundingClientRect(); + setHeight(height); + }, [ref.current, slides.current, current]); + + const onIndexChanged = useCallback(({ index }) => { + setCurrent(index || 0); + }, []); + + useEffect(() => { + setCurrent(0); + }, [node.id]); + + useEffect(onResize, [slides, current]); + + const onNext = useCallback(() => { + if (!ref.current || images.length <= 1 || current === images.length - 1) return; + ref.current.slider.goTo(current + 1); + }, [ref.current, current, images]); + + const onPrev = useCallback(() => { + if (!ref.current || images.length <= 1 || current === 0) return; + ref.current.slider.goTo(current - 1); + }, [ref.current, current, images]); + + useArrows(onNext, onPrev, false); return ( - -
- - {images.map(image => ( -
- + +
+ + {images.map((image, i) => ( +
(slides.current[i] = el)}> +
))} diff --git a/src/components/node/NodeImageTinySlider/styles.module.scss b/src/components/node/NodeImageTinySlider/styles.module.scss index 980681f2..ec978ab3 100644 --- a/src/components/node/NodeImageTinySlider/styles.module.scss +++ b/src/components/node/NodeImageTinySlider/styles.module.scss @@ -1,5 +1,7 @@ .slider { padding-bottom: 15px; + overflow: hidden; + transition: height 0.25s; :global(.tns-controls) { display: none; @@ -8,12 +10,12 @@ .slide { align-items: center; - display: flex; + display: inline-flex; justify-content: center; text-align: center; img { - max-height: calc(100vh - 150px); + max-height: calc(100vh - 140px); max-width: 100%; border-radius: $radius; } diff --git a/src/utils/hooks.ts b/src/utils/hooks/index.ts similarity index 100% rename from src/utils/hooks.ts rename to src/utils/hooks/index.ts diff --git a/src/utils/hooks/keys.ts b/src/utils/hooks/keys.ts new file mode 100644 index 00000000..93432d00 --- /dev/null +++ b/src/utils/hooks/keys.ts @@ -0,0 +1,23 @@ +import { useCallback, useEffect } from 'react'; + +export const useArrows = (onNext: () => void, onPrev: () => void, locked) => { + const onKeyDown = useCallback( + event => { + if ((event.target.tagName && ['TEXTAREA', 'INPUT'].includes(event.target.tagName)) || locked) + return; + + switch (event.key) { + case 'ArrowLeft': + return onPrev(); + case 'ArrowRight': + return onNext(); + } + }, + [onNext, onPrev, locked] + ); + + useEffect(() => { + window.addEventListener('keydown', onKeyDown); + return () => window.removeEventListener('keydown', onKeyDown); + }, [onKeyDown]); +}; From 145901d72cf7b38bfd558fdf4fcfb923423b4977 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 6 Nov 2020 22:16:32 +0700 Subject: [PATCH 08/34] added image preloader --- .../node/NodeImageSlideBlock/index.tsx | 57 ++++++++++++------- .../NodeImageSlideBlock/styles.module.scss | 39 ++++++++----- 2 files changed, 61 insertions(+), 35 deletions(-) diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx index 44e97b93..aafb654c 100644 --- a/src/components/node/NodeImageSlideBlock/index.tsx +++ b/src/components/node/NodeImageSlideBlock/index.tsx @@ -272,7 +272,7 @@ const NodeImageSlideBlock: FC = ({
@@ -295,32 +295,46 @@ const NodeImageSlideBlock: FC = ({ images.map((file, index) => (
- { - // check if metadata is available, then show loader - } - - - + + + - + = ({ filter="url(#f1)" /> - { - - } + +
))}
diff --git a/src/components/node/NodeImageSlideBlock/styles.module.scss b/src/components/node/NodeImageSlideBlock/styles.module.scss index e821d329..ee38720f 100644 --- a/src/components/node/NodeImageSlideBlock/styles.module.scss +++ b/src/components/node/NodeImageSlideBlock/styles.module.scss @@ -39,18 +39,6 @@ transition: none; } - .image { - max-width: 100%; - opacity: 1; - border-radius: $radius; - box-shadow: transparentize($color: white, $amount: 0.95) 0 -1px, - transparentize($color: #000000, $amount: 0.6) 0 2px 5px; - - @include tablet { - border-radius: 0; - } - } - &.is_dragging { transition: none; } @@ -67,7 +55,7 @@ padding: 0 $gap / 2; position: relative; - &:global(.is_active) { + &.is_active { opacity: 1; } @@ -170,3 +158,28 @@ fill: white; } } + +.image, .preview { + max-width: 100%; + border-radius: $radius; + + @include tablet { + border-radius: 0; + } +} + +.image { + position: absolute; + opacity: 0; + + &.is_loaded { + opacity: 1; + position: static; + } +} + +.preview { + &.is_loaded { + display: none; + } +} From 3423123d35e43fa67e22d9c8eb96607fe5427b2f Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 6 Nov 2020 22:22:24 +0700 Subject: [PATCH 09/34] removed tiny slider --- src/redux/node/constants.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 9c193f05..9d3da6af 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -15,7 +15,6 @@ import { EditorUploadCoverButton } from '~/components/editors/EditorUploadCoverB import { modalShowPhotoswipe } from '../modal/actions'; import { IEditorComponentProps } from '~/redux/node/types'; import { EditorFiller } from '~/components/editors/EditorFiller'; -import { NodeImageTinySlider } from '~/components/node/NodeImageTinySlider'; const prefix = 'NODE.'; export const NODE_ACTIONS = { @@ -90,8 +89,7 @@ export type INodeComponentProps = { export type INodeComponents = Record, FC>; export const NODE_HEADS: INodeComponents = { - // [NODE_TYPES.IMAGE]: NodeImageSlideBlock, - [NODE_TYPES.IMAGE]: NodeImageTinySlider, + [NODE_TYPES.IMAGE]: NodeImageSlideBlock, }; export const NODE_COMPONENTS: INodeComponents = { From ce5ec91571e63f4799431f9ff9f9a38e432c6ff6 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 6 Nov 2020 22:28:44 +0700 Subject: [PATCH 10/34] removed placeholder for images --- .../node/NodeImageSlideBlock/index.tsx | 10 -- .../node/NodeImageTinySlider/index.tsx | 93 ------------------- .../NodeImageTinySlider/styles.module.scss | 22 ----- 3 files changed, 125 deletions(-) delete mode 100644 src/components/node/NodeImageTinySlider/index.tsx delete mode 100644 src/components/node/NodeImageTinySlider/styles.module.scss diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx index 91e465f2..97ee96cd 100644 --- a/src/components/node/NodeImageSlideBlock/index.tsx +++ b/src/components/node/NodeImageSlideBlock/index.tsx @@ -249,16 +249,6 @@ const NodeImageSlideBlock: FC = ({ return (
-
-
- -
-
-
= ({ node }) => { - const ref = useRef(null); - const slides = useRef([]); - const images = useNodeImages(node); - const [current, setCurrent] = useState(0); - const [height, setHeight] = useState(images[0]?.metadata?.height || 0); - - const onResize = useCallback(() => { - if (!ref.current) return; - ref.current.slider.refresh(); - const el = slides.current[current]; - if (!el) return; - const { height } = el.getBoundingClientRect(); - setHeight(height); - }, [ref.current, slides.current, current]); - - const onIndexChanged = useCallback(({ index }) => { - setCurrent(index || 0); - }, []); - - useEffect(() => { - setCurrent(0); - }, [node.id]); - - useEffect(onResize, [slides, current]); - - const onNext = useCallback(() => { - if (!ref.current || images.length <= 1 || current === images.length - 1) return; - ref.current.slider.goTo(current + 1); - }, [ref.current, current, images]); - - const onPrev = useCallback(() => { - if (!ref.current || images.length <= 1 || current === 0) return; - ref.current.slider.goTo(current - 1); - }, [ref.current, current, images]); - - useArrows(onNext, onPrev, false); - - return ( - -
- - {images.map((image, i) => ( -
(slides.current[i] = el)}> - -
- ))} - -
- - ); -}; - -export { NodeImageTinySlider }; diff --git a/src/components/node/NodeImageTinySlider/styles.module.scss b/src/components/node/NodeImageTinySlider/styles.module.scss deleted file mode 100644 index ec978ab3..00000000 --- a/src/components/node/NodeImageTinySlider/styles.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -.slider { - padding-bottom: 15px; - overflow: hidden; - transition: height 0.25s; - - :global(.tns-controls) { - display: none; - } -} - -.slide { - align-items: center; - display: inline-flex; - justify-content: center; - text-align: center; - - img { - max-height: calc(100vh - 140px); - max-width: 100%; - border-radius: $radius; - } -} From 9db25afb2806dff5c44d99ed0b9c2832b7c074a1 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 9 Nov 2020 17:55:00 +0700 Subject: [PATCH 11/34] refactored comment form --- .../{node => comment}/Comment/index.tsx | 8 +- .../Comment/styles.module.scss | 0 .../CommentContent/index.tsx | 0 .../CommentContent/styles.module.scss | 0 .../{node => comment}/CommentForm/index.tsx | 146 +++--------------- .../CommentForm/styles.module.scss | 0 .../comment/CommentFormAttaches/index.tsx | 133 ++++++++++++++++ .../comment/CommentFormButtons/index.tsx | 36 +++++ .../{node => comment}/CommentMenu/index.tsx | 0 .../CommentMenu/styles.module.scss | 0 src/components/editors/AudioGrid/index.tsx | 10 +- src/components/editors/ImageGrid/index.tsx | 10 +- .../editors/SortableAudioGrid/index.tsx | 11 +- .../editors/SortableImageGrid/index.tsx | 6 +- src/components/media/AudioPlayer/index.tsx | 17 +- src/components/node/NodeCommentForm/index.tsx | 2 +- src/components/node/NodeComments/index.tsx | 2 +- src/components/profile/Message/index.tsx | 2 +- .../profile/ProfileLayout/index.tsx | 5 +- 19 files changed, 235 insertions(+), 153 deletions(-) rename src/components/{node => comment}/Comment/index.tsx (88%) rename src/components/{node => comment}/Comment/styles.module.scss (100%) rename src/components/{node => comment}/CommentContent/index.tsx (100%) rename src/components/{node => comment}/CommentContent/styles.module.scss (100%) rename src/components/{node => comment}/CommentForm/index.tsx (65%) rename src/components/{node => comment}/CommentForm/styles.module.scss (100%) create mode 100644 src/components/comment/CommentFormAttaches/index.tsx create mode 100644 src/components/comment/CommentFormButtons/index.tsx rename src/components/{node => comment}/CommentMenu/index.tsx (100%) rename src/components/{node => comment}/CommentMenu/styles.module.scss (100%) diff --git a/src/components/node/Comment/index.tsx b/src/components/comment/Comment/index.tsx similarity index 88% rename from src/components/node/Comment/index.tsx rename to src/components/comment/Comment/index.tsx index 839748b1..5f194158 100644 --- a/src/components/node/Comment/index.tsx +++ b/src/components/comment/Comment/index.tsx @@ -1,12 +1,12 @@ import React, { FC, HTMLAttributes, memo } from 'react'; import { CommentWrapper } from '~/components/containers/CommentWrapper'; -import { ICommentGroup, IComment } from '~/redux/types'; -import { CommentContent } from '~/components/node/CommentContent'; +import { ICommentGroup } from '~/redux/types'; +import { CommentContent } from '~/components/comment/CommentContent'; import styles from './styles.module.scss'; -import { nodeLockComment, nodeEditComment } from '~/redux/node/actions'; +import { nodeEditComment, nodeLockComment } from '~/redux/node/actions'; import { INodeState } from '~/redux/node/reducer'; import { CommentForm } from '../CommentForm'; -import { CommendDeleted } from '../CommendDeleted'; +import { CommendDeleted } from '../../node/CommendDeleted'; import * as MODAL_ACTIONS from '~/redux/modal/actions'; type IProps = HTMLAttributes & { diff --git a/src/components/node/Comment/styles.module.scss b/src/components/comment/Comment/styles.module.scss similarity index 100% rename from src/components/node/Comment/styles.module.scss rename to src/components/comment/Comment/styles.module.scss diff --git a/src/components/node/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx similarity index 100% rename from src/components/node/CommentContent/index.tsx rename to src/components/comment/CommentContent/index.tsx diff --git a/src/components/node/CommentContent/styles.module.scss b/src/components/comment/CommentContent/styles.module.scss similarity index 100% rename from src/components/node/CommentContent/styles.module.scss rename to src/components/comment/CommentContent/styles.module.scss diff --git a/src/components/node/CommentForm/index.tsx b/src/components/comment/CommentForm/index.tsx similarity index 65% rename from src/components/node/CommentForm/index.tsx rename to src/components/comment/CommentForm/index.tsx index 3481b9b5..1463f757 100644 --- a/src/components/node/CommentForm/index.tsx +++ b/src/components/comment/CommentForm/index.tsx @@ -4,7 +4,7 @@ import styles from './styles.module.scss'; import { Filler } from '~/components/containers/Filler'; import { Button } from '~/components/input/Button'; import assocPath from 'ramda/es/assocPath'; -import { IFile, IFileWithUUID, InputHandler } from '~/redux/types'; +import { IComment, IFile, IFileWithUUID, InputHandler } from '~/redux/types'; import { connect } from 'react-redux'; import * as NODE_ACTIONS from '~/redux/node/actions'; import { selectNode } from '~/redux/node/selectors'; @@ -23,6 +23,8 @@ import { SortEnd } from 'react-sortable-hoc'; import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid'; import { getRandomPhrase } from '~/constants/phrases'; import { ERROR_LITERAL } from '~/constants/errors'; +import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches'; +import { CommentFormButtons } from '~/components/comment/CommentFormButtons'; const mapStateToProps = (state: IState) => ({ node: selectNode(state), @@ -53,13 +55,9 @@ const CommentFormUnconnected: FC = memo( uploadUploadFiles, nodeCancelCommentEdit, }) => { - const onInputChange = useCallback( - event => { - event.preventDefault(); - - if (!event.target.files || !event.target.files.length) return; - - const items: IFileWithUUID[] = Array.from(event.target.files).map( + const onUpload = useCallback( + (files: File[]) => { + const items: IFileWithUUID[] = files.map( (file: File): IFileWithUUID => ({ file, temp_id: uuid(), @@ -109,7 +107,7 @@ const CommentFormUnconnected: FC = memo( } }, [statuses, files]); - const comment = comment_data[id]; + const comment = useMemo(() => comment_data[id], [comment_data, id]); const is_uploading_files = useMemo(() => comment.temp_ids.length > 0, [comment.temp_ids]); @@ -156,88 +154,12 @@ const CommentFormUnconnected: FC = memo( [statuses, comment.temp_ids] ); - const onFileDrop = useCallback( - (fileId: IFile['id']) => { - nodeSetCommentData( - id, - assocPath( - ['files'], - comment.files.filter(file => file.id != fileId), - comment_data[id] - ) - ); - }, - [comment_data, id, nodeSetCommentData] - ); - - const onTitleChange = useCallback( - (fileId: IFile['id'], title: IFile['metadata']['title']) => { - nodeSetCommentData( - id, - assocPath( - ['files'], - comment.files.map(file => - file.id === fileId ? { ...file, metadata: { ...file.metadata, title } } : file - ), - comment_data[id] - ) - ); - }, - [comment_data, id, nodeSetCommentData] - ); - - const onImageMove = useCallback( - ({ oldIndex, newIndex }: SortEnd) => { - nodeSetCommentData( - id, - assocPath( - ['files'], - [ - ...audios, - ...(moveArrItem( - oldIndex, - newIndex, - images.filter(file => !!file) - ) as IFile[]), - ], - comment_data[id] - ) - ); - }, - [images, audios, comment_data, nodeSetCommentData] - ); - - const onAudioMove = useCallback( - ({ oldIndex, newIndex }: SortEnd) => { - nodeSetCommentData( - id, - assocPath( - ['files'], - [ - ...images, - ...(moveArrItem( - oldIndex, - newIndex, - audios.filter(file => !!file) - ) as IFile[]), - ], - comment_data[id] - ) - ); - }, - [images, audios, comment_data, nodeSetCommentData] - ); - const onCancelEdit = useCallback(() => { nodeCancelCommentEdit(id); }, [nodeCancelCommentEdit, comment.id]); const placeholder = getRandomPhrase('SIMPLE'); - const hasImageAttaches = images.length > 0 || locked_images.length > 0; - const hasAudioAttaches = audios.length > 0 || locked_audios.length > 0; - const hasAttaches = hasImageAttaches || hasAudioAttaches; - const clearError = useCallback(() => nodeSetCommentData(id, { error: '' }), [ id, nodeSetCommentData, @@ -247,6 +169,13 @@ const CommentFormUnconnected: FC = memo( if (comment.error) clearError(); }, [comment.files, comment.text]); + const setData = useCallback( + (data: Partial) => { + nodeSetCommentData(id, data); + }, + [nodeSetCommentData, id] + ); + return (
@@ -266,46 +195,17 @@ const CommentFormUnconnected: FC = memo( )}
- {hasAttaches && ( -
- {hasImageAttaches && ( - - )} - - {hasAudioAttaches && ( - - )} -
- )} + - - - - - + diff --git a/src/components/node/CommentForm/styles.module.scss b/src/components/comment/CommentForm/styles.module.scss similarity index 100% rename from src/components/node/CommentForm/styles.module.scss rename to src/components/comment/CommentForm/styles.module.scss diff --git a/src/components/comment/CommentFormAttaches/index.tsx b/src/components/comment/CommentFormAttaches/index.tsx new file mode 100644 index 00000000..d3408b18 --- /dev/null +++ b/src/components/comment/CommentFormAttaches/index.tsx @@ -0,0 +1,133 @@ +import React, { FC, useCallback } from 'react'; +import styles from '~/components/comment/CommentForm/styles.module.scss'; +import { SortableImageGrid } from '~/components/editors/SortableImageGrid'; +import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid'; +import { IComment, IFile } from '~/redux/types'; +import { IUploadStatus } from '~/redux/uploads/reducer'; +import { SortEnd } from 'react-sortable-hoc'; +import assocPath from 'ramda/es/assocPath'; +import { moveArrItem } from '~/utils/fn'; + +interface IProps { + images: IFile[]; + audios: IFile[]; + locked_images: IUploadStatus[]; + locked_audios: IUploadStatus[]; + comment: IComment; + setComment: (data: IComment) => void; +} + +const CommentFormAttaches: FC = ({ + images, + audios, + locked_images, + locked_audios, + comment, + setComment, +}) => { + const hasImageAttaches = images.length > 0 || locked_images.length > 0; + const hasAudioAttaches = audios.length > 0 || locked_audios.length > 0; + const hasAttaches = hasImageAttaches || hasAudioAttaches; + + const onImageMove = useCallback( + ({ oldIndex, newIndex }: SortEnd) => { + setComment( + assocPath( + ['files'], + [ + ...audios, + ...(moveArrItem( + oldIndex, + newIndex, + images.filter(file => !!file) + ) as IFile[]), + ], + comment + ) + ); + }, + [images, audios, comment, setComment] + ); + + const onFileDelete = useCallback( + (fileId: IFile['id']) => { + setComment( + assocPath( + ['files'], + comment.files.filter(file => file.id != fileId), + comment + ) + ); + }, + [setComment, comment] + ); + + const onTitleChange = useCallback( + (fileId: IFile['id'], title: IFile['metadata']['title']) => { + setComment( + assocPath( + ['files'], + comment.files.map(file => + file.id === fileId ? { ...file, metadata: { ...file.metadata, title } } : file + ), + comment + ) + ); + }, + [comment, setComment] + ); + + const onAudioMove = useCallback( + ({ oldIndex, newIndex }: SortEnd) => { + setComment( + assocPath( + ['files'], + [ + ...images, + ...(moveArrItem( + oldIndex, + newIndex, + audios.filter(file => !!file) + ) as IFile[]), + ], + comment + ) + ); + }, + [images, audios, comment, setComment] + ); + + return ( + hasAttaches && ( +
+ {hasImageAttaches && ( + + )} + + {hasAudioAttaches && ( + + )} +
+ ) + ); +}; + +export { CommentFormAttaches }; diff --git a/src/components/comment/CommentFormButtons/index.tsx b/src/components/comment/CommentFormButtons/index.tsx new file mode 100644 index 00000000..44761ac7 --- /dev/null +++ b/src/components/comment/CommentFormButtons/index.tsx @@ -0,0 +1,36 @@ +import React, { FC, useCallback } from 'react'; +import { ButtonGroup } from '~/components/input/ButtonGroup'; +import { Button } from '~/components/input/Button'; + +interface IProps { + onUpload: (files: File[]) => void; +} + +const CommentFormButtons: FC = ({ onUpload }) => { + const onInputChange = useCallback( + event => { + event.preventDefault(); + + const files: File[] = Array.from(event.target?.files); + + if (!files || !files.length) return; + + onUpload(files); + }, + [onUpload] + ); + + return ( + + + + + + ); +}; + +export { CommentFormButtons }; diff --git a/src/components/node/CommentMenu/index.tsx b/src/components/comment/CommentMenu/index.tsx similarity index 100% rename from src/components/node/CommentMenu/index.tsx rename to src/components/comment/CommentMenu/index.tsx diff --git a/src/components/node/CommentMenu/styles.module.scss b/src/components/comment/CommentMenu/styles.module.scss similarity index 100% rename from src/components/node/CommentMenu/styles.module.scss rename to src/components/comment/CommentMenu/styles.module.scss diff --git a/src/components/editors/AudioGrid/index.tsx b/src/components/editors/AudioGrid/index.tsx index 7f2451a2..1640754f 100644 --- a/src/components/editors/AudioGrid/index.tsx +++ b/src/components/editors/AudioGrid/index.tsx @@ -16,7 +16,13 @@ interface IProps { const AudioGrid: FC = ({ files, setFiles, locked }) => { const onMove = useCallback( ({ oldIndex, newIndex }: SortEnd) => { - setFiles(moveArrItem(oldIndex, newIndex, files.filter(file => !!file)) as IFile[]); + setFiles( + moveArrItem( + oldIndex, + newIndex, + files.filter(file => !!file) + ) as IFile[] + ); }, [setFiles, files] ); @@ -41,7 +47,7 @@ const AudioGrid: FC = ({ files, setFiles, locked }) => { return ( = ({ files, setFiles, locked }) => { const onMove = useCallback( ({ oldIndex, newIndex }: SortEnd) => { - setFiles(moveArrItem(oldIndex, newIndex, files.filter(file => !!file)) as IFile[]); + setFiles( + moveArrItem( + oldIndex, + newIndex, + files.filter(file => !!file) + ) as IFile[] + ); }, [setFiles, files] ); @@ -29,7 +35,7 @@ const ImageGrid: FC = ({ files, setFiles, locked }) => { return ( void; + onDelete: (file_id: IFile['id']) => void; onTitleChange: (file_id: IFile['id'], title: IFile['metadata']['title']) => void; }) => { console.log(locked); @@ -27,7 +27,12 @@ const SortableAudioGrid = SortableContainer( .filter(file => file && file.id) .map((file, index) => ( - + ))} diff --git a/src/components/editors/SortableImageGrid/index.tsx b/src/components/editors/SortableImageGrid/index.tsx index edfc4ea7..4c40d94e 100644 --- a/src/components/editors/SortableImageGrid/index.tsx +++ b/src/components/editors/SortableImageGrid/index.tsx @@ -12,12 +12,12 @@ const SortableImageGrid = SortableContainer( ({ items, locked, - onDrop, + onDelete, size = 200, }: { items: IFile[]; locked: IUploadStatus[]; - onDrop: (file_id: IFile['id']) => void; + onDelete: (file_id: IFile['id']) => void; size?: number; }) => (
file && file.id) .map((file, index) => ( - + ))} diff --git a/src/components/media/AudioPlayer/index.tsx b/src/components/media/AudioPlayer/index.tsx index 6e698639..d5942f2f 100644 --- a/src/components/media/AudioPlayer/index.tsx +++ b/src/components/media/AudioPlayer/index.tsx @@ -25,14 +25,14 @@ type Props = ReturnType & typeof mapDispatchToProps & { file: IFile; isEditing?: boolean; - onDrop?: (id: IFile['id']) => void; + onDelete?: (id: IFile['id']) => void; onTitleChange?: (file_id: IFile['id'], title: IFile['metadata']['title']) => void; }; const AudioPlayerUnconnected = memo( ({ file, - onDrop, + onDelete, isEditing, onTitleChange, player: { file: current, status }, @@ -78,10 +78,10 @@ const AudioPlayerUnconnected = memo( ); const onDropClick = useCallback(() => { - if (!onDrop) return; + if (!onDelete) return; - onDrop(file.id); - }, [file, onDrop]); + onDelete(file.id); + }, [file, onDelete]); const title = useMemo( () => @@ -111,7 +111,7 @@ const AudioPlayerUnconnected = memo( return (
- {onDrop && ( + {onDelete && (
@@ -149,7 +149,4 @@ const AudioPlayerUnconnected = memo( } ); -export const AudioPlayer = connect( - mapStateToProps, - mapDispatchToProps -)(AudioPlayerUnconnected); +export const AudioPlayer = connect(mapStateToProps, mapDispatchToProps)(AudioPlayerUnconnected); diff --git a/src/components/node/NodeCommentForm/index.tsx b/src/components/node/NodeCommentForm/index.tsx index b72c663b..16d96f17 100644 --- a/src/components/node/NodeCommentForm/index.tsx +++ b/src/components/node/NodeCommentForm/index.tsx @@ -13,7 +13,7 @@ import * as UPLOAD_ACTIONS from '~/redux/uploads/actions'; import { selectUploads } from '~/redux/uploads/selectors'; import { IState } from '~/redux/store'; import { selectUser, selectAuthUser } from '~/redux/auth/selectors'; -import { CommentForm } from '../CommentForm'; +import { CommentForm } from '../../comment/CommentForm'; const mapStateToProps = state => ({ user: selectAuthUser(state), diff --git a/src/components/node/NodeComments/index.tsx b/src/components/node/NodeComments/index.tsx index 4cc1e3d3..205a0e4f 100644 --- a/src/components/node/NodeComments/index.tsx +++ b/src/components/node/NodeComments/index.tsx @@ -1,5 +1,5 @@ import React, { FC, useMemo, memo } from 'react'; -import { Comment } from '../Comment'; +import { Comment } from '../../comment/Comment'; import { Filler } from '~/components/containers/Filler'; import styles from './styles.module.scss'; diff --git a/src/components/profile/Message/index.tsx b/src/components/profile/Message/index.tsx index 373159a4..83b9a7be 100644 --- a/src/components/profile/Message/index.tsx +++ b/src/components/profile/Message/index.tsx @@ -5,7 +5,7 @@ import { formatText, getPrettyDate, getURL } from '~/utils/dom'; import { PRESETS } from '~/constants/urls'; import classNames from 'classnames'; import { Group } from '~/components/containers/Group'; -import { CommentMenu } from '~/components/node/CommentMenu'; +import { CommentMenu } from '~/components/comment/CommentMenu'; import { MessageForm } from '~/components/profile/MessageForm'; import { Filler } from '~/components/containers/Filler'; import { Button } from '~/components/input/Button'; diff --git a/src/containers/profile/ProfileLayout/index.tsx b/src/containers/profile/ProfileLayout/index.tsx index c95bacba..5c9c25a5 100644 --- a/src/containers/profile/ProfileLayout/index.tsx +++ b/src/containers/profile/ProfileLayout/index.tsx @@ -1,10 +1,9 @@ import React, { FC, useEffect, useState } from 'react'; -import { useRouteMatch, withRouter, RouteComponentProps } from 'react-router'; +import { RouteComponentProps, useRouteMatch, withRouter } from 'react-router'; import styles from './styles.module.scss'; import { NodeNoComments } from '~/components/node/NodeNoComments'; import { Grid } from '~/components/containers/Grid'; -import { CommentForm } from '~/components/node/CommentForm'; -import { ProfileInfo } from '../ProfileInfo'; +import { CommentForm } from '~/components/comment/CommentForm'; import * as NODE_ACTIONS from '~/redux/node/actions'; import { connect } from 'react-redux'; import { IUser } from '~/redux/auth/types'; From 63b97819777c2dfda3002c1226c39f831bbf14b3 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 9 Nov 2020 17:58:37 +0700 Subject: [PATCH 12/34] fixed unsupported files uploading --- src/components/comment/CommentForm/index.tsx | 11 +++-------- src/components/comment/CommentFormButtons/index.tsx | 12 ++++++++---- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/components/comment/CommentForm/index.tsx b/src/components/comment/CommentForm/index.tsx index 1463f757..a7ff6c2f 100644 --- a/src/components/comment/CommentForm/index.tsx +++ b/src/components/comment/CommentForm/index.tsx @@ -4,7 +4,7 @@ import styles from './styles.module.scss'; import { Filler } from '~/components/containers/Filler'; import { Button } from '~/components/input/Button'; import assocPath from 'ramda/es/assocPath'; -import { IComment, IFile, IFileWithUUID, InputHandler } from '~/redux/types'; +import { IComment, IFileWithUUID, InputHandler } from '~/redux/types'; import { connect } from 'react-redux'; import * as NODE_ACTIONS from '~/redux/node/actions'; import { selectNode } from '~/redux/node/selectors'; @@ -16,15 +16,10 @@ import * as UPLOAD_ACTIONS from '~/redux/uploads/actions'; import { selectUploads } from '~/redux/uploads/selectors'; import { IState } from '~/redux/store'; import { getFileType } from '~/utils/uploader'; -import { ButtonGroup } from '~/components/input/ButtonGroup'; -import { SortableImageGrid } from '~/components/editors/SortableImageGrid'; -import { moveArrItem } from '~/utils/fn'; -import { SortEnd } from 'react-sortable-hoc'; -import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid'; import { getRandomPhrase } from '~/constants/phrases'; import { ERROR_LITERAL } from '~/constants/errors'; import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches'; -import { CommentFormButtons } from '~/components/comment/CommentFormButtons'; +import { CommentFormAttachButtons } from '~/components/comment/CommentFormButtons'; const mapStateToProps = (state: IState) => ({ node: selectNode(state), @@ -205,7 +200,7 @@ const CommentFormUnconnected: FC = memo( /> - + diff --git a/src/components/comment/CommentFormButtons/index.tsx b/src/components/comment/CommentFormButtons/index.tsx index 44761ac7..230712dc 100644 --- a/src/components/comment/CommentFormButtons/index.tsx +++ b/src/components/comment/CommentFormButtons/index.tsx @@ -1,18 +1,22 @@ import React, { FC, useCallback } from 'react'; import { ButtonGroup } from '~/components/input/ButtonGroup'; import { Button } from '~/components/input/Button'; +import { FILE_MIMES, UPLOAD_TYPES } from '~/redux/uploads/constants'; interface IProps { onUpload: (files: File[]) => void; } -const CommentFormButtons: FC = ({ onUpload }) => { +const ALLOWED_TYPES = [...FILE_MIMES[UPLOAD_TYPES.IMAGE], ...FILE_MIMES[UPLOAD_TYPES.AUDIO]]; + +const CommentFormAttachButtons: FC = ({ onUpload }) => { const onInputChange = useCallback( event => { event.preventDefault(); - const files: File[] = Array.from(event.target?.files); - + const files = Array.from(event.target?.files as File[]).filter((file: File) => + ALLOWED_TYPES.includes(file.type) + ); if (!files || !files.length) return; onUpload(files); @@ -33,4 +37,4 @@ const CommentFormButtons: FC = ({ onUpload }) => { ); }; -export { CommentFormButtons }; +export { CommentFormAttachButtons }; From 62d4e032062801c8fb14329baf10851dbe5f857d Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 9 Nov 2020 18:44:36 +0700 Subject: [PATCH 13/34] added comment form drop zone --- src/components/comment/CommentForm/index.tsx | 121 +++++++++--------- .../comment/CommentFormAttaches/index.tsx | 8 +- .../comment/CommentFormButtons/index.tsx | 6 +- .../comment/CommentFormDropzone/index.tsx | 14 ++ .../editors/SortableAudioGrid/index.tsx | 2 - .../editors/SortableImageGrid/index.tsx | 43 ++++--- src/redux/uploads/constants.ts | 5 + src/utils/hooks.ts | 36 ++++-- 8 files changed, 142 insertions(+), 93 deletions(-) create mode 100644 src/components/comment/CommentFormDropzone/index.tsx diff --git a/src/components/comment/CommentForm/index.tsx b/src/components/comment/CommentForm/index.tsx index a7ff6c2f..6481aa7e 100644 --- a/src/components/comment/CommentForm/index.tsx +++ b/src/components/comment/CommentForm/index.tsx @@ -20,6 +20,7 @@ import { getRandomPhrase } from '~/constants/phrases'; import { ERROR_LITERAL } from '~/constants/errors'; import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches'; import { CommentFormAttachButtons } from '~/components/comment/CommentFormButtons'; +import { CommentFormDropzone } from '~/components/comment/CommentFormDropzone'; const mapStateToProps = (state: IState) => ({ node: selectNode(state), @@ -50,8 +51,12 @@ const CommentFormUnconnected: FC = memo( uploadUploadFiles, nodeCancelCommentEdit, }) => { + const comment = useMemo(() => comment_data[id], [comment_data, id]); + const onUpload = useCallback( (files: File[]) => { + console.log(files); + const items: IFileWithUUID[] = files.map( (file: File): IFileWithUUID => ({ file, @@ -64,28 +69,25 @@ const CommentFormUnconnected: FC = memo( const temps = items.map(file => file.temp_id); - nodeSetCommentData( - id, - assocPath(['temp_ids'], [...comment_data[id].temp_ids, ...temps], comment_data[id]) - ); + nodeSetCommentData(id, assocPath(['temp_ids'], [...comment.temp_ids, ...temps], comment)); uploadUploadFiles(items); }, - [uploadUploadFiles, comment_data, id, nodeSetCommentData] + [uploadUploadFiles, comment, id, nodeSetCommentData] ); const onInput = useCallback( text => { - nodeSetCommentData(id, assocPath(['text'], text, comment_data[id])); + nodeSetCommentData(id, assocPath(['text'], text, comment)); }, - [nodeSetCommentData, comment_data, id] + [nodeSetCommentData, comment, id] ); useEffect(() => { - const temp_ids = (comment_data && comment_data[id] && comment_data[id].temp_ids) || []; + const temp_ids = (comment && comment.temp_ids) || []; const added_files = temp_ids .map(temp_uuid => statuses[temp_uuid] && statuses[temp_uuid].uuid) .map(el => !!el && files[el]) - .filter(el => !!el && !comment_data[id].files.some(file => file && file.id === el.id)); + .filter(el => !!el && !comment.files.some(file => file && file.id === el.id)); const filtered_temps = temp_ids.filter( temp_id => @@ -95,25 +97,23 @@ const CommentFormUnconnected: FC = memo( if (added_files.length) { nodeSetCommentData(id, { - ...comment_data[id], + ...comment, temp_ids: filtered_temps, - files: [...comment_data[id].files, ...added_files], + files: [...comment.files, ...added_files], }); } }, [statuses, files]); - const comment = useMemo(() => comment_data[id], [comment_data, id]); - - const is_uploading_files = useMemo(() => comment.temp_ids.length > 0, [comment.temp_ids]); + const isUploadingNow = useMemo(() => comment.temp_ids.length > 0, [comment.temp_ids]); const onSubmit = useCallback( event => { if (event) event.preventDefault(); - if (is_uploading_files || is_sending_comment) return; + if (isUploadingNow || is_sending_comment) return; nodePostComment(id, is_before); }, - [nodePostComment, id, is_before, is_uploading_files, is_sending_comment] + [nodePostComment, id, is_before, isUploadingNow, is_sending_comment] ); const onKeyDown = useCallback>( @@ -172,56 +172,59 @@ const CommentFormUnconnected: FC = memo( ); return ( - -
-