Files
remark42/frontend/app/components/comment/connected-comment.tsx
T
Pavel MineevandGitHub 85c71716f9 Small refactoring (#609)
* Move visibility param from redux store to local state

* use func for parsing location.search

* Remove bad wrapper

* we already have wrapper with NODE_ID on page and we shouldn't another one with the same id on page
* move common part of markup to level up

* Tinny refac of setSorting

* add dummy types for pollyfils

also, a bit rewrited way to resolve imports

* Move sort flag to local store

Because we don't need to share this param between diffrent parts of interface

* Add action creators

* move action to action creators

* Remove unused functions

* Merge in conditions in one

* One way for export API methods

* add default tags

* Rewrited changing read only mode

* removed unused function

* set sort changes

* always send sort from store
* rollback if sort don't  work

* constanst

* add typing
* shorten export
* remove double define of host
2020-03-07 12:25:18 -06:00

80 lines
2.2 KiB
TypeScript

/*
* connected comment is not exported in index.ts to avoid leaking redux import into last-comments
* and should be importded explicitly
*/
/** @jsx createElement */
import './styles';
import { createElement, FunctionComponent } from 'preact';
import { Comment as CommentType } from '@app/common/types';
import { useStore } from 'react-redux';
import { StoreState } from '@app/store';
import {
addComment,
removeComment,
updateComment,
setPinState,
putVote,
setCommentMode,
} from '@app/store/comments/actions';
import { blockUser, unblockUser, hideUser, setVerifiedStatus } from '@app/store/user/actions';
import { Comment, Props } from './comment';
import { getCommentMode } from '@app/store/comments/getters';
import { uploadImage, getPreview } from '@app/common/api';
import { getThreadIsCollapsed } from '@app/store/thread/getters';
import { bindActions } from '@app/utils/actionBinder';
import { useActions } from '@app/hooks/useAction';
type ProvidedProps = Pick<
Props,
| 'editMode'
| 'user'
| 'isUserBanned'
| 'post_info'
| 'isCommentsDisabled'
| 'theme'
| 'collapsed'
| 'getPreview'
| 'uploadImage'
>;
const mapStateToProps = (state: StoreState, cprops: { data: CommentType }) => {
const props: ProvidedProps = {
editMode: getCommentMode(cprops.data.id)(state),
user: state.user,
isUserBanned: cprops.data.user.block || state.bannedUsers.find(u => u.id === cprops.data.user.id) !== undefined,
post_info: state.info,
isCommentsDisabled: state.info.read_only || false,
theme: state.theme,
collapsed: getThreadIsCollapsed(cprops.data)(state),
getPreview,
uploadImage,
};
return props;
};
export const boundActions = bindActions({
addComment,
updateComment,
removeComment,
setReplyEditState: setCommentMode,
setPinState,
putCommentVote: putVote,
blockUser,
unblockUser,
hideUser,
setVerifiedStatus,
});
export const ConnectedComment: FunctionComponent<Omit<Props, keyof (ProvidedProps & typeof bindActions)>> = props => {
const providedProps = mapStateToProps(useStore().getState(), props);
const actions = useActions(boundActions);
return <Comment {...props} {...providedProps} {...actions} />;
};