From 8d2b56cafc1978857e39660985f1106356e0edcc Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sun, 2 Jan 2022 20:59:09 +0700 Subject: [PATCH] removed node reducer --- src/components/containers/PageCover/index.tsx | 27 --------- .../containers/PageCoverProvider/index.tsx | 39 +++++++++++++ .../styles.module.scss | 0 .../PageCoverProvider/usePageCover.ts | 12 ++++ src/containers/App.tsx | 18 +++--- .../profile/ProfileLayout/index.tsx | 57 ------------------- .../profile/ProfileLayout/styles.module.scss | 29 ---------- src/hooks/node/useNodeCoverImage.ts | 14 +---- src/redux/node/actions.ts | 7 --- src/redux/node/constants.ts | 5 -- src/redux/node/handlers.ts | 13 ----- src/redux/node/reducer.ts | 42 -------------- src/redux/node/selectors.ts | 3 - src/redux/store.ts | 4 -- 14 files changed, 62 insertions(+), 208 deletions(-) delete mode 100644 src/components/containers/PageCover/index.tsx create mode 100644 src/components/containers/PageCoverProvider/index.tsx rename src/components/containers/{PageCover => PageCoverProvider}/styles.module.scss (100%) create mode 100644 src/components/containers/PageCoverProvider/usePageCover.ts delete mode 100644 src/containers/profile/ProfileLayout/index.tsx delete mode 100644 src/containers/profile/ProfileLayout/styles.module.scss delete mode 100644 src/redux/node/actions.ts delete mode 100644 src/redux/node/handlers.ts delete mode 100644 src/redux/node/reducer.ts delete mode 100644 src/redux/node/selectors.ts diff --git a/src/components/containers/PageCover/index.tsx b/src/components/containers/PageCover/index.tsx deleted file mode 100644 index 9b0380d0..00000000 --- a/src/components/containers/PageCover/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { FC, memo } from 'react'; -import styles from './styles.module.scss'; -import { createPortal } from 'react-dom'; -import { selectNode } from '~/redux/node/selectors'; -import { connect } from 'react-redux'; -import { pick } from 'ramda'; -import { getURL } from '~/utils/dom'; -import { PRESETS } from '~/constants/urls'; - -const mapStateToProps = state => pick(['current_cover_image'], selectNode(state)); - -type IProps = ReturnType & {}; - -const PageCoverUnconnected: FC = memo(({ current_cover_image }) => - current_cover_image - ? createPortal( -
, - document.body - ) - : null -); - -const PageCover = connect(mapStateToProps)(PageCoverUnconnected); -export { PageCover }; diff --git a/src/components/containers/PageCoverProvider/index.tsx b/src/components/containers/PageCoverProvider/index.tsx new file mode 100644 index 00000000..3870c2ca --- /dev/null +++ b/src/components/containers/PageCoverProvider/index.tsx @@ -0,0 +1,39 @@ +import React, { createContext, FC, memo, useContext, useState } from 'react'; +import styles from './styles.module.scss'; +import { createPortal } from 'react-dom'; +import { getURL } from '~/utils/dom'; +import { PRESETS } from '~/constants/urls'; +import { IFile } from '~/redux/types'; + +interface CoverContextValue { + cover: IFile | null; + setCover: (cover: IFile | null) => void; +} + +const CoverContext = createContext({ + cover: null, + setCover: () => {}, +}); + +const PageCoverProvider: FC = ({ children }) => { + const [cover, setCover] = useState(null); + + return ( + + {!!cover && + createPortal( +
, + document.body + )} + + {children} + + ); +}; + +const usePageCoverContext = () => useContext(CoverContext); + +export { PageCoverProvider, usePageCoverContext }; diff --git a/src/components/containers/PageCover/styles.module.scss b/src/components/containers/PageCoverProvider/styles.module.scss similarity index 100% rename from src/components/containers/PageCover/styles.module.scss rename to src/components/containers/PageCoverProvider/styles.module.scss diff --git a/src/components/containers/PageCoverProvider/usePageCover.ts b/src/components/containers/PageCoverProvider/usePageCover.ts new file mode 100644 index 00000000..b595728a --- /dev/null +++ b/src/components/containers/PageCoverProvider/usePageCover.ts @@ -0,0 +1,12 @@ +import { useEffect } from 'react'; +import { IFile } from '~/redux/types'; +import { usePageCoverContext } from '~/components/containers/PageCoverProvider/index'; + +export const usePageCover = (cover?: IFile) => { + const { setCover } = usePageCoverContext(); + + useEffect(() => { + setCover(cover || null); + return () => setCover(null); + }, [setCover, cover]); +}; diff --git a/src/containers/App.tsx b/src/containers/App.tsx index 63395741..01e6405b 100644 --- a/src/containers/App.tsx +++ b/src/containers/App.tsx @@ -4,7 +4,7 @@ import { history } from '~/redux/store'; import { MainLayout } from '~/containers/main/MainLayout'; import { Sprites } from '~/sprites/Sprites'; import { Modal } from '~/containers/dialogs/Modal'; -import { PageCover } from '~/components/containers/PageCover'; +import { PageCoverProvider } from '~/components/containers/PageCoverProvider'; import { BottomContainer } from '~/containers/main/BottomContainer'; import { MainRouter } from '~/containers/main/MainRouter'; import { DragDetectorProvider } from '~/hooks/dom/useDragDetector'; @@ -20,15 +20,15 @@ const App: VFC = () => { - + + + + - - - - - - - + + + + diff --git a/src/containers/profile/ProfileLayout/index.tsx b/src/containers/profile/ProfileLayout/index.tsx deleted file mode 100644 index e6207038..00000000 --- a/src/containers/profile/ProfileLayout/index.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { FC, useEffect, useState } from 'react'; -import { RouteComponentProps, useRouteMatch, withRouter } from 'react-router'; -import styles from './styles.module.scss'; -import { NodeNoComments } from '~/components/node/NodeNoComments'; -import { Grid } from '~/components/containers/Grid'; -import * as NODE_ACTIONS from '~/redux/node/actions'; -import { connect } from 'react-redux'; -import { IUser } from '~/redux/auth/types'; -import { Group } from '~/components/containers/Group'; -import { CommentForm } from '~/components/comment/CommentForm'; - -const mapStateToProps = () => ({}); -const mapDispatchToProps = { - nodeSetCoverImage: NODE_ACTIONS.nodeSetCoverImage, -}; - -type IProps = RouteComponentProps & typeof mapDispatchToProps & {}; - -const ProfileLayoutUnconnected: FC = ({ history, nodeSetCoverImage }) => { - const { - params: { username }, - } = useRouteMatch<{ username: string }>(); - const [user, setUser] = useState(undefined); - - useEffect(() => { - if (user) setUser(undefined); - }, [user, username]); - - useEffect(() => { - if (user && user.id && user.cover) { - nodeSetCoverImage(user.cover); - return () => { - nodeSetCoverImage(undefined); - }; - } - }, [nodeSetCoverImage, user]); - - return ( - -
- - -
- console.log()} /> - -
- - - ); -}; - -const ProfileLayout = connect( - mapStateToProps, - mapDispatchToProps -)(withRouter(ProfileLayoutUnconnected)); - -export { ProfileLayout }; diff --git a/src/containers/profile/ProfileLayout/styles.module.scss b/src/containers/profile/ProfileLayout/styles.module.scss deleted file mode 100644 index d3af1279..00000000 --- a/src/containers/profile/ProfileLayout/styles.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -@import "src/styles/variables"; - -.wrap { - display: flex; - align-items: flex-start !important; - justify-content: flex-start !important; - flex-direction: row; - flex: 1; -} - -.content { - flex: 3; - // flex: 0 1 $limited_width; - // padding: $gap; - box-sizing: border-box; -} - -.column { - flex: 1; -} - -.info { -} - -.comments { - background: $node_bg; - border-radius: $radius; - padding: $gap; -} diff --git a/src/hooks/node/useNodeCoverImage.ts b/src/hooks/node/useNodeCoverImage.ts index 62e104a9..b7ae2a94 100644 --- a/src/hooks/node/useNodeCoverImage.ts +++ b/src/hooks/node/useNodeCoverImage.ts @@ -1,16 +1,6 @@ import { INode } from '~/redux/types'; -import { useEffect } from 'react'; -import { useDispatch } from 'react-redux'; -import { nodeSetCoverImage } from '~/redux/node/actions'; +import { usePageCover } from '~/components/containers/PageCoverProvider/usePageCover'; export const useNodeCoverImage = (node: INode) => { - const dispatch = useDispatch(); - - useEffect(() => { - dispatch(nodeSetCoverImage(node.cover)); - - return () => { - dispatch(nodeSetCoverImage(undefined)); - }; - }, [dispatch, node.cover, node.id]); + usePageCover(node.cover); }; diff --git a/src/redux/node/actions.ts b/src/redux/node/actions.ts deleted file mode 100644 index aeca8a02..00000000 --- a/src/redux/node/actions.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { IFile } from '../types'; -import { NODE_ACTIONS } from './constants'; - -export const nodeSetCoverImage = (current_cover_image?: IFile) => ({ - type: NODE_ACTIONS.SET_COVER_IMAGE, - current_cover_image, -}); diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 8497c003..8fcc6edd 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -23,11 +23,6 @@ import { LabDescription } from '~/components/lab/LabDescription'; import { LabVideo } from '~/components/lab/LabVideo'; import { LabAudio } from '~/components/lab/LabAudioBlock'; -const prefix = 'NODE.'; -export const NODE_ACTIONS = { - SET_COVER_IMAGE: `${prefix}SET_COVER_IMAGE`, -}; - export const EMPTY_NODE: INode = { id: 0, user: undefined, diff --git a/src/redux/node/handlers.ts b/src/redux/node/handlers.ts deleted file mode 100644 index d9915f39..00000000 --- a/src/redux/node/handlers.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { assocPath } from 'ramda'; -import { NODE_ACTIONS } from './constants'; -import { nodeSetCoverImage } from './actions'; -import { INodeState } from './reducer'; - -const setCoverImage = ( - state: INodeState, - { current_cover_image }: ReturnType -) => assocPath(['current_cover_image'], current_cover_image, state); - -export const NODE_HANDLERS = { - [NODE_ACTIONS.SET_COVER_IMAGE]: setCoverImage, -}; diff --git a/src/redux/node/reducer.ts b/src/redux/node/reducer.ts deleted file mode 100644 index 21282a96..00000000 --- a/src/redux/node/reducer.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { createReducer } from '~/utils/reducer'; -import { IComment, IFile, INode } from '../types'; -import { EMPTY_NODE } from './constants'; -import { NODE_HANDLERS } from './handlers'; - -export type INodeState = Readonly<{ - editor: INode; - current: INode; - comments: IComment[]; - lastSeenCurrent?: string; - comment_count: number; - current_cover_image?: IFile; - - error: string; - errors: Record; - - is_loading: boolean; - is_loading_comments: boolean; - is_sending_comment: boolean; -}>; - -const INITIAL_STATE: INodeState = { - editor: { - ...EMPTY_NODE, - type: 'image', - blocks: [], - files: [], - }, - current: { ...EMPTY_NODE }, - comment_count: 0, - comments: [], - current_cover_image: undefined, - - is_loading: false, - is_loading_comments: false, - is_sending_comment: false, - - error: '', - errors: {}, -}; - -export default createReducer(INITIAL_STATE, NODE_HANDLERS); diff --git a/src/redux/node/selectors.ts b/src/redux/node/selectors.ts deleted file mode 100644 index 15ddeb5b..00000000 --- a/src/redux/node/selectors.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { IState } from '../store'; - -export const selectNode = (state: IState) => state.node; diff --git a/src/redux/store.ts b/src/redux/store.ts index d92e664b..04636717 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -11,8 +11,6 @@ import auth from '~/redux/auth'; import authSaga from '~/redux/auth/sagas'; import { IAuthState } from '~/redux/auth/types'; -import node, { INodeState } from '~/redux/node/reducer'; - import flow, { IFlowState } from '~/redux/flow/reducer'; import flowSaga from '~/redux/flow/sagas'; @@ -65,7 +63,6 @@ export interface IState { auth: IAuthState; modal: IModalState; router: RouterState; - node: INodeState; uploads: IUploadState; flow: IFlowState; player: IPlayerState; @@ -91,7 +88,6 @@ export const store = createStore( modal, boris, router: connectRouter(history), - node, uploads, flow: persistReducer(flowPersistConfig, flow), player: persistReducer(playerPersistConfig, player),