From 96bdbb0e0410020b6a8241dffa612fa1da106ec5 Mon Sep 17 00:00:00 2001 From: muerwre Date: Sun, 25 Aug 2019 21:56:32 +0700 Subject: [PATCH] node no comments --- src/components/node/NodeNoComments/index.tsx | 25 ++++++---- .../node/NodeNoComments/styles.scss | 37 ++++++++++++++ src/constants/errors.ts | 5 ++ .../examples/ImageExample/index.tsx | 48 +------------------ src/containers/node/NodeLayout/index.tsx | 9 +++- src/redux/node/actions.ts | 5 ++ src/redux/node/constants.ts | 1 + src/redux/node/handlers.ts | 13 ++++- src/redux/node/reducer.ts | 10 ++-- src/redux/node/sagas.ts | 6 +++ src/utils/trans.ts | 5 ++ 11 files changed, 103 insertions(+), 61 deletions(-) create mode 100644 src/utils/trans.ts diff --git a/src/components/node/NodeNoComments/index.tsx b/src/components/node/NodeNoComments/index.tsx index 8e669ab2..e4229621 100644 --- a/src/components/node/NodeNoComments/index.tsx +++ b/src/components/node/NodeNoComments/index.tsx @@ -1,16 +1,25 @@ import React, { FC } from 'react'; -import { Comment } from '~/components/node/Comment'; import * as styles from './styles.scss'; import { Group } from '~/components/containers/Group'; +import classNames from 'classnames'; +import { Filler } from '~/components/containers/Filler'; +import { ERRORS } from '~/constants/errors'; +import { t } from '~/utils/trans'; -interface IProps {} +interface IProps { + is_loading: boolean; +} -const NodeNoComments: FC = () => ( - - - - - +const NodeNoComments: FC = ({ is_loading = false }) => ( + <> + +
+
{!is_loading && t(ERRORS.NO_COMMENTS)}
+
+ + + + ); export { NodeNoComments }; diff --git a/src/components/node/NodeNoComments/styles.scss b/src/components/node/NodeNoComments/styles.scss index 98607aad..2f8bd9ce 100644 --- a/src/components/node/NodeNoComments/styles.scss +++ b/src/components/node/NodeNoComments/styles.scss @@ -1,6 +1,43 @@ +@keyframes fade { + 0% { + opacity: 0.25; + } + 100% { + opacity: 0.1; + } +} .wrap { height: 300px; overflow: hidden; + position: relative; @include after_shade($node_bg); + + &:global(.is_loading) { + .card { + animation: fade 0.5s infinite alternate; + } + } +} + +.card { + opacity: 0.2; + border-radius: $radius; + height: 96px; + background: $comment_bg; + display: flex; + align-items: center; + justify-content: center; + text-transform: uppercase; + font: $font_18_semibold; + color: transparentize(white, 0.5); + @include outer_shadow(); + + &:nth-child(2) { + // animation-delay: -300ms !important; + } + + &:nth-child(3) { + // animation-delay: -600ms !important; + } } diff --git a/src/constants/errors.ts b/src/constants/errors.ts index 2df83f51..f1e1cf59 100644 --- a/src/constants/errors.ts +++ b/src/constants/errors.ts @@ -2,4 +2,9 @@ export const ERRORS = { NOT_AN_EMAIL: 'Not_An_Email', TOO_SHIRT: 'Is_Too_Shirt', EMPTY_RESPONSE: 'Empty_Response', + NO_COMMENTS: 'No_Comments', +}; + +export const ERROR_LITERAL = { + [ERRORS.NO_COMMENTS]: 'Комментариев пока нет', }; diff --git a/src/containers/examples/ImageExample/index.tsx b/src/containers/examples/ImageExample/index.tsx index b511526f..53ba8cb5 100644 --- a/src/containers/examples/ImageExample/index.tsx +++ b/src/containers/examples/ImageExample/index.tsx @@ -13,53 +13,7 @@ import { ImageSwitcher } from '~/components/node/ImageSwitcher'; interface IProps {} -const ImageExample: FC = () => ( - - - -
- -
- - - - - - - - - - {range(1, 6).map(el => ( - - ))} - - -
- - - - - - - -
- - - - -); +const ImageExample: FC = () => ; export { ImageExample }; diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx index 0778db2f..a2790340 100644 --- a/src/containers/node/NodeLayout/index.tsx +++ b/src/containers/node/NodeLayout/index.tsx @@ -30,6 +30,8 @@ const NodeLayoutUnconnected: FC = ({ params: { id }, }, is_loading, + is_loading_comments, + comments = [], current: node, nodeLoadNode, }) => { @@ -50,8 +52,11 @@ const NodeLayoutUnconnected: FC = ({ - - + {is_loading_comments || !comments.length || true ? ( + + ) : ( + + )}
diff --git a/src/redux/node/actions.ts b/src/redux/node/actions.ts index ac40d4f6..369f5abb 100644 --- a/src/redux/node/actions.ts +++ b/src/redux/node/actions.ts @@ -23,6 +23,11 @@ export const nodeSetLoading = (is_loading: INodeState['is_loading']) => ({ type: NODE_ACTIONS.SET_LOADING, }); +export const nodeSetLoadingComments = (is_loading_comments: INodeState['is_loading_comments']) => ({ + is_loading_comments, + type: NODE_ACTIONS.SET_LOADING_COMMENTS, +}); + export const nodeSetCurrent = (current: INodeState['current']) => ({ current, type: NODE_ACTIONS.SET_CURRENT, diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 73260596..8063dda5 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -10,6 +10,7 @@ export const NODE_ACTIONS = { SET_SAVE_ERRORS: `${prefix}SET_SAVE_ERRORS`, SET_LOADING: `${prefix}SET_LOADING`, + SET_LOADING_COMMENTS: `${prefix}SET_LOADING_COMMENTS`, SET_CURRENT: `${prefix}SET_CURRENT`, }; diff --git a/src/redux/node/handlers.ts b/src/redux/node/handlers.ts index d2e43f00..09dbbe8a 100644 --- a/src/redux/node/handlers.ts +++ b/src/redux/node/handlers.ts @@ -1,6 +1,11 @@ import assocPath from 'ramda/es/assocPath'; import { NODE_ACTIONS } from './constants'; -import { nodeSetSaveErrors, nodeSetLoading, nodeSetCurrent } from './actions'; +import { + nodeSetSaveErrors, + nodeSetLoading, + nodeSetCurrent, + nodeSetLoadingComments, +} from './actions'; import { INodeState } from './reducer'; const setSaveErrors = (state: INodeState, { errors }: ReturnType) => @@ -9,11 +14,17 @@ const setSaveErrors = (state: INodeState, { errors }: ReturnType) => assocPath(['is_loading'], is_loading, state); +const setLoadingComments = ( + state: INodeState, + { is_loading_comments }: ReturnType +) => assocPath(['is_loading_comments'], is_loading_comments, state); + const setCurrent = (state: INodeState, { current }: ReturnType) => assocPath(['current'], current, state); export const NODE_HANDLERS = { [NODE_ACTIONS.SAVE]: setSaveErrors, [NODE_ACTIONS.SET_LOADING]: setLoading, + [NODE_ACTIONS.SET_LOADING_COMMENTS]: setLoadingComments, [NODE_ACTIONS.SET_CURRENT]: setCurrent, }; diff --git a/src/redux/node/reducer.ts b/src/redux/node/reducer.ts index 23fba7fb..01980b68 100644 --- a/src/redux/node/reducer.ts +++ b/src/redux/node/reducer.ts @@ -4,12 +4,15 @@ import { EMPTY_NODE } from './constants'; import { NODE_HANDLERS } from './handlers'; export type INodeState = Readonly<{ - is_loading: boolean; editor: INode; - current: Partial; + current: INode; comments: IComment[]; + error: string; errors: Record; + + is_loading: boolean; + is_loading_comments: boolean; }>; const INITIAL_STATE: INodeState = { @@ -19,9 +22,10 @@ const INITIAL_STATE: INodeState = { blocks: [], files: [], }, - current: {}, + current: { ...EMPTY_NODE }, comments: [], is_loading: false, + is_loading_comments: false, error: null, errors: {}, }; diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts index ad0c84a3..26a10270 100644 --- a/src/redux/node/sagas.ts +++ b/src/redux/node/sagas.ts @@ -8,6 +8,7 @@ import { nodeLoadNode, nodeSetLoading, nodeSetCurrent, + nodeSetLoadingComments, } from './actions'; import { postNode, getNode } from './api'; import { reqWrapper } from '../auth/sagas'; @@ -39,6 +40,7 @@ function* onNodeSave({ node }: ReturnType) { function* onNodeLoad({ id, node_type }: ReturnType) { yield put(nodeSetLoading(true)); + yield put(nodeSetLoadingComments(true)); yield put(nodeSetSaveErrors({})); if (node_type) yield put(nodeSetCurrent({ ...EMPTY_NODE, type: node_type })); @@ -58,6 +60,10 @@ function* onNodeLoad({ id, node_type }: ReturnType) { yield put(nodeSetSaveErrors({})); yield put(nodeSetCurrent(node)); + // todo: load comments + yield delay(500); + yield put(nodeSetLoadingComments(false)); + return; } diff --git a/src/utils/trans.ts b/src/utils/trans.ts new file mode 100644 index 00000000..0b10270e --- /dev/null +++ b/src/utils/trans.ts @@ -0,0 +1,5 @@ +import { ERRORS, ERROR_LITERAL } from '~/constants/errors'; +import { ValueOf } from '~/redux/types'; + +export const t = (string: ValueOf): ValueOf => + ERROR_LITERAL[string] || string;