diff --git a/src/components/node/CommentMenu/styles.scss b/src/components/node/CommentMenu/styles.scss index 0c00373d..7ac03845 100644 --- a/src/components/node/CommentMenu/styles.scss +++ b/src/components/node/CommentMenu/styles.scss @@ -42,6 +42,7 @@ display: flex; flex-direction: column; z-index: 6; + white-space: nowrap; animation: appear 0.25s forwards; } diff --git a/src/components/profile/Message/index.tsx b/src/components/profile/Message/index.tsx index 62de74a3..c0b4eafd 100644 --- a/src/components/profile/Message/index.tsx +++ b/src/components/profile/Message/index.tsx @@ -1,27 +1,45 @@ -import React, { FC } from 'react'; +import React, { FC, useCallback } from 'react'; import { IMessage } from '~/redux/types'; import styles from './styles.scss'; import { formatText, getURL, getPrettyDate } from '~/utils/dom'; import { PRESETS } from '~/constants/urls'; import classNames from 'classnames'; import { Group } from '~/components/containers/Group'; +import { CommentMenu } from '~/components/node/CommentMenu'; +import { MessageForm } from '~/components/profile/MessageForm'; interface IProps { message: IMessage; incoming: boolean; + onEdit: (id: number) => void; + onDelete: (id: number) => void; + isEditing: boolean; } -const Message: FC = ({ message, incoming }) => ( -
- +const Message: FC = ({ message, incoming, onEdit, onDelete, isEditing }) => { + const onEditClicked = useCallback(() => onEdit(message.id), [message.id]); + const onDeleteClicked = useCallback(() => onDelete(message.id), [message.id]); -
+ return ( +
+ {isEditing ? ( +
+ +
+ ) : ( +
+ {!incoming && } + +
+ )} -
{getPrettyDate(message.created_at)}
-
-); +
+
{getPrettyDate(message.created_at)}
+
+ ); +}; export { Message }; diff --git a/src/components/profile/Message/styles.scss b/src/components/profile/Message/styles.scss index 27b991ca..19b11bb2 100644 --- a/src/components/profile/Message/styles.scss +++ b/src/components/profile/Message/styles.scss @@ -57,7 +57,6 @@ $outgoing_color: $comment_bg; background: 50% 50% no-repeat; background-size: cover; - // display: none; } .text { @@ -65,8 +64,17 @@ $outgoing_color: $comment_bg; background: $outgoing_color; word-wrap: break-word; word-break: break-word; - width: 90%; + width: 100%; border-radius: $radius $radius 0 $radius; + position: relative; + box-sizing: border-box; +} + +.form { + width: 100%; + border-radius: $radius $radius 0 $radius; + background: $outgoing_color; + box-sizing: border-box; } .stamp { diff --git a/src/components/profile/MessageForm/index.tsx b/src/components/profile/MessageForm/index.tsx index 732614e8..fe478750 100644 --- a/src/components/profile/MessageForm/index.tsx +++ b/src/components/profile/MessageForm/index.tsx @@ -18,21 +18,27 @@ const mapDispatchToProps = { authSendMessage: AUTH_ACTIONS.authSendMessage, }; -type IProps = ReturnType & typeof mapDispatchToProps & {}; +type IProps = ReturnType & + typeof mapDispatchToProps & { + id?: number; + text?: string; + }; const MessageFormUnconnected: FC = ({ + id = 0, + text: initialText = '', profile: { is_sending_messages, is_loading_messages, messages_error }, authSendMessage, }) => { - const [text, setText] = useState(''); + const [text, setText] = useState(initialText); const onSuccess = useCallback(() => { setText(''); }, [setText]); const onSubmit = useCallback(() => { - authSendMessage({ text }, onSuccess); - }, [authSendMessage, text, onSuccess]); + authSendMessage({ text, id }, onSuccess); + }, [authSendMessage, text, id, onSuccess]); const onKeyDown = useCallback>( ({ ctrlKey, key }) => { @@ -82,9 +88,6 @@ const MessageFormUnconnected: FC = ({ ); }; -const MessageForm = connect( - mapStateToProps, - mapDispatchToProps -)(MessageFormUnconnected); +const MessageForm = connect(mapStateToProps, mapDispatchToProps)(MessageFormUnconnected); export { MessageForm }; diff --git a/src/containers/profile/ProfileMessages/index.tsx b/src/containers/profile/ProfileMessages/index.tsx index a02fb2e6..2c895d80 100644 --- a/src/containers/profile/ProfileMessages/index.tsx +++ b/src/containers/profile/ProfileMessages/index.tsx @@ -1,6 +1,6 @@ -import React, { FC, useEffect } from 'react'; +import React, { FC, useCallback, useEffect, useState } from 'react'; import { connect } from 'react-redux'; -import { selectAuthProfile, selectAuth, selectAuthUser } from '~/redux/auth/selectors'; +import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors'; import styles from './styles.scss'; import * as AUTH_ACTIONS from '~/redux/auth/actions'; import { Message } from '~/components/profile/Message'; @@ -20,6 +20,11 @@ const mapDispatchToProps = { type IProps = ReturnType & typeof mapDispatchToProps & {}; const ProfileMessagesUnconnected: FC = ({ profile, user: { id }, authGetMessages }) => { + const [editingMessageId, setEditingMessageId] = useState(0); + + const onEditMessage = useCallback((id: number) => setEditingMessageId(id), [setEditingMessageId]); + const onDeleteMessage = useCallback((id: number) => console.log({ id }), []); + useEffect(() => { if (profile.is_loading || !profile.user || !profile.user.username) return; @@ -45,7 +50,14 @@ const ProfileMessagesUnconnected: FC = ({ profile, user: { id }, authGet .map(( message // TODO: show files / memo ) => ( - + ))} {!profile.is_loading_messages && profile.messages.length > 0 && ( @@ -55,9 +67,6 @@ const ProfileMessagesUnconnected: FC = ({ profile, user: { id }, authGet ); }; -const ProfileMessages = connect( - mapStateToProps, - mapDispatchToProps -)(ProfileMessagesUnconnected); +const ProfileMessages = connect(mapStateToProps, mapDispatchToProps)(ProfileMessagesUnconnected); export { ProfileMessages };