From 8f0ed347908d6253de0472522630584f1fc47f03 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sun, 9 Jan 2022 20:52:02 +0700 Subject: [PATCH 01/28] fixed toasts --- src/hooks/auth/useLoginForm.ts | 1 - src/hooks/auth/useLoginLogoutRestore.ts | 9 ++++++++- src/utils/toast/styles.module.scss | 1 + 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/hooks/auth/useLoginForm.ts b/src/hooks/auth/useLoginForm.ts index bd325a7a..ab783ffe 100644 --- a/src/hooks/auth/useLoginForm.ts +++ b/src/hooks/auth/useLoginForm.ts @@ -24,7 +24,6 @@ export const useLoginForm = ( try { await fetcher(values.username, values.password); onSuccess(); - showToastSuccess(getRandomPhrase('WELCOME')); } catch (error) { showErrorToast(error); diff --git a/src/hooks/auth/useLoginLogoutRestore.ts b/src/hooks/auth/useLoginLogoutRestore.ts index ea4c7618..671aeef2 100644 --- a/src/hooks/auth/useLoginLogoutRestore.ts +++ b/src/hooks/auth/useLoginLogoutRestore.ts @@ -1,16 +1,23 @@ import { useAuthStore } from '~/store/auth/useAuthStore'; import { useCallback } from 'react'; import { apiUserLogin } from '~/api/auth'; +import { showErrorToast } from '~/utils/errors/showToast'; +import { getRandomPhrase } from '~/constants/phrases'; +import { showToastInfo, showToastSuccess } from '~/utils/toast'; export const useLoginLogoutRestore = () => { const auth = useAuthStore(); - const logout = useCallback(() => auth.logout(), [auth]); + const logout = useCallback(() => { + auth.logout(); + showToastInfo(getRandomPhrase('GOODBYE')); + }, [auth]); const login = useCallback( async (username: string, password: string) => { const result = await apiUserLogin({ username, password }); auth.setToken(result.token); + showToastInfo(getRandomPhrase('WELCOME')); return result.user; }, [auth] diff --git a/src/utils/toast/styles.module.scss b/src/utils/toast/styles.module.scss index e0738133..2b0c3f8e 100644 --- a/src/utils/toast/styles.module.scss +++ b/src/utils/toast/styles.module.scss @@ -2,6 +2,7 @@ .toast { @include outer_shadow; + cursor: pointer; font: $font_14_semibold; user-select: none; From e99dc7d2c901711adcd059425a53015b5d4de025 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sun, 9 Jan 2022 20:52:17 +0700 Subject: [PATCH 02/28] added meta to comment form --- .../comment/LocalCommentFormTextarea/index.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/comment/LocalCommentFormTextarea/index.tsx b/src/components/comment/LocalCommentFormTextarea/index.tsx index 7ec9feb1..1c4d1e6f 100644 --- a/src/components/comment/LocalCommentFormTextarea/index.tsx +++ b/src/components/comment/LocalCommentFormTextarea/index.tsx @@ -1,4 +1,9 @@ -import React, { forwardRef, KeyboardEventHandler, TextareaHTMLAttributes, useCallback } from 'react'; +import React, { + forwardRef, + KeyboardEventHandler, + TextareaHTMLAttributes, + useCallback, +} from 'react'; import { Textarea } from '~/components/input/Textarea'; import { useCommentFormContext } from '~/hooks/comments/useCommentFormFormik'; import { useRandomPhrase } from '~/constants/phrases'; @@ -11,8 +16,8 @@ const LocalCommentFormTextarea = forwardRef(({ ...r const { values, handleChange, handleSubmit, isSubmitting } = useCommentFormContext(); const onKeyDown = useCallback>( - ({ ctrlKey, key }) => { - if (ctrlKey && key === 'Enter') handleSubmit(undefined); + ({ ctrlKey, key, metaKey }) => { + if ((ctrlKey || metaKey) && key === 'Enter') handleSubmit(undefined); }, [handleSubmit] ); From 8311d3d43d82212f75e33e1658ea136f7619cf3d Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sun, 9 Jan 2022 21:02:30 +0700 Subject: [PATCH 03/28] fixed sticky elements --- src/containers/node/NodeBottomBlock/index.tsx | 9 +++++---- src/containers/node/NodeBottomBlock/styles.module.scss | 1 - src/layouts/BorisLayout/index.tsx | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/containers/node/NodeBottomBlock/index.tsx b/src/containers/node/NodeBottomBlock/index.tsx index 8a47fa67..592e3747 100644 --- a/src/containers/node/NodeBottomBlock/index.tsx +++ b/src/containers/node/NodeBottomBlock/index.tsx @@ -16,6 +16,7 @@ import { NodeComments } from '~/containers/node/NodeComments'; import { useUserContext } from '~/utils/context/UserContextProvider'; import { useNodeRelatedContext } from '~/utils/context/NodeRelatedContextProvider'; import { useAuthProvider } from '~/utils/providers/AuthProvider'; +import { Sticky } from '~/components/containers/Sticky'; interface IProps { commentsOrder: 'ASC' | 'DESC'; @@ -52,8 +53,8 @@ const NodeBottomBlock: FC = ({ commentsOrder }) => {
- -
+
+
@@ -64,8 +65,8 @@ const NodeBottomBlock: FC = ({ commentsOrder }) => {
-
- + +
diff --git a/src/containers/node/NodeBottomBlock/styles.module.scss b/src/containers/node/NodeBottomBlock/styles.module.scss index 2352653f..16606b7f 100644 --- a/src/containers/node/NodeBottomBlock/styles.module.scss +++ b/src/containers/node/NodeBottomBlock/styles.module.scss @@ -34,7 +34,6 @@ @media (max-width: 1024px) { padding-left: 0; - padding-top: $comment_height / 2; flex: 1 2; } } diff --git a/src/layouts/BorisLayout/index.tsx b/src/layouts/BorisLayout/index.tsx index 0a085976..22301b7c 100644 --- a/src/layouts/BorisLayout/index.tsx +++ b/src/layouts/BorisLayout/index.tsx @@ -2,7 +2,6 @@ import React, { FC } from 'react'; import styles from './styles.module.scss'; import { Group } from '~/components/containers/Group'; import { Container } from '~/containers/main/Container'; -import StickyBox from 'react-sticky-box'; import { BorisComments } from '~/containers/boris/BorisComments'; import { Card } from '~/components/containers/Card'; import { SidebarRouter } from '~/containers/main/SidebarRouter'; @@ -14,6 +13,7 @@ import { BorisUIDemo } from '~/components/boris/BorisUIDemo'; import boris from '~/sprites/boris_robot.svg'; import { useAuthProvider } from '~/utils/providers/AuthProvider'; +import { Sticky } from '~/components/containers/Sticky'; type IProps = { title: string; @@ -56,7 +56,7 @@ const BorisLayout: FC = ({ title, setIsBetaTester, isTester, stats, isLo - + = ({ title, setIsBetaTester, isTester, stats, isLo isUser={isUser} isLoading={isLoadingStats} /> - + From c0ece70f89a6609c96a3932bd71bc8f2881c08c3 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sun, 9 Jan 2022 21:24:20 +0700 Subject: [PATCH 04/28] fixed node related item profile popout --- package.json | 1 + .../comment/CommentAvatar/index.tsx | 2 +- src/components/common/Avatar/index.tsx | 40 ++-- src/components/common/Square/index.tsx | 26 +++ .../common/Square/styles.module.scss | 10 + src/components/containers/Sticky/index.tsx | 2 +- src/components/lab/LabBanner/index.tsx | 2 +- .../Square => lab/LabSquare}/index.tsx | 0 .../LabSquare}/styles.module.scss | 0 src/components/node/NodeRelatedItem/index.tsx | 15 +- .../node/NodeBottomBlock/styles.module.scss | 1 + src/hooks/auth/useMessageEventReactions.ts | 2 +- yarn.lock | 191 ++++-------------- 13 files changed, 106 insertions(+), 186 deletions(-) create mode 100644 src/components/common/Square/index.tsx create mode 100644 src/components/common/Square/styles.module.scss rename src/components/{containers/Square => lab/LabSquare}/index.tsx (100%) rename src/components/{containers/Square => lab/LabSquare}/styles.module.scss (100%) diff --git a/package.json b/package.json index 4a424f81..582a3b4c 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "react-scripts": "^5.0.0", "react-sortable-hoc": "^2.0.0", "react-sticky-box": "^0.9.3", + "react-stickynode": "^4.0.0", "sticky-sidebar": "^3.3.1", "swiper": "^6.8.4", "swr": "^1.0.1", diff --git a/src/components/comment/CommentAvatar/index.tsx b/src/components/comment/CommentAvatar/index.tsx index 8eb0be0f..cd879d24 100644 --- a/src/components/comment/CommentAvatar/index.tsx +++ b/src/components/comment/CommentAvatar/index.tsx @@ -36,9 +36,9 @@ const CommentAvatar: FC = ({ user, withDetails, className }) => { url={path(['photo', 'url'], user)} username={user.username} className={className} - innerRef={ref} onMouseOver={onMouseOver} onMouseOut={onMouseOut} + ref={ref} /> )} diff --git a/src/components/common/Avatar/index.tsx b/src/components/common/Avatar/index.tsx index e6955762..aece59dd 100644 --- a/src/components/common/Avatar/index.tsx +++ b/src/components/common/Avatar/index.tsx @@ -1,40 +1,34 @@ -import React, { FC, useCallback } from 'react'; +import React, { FC, forwardRef, useCallback } from 'react'; import { getURLFromString } from '~/utils/dom'; import { PRESETS } from '~/constants/urls'; import styles from './styles.module.scss'; import classNames from 'classnames'; import { openUserProfile } from '~/utils/user'; import { DivProps } from '~/utils/types'; +import { Square } from '~/components/common/Square'; interface Props extends DivProps { url?: string; username?: string; size?: number; preset?: typeof PRESETS[keyof typeof PRESETS]; - innerRef?: React.Ref; } -const Avatar: FC = ({ - url, - username, - size, - className, - innerRef, - preset = PRESETS.avatar, - ...rest -}) => { - const backgroundImage = !!url ? `url('${getURLFromString(url, preset)}')` : undefined; - const onOpenProfile = useCallback(() => openUserProfile(username), [username]); +const Avatar = forwardRef( + ({ url, username, size, className, preset = PRESETS.avatar, ...rest }, ref) => { + const onOpenProfile = useCallback(() => openUserProfile(username), [username]); - return ( -
- ); -}; + return ( + + ); + } +); export { Avatar }; diff --git a/src/components/common/Square/index.tsx b/src/components/common/Square/index.tsx new file mode 100644 index 00000000..75a7cae0 --- /dev/null +++ b/src/components/common/Square/index.tsx @@ -0,0 +1,26 @@ +import React, { forwardRef, ForwardRefRenderFunction, VFC } from 'react'; +import styles from './styles.module.scss'; +import { DivProps } from '~/utils/types'; +import classNames from 'classnames'; + +interface SquareProps extends DivProps { + image: string; + size?: number; +} + +const Square = forwardRef(({ image, size, ...rest }, ref) => { + const backgroundImage = image ? `url('${image}')` : undefined; + + return ( +
+ +
+ ); +}); + +export { Square }; diff --git a/src/components/common/Square/styles.module.scss b/src/components/common/Square/styles.module.scss new file mode 100644 index 00000000..103d1e5c --- /dev/null +++ b/src/components/common/Square/styles.module.scss @@ -0,0 +1,10 @@ +@import "src/styles/variables"; + +.svg { + width: 100%; +} + +.wrapper { + width: 100%; + border-radius: $radius; +} diff --git a/src/components/containers/Sticky/index.tsx b/src/components/containers/Sticky/index.tsx index a1a44bb0..232db8ff 100644 --- a/src/components/containers/Sticky/index.tsx +++ b/src/components/containers/Sticky/index.tsx @@ -1,5 +1,5 @@ import React, { DetailsHTMLAttributes, FC } from 'react'; -import StickyBox from 'react-sticky-box'; +import StickyBox from 'react-stickynode'; interface IProps extends DetailsHTMLAttributes { offsetTop?: number; diff --git a/src/components/lab/LabBanner/index.tsx b/src/components/lab/LabBanner/index.tsx index 14aafec8..4b7a14d7 100644 --- a/src/components/lab/LabBanner/index.tsx +++ b/src/components/lab/LabBanner/index.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; import styles from './styles.module.scss'; import { Group } from '~/components/containers/Group'; -import { Square } from '~/components/containers/Square'; +import { Square } from '~/components/lab/LabSquare'; interface IProps {} diff --git a/src/components/containers/Square/index.tsx b/src/components/lab/LabSquare/index.tsx similarity index 100% rename from src/components/containers/Square/index.tsx rename to src/components/lab/LabSquare/index.tsx diff --git a/src/components/containers/Square/styles.module.scss b/src/components/lab/LabSquare/styles.module.scss similarity index 100% rename from src/components/containers/Square/styles.module.scss rename to src/components/lab/LabSquare/styles.module.scss diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx index ddea53c3..7005d1f0 100644 --- a/src/components/node/NodeRelatedItem/index.tsx +++ b/src/components/node/NodeRelatedItem/index.tsx @@ -4,9 +4,10 @@ import classNames from 'classnames'; import { INode } from '~/types'; import { PRESETS, URLS } from '~/constants/urls'; import { RouteComponentProps, withRouter } from 'react-router'; -import { getURL } from '~/utils/dom'; +import { getURL, getURLFromString } from '~/utils/dom'; import { Avatar } from '~/components/common/Avatar'; import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString'; +import { Square } from '~/components/common/Square'; type IProps = RouteComponentProps & { item: Partial; @@ -68,11 +69,13 @@ const NodeRelatedItemUnconnected: FC = memo(({ item, history }) => { onClick={onClick} ref={ref} > - + {item.thumbnail && ( + + )} {!item.thumbnail && size === 'small' && (
diff --git a/src/containers/node/NodeBottomBlock/styles.module.scss b/src/containers/node/NodeBottomBlock/styles.module.scss index 16606b7f..3b067e18 100644 --- a/src/containers/node/NodeBottomBlock/styles.module.scss +++ b/src/containers/node/NodeBottomBlock/styles.module.scss @@ -48,6 +48,7 @@ .left { flex: 1; min-width: 0; + height: 100%; } .left_item { diff --git a/src/hooks/auth/useMessageEventReactions.ts b/src/hooks/auth/useMessageEventReactions.ts index 2a981d44..2e74c3e4 100644 --- a/src/hooks/auth/useMessageEventReactions.ts +++ b/src/hooks/auth/useMessageEventReactions.ts @@ -20,7 +20,7 @@ export const useMessageEventReactions = () => { return; } - console.log('caught event:', type); + console.log('caught event:', type, event.data); switch (type) { case EventMessageType.OAuthLogin: diff --git a/yarn.lock b/yarn.lock index 8c67c396..f9f85b5f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1036,7 +1036,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa" integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ== @@ -1496,50 +1496,6 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9" integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA== -"@redux-saga/core@^1.1.3": - version "1.1.3" - resolved "https://registry.yarnpkg.com/@redux-saga/core/-/core-1.1.3.tgz#3085097b57a4ea8db5528d58673f20ce0950f6a4" - integrity sha512-8tInBftak8TPzE6X13ABmEtRJGjtK17w7VUs7qV17S8hCO5S3+aUTWZ/DBsBJPdE8Z5jOPwYALyvofgq1Ws+kg== - dependencies: - "@babel/runtime" "^7.6.3" - "@redux-saga/deferred" "^1.1.2" - "@redux-saga/delay-p" "^1.1.2" - "@redux-saga/is" "^1.1.2" - "@redux-saga/symbols" "^1.1.2" - "@redux-saga/types" "^1.1.0" - redux "^4.0.4" - typescript-tuple "^2.2.1" - -"@redux-saga/deferred@^1.1.2": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@redux-saga/deferred/-/deferred-1.1.2.tgz#59937a0eba71fff289f1310233bc518117a71888" - integrity sha512-908rDLHFN2UUzt2jb4uOzj6afpjgJe3MjICaUNO3bvkV/kN/cNeI9PMr8BsFXB/MR8WTAZQq/PlTq8Kww3TBSQ== - -"@redux-saga/delay-p@^1.1.2": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@redux-saga/delay-p/-/delay-p-1.1.2.tgz#8f515f4b009b05b02a37a7c3d0ca9ddc157bb355" - integrity sha512-ojc+1IoC6OP65Ts5+ZHbEYdrohmIw1j9P7HS9MOJezqMYtCDgpkoqB5enAAZrNtnbSL6gVCWPHaoaTY5KeO0/g== - dependencies: - "@redux-saga/symbols" "^1.1.2" - -"@redux-saga/is@^1.1.2": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@redux-saga/is/-/is-1.1.2.tgz#ae6c8421f58fcba80faf7cadb7d65b303b97e58e" - integrity sha512-OLbunKVsCVNTKEf2cH4TYyNbbPgvmZ52iaxBD4I1fTif4+MTXMa4/Z07L83zW/hTCXwpSZvXogqMqLfex2Tg6w== - dependencies: - "@redux-saga/symbols" "^1.1.2" - "@redux-saga/types" "^1.1.0" - -"@redux-saga/symbols@^1.1.2": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@redux-saga/symbols/-/symbols-1.1.2.tgz#216a672a487fc256872b8034835afc22a2d0595d" - integrity sha512-EfdGnF423glv3uMwLsGAtE6bg+R9MdqlHEzExnfagXPrIiuxwr3bdiAwz3gi+PsrQ3yBlaBpfGLtDG8rf3LgQQ== - -"@redux-saga/types@^1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.1.0.tgz#0e81ce56b4883b4b2a3001ebe1ab298b84237204" - integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg== - "@rollup/plugin-babel@^5.2.0": version "5.3.0" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz#9cb1c5146ddd6a4968ad96f209c50c62f92f9879" @@ -1931,14 +1887,6 @@ resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.9.tgz#1cfb6d60ef3822c589f18e70f8b12f9a28ce8724" integrity sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ== -"@types/hoist-non-react-statics@^3.3.0": - version "3.3.1" - resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" - integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== - dependencies: - "@types/react" "*" - hoist-non-react-statics "^3.3.0" - "@types/html-minifier-terser@^6.0.0": version "6.1.0" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35" @@ -2050,16 +1998,6 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== -"@types/react-redux@^7.1.11", "@types/react-redux@^7.1.20": - version "7.1.21" - resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.21.tgz#f32bbaf7cbc4b93f51e10d340aa54035c084b186" - integrity sha512-bLdglUiBSQNzWVVbmNPKGYYjrzp3/YDPwfOH3nLEz99I4awLlaRAPWjo6bZ2POpxztFWtDDXIPxBLVykXqBt+w== - dependencies: - "@types/hoist-non-react-statics" "^3.3.0" - "@types/react" "*" - hoist-non-react-statics "^3.3.0" - redux "^4.0.0" - "@types/react-router-dom@^5.1.7": version "5.3.2" resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.2.tgz#ebd8e145cf056db5c66eb1dac63c72f52e8542ee" @@ -3449,7 +3387,7 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40" integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA== -classnames@*, classnames@^2.2.6: +classnames@*, classnames@^2.0.0, classnames@^2.2.6: version "2.3.1" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e" integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA== @@ -3652,17 +3590,6 @@ connect-history-api-fallback@^1.6.0: resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc" integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg== -connected-react-router@^6.5.2: - version "6.9.2" - resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-6.9.2.tgz#f89fa87f0e977fcabf17475fb4552e170cc7e48e" - integrity sha512-bE8kNBiZv9Mivp7pYn9JvLH5ItTjLl45kk1/Vha0rmAK9I/ETb5JPJrAm0h2KCG9qLfv7vqU3Jo4UUDo0oJnQg== - dependencies: - lodash.isequalwith "^4.4.0" - prop-types "^15.7.2" - optionalDependencies: - immutable "^3.8.1 || ^4.0.0" - seamless-immutable "^7.1.3" - console-control-strings@^1.0.0, console-control-strings@~1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e" @@ -3722,7 +3649,7 @@ core-js-pure@^3.19.0, core-js-pure@^3.8.1: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.20.2.tgz#5d263565f0e34ceeeccdc4422fae3e84ca6b8c0f" integrity sha512-CmWHvSKn2vNL6p6StNp1EmMIfVY/pqn3JLAjfZQ8WZGPOlGoO92EkX9/Mk81i6GxvoPXjUqEQnpM3rJ5QxxIOg== -core-js@^3.19.2: +core-js@^3.19.2, core-js@^3.6.5: version "3.20.2" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.2.tgz#46468d8601eafc8b266bd2dd6bf9dee622779581" integrity sha512-nuqhq11DcOAbFBV4zCbKeGbKQsUDRqTX0oqx7AttUBuqe3h20ixsE039QHelbL6P4h+9kytVqyEtyZ6gsiwEYw== @@ -4898,6 +4825,11 @@ etag@1.8.1, etag@~1.8.1: resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc= +eventemitter3@^3.0.0: + version "3.1.2" + resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7" + integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q== + eventemitter3@^4.0.0: version "4.0.7" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f" @@ -5614,7 +5546,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -5853,11 +5785,6 @@ immer@^9.0.7: resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.7.tgz#b6156bd7db55db7abc73fd2fdadf4e579a701075" integrity sha512-KGllzpbamZDvOIxnmJ0jI840g7Oikx58lBPWV0hUh7dtAyZpFqqrBZdKka5GlTwMTZ1Tjc/bKKW4VSFAt6BqMA== -"immutable@^3.8.1 || ^4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23" - integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw== - import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" @@ -7040,11 +6967,6 @@ lodash.debounce@^4.0.8: resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= -lodash.isequalwith@^4.4.0: - version "4.4.0" - resolved "https://registry.yarnpkg.com/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz#266726ddd528f854f21f4ea98a065606e0fbc6b0" - integrity sha1-Jmcm3dUo+FTyH06pigZWBuD7xrA= - lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" @@ -7317,18 +7239,11 @@ mobx-persist-store@^1.0.4: resolved "https://registry.yarnpkg.com/mobx-persist-store/-/mobx-persist-store-1.0.4.tgz#233f0c03a708c0f58948c5ff223aa59610a2711a" integrity sha512-zxYvRSGKIJG/2brJC8+u6rJOnhe6HvvIOSaPSoOKdRFw4R91EV+e8PsraiScH3STNkGQlArbjnAUpd7cga1VCA== -mobx-react-lite@^3.2.0: +mobx-react-lite@^3.2.3: version "3.2.3" resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.2.3.tgz#83d2b32ebf4383cd0dc0d397acbf53a8e9c66765" integrity sha512-7exWp1FV0M9dP08H9PIeHlJqDw4IdkQVRMfLYaZFMmlbzSS6ZU6p/kx392KN+rVf81hH3IQYewvRGQ70oiwmbw== -mobx-react@^7.2.1: - version "7.2.1" - resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-7.2.1.tgz#e9d4c04dc63d05e1139ce773f5fee7a5b4cb7c78" - integrity sha512-LZS99KFLn75VWDXPdRJhILzVQ7qLcRjQbzkK+wVs0Qg4kWw5hOI2USp7tmu+9zP9KYsVBmKyx2k/8cTTBfsymw== - dependencies: - mobx-react-lite "^3.2.0" - mobx@^6.3.10: version "6.3.12" resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.3.12.tgz#2ceb4f632081a8bf8757ba7e5e01b5810800022f" @@ -8681,7 +8596,7 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -8767,7 +8682,7 @@ quick-lru@^5.1.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932" integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== -raf@^3.4.1: +raf@^3.0.0, raf@^3.4.1: version "3.4.1" resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== @@ -8906,7 +8821,7 @@ react-hot-toast@^2.1.1: dependencies: goober "^2.1.1" -react-is@17.0.2, react-is@^17.0.1, react-is@^17.0.2: +react-is@17.0.2, react-is@^17.0.1: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== @@ -8934,18 +8849,6 @@ react-popper@^2.2.3: react-fast-compare "^3.0.1" warning "^4.0.2" -react-redux@^7.2.2: - version "7.2.6" - resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa" - integrity sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ== - dependencies: - "@babel/runtime" "^7.15.4" - "@types/react-redux" "^7.1.20" - hoist-non-react-statics "^3.3.2" - loose-envify "^1.4.0" - prop-types "^15.7.2" - react-is "^17.0.2" - react-refresh@0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" @@ -9057,6 +8960,17 @@ react-sticky-box@^0.9.3: "@babel/runtime" "^7.1.5" resize-observer-polyfill "^1.5.1" +react-stickynode@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/react-stickynode/-/react-stickynode-4.0.0.tgz#ca1deeda866aeace3d522d01eb868f286cdb49d1" + integrity sha512-H6Ae6l8soAc188eFAmE4CGJz3oidQa88jNO/fnJWjpFw4DwGRS6boL9gHNE4DCvbMPgek1AAP85pUPIEKUMgtw== + dependencies: + classnames "^2.0.0" + core-js "^3.6.5" + prop-types "^15.6.0" + shallowequal "^1.0.0" + subscribe-ui-event "^2.0.6" + react@^17.0.1: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" @@ -9141,25 +9055,6 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" -redux-persist@^5.10.0: - version "5.10.0" - resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-5.10.0.tgz#5d8d802c5571e55924efc1c3a9b23575283be62b" - integrity sha512-sSJAzNq7zka3qVHKce1hbvqf0Vf5DuTVm7dr4GtsqQVOexnrvbV47RWFiPxQ8fscnyiuWyD2O92DOxPl0tGCRg== - -redux-saga@^1.1.1: - version "1.1.3" - resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-1.1.3.tgz#9f3e6aebd3c994bbc0f6901a625f9a42b51d1112" - integrity sha512-RkSn/z0mwaSa5/xH/hQLo8gNf4tlvT18qXDNvedihLcfzh+jMchDgaariQoehCpgRltEm4zHKJyINEz6aqswTw== - dependencies: - "@redux-saga/core" "^1.1.3" - -redux@^4.0.0, redux@^4.0.4, redux@^4.1.2: - version "4.1.2" - resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104" - integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw== - dependencies: - "@babel/runtime" "^7.9.2" - regenerate-unicode-properties@^9.0.0: version "9.0.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz#54d09c7115e1f53dc2314a974b32c1c344efe326" @@ -9539,11 +9434,6 @@ scss-tokenizer@^0.2.3: js-base64 "^2.1.8" source-map "^0.4.2" -seamless-immutable@^7.1.3: - version "7.1.4" - resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.4.tgz#6e9536def083ddc4dea0207d722e0e80d0f372f8" - integrity sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A== - select-hose@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" @@ -9672,6 +9562,11 @@ sha.js@^2.4.0, sha.js@^2.4.8: inherits "^2.0.1" safe-buffer "^5.0.1" +shallowequal@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea" @@ -10198,6 +10093,15 @@ stylis@3.5.4: resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== +subscribe-ui-event@^2.0.6: + version "2.0.7" + resolved "https://registry.yarnpkg.com/subscribe-ui-event/-/subscribe-ui-event-2.0.7.tgz#8d18b6339c35b25246a5335775573f0e5dc461f8" + integrity sha512-Acrtf9XXl6lpyHAWYeRD1xTPUQHDERfL4GHeNuYAtZMc4Z8Us2iDBP0Fn3xiRvkQ1FO+hx+qRLmPEwiZxp7FDQ== + dependencies: + eventemitter3 "^3.0.0" + lodash "^4.17.15" + raf "^3.0.0" + supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" @@ -10649,25 +10553,6 @@ typedarray-to-buffer@^3.1.5: dependencies: is-typedarray "^1.0.0" -typescript-compare@^0.0.2: - version "0.0.2" - resolved "https://registry.yarnpkg.com/typescript-compare/-/typescript-compare-0.0.2.tgz#7ee40a400a406c2ea0a7e551efd3309021d5f425" - integrity sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA== - dependencies: - typescript-logic "^0.0.0" - -typescript-logic@^0.0.0: - version "0.0.0" - resolved "https://registry.yarnpkg.com/typescript-logic/-/typescript-logic-0.0.0.tgz#66ebd82a2548f2b444a43667bec120b496890196" - integrity sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q== - -typescript-tuple@^2.2.1: - version "2.2.1" - resolved "https://registry.yarnpkg.com/typescript-tuple/-/typescript-tuple-2.2.1.tgz#7d9813fb4b355f69ac55032e0363e8bb0f04dad2" - integrity sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q== - dependencies: - typescript-compare "^0.0.2" - typescript@^4.0.5: version "4.5.4" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.4.tgz#a17d3a0263bf5c8723b9c52f43c5084edf13c2e8" From 0a5caf6bda019644b8a6ee7e8bedbc3773e81049 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sun, 9 Jan 2022 21:25:17 +0700 Subject: [PATCH 05/28] fixed background repeat on square --- src/components/common/Square/styles.module.scss | 2 ++ src/components/lab/LabBanner/index.tsx | 6 +++--- src/components/lab/LabSquare/index.tsx | 4 ++-- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/common/Square/styles.module.scss b/src/components/common/Square/styles.module.scss index 103d1e5c..880fb4a7 100644 --- a/src/components/common/Square/styles.module.scss +++ b/src/components/common/Square/styles.module.scss @@ -7,4 +7,6 @@ .wrapper { width: 100%; border-radius: $radius; + background-size: cover; + background-repeat: no-repeat; } diff --git a/src/components/lab/LabBanner/index.tsx b/src/components/lab/LabBanner/index.tsx index 4b7a14d7..6d6f987c 100644 --- a/src/components/lab/LabBanner/index.tsx +++ b/src/components/lab/LabBanner/index.tsx @@ -1,12 +1,12 @@ import React, { FC } from 'react'; import styles from './styles.module.scss'; import { Group } from '~/components/containers/Group'; -import { Square } from '~/components/lab/LabSquare'; +import { LabSquare } from '~/components/lab/LabSquare'; interface IProps {} const LabBanner: FC = () => ( - +
Лаборатория!
@@ -19,7 +19,7 @@ const LabBanner: FC = () => (

-
+ ); export { LabBanner }; diff --git a/src/components/lab/LabSquare/index.tsx b/src/components/lab/LabSquare/index.tsx index 885aeabf..46c85db3 100644 --- a/src/components/lab/LabSquare/index.tsx +++ b/src/components/lab/LabSquare/index.tsx @@ -5,7 +5,7 @@ import classNames from 'classnames'; interface IProps extends DivProps {} -const Square: FC = ({ children, ...rest }) => ( +const LabSquare: FC = ({ children, ...rest }) => (
{children} @@ -13,4 +13,4 @@ const Square: FC = ({ children, ...rest }) => (
); -export { Square }; +export { LabSquare }; From 03ab52f81414a71480ac168a67f7a06acb824651 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 10 Jan 2022 10:02:19 +0700 Subject: [PATCH 06/28] fixed popeper placement --- src/components/containers/Sticky/index.tsx | 14 ++++++-------- src/components/tags/TagAutocomplete/index.tsx | 1 + src/containers/tags/TagInput/index.tsx | 2 +- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/containers/Sticky/index.tsx b/src/components/containers/Sticky/index.tsx index 232db8ff..15de9b7e 100644 --- a/src/components/containers/Sticky/index.tsx +++ b/src/components/containers/Sticky/index.tsx @@ -1,16 +1,14 @@ import React, { DetailsHTMLAttributes, FC } from 'react'; -import StickyBox from 'react-stickynode'; +import StickyBox from 'react-sticky-box'; interface IProps extends DetailsHTMLAttributes { offsetTop?: number; } -const Sticky: FC = ({ children, offsetTop = 65 }) => { - return ( - - {children} - - ); -}; +const Sticky: FC = ({ children, offsetTop = 65 }) => ( + + {children} + +); export { Sticky }; diff --git a/src/components/tags/TagAutocomplete/index.tsx b/src/components/tags/TagAutocomplete/index.tsx index 3949c267..b16ac0c5 100644 --- a/src/components/tags/TagAutocomplete/index.tsx +++ b/src/components/tags/TagAutocomplete/index.tsx @@ -35,6 +35,7 @@ const TagAutocomplete: VFC = ({ const pop = usePopper(wrapper?.current?.parentElement, wrapper.current, { placement: 'bottom-end', + strategy: 'fixed', modifiers: [ { name: 'offset', diff --git a/src/containers/tags/TagInput/index.tsx b/src/containers/tags/TagInput/index.tsx index e8da7c0c..03dfd502 100644 --- a/src/containers/tags/TagInput/index.tsx +++ b/src/containers/tags/TagInput/index.tsx @@ -101,8 +101,8 @@ const TagInput: FC = ({ exclude, onAppend, onClearTag, onSubmit }) => { const onAutocompleteSelect = useCallback( (val: string) => { - onAppend([val]); setInput(''); + onAppend([val]); }, [onAppend, setInput] ); From c2154e930cbd2759e8112c681b5290ce5ac5fddd Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 10 Jan 2022 16:08:03 +0700 Subject: [PATCH 07/28] fixed modal close button --- .../BetterScrollDialog/styles.module.scss | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/src/components/dialogs/BetterScrollDialog/styles.module.scss b/src/components/dialogs/BetterScrollDialog/styles.module.scss index 8990b842..c49ebcf4 100644 --- a/src/components/dialogs/BetterScrollDialog/styles.module.scss +++ b/src/components/dialogs/BetterScrollDialog/styles.module.scss @@ -22,7 +22,6 @@ flex-direction: column; min-width: $cell; max-width: 400px; - max-height: 100%; max-height: calc(100vh - 75px); width: 100%; position: relative; @@ -43,7 +42,6 @@ .footer { @include outer_shadow(); - // padding: 10px; background: darken($content_bg, 2%); } @@ -66,13 +64,15 @@ } .close { - background: darken($content_bg, 2%); - width: 48px; - height: 48px; + @include outer_shadow; + + background: lighten($content_bg, 4%); + width: 36px; + height: 36px; position: absolute; - top: -58px; - right: 50%; - transform: translate(50%, 0); + top: -14px; + right: 4px; + transform: translate(50%, 0) scale(1); display: flex; align-items: center; justify-content: center; @@ -80,15 +80,21 @@ cursor: pointer; transition: transform 0.25s, background-color 0.25s; animation: appear 0.5s forwards; + z-index: 10; + + @include tablet { + top: -16px; + right: 16px; + } &:hover { background-color: $red; - transform: translate(50%, -5px); + transform: translate(50%, 0) scale(1.25); } svg { - width: 24px; - height: 24px; + width: 20px; + height: 20px; } } From 8d1e6989c27a8539bfa8945e355766253daa9ded Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 10 Jan 2022 16:47:29 +0700 Subject: [PATCH 08/28] added experimental scroll helper --- .../common/ScrollHelperBottom/index.tsx | 27 ++++++++++++++ .../ScrollHelperBottom/styles.module.scss | 26 ++++++++++++++ .../profile/ProfileAvatar/styles.module.scss | 2 +- src/hooks/dom/useScrollHeight.ts | 35 +++++++++++++++++++ src/hooks/dom/useScrollToBottom.ts | 10 ++++++ src/hooks/dom/useScrollToTop.ts | 1 - src/hooks/dom/useScrollTop.ts | 2 +- src/layouts/NodeLayout/index.tsx | 6 +++- 8 files changed, 105 insertions(+), 4 deletions(-) create mode 100644 src/components/common/ScrollHelperBottom/index.tsx create mode 100644 src/components/common/ScrollHelperBottom/styles.module.scss create mode 100644 src/hooks/dom/useScrollHeight.ts create mode 100644 src/hooks/dom/useScrollToBottom.ts diff --git a/src/components/common/ScrollHelperBottom/index.tsx b/src/components/common/ScrollHelperBottom/index.tsx new file mode 100644 index 00000000..31c5ccf5 --- /dev/null +++ b/src/components/common/ScrollHelperBottom/index.tsx @@ -0,0 +1,27 @@ +import React, { VFC } from 'react'; +import styles from './styles.module.scss'; +import { useScrollTop } from '~/hooks/dom/useScrollTop'; +import { useScrollHeight } from '~/hooks/dom/useScrollHeight'; +import classNames from 'classnames'; +import { useScrollToBottom } from '~/hooks/dom/useScrollToBottom'; + +interface ScrollHelperBottomProps {} + +const ScrollHelperBottom: VFC = () => { + const top = useScrollTop(); + const scrollHeight = useScrollHeight(); + const scrollToBottom = useScrollToBottom(); + + const isVisible = scrollHeight > 2000 && top < scrollHeight * 0.25; + + return ( +
+ Вниз +
+ ); +}; + +export { ScrollHelperBottom }; diff --git a/src/components/common/ScrollHelperBottom/styles.module.scss b/src/components/common/ScrollHelperBottom/styles.module.scss new file mode 100644 index 00000000..263b9c74 --- /dev/null +++ b/src/components/common/ScrollHelperBottom/styles.module.scss @@ -0,0 +1,26 @@ +@import "src/styles/variables"; + +.helper { + position: fixed; + bottom: 0; + background: radial-gradient($red, transparent) 50% 24px no-repeat; + background-size: 100% 48px; + display: none; + width: calc(100% - 20px); + z-index: 4; + text-align: center; + max-width: 500px; + height: 64px; + align-items: flex-end; + justify-content: center; + padding: $gap; + text-transform: uppercase; + font: $font_16_medium; + border-radius: $radius $radius 0 0; + user-select: none; + cursor: pointer; + + &.visible { + display: flex; + } +} diff --git a/src/components/profile/ProfileAvatar/styles.module.scss b/src/components/profile/ProfileAvatar/styles.module.scss index bb3b6741..2d829e6a 100644 --- a/src/components/profile/ProfileAvatar/styles.module.scss +++ b/src/components/profile/ProfileAvatar/styles.module.scss @@ -19,7 +19,7 @@ left: 0; width: 100%; height: 100%; - opacity: 0; + opacity: 1; } &:hover { diff --git a/src/hooks/dom/useScrollHeight.ts b/src/hooks/dom/useScrollHeight.ts new file mode 100644 index 00000000..80596fec --- /dev/null +++ b/src/hooks/dom/useScrollHeight.ts @@ -0,0 +1,35 @@ +import { useEffect, useState } from 'react'; + +const getHeight = () => { + if (typeof document === 'undefined') { + return 0; + } + + const body = document.body; + const html = document.documentElement; + + return Math.max( + body.scrollHeight, + body.offsetHeight, + html.clientHeight, + html.scrollHeight, + html.offsetHeight + ); +}; +export const useScrollHeight = () => { + const [scrollHeight, setScrollHeight] = useState(getHeight()); + + useEffect(() => { + const measure = () => setScrollHeight(getHeight()); + + window.addEventListener('scroll', measure); + window.addEventListener('resize', measure); + + return () => { + window.removeEventListener('scroll', measure); + window.removeEventListener('resize', measure); + }; + }, []); + + return scrollHeight; +}; diff --git a/src/hooks/dom/useScrollToBottom.ts b/src/hooks/dom/useScrollToBottom.ts new file mode 100644 index 00000000..2622e1aa --- /dev/null +++ b/src/hooks/dom/useScrollToBottom.ts @@ -0,0 +1,10 @@ +import { useCallback } from 'react'; +import { useScrollHeight } from '~/hooks/dom/useScrollHeight'; + +export const useScrollToBottom = () => { + const top = useScrollHeight(); + + return useCallback(() => { + window.scrollTo({ top }); + }, [top]); +}; diff --git a/src/hooks/dom/useScrollToTop.ts b/src/hooks/dom/useScrollToTop.ts index 5adc71d0..3eeb1cd0 100644 --- a/src/hooks/dom/useScrollToTop.ts +++ b/src/hooks/dom/useScrollToTop.ts @@ -14,7 +14,6 @@ export const useScrollToTop = (deps?: any[]) => { const bounds = targetElement.getBoundingClientRect(); window.scrollTo({ top: bounds.top - 100, - behavior: 'smooth', }); }, deps && Array.isArray(deps) ? deps : [] diff --git a/src/hooks/dom/useScrollTop.ts b/src/hooks/dom/useScrollTop.ts index 90341f42..701d6712 100644 --- a/src/hooks/dom/useScrollTop.ts +++ b/src/hooks/dom/useScrollTop.ts @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; export const useScrollTop = () => { - const [top, setTop] = useState(0); + const [top, setTop] = useState(typeof window !== 'undefined' ? window.scrollY : 0); useEffect(() => { const onScroll = () => { diff --git a/src/layouts/NodeLayout/index.tsx b/src/layouts/NodeLayout/index.tsx index df0831f4..05cd2a80 100644 --- a/src/layouts/NodeLayout/index.tsx +++ b/src/layouts/NodeLayout/index.tsx @@ -17,6 +17,8 @@ import { useNodeContext } from '~/utils/context/NodeContextProvider'; import { useNodePermissions } from '~/hooks/node/useNodePermissions'; import { useNodeActions } from '~/hooks/node/useNodeActions'; import { NodeTitle } from '~/components/node/NodeTitle'; +import { ScrollHelperBottom } from '~/components/common/ScrollHelperBottom'; +import { Superpower } from '~/components/boris/Superpower'; type IProps = {}; @@ -65,7 +67,9 @@ const NodeLayout: FC = () => { - + + +
); }; From 0a9b4b6388ac9718aad44b075c6bbf4bc2095521 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 11 Jan 2022 11:31:42 +0700 Subject: [PATCH 09/28] fixed getScrollHeight --- src/hooks/dom/useScrollHeight.ts | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/src/hooks/dom/useScrollHeight.ts b/src/hooks/dom/useScrollHeight.ts index 80596fec..48bf7f4d 100644 --- a/src/hooks/dom/useScrollHeight.ts +++ b/src/hooks/dom/useScrollHeight.ts @@ -1,5 +1,3 @@ -import { useEffect, useState } from 'react'; - const getHeight = () => { if (typeof document === 'undefined') { return 0; @@ -16,20 +14,4 @@ const getHeight = () => { html.offsetHeight ); }; -export const useScrollHeight = () => { - const [scrollHeight, setScrollHeight] = useState(getHeight()); - - useEffect(() => { - const measure = () => setScrollHeight(getHeight()); - - window.addEventListener('scroll', measure); - window.addEventListener('resize', measure); - - return () => { - window.removeEventListener('scroll', measure); - window.removeEventListener('resize', measure); - }; - }, []); - - return scrollHeight; -}; +export const useScrollHeight = () => getHeight(); From d31c18b06da3c25390f1d9ffaccf9d5d5c0eee47 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 11 Jan 2022 11:32:22 +0700 Subject: [PATCH 10/28] fixed profile avatar uploader input --- src/components/profile/ProfileAvatar/styles.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/profile/ProfileAvatar/styles.module.scss b/src/components/profile/ProfileAvatar/styles.module.scss index 2d829e6a..bb3b6741 100644 --- a/src/components/profile/ProfileAvatar/styles.module.scss +++ b/src/components/profile/ProfileAvatar/styles.module.scss @@ -19,7 +19,7 @@ left: 0; width: 100%; height: 100%; - opacity: 1; + opacity: 0; } &:hover { From a454b16fc95844f5078cb0b8c3a7d11e034e7608 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 11 Jan 2022 11:37:33 +0700 Subject: [PATCH 11/28] fixed image upload button at avatar --- .../input/Button/styles.module.scss | 7 ++--- .../profile/ProfileAvatar/index.tsx | 7 ++--- .../profile/ProfileAvatar/styles.module.scss | 29 ++----------------- 3 files changed, 6 insertions(+), 37 deletions(-) diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss index ba7951f1..6cd47353 100644 --- a/src/components/input/Button/styles.module.scss +++ b/src/components/input/Button/styles.module.scss @@ -10,6 +10,8 @@ } .button { + @include outer_shadow(); + position: relative; height: $input_height; border: none; @@ -34,12 +36,7 @@ align-items: center; justify-content: center; - filter: grayscale(0); - transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, background-color 0.5s; - opacity: 0.8; - - @include outer_shadow(); input { position: absolute; diff --git a/src/components/profile/ProfileAvatar/index.tsx b/src/components/profile/ProfileAvatar/index.tsx index e1723efe..75be4b4f 100644 --- a/src/components/profile/ProfileAvatar/index.tsx +++ b/src/components/profile/ProfileAvatar/index.tsx @@ -4,6 +4,7 @@ import { getURL } from '~/utils/dom'; import { PRESETS } from '~/constants/urls'; import { Icon } from '~/components/input/Icon'; import { IFile } from '~/types'; +import { Button } from '~/components/input/Button'; export interface ProfileAvatarProps { canEdit: boolean; @@ -33,11 +34,7 @@ const ProfileAvatar: FC = ({ photo, onChangePhoto, canEdit } }} > {canEdit && } - {canEdit && ( -
- -
- )} + {canEdit &&
); }; diff --git a/src/components/profile/ProfileAvatar/styles.module.scss b/src/components/profile/ProfileAvatar/styles.module.scss index bb3b6741..b4eb4dbb 100644 --- a/src/components/profile/ProfileAvatar/styles.module.scss +++ b/src/components/profile/ProfileAvatar/styles.module.scss @@ -21,35 +21,10 @@ height: 100%; opacity: 0; } - - &:hover { - svg { - fill: $red; - } - } } .can_edit { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - touch-action: none; - // background: red; - display: flex; - align-items: flex-end; - justify-content: flex-end; - padding: $gap / 2; - box-sizing: border-box; - background: linear-gradient(330deg, $content_bg, transparentize($content_bg, 1)); - border-radius: $radius; - - svg { - width: 32px; - height: 32px; - fill: white; - transition: fill 0.25s; - } + right: -4px; + bottom: -4px; } From d8e73196878040c17bdce1e3d5dd42b10a9afea8 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 11 Jan 2022 14:56:05 +0700 Subject: [PATCH 12/28] fixed swiper auto width --- src/components/node/NodeImageSwiperBlock/styles.module.scss | 2 +- src/components/profile/ProfileAvatar/styles.module.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss index b418ccf4..01f91258 100644 --- a/src/components/node/NodeImageSwiperBlock/styles.module.scss +++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss @@ -79,7 +79,7 @@ } -.slide { +.slide.slide { text-align: center; text-transform: uppercase; font: $font_32_bold; diff --git a/src/components/profile/ProfileAvatar/styles.module.scss b/src/components/profile/ProfileAvatar/styles.module.scss index b4eb4dbb..8d4db746 100644 --- a/src/components/profile/ProfileAvatar/styles.module.scss +++ b/src/components/profile/ProfileAvatar/styles.module.scss @@ -27,4 +27,6 @@ position: absolute; right: -4px; bottom: -4px; + touch-action: none; + pointer-events: none; } From 7f7c12df2b41f53fba5c69098eef61d1cf86de72 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 11 Jan 2022 14:58:30 +0700 Subject: [PATCH 13/28] scaling inactive slides down --- src/components/node/NodeImageSwiperBlock/styles.module.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss index 01f91258..19176721 100644 --- a/src/components/node/NodeImageSwiperBlock/styles.module.scss +++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss @@ -90,7 +90,8 @@ width: auto; max-width: 100vw; opacity: 1; - transform: translate(0, 10px); + //transform: translate(0, 10px); + transform: scale(0.99); filter: brightness(50%) saturate(0.5); transition: opacity 0.5s, filter 0.5s, transform 0.5s; padding-bottom: $gap * 1.5; @@ -99,7 +100,8 @@ &:global(.swiper-slide-active) { opacity: 1; filter: brightness(100%); - transform: translate(0, 0); + //transform: translate(0, 0); + transform: scale(1); } @include tablet { From 0c9d5467ed9d60400b28c620ee86cbb51b384ebc Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 11 Jan 2022 16:34:26 +0700 Subject: [PATCH 14/28] added empty profile sidebar --- src/components/boris/BorisUIDemo/index.tsx | 6 +++ .../NodeImageSwiperBlock/styles.module.scss | 2 + .../profile/ProfileAvatar/index.tsx | 6 ++- .../profile/ProfileAvatar/styles.module.scss | 4 +- src/constants/modal/index.ts | 3 ++ src/containers/profile/ProfileInfo/index.tsx | 4 +- .../profile/ProfileInfo/styles.module.scss | 7 ---- .../profile/ProfileSidebarHead/index.tsx | 25 ++++++++++++ .../sidebars/ProfileSidebar/index.tsx | 39 +++++++++++++++++++ .../ProfileSidebar/styles.module.scss | 22 +++++++++++ src/styles/_global.scss | 33 ++++++++++++++++ src/styles/common/markdown.module.scss | 30 -------------- 12 files changed, 138 insertions(+), 43 deletions(-) create mode 100644 src/containers/profile/ProfileSidebarHead/index.tsx create mode 100644 src/containers/sidebars/ProfileSidebar/index.tsx create mode 100644 src/containers/sidebars/ProfileSidebar/styles.module.scss diff --git a/src/components/boris/BorisUIDemo/index.tsx b/src/components/boris/BorisUIDemo/index.tsx index d8b3a0db..38cd6529 100644 --- a/src/components/boris/BorisUIDemo/index.tsx +++ b/src/components/boris/BorisUIDemo/index.tsx @@ -5,11 +5,14 @@ import markdown from '~/styles/common/markdown.module.scss'; import { Group } from '~/components/containers/Group'; import { Button } from '~/components/input/Button'; import { InputText } from '~/components/input/InputText'; +import { useShowModal } from '~/hooks/modal/useShowModal'; +import { Dialog } from '~/constants/modal'; interface IProps {} const BorisUIDemo: FC = () => { const [text, setText] = useState(''); + const openProfileSidebar = useShowModal(Dialog.ProfileSidebar); return ( @@ -20,6 +23,9 @@ const BorisUIDemo: FC = () => { разработке

+

Тестовые фичи

+ +

Инпуты

diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss index 19176721..dc800a8f 100644 --- a/src/components/node/NodeImageSwiperBlock/styles.module.scss +++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss @@ -25,6 +25,8 @@ :global(.swiper-button-next), :global(.swiper-button-prev) { + @include outer_shadow; + color: white; font-size: 10px; width: 40px; diff --git a/src/components/profile/ProfileAvatar/index.tsx b/src/components/profile/ProfileAvatar/index.tsx index 75be4b4f..f272c391 100644 --- a/src/components/profile/ProfileAvatar/index.tsx +++ b/src/components/profile/ProfileAvatar/index.tsx @@ -2,17 +2,17 @@ import React, { ChangeEvent, FC, useCallback } from 'react'; import styles from './styles.module.scss'; import { getURL } from '~/utils/dom'; import { PRESETS } from '~/constants/urls'; -import { Icon } from '~/components/input/Icon'; import { IFile } from '~/types'; import { Button } from '~/components/input/Button'; export interface ProfileAvatarProps { + size?: number; canEdit: boolean; photo?: IFile; onChangePhoto: (file: File) => void; } -const ProfileAvatar: FC = ({ photo, onChangePhoto, canEdit }) => { +const ProfileAvatar: FC = ({ photo, onChangePhoto, canEdit, size }) => { const onInputChange = useCallback( async (event: ChangeEvent) => { if (!event.target.files?.length) { @@ -31,6 +31,8 @@ const ProfileAvatar: FC = ({ photo, onChangePhoto, canEdit } className={styles.avatar} style={{ backgroundImage, + width: size, + height: size, }} > {canEdit && } diff --git a/src/components/profile/ProfileAvatar/styles.module.scss b/src/components/profile/ProfileAvatar/styles.module.scss index 8d4db746..3d18310c 100644 --- a/src/components/profile/ProfileAvatar/styles.module.scss +++ b/src/components/profile/ProfileAvatar/styles.module.scss @@ -8,10 +8,8 @@ height: 100px; background: $content_bg 50% 50% no-repeat; background-size: cover; - position: absolute; - bottom: 0; - left: $gap; cursor: pointer; + position: relative; input { position: absolute; diff --git a/src/constants/modal/index.ts b/src/constants/modal/index.ts index 9f7ada36..949af46a 100644 --- a/src/constants/modal/index.ts +++ b/src/constants/modal/index.ts @@ -9,6 +9,7 @@ import { PhotoSwipe } from '~/containers/dialogs/PhotoSwipe'; import { EditorCreateDialog } from '~/containers/dialogs/EditorCreateDialog'; import { EditorEditDialog } from '~/containers/dialogs/EditorEditDialog'; import { TagSidebar } from '~/containers/sidebars/TagSidebar'; +import { ProfileSidebar } from '~/containers/sidebars/ProfileSidebar'; export enum Dialog { Login = 'Login', @@ -22,6 +23,7 @@ export enum Dialog { CreateNode = 'CreateNode', EditNode = 'EditNode', TagSidebar = 'TagNodes', + ProfileSidebar = 'ProfileSidebar', } export const DIALOG_CONTENT = { @@ -36,4 +38,5 @@ export const DIALOG_CONTENT = { [Dialog.CreateNode]: EditorCreateDialog, [Dialog.EditNode]: EditorEditDialog, [Dialog.TagSidebar]: TagSidebar, + [Dialog.ProfileSidebar]: ProfileSidebar, } as const; diff --git a/src/containers/profile/ProfileInfo/index.tsx b/src/containers/profile/ProfileInfo/index.tsx index fb687e5a..8046eb09 100644 --- a/src/containers/profile/ProfileInfo/index.tsx +++ b/src/containers/profile/ProfileInfo/index.tsx @@ -27,7 +27,9 @@ const ProfileInfo: FC = ({ isOwn }) => { return (
- +
+ +
diff --git a/src/containers/profile/ProfileInfo/styles.module.scss b/src/containers/profile/ProfileInfo/styles.module.scss index abbee948..7e490d63 100644 --- a/src/containers/profile/ProfileInfo/styles.module.scss +++ b/src/containers/profile/ProfileInfo/styles.module.scss @@ -8,13 +8,6 @@ } .avatar { - @include outer_shadow(); - - border-radius: $radius; - width: 100px; - height: 100px; - background: $content_bg 50% 50% no-repeat; - background-size: cover; position: absolute; bottom: 0; left: $gap; diff --git a/src/containers/profile/ProfileSidebarHead/index.tsx b/src/containers/profile/ProfileSidebarHead/index.tsx new file mode 100644 index 00000000..64e23194 --- /dev/null +++ b/src/containers/profile/ProfileSidebarHead/index.tsx @@ -0,0 +1,25 @@ +import React, { VFC } from 'react'; +import { Group } from '~/components/containers/Group'; +import { Filler } from '~/components/containers/Filler'; +import { ProfileAvatar } from '~/components/profile/ProfileAvatar'; +import { usePatchUser } from '~/hooks/auth/usePatchUser'; +import { useUser } from '~/hooks/auth/useUser'; + +interface ProfileSidebarHeadProps {} + +const ProfileSidebarHead: VFC = () => { + const { user } = useUser(); + const { updatePhoto } = usePatchUser(); + + return ( + + + + +

{user.fullname || user.username}

+
+
+ ); +}; + +export { ProfileSidebarHead }; diff --git a/src/containers/sidebars/ProfileSidebar/index.tsx b/src/containers/sidebars/ProfileSidebar/index.tsx new file mode 100644 index 00000000..b1143f0d --- /dev/null +++ b/src/containers/sidebars/ProfileSidebar/index.tsx @@ -0,0 +1,39 @@ +import React, { VFC } from 'react'; +import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper'; +import styles from './styles.module.scss'; +import { DialogComponentProps } from '~/types/modal'; +import markdown from '~/styles/common/markdown.module.scss'; +import { Button } from '~/components/input/Button'; +import { Filler } from '~/components/containers/Filler'; +import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead'; +import classNames from 'classnames'; + +interface ProfileSidebarProps extends DialogComponentProps {} + +const ProfileSidebar: VFC = ({ onRequestClose }) => { + return ( + +
+
+
+ +
+ + +

Здесь будет профиль

+ +

+ Но пока что мы просто тестируем как это будет выглядеть и будет ли это удобнее модалки +

+
+ + +
+
+
+ ); +}; + +export { ProfileSidebar }; diff --git a/src/containers/sidebars/ProfileSidebar/styles.module.scss b/src/containers/sidebars/ProfileSidebar/styles.module.scss new file mode 100644 index 00000000..7e37ee0c --- /dev/null +++ b/src/containers/sidebars/ProfileSidebar/styles.module.scss @@ -0,0 +1,22 @@ +@import "src/styles/variables"; + +.wrap { + @include sidebar_content(400px); +} + +.content { + border-radius: $radius; + height: 100%; + box-sizing: border-box; + overflow: auto; + display: flex; + min-height: 0; + flex-direction: column; + width: 100%; + max-width: 400px; + padding: $gap; +} + +.text { + margin-top: $gap * 2; +} diff --git a/src/styles/_global.scss b/src/styles/_global.scss index e2ab3236..c073498c 100644 --- a/src/styles/_global.scss +++ b/src/styles/_global.scss @@ -128,3 +128,36 @@ button { background-color: transparent; outline: none; } + +h5, h4, h3, h2, h1 { + color: white; + font-weight: 800; +} + +h1 { + font-size: 2em; +} + +h2 { + font-size: 1.8em; +} + +h3 { + font-size: 1.6em; +} + +h4 { + font-size: 1.4em; +} + +h5 { + font-size: 1.2em; +} + +p { + margin-bottom: $gap; + + &:last-child { + margin-bottom: 0; + } +} diff --git a/src/styles/common/markdown.module.scss b/src/styles/common/markdown.module.scss index 875b3de3..cba76dc7 100644 --- a/src/styles/common/markdown.module.scss +++ b/src/styles/common/markdown.module.scss @@ -53,17 +53,7 @@ $margin: 1em; margin-bottom: $margin; } - p { - margin-bottom: $margin; - - &:last-child { - margin-bottom: 0; - } - } - h5, h4, h3, h2, h1 { - color: white; - font-weight: 800; line-height: 1.2em; margin: $margin * 1.5 0 $margin / 2; @@ -72,26 +62,6 @@ $margin: 1em; } } - h1 { - font-size: 2em; - } - - h2 { - font-size: 1.8em; - } - - h3 { - font-size: 1.6em; - } - - h4 { - font-size: 1.4em; - } - - h5 { - font-size: 1.2em; - } - ul { list-style: disc; padding-left: 20px; From 367ba0cc4dbd581b2e8105cf036b0e80f57cf9ed Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Wed, 12 Jan 2022 18:07:01 +0700 Subject: [PATCH 15/28] added sample data to profile sidebar --- src/components/common/Square/index.tsx | 33 +++++++------ .../common/Square/styles.module.scss | 9 ++++ .../sidebars/ProfileSidebar/index.tsx | 46 +++++++++++++++++-- .../ProfileSidebar/styles.module.scss | 32 +++++++++++++ 4 files changed, 101 insertions(+), 19 deletions(-) diff --git a/src/components/common/Square/index.tsx b/src/components/common/Square/index.tsx index 75a7cae0..96e2c473 100644 --- a/src/components/common/Square/index.tsx +++ b/src/components/common/Square/index.tsx @@ -1,26 +1,29 @@ -import React, { forwardRef, ForwardRefRenderFunction, VFC } from 'react'; +import React, { forwardRef } from 'react'; import styles from './styles.module.scss'; import { DivProps } from '~/utils/types'; import classNames from 'classnames'; interface SquareProps extends DivProps { - image: string; + image?: string; size?: number; } -const Square = forwardRef(({ image, size, ...rest }, ref) => { - const backgroundImage = image ? `url('${image}')` : undefined; +const Square = forwardRef( + ({ image, size, children, ...rest }, ref) => { + const backgroundImage = image ? `url('${image}')` : undefined; - return ( -
- -
- ); -}); + return ( +
+ + {!!children &&
{children}
} +
+ ); + } +); export { Square }; diff --git a/src/components/common/Square/styles.module.scss b/src/components/common/Square/styles.module.scss index 880fb4a7..ca207950 100644 --- a/src/components/common/Square/styles.module.scss +++ b/src/components/common/Square/styles.module.scss @@ -9,4 +9,13 @@ border-radius: $radius; background-size: cover; background-repeat: no-repeat; + position: relative; +} + +.content { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; } diff --git a/src/containers/sidebars/ProfileSidebar/index.tsx b/src/containers/sidebars/ProfileSidebar/index.tsx index b1143f0d..f235696b 100644 --- a/src/containers/sidebars/ProfileSidebar/index.tsx +++ b/src/containers/sidebars/ProfileSidebar/index.tsx @@ -7,10 +7,18 @@ import { Button } from '~/components/input/Button'; import { Filler } from '~/components/containers/Filler'; import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead'; import classNames from 'classnames'; +import { Group } from '~/components/containers/Group'; +import { Card } from '~/components/containers/Card'; +import { Grid } from '~/components/containers/Grid'; +import { Square } from '~/components/common/Square'; +import { Padder } from '~/components/containers/Padder'; +import { useUser } from '~/hooks/auth/useUser'; interface ProfileSidebarProps extends DialogComponentProps {} const ProfileSidebar: VFC = ({ onRequestClose }) => { + const { user } = useUser(); + return (
@@ -20,11 +28,41 @@ const ProfileSidebar: VFC = ({ onRequestClose }) => {
-

Здесь будет профиль

+ +
    +
  • Настройки
  • +
  • Заметки
  • +
  • Удалённые посты
  • +
-

- Но пока что мы просто тестируем как это будет выглядеть и будет ли это удобнее модалки -

+ + +

1 год 2 месяца

+ в убежище +
+ + + +

24 поста

+ Создано +
+
+
+ + + + +

16545 лайка

+ получено +
+
+ + +

123123 комментария

+ под постами +
+
+
- + ); }; diff --git a/src/components/main/Logo/index.tsx b/src/components/main/Logo/index.tsx index bf91d9b3..286c5321 100644 --- a/src/components/main/Logo/index.tsx +++ b/src/components/main/Logo/index.tsx @@ -1,9 +1,10 @@ import React from 'react'; import styles from './styles.module.scss'; -import { Link } from 'react-router-dom'; +import { Anchor } from '~/components/common/Anchor'; +import { URLS } from '~/constants/urls'; export const Logo = () => ( - + VAULT - + ); diff --git a/src/components/node/NodeRelatedBlock/index.tsx b/src/components/node/NodeRelatedBlock/index.tsx index c377e975..ba7e0dfc 100644 --- a/src/components/node/NodeRelatedBlock/index.tsx +++ b/src/components/node/NodeRelatedBlock/index.tsx @@ -4,7 +4,7 @@ import { NodeRelated } from '~/components/node/NodeRelated'; import { URLS } from '~/constants/urls'; import { INode } from '~/types'; import { INodeRelated } from '~/types/node'; -import { Link } from 'react-router-dom'; +import { Anchor } from '~/components/common/Anchor'; interface IProps { isLoading: boolean; @@ -27,7 +27,9 @@ const NodeRelatedBlock: FC = ({ isLoading, node, related }) => { .map(album => ( {album} + + {album} + } items={related.albums[album]} key={album} diff --git a/src/components/profile/ProfileSidebarMenu/index.tsx b/src/components/profile/ProfileSidebarMenu/index.tsx index dafbae33..99d47d21 100644 --- a/src/components/profile/ProfileSidebarMenu/index.tsx +++ b/src/components/profile/ProfileSidebarMenu/index.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; import styles from './styles.module.scss'; import { Icon } from '~/components/input/Icon'; -import { Link } from 'react-router-dom'; +import { Anchor } from '~/components/common/Anchor'; interface IProps { path: string; @@ -12,10 +12,10 @@ const ProfileSidebarMenu: FC = ({ path }) => { return (
- + Настройки - +
diff --git a/src/constants/api.ts b/src/constants/api.ts index d49683f2..a64dda1b 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -3,10 +3,10 @@ import { OAuthProvider } from '~/types/auth'; import { CONFIG } from '~/utils/config'; export const API = { - BASE: CONFIG.API_HOST, + BASE: CONFIG.apiHost, USER: { LOGIN: '/user/login', - OAUTH_WINDOW: (provider: OAuthProvider) => `${CONFIG.API_HOST}oauth/${provider}/redirect`, + OAUTH_WINDOW: (provider: OAuthProvider) => `${CONFIG.apiHost}oauth/${provider}/redirect`, ME: '/user/', PROFILE: (username: string) => `/user/user/${username}/profile`, MESSAGES: (username: string) => `/user/user/${username}/messages`, diff --git a/src/containers/main/Header/index.tsx b/src/containers/main/Header/index.tsx index 492892d9..7a7d91ad 100644 --- a/src/containers/main/Header/index.tsx +++ b/src/containers/main/Header/index.tsx @@ -1,5 +1,4 @@ import React, { FC, useCallback, useMemo } from 'react'; -import { Link } from 'react-router-dom'; import { Logo } from '~/components/main/Logo'; import { Filler } from '~/components/containers/Filler'; @@ -19,6 +18,7 @@ import { useModal } from '~/hooks/modal/useModal'; import { useScrollTop } from '~/hooks/dom/useScrollTop'; import { useFlow } from '~/hooks/flow/useFlow'; import { useUpdates } from '~/hooks/updates/useUpdates'; +import { Anchor } from '~/components/common/Anchor'; type HeaderProps = {}; @@ -62,32 +62,32 @@ const Header: FC = observer(() => {
- ФЛОУ - + - ЛАБ - + - БОРИС - +
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 13d559e0..1397b5ed 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -15,10 +15,13 @@ import { AudioPlayerProvider } from '~/utils/providers/AudioPlayerProvider'; import { MetadataProvider } from '~/utils/providers/MetadataProvider'; import { AuthProvider } from '~/utils/providers/AuthProvider'; import { MainLayout } from '~/containers/main/MainLayout'; +import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader'; const mobxStore = getMOBXStore(); export default function MyApp({ Component, pageProps }) { + useGlobalLoader(); + return ( diff --git a/src/store/auth/AuthStore.ts b/src/store/auth/AuthStore.ts index edca1ec5..d5c9cc0d 100644 --- a/src/store/auth/AuthStore.ts +++ b/src/store/auth/AuthStore.ts @@ -13,7 +13,7 @@ export class AuthStore { makeAutoObservable(this); void makePersistable(this, { - name: `vault48_auth_${CONFIG.API_HOST}`, + name: `vault48_auth_${CONFIG.apiHost}`, properties: ['token', 'user', 'isTesterInternal'], storage: typeof window !== 'undefined' ? window.localStorage : undefined, }); diff --git a/src/utils/config/index.ts b/src/utils/config/index.ts index 7a306c68..52f4e9bb 100644 --- a/src/utils/config/index.ts +++ b/src/utils/config/index.ts @@ -1,5 +1,7 @@ export const CONFIG = { - API_HOST: process.env.REACT_APP_API_HOST || process.env.NEXT_PUBLIC_API_HOST || '', - REMOTE_CURRENT: + apiHost: process.env.REACT_APP_API_HOST || process.env.NEXT_PUBLIC_API_HOST || '', + remoteCurrent: process.env.REACT_APP_REMOTE_CURRENT || process.env.NEXT_PUBLIC_REMOTE_CURRENT || '', + // transitional prop, marks migration to nextjs + isNextEnvironment: false, }; diff --git a/src/utils/dom.ts b/src/utils/dom.ts index 0021a296..22c2c5ba 100644 --- a/src/utils/dom.ts +++ b/src/utils/dom.ts @@ -68,10 +68,10 @@ export const getURLFromString = ( size?: typeof PRESETS[keyof typeof PRESETS] ): string => { if (size) { - return (url || '').replace('REMOTE_CURRENT://', `${CONFIG.REMOTE_CURRENT}cache/${size}/`); + return (url || '').replace('REMOTE_CURRENT://', `${CONFIG.remoteCurrent}cache/${size}/`); } - return (url || '').replace('REMOTE_CURRENT://', CONFIG.REMOTE_CURRENT); + return (url || '').replace('REMOTE_CURRENT://', CONFIG.remoteCurrent); }; export const getURL = ( diff --git a/src/utils/types.ts b/src/utils/types.ts index 438d56d3..21f1e758 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -16,3 +16,8 @@ export type ButtonProps = React.DetailedHTMLProps< React.ButtonHTMLAttributes, HTMLButtonElement >; + +export type LinkProps = React.DetailedHTMLProps< + React.AnchorHTMLAttributes, + HTMLAnchorElement +>; From 14b93d5dbb75b6541a5f57eb926be506fb9067f9 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Thu, 13 Jan 2022 16:08:23 +0700 Subject: [PATCH 21/28] made transitional Anchor component for next/cra --- src/components/flow/FlowSwiperHero/index.tsx | 7 +++--- src/components/lab/LabBottomPanel/index.tsx | 5 +++-- src/components/lab/LabHero/index.tsx | 7 +++--- src/components/node/NodeRelatedItem/index.tsx | 7 +++--- src/hooks/auth/useRestorePasswordRedirect.ts | 8 +++---- src/hooks/navigation/useNavigation.ts | 22 +++++++++++++++++++ src/hooks/node/useGotoNode.ts | 6 ++--- 7 files changed, 44 insertions(+), 18 deletions(-) create mode 100644 src/hooks/navigation/useNavigation.ts diff --git a/src/components/flow/FlowSwiperHero/index.tsx b/src/components/flow/FlowSwiperHero/index.tsx index 93e6ecd7..9e1a165d 100644 --- a/src/components/flow/FlowSwiperHero/index.tsx +++ b/src/components/flow/FlowSwiperHero/index.tsx @@ -12,6 +12,7 @@ import { useHistory } from 'react-router'; import classNames from 'classnames'; import { IFlowNode } from '~/types'; import { useWindowSize } from '~/hooks/dom/useWindowSize'; +import { useNavigation } from '~/hooks/navigation/useNavigation'; SwiperCore.use([EffectFade, Lazy, Autoplay, Navigation]); @@ -21,13 +22,13 @@ interface Props { export const FlowSwiperHero: FC = ({ heroes }) => { const { innerWidth } = useWindowSize(); + const { push } = useNavigation(); const [controlledSwiper, setControlledSwiper] = useState(undefined); const [currentIndex, setCurrentIndex] = useState(heroes.length); const preset = useMemo(() => (innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), [ innerWidth, ]); - const history = useHistory(); const onNext = useCallback(() => { controlledSwiper?.slideNext(1); @@ -63,9 +64,9 @@ export const FlowSwiperHero: FC = ({ heroes }) => { const onClick = useCallback( (sw: SwiperClass) => { - history.push(URLS.NODE_URL(heroes[sw.realIndex]?.id)); + push(URLS.NODE_URL(heroes[sw.realIndex]?.id)); }, - [history, heroes] + [push, heroes] ); if (!heroes.length) { diff --git a/src/components/lab/LabBottomPanel/index.tsx b/src/components/lab/LabBottomPanel/index.tsx index c8fb98b7..2b7fbd76 100644 --- a/src/components/lab/LabBottomPanel/index.tsx +++ b/src/components/lab/LabBottomPanel/index.tsx @@ -10,6 +10,7 @@ import { Grid } from '~/components/containers/Grid'; import { useHistory } from 'react-router'; import { URLS } from '~/constants/urls'; import { Placeholder } from '~/components/placeholders/Placeholder'; +import { useNavigation } from '~/hooks/navigation/useNavigation'; type Props = { node: INode; @@ -19,8 +20,8 @@ type Props = { }; const LabBottomPanel: FC = ({ node, hasNewComments, commentCount, isLoading }) => { - const history = useHistory(); - const onClick = useCallback(() => history.push(URLS.NODE_URL(node.id)), [history, node.id]); + const { push } = useNavigation(); + const onClick = useCallback(() => push(URLS.NODE_URL(node.id)), [push, node.id]); return ( diff --git a/src/components/lab/LabHero/index.tsx b/src/components/lab/LabHero/index.tsx index 761f4997..23f4b911 100644 --- a/src/components/lab/LabHero/index.tsx +++ b/src/components/lab/LabHero/index.tsx @@ -7,6 +7,7 @@ import { INode } from '~/types'; import { getPrettyDate } from '~/utils/dom'; import { URLS } from '~/constants/urls'; import { useHistory } from 'react-router-dom'; +import { useNavigation } from '~/hooks/navigation/useNavigation'; interface IProps { node?: Partial; @@ -14,10 +15,10 @@ interface IProps { } const LabHero: FC = ({ node, isLoading }) => { - const history = useHistory(); + const { push } = useNavigation(); const onClick = useCallback(() => { - history.push(URLS.NODE_URL(node?.id)); - }, [history, node]); + push(URLS.NODE_URL(node?.id)); + }, [push, node]); if (!node || isLoading) { return ( diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx index 7005d1f0..a3194033 100644 --- a/src/components/node/NodeRelatedItem/index.tsx +++ b/src/components/node/NodeRelatedItem/index.tsx @@ -5,9 +5,9 @@ import { INode } from '~/types'; import { PRESETS, URLS } from '~/constants/urls'; import { RouteComponentProps, withRouter } from 'react-router'; import { getURL, getURLFromString } from '~/utils/dom'; -import { Avatar } from '~/components/common/Avatar'; import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString'; import { Square } from '~/components/common/Square'; +import { useNavigation } from '~/hooks/navigation/useNavigation'; type IProps = RouteComponentProps & { item: Partial; @@ -29,11 +29,12 @@ const getTitleLetters = (title?: string): string => { : words[0].substr(0, 2).toUpperCase(); }; -const NodeRelatedItemUnconnected: FC = memo(({ item, history }) => { +const NodeRelatedItemUnconnected: FC = memo(({ item }) => { + const { push } = useNavigation(); const [is_loaded, setIsLoaded] = useState(false); const [width, setWidth] = useState(0); const ref = useRef(null); - const onClick = useCallback(() => history.push(URLS.NODE_URL(item.id)), [item, history]); + const onClick = useCallback(() => push(URLS.NODE_URL(item.id)), [item, push]); const thumb = useMemo( () => (item.thumbnail ? getURL({ url: item.thumbnail }, PRESETS.avatar) : ''), diff --git a/src/hooks/auth/useRestorePasswordRedirect.ts b/src/hooks/auth/useRestorePasswordRedirect.ts index 0f7cfd2a..8dff4565 100644 --- a/src/hooks/auth/useRestorePasswordRedirect.ts +++ b/src/hooks/auth/useRestorePasswordRedirect.ts @@ -1,11 +1,11 @@ import { useEffect } from 'react'; -import { useHistory } from 'react-router'; import { useModal } from '~/hooks/modal/useModal'; import { Dialog } from '~/constants/modal'; +import { useNavigation } from '~/hooks/navigation/useNavigation'; /** redirects to the password redirect modal */ export const useRestorePasswordRedirect = () => { - const history = useHistory(); + const { push } = useNavigation(); const { showModal } = useModal(); useEffect(() => { @@ -15,7 +15,7 @@ export const useRestorePasswordRedirect = () => { return; } - history.push('/'); + push('/'); showModal(Dialog.RestorePassword, { code: match[1] }); - }, [showModal, history]); + }, [showModal, push]); }; diff --git a/src/hooks/navigation/useNavigation.ts b/src/hooks/navigation/useNavigation.ts new file mode 100644 index 00000000..a5877d12 --- /dev/null +++ b/src/hooks/navigation/useNavigation.ts @@ -0,0 +1,22 @@ +import { useCallback } from 'react'; +import { CONFIG } from '~/utils/config'; +import { useRouter } from 'next/router'; +import { useHistory } from 'react-router'; + +export const useNavigation = () => { + const nextRouter = useRouter(); + const craHistory = useHistory(); + + const push = useCallback( + (url: string) => { + if (CONFIG.isNextEnvironment) { + nextRouter.push(url); + } else { + craHistory.push(url); + } + }, + [craHistory, nextRouter] + ); + + return { push }; +}; diff --git a/src/hooks/node/useGotoNode.ts b/src/hooks/node/useGotoNode.ts index 1d38e8eb..5a8eebe9 100644 --- a/src/hooks/node/useGotoNode.ts +++ b/src/hooks/node/useGotoNode.ts @@ -1,10 +1,10 @@ import { INode } from '~/types'; -import { useHistory } from 'react-router'; import { useCallback } from 'react'; import { URLS } from '~/constants/urls'; +import { useNavigation } from '~/hooks/navigation/useNavigation'; // useGotoNode returns fn, that navigates to node export const useGotoNode = (id: INode['id']) => { - const history = useHistory(); - return useCallback(() => history.push(URLS.NODE_URL(id)), [history, id]); + const { push } = useNavigation(); + return useCallback(() => push(URLS.NODE_URL(id)), [push, id]); }; From 01fac15a00e16eb1d733c838ec3477bdb9ceeaed Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 14 Jan 2022 12:29:51 +0700 Subject: [PATCH 22/28] added sample profile sidebar settings --- .../profile/ProfileSidebarMenu/index.tsx | 28 -------- .../ProfileSidebarMenu/styles.module.scss | 47 ------------- src/components/sidebar/SidebarStack/index.tsx | 26 +++++++ .../sidebar/SidebarStack/styles.module.scss | 30 ++++++++ .../profile/ProfileSidebarMenu/index.tsx | 67 ++++++++++++++++++ .../ProfileSidebarMenu}/styles.module.scss | 16 +---- .../sidebars/ProfileSidebar/index.tsx | 70 ++----------------- src/styles/_mixins.scss | 2 - 8 files changed, 132 insertions(+), 154 deletions(-) delete mode 100644 src/components/profile/ProfileSidebarMenu/index.tsx delete mode 100644 src/components/profile/ProfileSidebarMenu/styles.module.scss create mode 100644 src/components/sidebar/SidebarStack/index.tsx create mode 100644 src/components/sidebar/SidebarStack/styles.module.scss create mode 100644 src/containers/profile/ProfileSidebarMenu/index.tsx rename src/containers/{sidebars/ProfileSidebar => profile/ProfileSidebarMenu}/styles.module.scss (73%) diff --git a/src/components/profile/ProfileSidebarMenu/index.tsx b/src/components/profile/ProfileSidebarMenu/index.tsx deleted file mode 100644 index 99d47d21..00000000 --- a/src/components/profile/ProfileSidebarMenu/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { FC } from 'react'; -import styles from './styles.module.scss'; -import { Icon } from '~/components/input/Icon'; -import { Anchor } from '~/components/common/Anchor'; - -interface IProps { - path: string; -} - -const ProfileSidebarMenu: FC = ({ path }) => { - const cleaned = path.replace(/\/$/, ''); - - return ( -
- - - Настройки - - -
- - Сообщения -
-
- ); -}; - -export { ProfileSidebarMenu }; diff --git a/src/components/profile/ProfileSidebarMenu/styles.module.scss b/src/components/profile/ProfileSidebarMenu/styles.module.scss deleted file mode 100644 index 91eedbdd..00000000 --- a/src/components/profile/ProfileSidebarMenu/styles.module.scss +++ /dev/null @@ -1,47 +0,0 @@ -@import "src/styles/variables"; - -.wrap { - display: flex; - align-items: stretch; - justify-content: center; - flex-direction: column; - margin: 0 $gap; - box-sizing: border-box; - box-shadow: $sidebar_border 0 0 0 1px; - border-radius: $radius; - background-color: transparentize(black, 0.9) -} - -.row { - padding: $gap; - font: $font_18_semibold; - box-shadow: $sidebar_border 0 -1px; - cursor: pointer; - background-color: transparentize(black, 1); - transition: all 250ms; - display: flex; - align-items: center; - justify-content: flex-start; - height: 30px; - opacity: 0.5; - text-decoration: none; - fill: white; - color: white; - - &:hover { - background-color: transparentize($wisegreen, 0.5); - opacity: 1; - } - - &:first-child { - border-radius: $radius $radius 0 0; - } - - &:last-child { - border-radius: 0 0 $radius $radius; - } - - svg { - margin-right: $gap * 1.2; - } -} diff --git a/src/components/sidebar/SidebarStack/index.tsx b/src/components/sidebar/SidebarStack/index.tsx new file mode 100644 index 00000000..e989c1d4 --- /dev/null +++ b/src/components/sidebar/SidebarStack/index.tsx @@ -0,0 +1,26 @@ +import React, { FC, useMemo } from 'react'; +import styles from './styles.module.scss'; + +interface SidebarStackProps {} + +const SidebarStack: FC = ({ children }) => { + const nonEmptyChildren = useMemo(() => { + if (!children) { + return []; + } + + return Array.isArray(children) ? children.filter(it => it) : [children]; + }, [children]); + + return ( +
+ {nonEmptyChildren.map((child, i) => ( +
+ {child} +
+ ))} +
+ ); +}; + +export { SidebarStack }; diff --git a/src/components/sidebar/SidebarStack/styles.module.scss b/src/components/sidebar/SidebarStack/styles.module.scss new file mode 100644 index 00000000..bb866b81 --- /dev/null +++ b/src/components/sidebar/SidebarStack/styles.module.scss @@ -0,0 +1,30 @@ +@import "src/styles/variables"; + +.stack { + background: transparentize($content_bg, 0.1); + display: flex; + flex-direction: row-reverse; + width: auto; + border-radius: $radius 0 0 $radius; +} + +.card { + @include sidebar_content(400px); + + box-shadow: transparentize(white, 0.9) -1px 0; + max-width: 400px; + width: 100vw; +} + +.content { + border-radius: $radius; + height: 100%; + box-sizing: border-box; + overflow: auto; + display: flex; + min-height: 0; + flex-direction: column; + width: 100%; + max-width: 400px; + padding: $gap; +} diff --git a/src/containers/profile/ProfileSidebarMenu/index.tsx b/src/containers/profile/ProfileSidebarMenu/index.tsx new file mode 100644 index 00000000..aa4c87d8 --- /dev/null +++ b/src/containers/profile/ProfileSidebarMenu/index.tsx @@ -0,0 +1,67 @@ +import React, { VFC } from 'react'; +import styles from './styles.module.scss'; +import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead'; +import { Filler } from '~/components/containers/Filler'; +import classNames from 'classnames'; +import markdown from '~/styles/common/markdown.module.scss'; +import { Group } from '~/components/containers/Group'; +import { Grid } from '~/components/containers/Grid'; +import { Card } from '~/components/containers/Card'; +import { Square } from '~/components/common/Square'; +import { Button } from '~/components/input/Button'; + +interface ProfileSidebarMenuProps { + onClose: () => void; +} + +const ProfileSidebarMenu: VFC = ({ onClose }) => ( +
+
+ +
+ + + +
    +
  • Настройки
  • +
  • Заметки
  • +
  • Удалённые посты
  • +
+ + + +

1 год 2 месяца

+ в убежище +
+ + + +

24 поста

+ Создано +
+
+
+ + + + +

16545 лайка

+ получено +
+
+ + +

123123 комментария

+ под постами +
+
+
+
+ + +
+); + +export { ProfileSidebarMenu }; diff --git a/src/containers/sidebars/ProfileSidebar/styles.module.scss b/src/containers/profile/ProfileSidebarMenu/styles.module.scss similarity index 73% rename from src/containers/sidebars/ProfileSidebar/styles.module.scss rename to src/containers/profile/ProfileSidebarMenu/styles.module.scss index b1605314..28d4ba6f 100644 --- a/src/containers/sidebars/ProfileSidebar/styles.module.scss +++ b/src/containers/profile/ProfileSidebarMenu/styles.module.scss @@ -1,20 +1,8 @@ -@import "src/styles/variables"; +@import "../../../styles/variables"; .wrap { - @include sidebar_content(400px); -} - -.content { - border-radius: $radius; - height: 100%; - box-sizing: border-box; - overflow: auto; - display: flex; - min-height: 0; - flex-direction: column; - width: 100%; - max-width: 400px; padding: $gap; + box-sizing: border-box; } .text { diff --git a/src/containers/sidebars/ProfileSidebar/index.tsx b/src/containers/sidebars/ProfileSidebar/index.tsx index f235696b..42fc883c 100644 --- a/src/containers/sidebars/ProfileSidebar/index.tsx +++ b/src/containers/sidebars/ProfileSidebar/index.tsx @@ -1,75 +1,19 @@ import React, { VFC } from 'react'; import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper'; -import styles from './styles.module.scss'; import { DialogComponentProps } from '~/types/modal'; -import markdown from '~/styles/common/markdown.module.scss'; -import { Button } from '~/components/input/Button'; -import { Filler } from '~/components/containers/Filler'; -import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead'; -import classNames from 'classnames'; -import { Group } from '~/components/containers/Group'; -import { Card } from '~/components/containers/Card'; -import { Grid } from '~/components/containers/Grid'; -import { Square } from '~/components/common/Square'; -import { Padder } from '~/components/containers/Padder'; -import { useUser } from '~/hooks/auth/useUser'; +import { ProfileSidebarMenu } from '~/containers/profile/ProfileSidebarMenu'; +import { SidebarStack } from '~/components/sidebar/SidebarStack'; +import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings'; interface ProfileSidebarProps extends DialogComponentProps {} const ProfileSidebar: VFC = ({ onRequestClose }) => { - const { user } = useUser(); - return ( -
-
-
- -
- - - -
    -
  • Настройки
  • -
  • Заметки
  • -
  • Удалённые посты
  • -
- - - -

1 год 2 месяца

- в убежище -
- - - -

24 поста

- Создано -
-
-
- - - - -

16545 лайка

- получено -
-
- - -

123123 комментария

- под постами -
-
-
-
- - -
-
+ + + +
); }; diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 1bc67ece..961dccb3 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -164,8 +164,6 @@ flex: 0 1 $width; max-width: 100vw; position: relative; - background: transparentize($content_bg, 0.1); - box-shadow: transparentize(white, 0.95) -1px 0; border-radius: $radius 0 0 $radius; } From 2e75e4f7c0f3e02ef89499ac237939c8657c7b20 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 14 Jan 2022 17:02:25 +0700 Subject: [PATCH 23/28] added sidebar headers --- .../ProfileSidebarSettings/styles.module.scss | 1 - src/components/sidebar/SidebarStack/index.tsx | 2 ++ .../sidebar/SidebarStack/styles.module.scss | 7 ++--- .../sidebar/SidebarStackCard/index.tsx | 31 +++++++++++++++++++ .../SidebarStackCard/styles.module.scss | 17 ++++++++++ .../sidebars/ProfileSidebar/index.tsx | 10 ++++-- 6 files changed, 61 insertions(+), 7 deletions(-) create mode 100644 src/components/sidebar/SidebarStackCard/index.tsx create mode 100644 src/components/sidebar/SidebarStackCard/styles.module.scss diff --git a/src/components/profile/ProfileSidebarSettings/styles.module.scss b/src/components/profile/ProfileSidebarSettings/styles.module.scss index d5aa4618..63a90b95 100644 --- a/src/components/profile/ProfileSidebarSettings/styles.module.scss +++ b/src/components/profile/ProfileSidebarSettings/styles.module.scss @@ -1,7 +1,6 @@ @import "src/styles/variables"; .wrap { - @include sidebar_content(600px); display: flex; align-items: center; justify-content: center; diff --git a/src/components/sidebar/SidebarStack/index.tsx b/src/components/sidebar/SidebarStack/index.tsx index e989c1d4..cd251ac4 100644 --- a/src/components/sidebar/SidebarStack/index.tsx +++ b/src/components/sidebar/SidebarStack/index.tsx @@ -1,5 +1,7 @@ import React, { FC, useMemo } from 'react'; import styles from './styles.module.scss'; +import { Button } from '~/components/input/Button'; +import { Filler } from '~/components/containers/Filler'; interface SidebarStackProps {} diff --git a/src/components/sidebar/SidebarStack/styles.module.scss b/src/components/sidebar/SidebarStack/styles.module.scss index bb866b81..d65c60b1 100644 --- a/src/components/sidebar/SidebarStack/styles.module.scss +++ b/src/components/sidebar/SidebarStack/styles.module.scss @@ -9,11 +9,10 @@ } .card { - @include sidebar_content(400px); - box-shadow: transparentize(white, 0.9) -1px 0; - max-width: 400px; - width: 100vw; + border-radius: $radius 0 0 $radius; + display: flex; + flex-direction: column; } .content { diff --git a/src/components/sidebar/SidebarStackCard/index.tsx b/src/components/sidebar/SidebarStackCard/index.tsx new file mode 100644 index 00000000..5e2b9003 --- /dev/null +++ b/src/components/sidebar/SidebarStackCard/index.tsx @@ -0,0 +1,31 @@ +import React, { FC, useMemo } from 'react'; +import styles from './styles.module.scss'; +import { Filler } from '~/components/containers/Filler'; +import { Button } from '~/components/input/Button'; + +interface SidebarStackCardProps { + width?: number; + headerFeature?: 'back' | 'close'; + title?: string; +} + +const SidebarStackCard: FC = ({ children, title, width, headerFeature }) => { + const style = useMemo(() => ({ maxWidth: width, flexBasis: width }), [width]); + + return ( +
+ {(headerFeature || title) && ( +
+ {!!title &&
{title}
}
+ + {headerFeature === 'back' &&
+ )} + + {children} +
+ ); +}; + +export { SidebarStackCard }; diff --git a/src/components/sidebar/SidebarStackCard/styles.module.scss b/src/components/sidebar/SidebarStackCard/styles.module.scss new file mode 100644 index 00000000..be618d92 --- /dev/null +++ b/src/components/sidebar/SidebarStackCard/styles.module.scss @@ -0,0 +1,17 @@ +@import "src/styles/variables"; + +.card { + width: 100vw; + max-width: 400px; + flex-basis: 400px; + flex: 1; +} + +.head { + @include row_shadow; + + display: flex; + flex-direction: row; + align-items: center; + padding: $gap $gap $gap $gap * 2; +} diff --git a/src/containers/sidebars/ProfileSidebar/index.tsx b/src/containers/sidebars/ProfileSidebar/index.tsx index 42fc883c..cfcfb11a 100644 --- a/src/containers/sidebars/ProfileSidebar/index.tsx +++ b/src/containers/sidebars/ProfileSidebar/index.tsx @@ -4,6 +4,7 @@ import { DialogComponentProps } from '~/types/modal'; import { ProfileSidebarMenu } from '~/containers/profile/ProfileSidebarMenu'; import { SidebarStack } from '~/components/sidebar/SidebarStack'; import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings'; +import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard'; interface ProfileSidebarProps extends DialogComponentProps {} @@ -11,8 +12,13 @@ const ProfileSidebar: VFC = ({ onRequestClose }) => { return ( - - + + + + + + + ); From d4f57a97d844737c52ab6313576ca6782bd8a95b Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 14 Jan 2022 18:44:14 +0700 Subject: [PATCH 24/28] fixed sidebar heights --- .../profile/ProfileSidebarSettings/index.tsx | 1 + .../ProfileSidebarSettings/styles.module.scss | 1 - src/components/sidebar/SidebarStackCard/index.tsx | 2 +- .../sidebar/SidebarStackCard/styles.module.scss | 13 +++++++++++-- 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/profile/ProfileSidebarSettings/index.tsx b/src/components/profile/ProfileSidebarSettings/index.tsx index 8e30fc7d..d5b0d5c7 100644 --- a/src/components/profile/ProfileSidebarSettings/index.tsx +++ b/src/components/profile/ProfileSidebarSettings/index.tsx @@ -11,6 +11,7 @@ const ProfileSidebarSettings: FC = () => (
+
diff --git a/src/components/profile/ProfileSidebarSettings/styles.module.scss b/src/components/profile/ProfileSidebarSettings/styles.module.scss index 63a90b95..7aeaaded 100644 --- a/src/components/profile/ProfileSidebarSettings/styles.module.scss +++ b/src/components/profile/ProfileSidebarSettings/styles.module.scss @@ -17,7 +17,6 @@ .buttons { width: 100%; padding: $gap; - box-shadow: $sidebar_border 0 -1px; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto auto; diff --git a/src/components/sidebar/SidebarStackCard/index.tsx b/src/components/sidebar/SidebarStackCard/index.tsx index 5e2b9003..c692f957 100644 --- a/src/components/sidebar/SidebarStackCard/index.tsx +++ b/src/components/sidebar/SidebarStackCard/index.tsx @@ -23,7 +23,7 @@ const SidebarStackCard: FC = ({ children, title, width, h
)} - {children} +
{children}
); }; diff --git a/src/components/sidebar/SidebarStackCard/styles.module.scss b/src/components/sidebar/SidebarStackCard/styles.module.scss index be618d92..e111093d 100644 --- a/src/components/sidebar/SidebarStackCard/styles.module.scss +++ b/src/components/sidebar/SidebarStackCard/styles.module.scss @@ -3,8 +3,11 @@ .card { width: 100vw; max-width: 400px; - flex-basis: 400px; - flex: 1; + flex: 1 1 400px; + display: flex; + flex-direction: column; + height: 100%; + min-height: 0; } .head { @@ -15,3 +18,9 @@ align-items: center; padding: $gap $gap $gap $gap * 2; } + +.content { + flex: 1; + display: flex; + flex-direction: column; +} From 155138a5dd4009ca2dbf3d1244648a5c1134f76e Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 17 Jan 2022 11:44:25 +0700 Subject: [PATCH 25/28] added sidebar stack shadows --- src/components/sidebar/SidebarStack/styles.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/sidebar/SidebarStack/styles.module.scss b/src/components/sidebar/SidebarStack/styles.module.scss index d65c60b1..93df686a 100644 --- a/src/components/sidebar/SidebarStack/styles.module.scss +++ b/src/components/sidebar/SidebarStack/styles.module.scss @@ -9,7 +9,7 @@ } .card { - box-shadow: transparentize(white, 0.9) -1px 0; + box-shadow: transparentize(white, 0.9) -1px 0, transparentize(black, 0.7) -5px 0 15px; border-radius: $radius 0 0 $radius; display: flex; flex-direction: column; From 237f978cbd6742003338a1b82ad52b6bfd76668f Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 17 Jan 2022 12:57:43 +0700 Subject: [PATCH 26/28] fixed tag sidebar sidebar appearance --- src/containers/sidebars/TagSidebar/index.tsx | 65 ++++++++++--------- .../sidebars/TagSidebar/styles.module.scss | 5 +- 2 files changed, 38 insertions(+), 32 deletions(-) diff --git a/src/containers/sidebars/TagSidebar/index.tsx b/src/containers/sidebars/TagSidebar/index.tsx index d2908462..5eb5ac3e 100644 --- a/src/containers/sidebars/TagSidebar/index.tsx +++ b/src/containers/sidebars/TagSidebar/index.tsx @@ -8,6 +8,7 @@ import { InfiniteScroll } from '~/components/containers/InfiniteScroll'; import { Tag } from '~/components/tags/Tag'; import { useTagNodes } from '~/hooks/tag/useTagNodes'; import { DialogComponentProps } from '~/types/modal'; +import { SidebarStack } from '~/components/sidebar/SidebarStack'; interface TagSidebarProps extends DialogComponentProps { tag: string; @@ -19,43 +20,45 @@ const TagSidebar: VFC = ({ tag, onRequestClose }) => { return ( -
-
-
-
- + +
+
+
+
+ +
+ + {isLoading && ( +
+ +
+ )} + +
+ +
- {isLoading && ( -
- + {!nodes.length && !isLoading ? ( +
+ +
+ У этого тэга нет постов +
+
+ Такие дела +
+ ) : ( + + + )} - -
- -
- - {!nodes.length && !isLoading ? ( -
- -
- У этого тэга нет постов -
-
- Такие дела -
-
- ) : ( - - - - )}
-
+
); }; diff --git a/src/containers/sidebars/TagSidebar/styles.module.scss b/src/containers/sidebars/TagSidebar/styles.module.scss index 6b1e2995..6d9b4f17 100644 --- a/src/containers/sidebars/TagSidebar/styles.module.scss +++ b/src/containers/sidebars/TagSidebar/styles.module.scss @@ -2,6 +2,8 @@ .wrap { @include sidebar_content(400px); + width: 100vw; + max-width: 400px; } .content { @@ -17,11 +19,12 @@ } .head { + @include row_shadow; + display: flex; align-items: center; justify-content: center; padding: $gap; - box-shadow: transparentize(white, 0.95) 0 1px; } .tag { From 2e0ad878a38827f30a1d238790760027cff0e168 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 17 Jan 2022 12:59:58 +0700 Subject: [PATCH 27/28] closing sidebar on click --- src/components/flow/FlowRecentItem/index.tsx | 7 ++++--- src/components/sidebar/TagSidebarList/index.tsx | 7 ++++--- src/containers/sidebars/TagSidebar/index.tsx | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/flow/FlowRecentItem/index.tsx b/src/components/flow/FlowRecentItem/index.tsx index dd78b588..65f7b008 100644 --- a/src/components/flow/FlowRecentItem/index.tsx +++ b/src/components/flow/FlowRecentItem/index.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, MouseEventHandler } from 'react'; import { INode } from '~/types'; import styles from './styles.module.scss'; import { URLS } from '~/constants/urls'; @@ -11,11 +11,12 @@ import { Anchor } from '~/components/common/Anchor'; interface IProps { node: Partial; has_new?: boolean; + onClick?: MouseEventHandler; } -const FlowRecentItem: FC = ({ node, has_new }) => { +const FlowRecentItem: FC = ({ node, has_new, onClick }) => { return ( - +
= ({ nodes }) => ( +const TagSidebarList: FC = ({ nodes, onClick }) => (
{nodes.map(node => ( - + ))}
); diff --git a/src/containers/sidebars/TagSidebar/index.tsx b/src/containers/sidebars/TagSidebar/index.tsx index 5eb5ac3e..0340341c 100644 --- a/src/containers/sidebars/TagSidebar/index.tsx +++ b/src/containers/sidebars/TagSidebar/index.tsx @@ -53,7 +53,7 @@ const TagSidebar: VFC = ({ tag, onRequestClose }) => {
) : ( - + )}
From c5bac54494cd8f0172bef4c48039656b8891adfc Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 17 Jan 2022 16:13:45 +0700 Subject: [PATCH 28/28] (nextjs) fixed flow loading, anchors and styles --- next.config.js | 8 ++ src/components/common/Anchor/index.tsx | 4 +- src/components/flow/FlowCell/index.tsx | 5 +- src/components/node/NodeRelatedItem/index.tsx | 13 +-- src/hooks/flow/useFlowLoader.ts | 4 +- src/hooks/node/useNodePageParams.ts | 9 ++ src/pages/_app.tsx | 2 - src/pages/index.tsx | 3 + src/pages/node/[id].tsx | 106 +++++++++--------- src/store/index.ts | 4 + src/utils/config/index.ts | 2 +- 11 files changed, 90 insertions(+), 70 deletions(-) create mode 100644 src/hooks/node/useNodePageParams.ts diff --git a/next.config.js b/next.config.js index e49faa13..ee56eaaa 100644 --- a/next.config.js +++ b/next.config.js @@ -2,4 +2,12 @@ const withTM = require('next-transpile-modules')(['ramda']); module.exports = withTM({ /* Your Next.js config */ + async rewrites() { + return [ + { + source: '/post:id', + destination: '/node/:id', + }, + ]; + }, }); diff --git a/src/components/common/Anchor/index.tsx b/src/components/common/Anchor/index.tsx index 7b5a87c3..3f5a9c53 100644 --- a/src/components/common/Anchor/index.tsx +++ b/src/components/common/Anchor/index.tsx @@ -8,7 +8,9 @@ interface AnchorProps extends LinkProps {} const Anchor: VFC = ({ ref, href, ...rest }) => CONFIG.isNextEnvironment ? ( - + + + ) : ( ); diff --git a/src/components/flow/FlowCell/index.tsx b/src/components/flow/FlowCell/index.tsx index 0d9e83a7..350625ac 100644 --- a/src/components/flow/FlowCell/index.tsx +++ b/src/components/flow/FlowCell/index.tsx @@ -10,6 +10,7 @@ import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls'; import { useClickOutsideFocus } from '~/hooks/dom/useClickOutsideFocus'; import { MenuDots } from '~/components/common/MenuDots'; import { FlowCellImage } from '~/components/flow/FlowCellImage'; +import { Anchor } from '~/components/common/Anchor'; interface Props { id: INode['id']; @@ -71,7 +72,7 @@ const FlowCell: FC = ({
)} - + {withText && ( {title}}> {text!} @@ -94,7 +95,7 @@ const FlowCell: FC = ({

{title}

)} - +
); }; diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx index a3194033..0cde320a 100644 --- a/src/components/node/NodeRelatedItem/index.tsx +++ b/src/components/node/NodeRelatedItem/index.tsx @@ -3,13 +3,13 @@ import styles from './styles.module.scss'; import classNames from 'classnames'; import { INode } from '~/types'; import { PRESETS, URLS } from '~/constants/urls'; -import { RouteComponentProps, withRouter } from 'react-router'; +import { RouteComponentProps } from 'react-router'; import { getURL, getURLFromString } from '~/utils/dom'; import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString'; import { Square } from '~/components/common/Square'; -import { useNavigation } from '~/hooks/navigation/useNavigation'; +import { useGotoNode } from '~/hooks/node/useGotoNode'; -type IProps = RouteComponentProps & { +type IProps = { item: Partial; }; @@ -29,12 +29,11 @@ const getTitleLetters = (title?: string): string => { : words[0].substr(0, 2).toUpperCase(); }; -const NodeRelatedItemUnconnected: FC = memo(({ item }) => { - const { push } = useNavigation(); +const NodeRelatedItem: FC = memo(({ item }) => { + const onClick = useGotoNode(item.id); const [is_loaded, setIsLoaded] = useState(false); const [width, setWidth] = useState(0); const ref = useRef(null); - const onClick = useCallback(() => push(URLS.NODE_URL(item.id)), [item, push]); const thumb = useMemo( () => (item.thumbnail ? getURL({ url: item.thumbnail }, PRESETS.avatar) : ''), @@ -95,6 +94,4 @@ const NodeRelatedItemUnconnected: FC = memo(({ item }) => { ); }); -const NodeRelatedItem = withRouter(NodeRelatedItemUnconnected); - export { NodeRelatedItem }; diff --git a/src/hooks/flow/useFlowLoader.ts b/src/hooks/flow/useFlowLoader.ts index 2232739d..cc08f1fb 100644 --- a/src/hooks/flow/useFlowLoader.ts +++ b/src/hooks/flow/useFlowLoader.ts @@ -2,7 +2,7 @@ import { useCallback, useState } from 'react'; import { getNodeDiff } from '~/api/node'; import { uniq } from 'ramda'; import { useFlowStore } from '~/store/flow/useFlowStore'; -import { runInAction } from 'mobx'; +import { runInAction, toJS } from 'mobx'; import { showErrorToast } from '~/utils/errors/showToast'; export const useFlowLoader = () => { @@ -81,5 +81,7 @@ export const useFlowLoader = () => { } }, [flow]); + console.log(toJS(flow.nodes)); + return { getInitialNodes, isSyncing, loadMore }; }; diff --git a/src/hooks/node/useNodePageParams.ts b/src/hooks/node/useNodePageParams.ts new file mode 100644 index 00000000..28479222 --- /dev/null +++ b/src/hooks/node/useNodePageParams.ts @@ -0,0 +1,9 @@ +import { useRouteMatch } from 'react-router'; +import { useRouter } from 'next/router'; +import { CONFIG } from '~/utils/config'; + +export const useNodePageParams = () => { + return CONFIG.isNextEnvironment + ? (useRouter().query.id as string) + : useRouteMatch<{ id: string }>().params.id; +}; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 1397b5ed..7389a15a 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -20,8 +20,6 @@ import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader'; const mobxStore = getMOBXStore(); export default function MyApp({ Component, pageProps }) { - useGlobalLoader(); - return ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c0ff290e..11da7987 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,10 +3,13 @@ import { FlowLayout } from '~/layouts/FlowLayout'; import { useFlow } from '~/hooks/flow/useFlow'; import { FlowContextProvider } from '~/utils/context/FlowContextProvider'; import { observer } from 'mobx-react-lite'; +import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader'; interface Props {} const FlowPage: FC = observer(() => { + useGlobalLoader(); + const { updates, nodes, diff --git a/src/pages/node/[id].tsx b/src/pages/node/[id].tsx index 79006b25..5cb26eed 100644 --- a/src/pages/node/[id].tsx +++ b/src/pages/node/[id].tsx @@ -12,67 +12,63 @@ import { useNodePermissions } from '~/hooks/node/useNodePermissions'; import { NodeRelatedProvider } from '~/utils/providers/NodeRelatedProvider'; import { useLoadNode } from '~/hooks/node/useLoadNode'; import { observer } from 'mobx-react-lite'; +import { useNodePageParams } from '~/hooks/node/useNodePageParams'; type Props = RouteComponentProps<{ id: string }> & {}; -const NodePage: FC = observer( - ({ - match: { - params: { id }, - }, - }) => { - const { node, isLoading, update, lastSeen } = useLoadNode(parseInt(id, 10)); +const NodePage: FC = observer(() => { + const id = useNodePageParams(); + const { node, isLoading, update, lastSeen } = useLoadNode(parseInt(id, 10)); - const onShowImageModal = useImageModal(); - const { - onLoadMoreComments, - onDelete: onDeleteComment, - onEdit: onSaveComment, - comments, - hasMore, - isLoading: isLoadingComments, - } = useNodeComments(parseInt(id, 10)); - const { onDelete: onTagDelete, onChange: onTagsChange, onClick: onTagClick } = useNodeTags( - parseInt(id, 10) - ); - const [canEdit] = useNodePermissions(node); + const onShowImageModal = useImageModal(); + const { + onLoadMoreComments, + onDelete: onDeleteComment, + onEdit: onSaveComment, + comments, + hasMore, + isLoading: isLoadingComments, + } = useNodeComments(parseInt(id, 10)); + const { onDelete: onTagDelete, onChange: onTagsChange, onClick: onTagClick } = useNodeTags( + parseInt(id, 10) + ); + const [canEdit] = useNodePermissions(node); - useScrollToTop([id, isLoadingComments]); + useScrollToTop([id, isLoadingComments]); - if (!node) { - // TODO: do something here - return null; - } - - return ( - - - - - - - - - - ); + if (!node) { + // TODO: do something here + return null; } -); + + return ( + + + + + + + + + + ); +}); export default NodePage; diff --git a/src/store/index.ts b/src/store/index.ts index aac65654..bb4d5feb 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -3,6 +3,7 @@ import { FlowStore } from '~/store/flow/FlowStore'; import { ModalStore } from '~/store/modal/ModalStore'; import { LabStore } from '~/store/lab/LabStore'; import { AuthStore } from '~/store/auth/AuthStore'; +import { useStaticRendering } from 'mobx-react-lite'; export class Store { flow = new FlowStore(); @@ -22,3 +23,6 @@ export class Store { const defaultStore = new Store(); export const getMOBXStore = () => defaultStore; + +// eslint-disable-next-line react-hooks/rules-of-hooks +useStaticRendering(typeof window === 'undefined'); diff --git a/src/utils/config/index.ts b/src/utils/config/index.ts index 52f4e9bb..6b868a97 100644 --- a/src/utils/config/index.ts +++ b/src/utils/config/index.ts @@ -3,5 +3,5 @@ export const CONFIG = { remoteCurrent: process.env.REACT_APP_REMOTE_CURRENT || process.env.NEXT_PUBLIC_REMOTE_CURRENT || '', // transitional prop, marks migration to nextjs - isNextEnvironment: false, + isNextEnvironment: !!process.env.NEXT_PUBLIC_REMOTE_CURRENT || typeof window === 'undefined', };