messages form

src/components/input/Textarea/index.tsx

@@ -6,7 +6,6 @@ import React, {
   useLayoutEffect,
   useRef,
   useState,
-  HTMLAttributes,
   TextareaHTMLAttributes,
 } from 'react';
 import { getStyle } from '~/utils/dom';
@@ -26,6 +25,7 @@ type IProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   required?: boolean;
   status?: 'error' | 'success' | '';
   title?: string;
+  seamless?: boolean;
 };
 
 const Textarea = memo<IProps>(
@@ -39,6 +39,7 @@ const Textarea = memo<IProps>(
     required = false,
     title = '',
     status = '',
+    seamless,
     ...props
   }) => {
     const [rows, setRows] = useState(minRows || 1);
@@ -85,11 +86,12 @@ const Textarea = memo<IProps>(
 
     return (
       <div
-        className={classNames(styles.input_text_wrapper, {
+        className={classNames(styles.input_text_wrapper, styles.textarea_wrapper, {
           [styles.required]: required,
           [styles.focused]: focused,
           [styles.has_status]: !!status,
           [styles.has_value]: !!value,
+          [styles.seamless]: !!seamless,
         })}
       >
         <div className={styles.input}>

src/components/profile/Message/index.tsx

@@ -0,0 +1,27 @@
+import React, { FC } 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';
+
+interface IProps {
+  message: IMessage;
+  incoming: boolean;
+}
+
+const Message: FC<IProps> = ({ message, incoming }) => (
+  <div className={classNames(styles.message, { [styles.incoming]: incoming })}>
+    <Group className={styles.text} dangerouslySetInnerHTML={{ __html: formatText(message.text) }} />
+
+    <div
+      className={styles.avatar}
+      style={{ backgroundImage: `url("${getURL(message.from.photo, PRESETS.avatar)}")` }}
+    />
+
+    <div className={styles.stamp}>{getPrettyDate(message.created_at)}</div>
+  </div>
+);
+
+export { Message };

src/components/profile/Message/styles.scss

@@ -0,0 +1,80 @@
+$incoming_color: transparentize($wisegreen, 0.7);
+$outgoing_color: $comment_bg;
+
+.message {
+  align-items: flex-end !important;
+  display: flex;
+  flex-direction: row;
+  padding: 0 0 0 42px;
+  position: relative;
+
+  .avatar {
+    // margin: 0 0 0 10px;
+  }
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 20px 0 0 20px;
+    border-color: transparent transparent transparent $comment_bg;
+    bottom: 0;
+    right: 24px;
+  }
+
+  &.incoming {
+    flex-direction: row-reverse;
+    padding: 0 40px 0 0;
+
+    .text {
+      background: $incoming_color;
+      border-radius: $radius $radius $radius 0;
+    }
+
+    .stamp {
+      left: auto;
+      right: 42px;
+    }
+
+    &::before {
+      content: '';
+      border-width: 0 0 16px 16px;
+      border-color: transparent transparent $incoming_color transparent;
+      left: 24px;
+      right: auto;
+      z-index: 1;
+    }
+  }
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  flex: 0 0 40px;
+  border-radius: $radius;
+
+  background: 50% 50% no-repeat/cover;
+  // display: none;
+}
+
+.text {
+  padding: $gap $gap $gap * 2 $gap;
+  background: $outgoing_color;
+  word-wrap: break-word;
+  word-break: break-word;
+  width: 90%;
+  border-radius: $radius $radius 0 $radius;
+}
+
+.stamp {
+  position: absolute;
+  opacity: 0.5;
+  // background: transparentize($color: #000000, $amount: 0.9);
+  font: $font_10_regular;
+  bottom: 0;
+  left: 42px;
+  padding: 2px $gap;
+  border-radius: $radius;
+}

src/components/profile/MessageForm/index.tsx

@@ -0,0 +1,69 @@
+import React, { FC, useState, useCallback } from 'react';
+import styles from './styles.scss';
+import { Textarea } from '~/components/input/Textarea';
+import { Filler } from '~/components/containers/Filler';
+import { Button } from '~/components/input/Button';
+import { Group } from '~/components/containers/Group';
+import { selectAuthProfile } from '~/redux/auth/selectors';
+import { connect } from 'react-redux';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import * as AUTH_ACTIONS from '~/redux/auth/actions';
+import { ERROR_LITERAL } from '~/constants/errors';
+
+const mapStateToProps = state => ({
+  profile: selectAuthProfile(state),
+});
+
+const mapDispatchToProps = {
+  authSendMessage: AUTH_ACTIONS.authSendMessage,
+};
+
+type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+
+const MessageFormUnconnected: FC<IProps> = ({
+  profile: { is_sending_messages, messages_error },
+  authSendMessage,
+}) => {
+  const [text, setText] = useState('');
+
+  const onSuccess = useCallback(() => {
+    setText('');
+  }, [setText]);
+
+  const onSubmit = useCallback(() => {
+    authSendMessage({ text }, onSuccess);
+  }, [authSendMessage, text, onSuccess]);
+
+  return (
+    <div className={styles.wrap}>
+      {messages_error && <div className={styles.error}>{ERROR_LITERAL[messages_error]}</div>}
+
+      <Group className={styles.content}>
+        <Textarea value={text} handler={setText} minRows={1} maxRows={4} seamless />
+
+        <div className={styles.buttons}>
+          <Filler />
+
+          {is_sending_messages && <LoaderCircle size={20} />}
+
+          <Button
+            size="small"
+            grey
+            iconRight="enter"
+            disabled={is_sending_messages}
+            onClick={onSubmit}
+          >
+            Сказать
+          </Button>
+        </div>
+      </Group>
+    </div>
+  );
+};
+
+const MessageForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(MessageFormUnconnected);
+
+export { MessageForm };

src/components/profile/MessageForm/styles.scss

@@ -0,0 +1,37 @@
+.wrap {
+  @include outer_shadow();
+  padding: $gap;
+  background: $content_bg;
+  position: relative;
+
+  textarea {
+    // margin-bottom: 40px;
+  }
+}
+
+.content {
+  @include inner_shadow();
+  background: $input_bg_color;
+  border-radius: $input_radius;
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  padding: 0 $gap / 2 $gap / 2 $gap / 2;
+}
+
+.error {
+  position: absolute;
+  top: 100%;
+  padding: 10px;
+  left: 5%;
+  width: 90%;
+  background: linear-gradient($red, transparentize($red, 0.1));
+  z-index: 1;
+  box-sizing: border-box;
+  text-align: center;
+  border-radius: 0 0 $radius $radius;
+}

src/constants/api.ts

@@ -8,6 +8,7 @@ export const API = {
     ME: '/user/',
     PROFILE: (username: string) => `/user/${username}/profile`,
     MESSAGES: (username: string) => `/user/${username}/messages`,
+    MESSAGE_SEND: (username: string) => `/user/${username}/messages`,
     UPLOAD: (target, type) => `/upload/${target}/${type}`,
   },
   NODE: {

src/containers/dialogs/BetterScrollDialog/index.tsx

@@ -22,8 +22,6 @@ const BetterScrollDialog: FC<IProps> = ({
   footer,
   width = 600,
   error,
-  onOverlayClick,
-  onRefCapture,
   onClose,
 }) => {
   const ref = useRef(null);
@@ -43,7 +41,12 @@ const BetterScrollDialog: FC<IProps> = ({
           </div>
         )}
         {header && <div className={styles.header}>{header}</div>}
-        <div className={styles.body}>{children}</div>
+
+        <div className={styles.body}>
+          {children}
+          {error && <div className={styles.error}>{error}</div>}
+        </div>
+
         {footer && <div className={styles.header}>{footer}</div>}
       </div>
     </div>

src/containers/dialogs/BetterScrollDialog/styles.scss

@@ -39,13 +39,14 @@
 .footer {
   @include outer_shadow();
 
-  padding: 10px;
+  // padding: 10px;
   background: darken($content_bg, 2%);
 }
 
 .body {
   @include outer_shadow();
 
+  position: relative;
   overflow: auto;
   flex: 1;
   background: $content_bg;
@@ -86,3 +87,13 @@
     height: 24px;
   }
 }
+
+.error {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  pointer-events: none;
+  background: linear-gradient($red, transparentize($red, 1));
+}

src/containers/dialogs/ProfileDialog/index.tsx

@@ -1,27 +1,32 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { BetterScrollDialog } from '../BetterScrollDialog';
-import styles from './styles.scss';
 import { ProfileInfo } from '~/containers/profile/ProfileInfo';
 import { IDialogProps } from '~/redux/types';
 import { connect } from 'react-redux';
 import { selectAuthProfile } from '~/redux/auth/selectors';
-import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { CommentForm } from '~/components/node/CommentForm';
 import { ProfileMessages } from '~/containers/profile/ProfileMessages';
 
+const TAB_CONTENT = {
+  profile: <div>PROFILE</div>,
+  messages: <ProfileMessages />,
+};
 const mapStateToProps = selectAuthProfile;
 const mapDispatchToProps = {};
 
 type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & {};
 
-const ProfileDialogUnconnected: FC<IProps> = ({ onRequestClose, is_loading, user }) => (
+const ProfileDialogUnconnected: FC<IProps> = ({ onRequestClose, is_loading, user }) => {
+  const [tab, setTab] = useState('messages');
+
+  return (
     <BetterScrollDialog
-    header={<ProfileInfo is_loading={is_loading} user={user} />}
+      header={<ProfileInfo is_loading={is_loading} user={user} tab={tab} setTab={setTab} />}
       onClose={onRequestClose}
     >
-    <ProfileMessages />
+      {TAB_CONTENT[tab] || null}
     </BetterScrollDialog>
   );
+};
 
 const ProfileDialog = connect(
   mapStateToProps,

src/containers/profile/ProfileInfo/index.tsx

@@ -5,19 +5,32 @@ import { Group } from '~/components/containers/Group';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { getURL, getPrettyDate } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
+import { ProfileTabs } from '../ProfileTabs';
+import { MessageForm } from '~/components/profile/MessageForm';
 
 interface IProps {
   user?: IUser;
+  tab: string;
+
   is_loading?: boolean;
+  is_own?: boolean;
+
+  setTab?: (tab: string) => void;
 }
 
-const ProfileInfo: FC<IProps> = ({ user, is_loading = false }) => (
-  <Group>
+const TAB_HEADERS = {
+  messages: <MessageForm is_sending_message={false} />,
+};
+
+const ProfileInfo: FC<IProps> = ({ user, tab, is_loading, is_own, setTab }) => (
+  <div>
     <Group className={styles.wrap} horizontal>
       <div
         className={styles.avatar}
         style={{
-          backgroundImage: `url("${user && getURL(user.photo, PRESETS.avatar)}")`,
+          backgroundImage: is_loading
+            ? null
+            : `url("${user && getURL(user.photo, PRESETS.avatar)}")`,
         }}
       />
 
@@ -31,7 +44,11 @@ const ProfileInfo: FC<IProps> = ({ user, is_loading = false }) => (
         </div>
       </div>
     </Group>
-  </Group>
+
+    <ProfileTabs tab={tab} is_own={is_own} setTab={setTab} />
+
+    {TAB_HEADERS[tab] || null}
+  </div>
 );
 
 export { ProfileInfo };

src/containers/profile/ProfileInfo/styles.scss

@@ -16,13 +16,13 @@
   background: $content_bg 50% 50% no-repeat/cover;
   position: absolute;
   bottom: 0;
-  left: 0;
+  left: $gap;
 }
 
 .field {
-  padding-left: 110px;
+  padding: $gap 0 0 120px;
   flex: 1;
-  padding-bottom: 5px;
+  // padding-bottom: 5px;
 }
 
 .name {

src/containers/profile/ProfileLayout/index.tsx

@@ -36,9 +36,7 @@ const ProfileLayoutUnconnected: FC<IProps> = ({ history, nodeSetCoverImage }) =>
 
   return (
     <Group className={styles.wrap} horizontal>
-      <div className={styles.column}>
-        <ProfileInfo user={user} />
-      </div>
+      <div className={styles.column} />
 
       <Grid className={styles.content}>
         <div className={styles.comments}>

src/containers/profile/ProfileMessages/index.tsx

@@ -1,18 +1,24 @@
 import React, { FC, useEffect } from 'react';
 import { connect } from 'react-redux';
-import { selectAuthProfile } from '~/redux/auth/selectors';
-import { NodeNoComments } from '~/components/node/NodeNoComments';
+import { selectAuthProfile, selectAuth, selectAuthUser } from '~/redux/auth/selectors';
 import styles from './styles.scss';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
+import { Message } from '~/components/profile/Message';
+import { Group } from '~/components/containers/Group';
+import pick from 'ramda/es/pick';
+
+const mapStateToProps = state => ({
+  profile: selectAuthProfile(state),
+  user: pick(['id'], selectAuthUser(state)),
+});
 
-const mapStateToProps = state => ({ profile: selectAuthProfile(state) });
 const mapDispatchToProps = {
   authGetMessages: AUTH_ACTIONS.authGetMessages,
 };
 
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const ProfileMessagesUnconnected: FC<IProps> = ({ profile, authGetMessages }) => {
+const ProfileMessagesUnconnected: FC<IProps> = ({ profile, user: { id }, authGetMessages }) => {
   useEffect(() => {
     if (profile.is_loading || !profile.user || !profile.user.username) return;
 
@@ -20,11 +26,19 @@ const ProfileMessagesUnconnected: FC<IProps> = ({ profile, authGetMessages }) =>
   }, [profile.user]);
 
   return (
-    <div className={styles.messages}>
-      {profile.messages.map(message => (
-        <div key={message.id}>{message.text}</div>
+    <Group className={styles.messages}>
+      {profile.messages
+        .filter(message => !!message.text)
+        .map((
+          message // TODO: show files / memo
+        ) => (
+          <Message message={message} incoming={id !== message.from.id} key={message.id} />
         ))}
-    </div>
+
+      {!profile.is_loading_messages && profile.messages.length > 0 && (
+        <div className={styles.placeholder}>Когда-нибудь здесь будут еще сообщения</div>
+      )}
+    </Group>
   );
 };
 

src/containers/profile/ProfileMessages/styles.scss

@@ -0,0 +1,10 @@
+.messages {
+  padding: $gap;
+  background: $node_bg;
+}
+
+.placeholder {
+  font: $font_12_regular;
+  padding: $gap;
+  text-align: center;
+}

src/containers/profile/ProfileTabs/index.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from 'react';
+import styles from './styles.scss';
+import classNames from 'classnames';
+
+interface IProps {
+  tab: string;
+  is_own: boolean;
+  setTab: (tab: string) => void;
+}
+
+const ProfileTabs: FC<IProps> = ({ tab, is_own, setTab }) => (
+  <div className={styles.wrap}>
+    <div
+      className={classNames(styles.tab, { [styles.active]: tab === 'profile' })}
+      onClick={() => setTab('profile')}
+    >
+      Профиль
+    </div>
+    <div
+      className={classNames(styles.tab, { [styles.active]: tab === 'messages' })}
+      onClick={() => setTab('messages')}
+    >
+      Сообщения
+    </div>
+    {is_own && (
+      <div
+        className={classNames(styles.tab, { [styles.active]: tab === 'settings' })}
+        onClick={() => setTab('settings')}
+      >
+        Настройки
+      </div>
+    )}
+  </div>
+);
+
+export { ProfileTabs };

src/containers/profile/ProfileTabs/styles.scss

@@ -0,0 +1,22 @@
+.wrap {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: $gap * 2 0 0 0;
+  padding: 0 $gap;
+}
+
+.tab {
+  @include outer_shadow();
+
+  padding: $gap;
+  margin-right: $gap;
+  border-radius: $radius $radius 0 0;
+  font: $font_14_semibold;
+  text-transform: uppercase;
+  cursor: pointer;
+
+  &.active {
+    background: lighten($content_bg, 4%);
+  }
+}

src/redux/auth/actions.ts

@@ -1,5 +1,6 @@
 import { AUTH_USER_ACTIONS } from '~/redux/auth/constants';
 import { IAuthState, IUser } from '~/redux/auth/types';
+import { IMessage } from '../types';
 
 export const userSendLoginRequest = ({
   username,
@@ -47,3 +48,9 @@ export const authGetMessages = (username: string) => ({
   type: AUTH_USER_ACTIONS.GET_MESSAGES,
   username,
 });
+
+export const authSendMessage = (message: Partial<IMessage>, onSuccess) => ({
+  type: AUTH_USER_ACTIONS.SEND_MESSAGE,
+  message,
+  onSuccess,
+});

src/redux/auth/api.ts

@@ -35,8 +35,18 @@ export const apiAuthGetUserProfile = ({
 export const apiAuthGetUserMessages = ({
   access,
   username,
-}): Promise<IResultWithStatus<{ messages: IMessage }>> =>
+}): Promise<IResultWithStatus<{ messages: IMessage[] }>> =>
   api
     .get(API.USER.MESSAGES(username), configWithToken(access))
     .then(resultMiddleware)
     .catch(errorMiddleware);
+
+export const apiAuthSendMessage = ({
+  access,
+  username,
+  message,
+}): Promise<IResultWithStatus<{ message: IMessage }>> =>
+  api
+    .post(API.USER.MESSAGE_SEND(username), { message }, configWithToken(access))
+    .then(resultMiddleware)
+    .catch(errorMiddleware);

src/redux/auth/constants.ts

@@ -12,6 +12,7 @@ export const AUTH_USER_ACTIONS = {
   OPEN_PROFILE: 'OPEN_PROFILE',
   SET_PROFILE: 'SET_PROFILE',
   GET_MESSAGES: 'GET_MESSAGES',
+  SEND_MESSAGE: 'SEND_MESSAGE',
 };
 
 export const USER_ERRORS = {

src/redux/auth/reducer.ts

@@ -19,9 +19,10 @@ const INITIAL_STATE: IAuthState = {
   profile: {
     is_loading: true,
     is_loading_messages: true,
+    is_sending_messages: false,
     user: null,
     messages: [],
-    messages_errors: {},
+    messages_error: null,
   },
 };
 

src/redux/auth/sagas.ts

@@ -9,15 +9,17 @@ import {
   authOpenProfile,
   authSetProfile,
   authGetMessages,
+  authSendMessage,
 } from '~/redux/auth/actions';
 import {
   apiUserLogin,
   apiAuthGetUser,
   apiAuthGetUserProfile,
   apiAuthGetUserMessages,
+  apiAuthSendMessage,
 } from '~/redux/auth/api';
 import { modalSetShown, modalShowDialog } from '~/redux/modal/actions';
-import { selectToken } from './selectors';
+import { selectToken, selectAuthProfile } from './selectors';
 import { IResultWithStatus } from '../types';
 import { IUser } from './types';
 import { REHYDRATE, RehydrateAction } from 'redux-persist';
@@ -128,7 +130,7 @@ function* getMessages({ username }: ReturnType<typeof authGetMessages>) {
     return yield put(
       authSetProfile({
         is_loading_messages: false,
-        messages_errors: { network: ERRORS.EMPTY_RESPONSE },
+        messages_error: ERRORS.EMPTY_RESPONSE,
       })
     );
   }
@@ -136,6 +138,44 @@ function* getMessages({ username }: ReturnType<typeof authGetMessages>) {
   yield put(authSetProfile({ is_loading_messages: false, messages }));
 }
 
+function* sendMessage({ message, onSuccess }: ReturnType<typeof authSendMessage>) {
+  const {
+    user: { username },
+  } = yield select(selectAuthProfile);
+
+  if (!username) return;
+
+  yield put(authSetProfile({ is_sending_messages: true, messages_error: null }));
+
+  const { error, data } = yield call(reqWrapper, apiAuthSendMessage, { username, message });
+
+  console.log({ error, data });
+
+  if (error || !data.message) {
+    return yield put(
+      authSetProfile({
+        is_sending_messages: false,
+        messages_error: error || ERRORS.EMPTY_RESPONSE,
+      })
+    );
+  }
+
+  const { user, messages } = yield select(selectAuthProfile);
+
+  if (user.username !== username) {
+    return yield put(authSetProfile({ is_sending_messages: false }));
+  }
+
+  yield put(
+    authSetProfile({
+      is_sending_messages: false,
+      messages: [message, ...messages],
+    })
+  );
+
+  onSuccess();
+}
+
 function* authSaga() {
   yield takeLatest(REHYDRATE, checkUserSaga);
   yield takeLatest(AUTH_USER_ACTIONS.LOGOUT, logoutSaga);
@@ -143,6 +183,7 @@ function* authSaga() {
   yield takeLatest(AUTH_USER_ACTIONS.GOT_AUTH_POST_MESSAGE, gotPostMessageSaga);
   yield takeLatest(AUTH_USER_ACTIONS.OPEN_PROFILE, openProfile);
   yield takeLatest(AUTH_USER_ACTIONS.GET_MESSAGES, getMessages);
+  yield takeLatest(AUTH_USER_ACTIONS.SEND_MESSAGE, sendMessage);
 }
 
 export default authSaga;

src/redux/auth/selectors.ts

@@ -5,3 +5,4 @@ export const selectUser = (state: IState): IState['auth']['user'] => state.auth.
 export const selectToken = (state: IState): IState['auth']['token'] => state.auth.token;
 export const selectAuthLogin = (state: IState): IState['auth']['login'] => state.auth.login;
 export const selectAuthProfile = (state: IState): IState['auth']['profile'] => state.auth.profile;
+export const selectAuthUser = (state: IState): IState['auth']['user'] => state.auth.user;

src/redux/auth/types.ts

@@ -32,8 +32,10 @@ export type IAuthState = Readonly<{
   profile: {
     is_loading: boolean;
     is_loading_messages: boolean;
+    is_sending_messages: boolean;
+
     user: IUser;
     messages: IMessage[];
-    messages_errors: Record<string, string>;
+    messages_error: string;
   };
 }>;

src/styles/inputs.scss

@@ -32,6 +32,25 @@
     padding: 0 18px;
   }
 
+  &.seamless {
+    background: none;
+    box-shadow: none;
+  }
+
+  &.textarea_wrapper {
+    &::before {
+      display: none;
+    }
+
+    .input {
+      padding: 0;
+
+      textarea {
+        padding: $gap;
+      }
+    }
+  }
+
   &:hover {
     opacity: 1;
   }