fetching messages for user

src/components/containers/BlurWrapper/index.tsx

@@ -4,10 +4,7 @@ import * as styles from './styles.scss';
 type IProps = AllHTMLAttributes<HTMLDivElement> & { is_blurred: boolean };
 
 export const BlurWrapper: FC<IProps> = ({ children, is_blurred }) => (
-  <div
+  <div className={styles.blur} style={{ filter: `blur(${is_blurred ? 15 : 0}px)` }}>
-    className={styles.blur}
-    style={{ filter: `blur(${is_blurred ? 15 : 0}px) saturate(${is_blurred ? 3 : 1})` }}
-  >
     {children}
   </div>
 );

src/constants/api.ts

@@ -3,11 +3,12 @@ import { INode } from '~/redux/types';
 export const API = {
   BASE: process.env.API_HOST,
   USER: {
-    LOGIN: '/auth/login',
+    LOGIN: '/user/login',
-    VKONTAKTE_LOGIN: `${process.env.API_HOST}/auth/vkontakte`,
+    VKONTAKTE_LOGIN: `${process.env.API_HOST}/user/vkontakte`,
-    ME: '/auth/',
+    ME: '/user/',
+    PROFILE: (username: string) => `/user/${username}/profile`,
+    MESSAGES: (username: string) => `/user/${username}/messages`,
     UPLOAD: (target, type) => `/upload/${target}/${type}`,
-    PROFILE: (username: string) => `/auth/user/${username}`,
   },
   NODE: {
     SAVE: '/node/',

src/containers/dialogs/ProfileDialog/index.tsx

@@ -7,6 +7,7 @@ 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 mapStateToProps = selectAuthProfile;
 const mapDispatchToProps = {};
@@ -16,14 +17,9 @@ type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & {};
 const ProfileDialogUnconnected: FC<IProps> = ({ onRequestClose, is_loading, user }) => (
   <BetterScrollDialog
     header={<ProfileInfo is_loading={is_loading} user={user} />}
-    footer={<CommentForm id="0" />}
     onClose={onRequestClose}
   >
-    <div className={styles.messages}>
+    <ProfileMessages />
-      <NodeNoComments />
-      <NodeNoComments />
-      <NodeNoComments />
-    </div>
   </BetterScrollDialog>
 );
 

src/containers/profile/ProfileMessages/index.tsx

@@ -0,0 +1,36 @@
+import React, { FC, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { selectAuthProfile } from '~/redux/auth/selectors';
+import { NodeNoComments } from '~/components/node/NodeNoComments';
+import styles from './styles.scss';
+import * as AUTH_ACTIONS from '~/redux/auth/actions';
+
+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 }) => {
+  useEffect(() => {
+    if (profile.is_loading || !profile.user || !profile.user.username) return;
+
+    authGetMessages(profile.user.username);
+  }, [profile.user]);
+
+  return (
+    <div className={styles.messages}>
+      {profile.messages.map(message => (
+        <div key={message.id}>{message.text}</div>
+      ))}
+    </div>
+  );
+};
+
+const ProfileMessages = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ProfileMessagesUnconnected);
+
+export { ProfileMessages };

src/redux/auth/actions.ts

@@ -42,3 +42,8 @@ export const authSetProfile = (profile: Partial<IAuthState['profile']>) => ({
   type: AUTH_USER_ACTIONS.SET_PROFILE,
   profile,
 });
+
+export const authGetMessages = (username: string) => ({
+  type: AUTH_USER_ACTIONS.GET_MESSAGES,
+  username,
+});

src/redux/auth/api.ts

@@ -1,6 +1,6 @@
 import { api, errorMiddleware, resultMiddleware, configWithToken } from '~/utils/api';
 import { API } from '~/constants/api';
-import { IResultWithStatus } from '~/redux/types';
+import { IResultWithStatus, IMessage } from '~/redux/types';
 import { userLoginTransform } from '~/redux/auth/transforms';
 import { IUser } from './types';
 
@@ -31,3 +31,12 @@ export const apiAuthGetUserProfile = ({
     .get(API.USER.PROFILE(username), configWithToken(access))
     .then(resultMiddleware)
     .catch(errorMiddleware);
+
+export const apiAuthGetUserMessages = ({
+  access,
+  username,
+}): Promise<IResultWithStatus<{ messages: IMessage }>> =>
+  api
+    .get(API.USER.MESSAGES(username), configWithToken(access))
+    .then(resultMiddleware)
+    .catch(errorMiddleware);

src/redux/auth/constants.ts

@@ -11,6 +11,7 @@ export const AUTH_USER_ACTIONS = {
   GOT_AUTH_POST_MESSAGE: 'GOT_POST_MESSAGE',
   OPEN_PROFILE: 'OPEN_PROFILE',
   SET_PROFILE: 'SET_PROFILE',
+  GET_MESSAGES: 'GET_MESSAGES',
 };
 
 export const USER_ERRORS = {

src/redux/auth/reducer.ts

@@ -18,7 +18,10 @@ const INITIAL_STATE: IAuthState = {
 
   profile: {
     is_loading: true,
+    is_loading_messages: true,
     user: null,
+    messages: [],
+    messages_errors: {},
   },
 };
 

src/redux/auth/sagas.ts

@@ -8,8 +8,14 @@ import {
   gotAuthPostMessage,
   authOpenProfile,
   authSetProfile,
+  authGetMessages,
 } from '~/redux/auth/actions';
-import { apiUserLogin, apiAuthGetUser, apiAuthGetUserProfile } from '~/redux/auth/api';
+import {
+  apiUserLogin,
+  apiAuthGetUser,
+  apiAuthGetUserProfile,
+  apiAuthGetUserMessages,
+} from '~/redux/auth/api';
 import { modalSetShown, modalShowDialog } from '~/redux/modal/actions';
 import { selectToken } from './selectors';
 import { IResultWithStatus } from '../types';
@@ -18,6 +24,7 @@ import { REHYDRATE, RehydrateAction } from 'redux-persist';
 import { selectModal } from '../modal/selectors';
 import { IModalState } from '../modal/reducer';
 import { DIALOGS } from '../modal/constants';
+import { ERRORS } from '~/constants/errors';
 
 export function* reqWrapper(requestAction, props = {}): ReturnType<typeof requestAction> {
   const access = yield select(selectToken);
@@ -75,6 +82,7 @@ function* refreshUser() {
 function* checkUserSaga({ key }: RehydrateAction) {
   if (key !== 'auth') return;
   yield call(refreshUser);
+  yield put(authOpenProfile('gvorcek'));
 }
 
 function* gotPostMessageSaga({ token }: ReturnType<typeof gotAuthPostMessage>) {
@@ -107,12 +115,34 @@ function* openProfile({ username }: ReturnType<typeof authOpenProfile>) {
   yield put(authSetProfile({ is_loading: false, user }));
 }
 
+function* getMessages({ username }: ReturnType<typeof authGetMessages>) {
+  yield put(modalShowDialog(DIALOGS.PROFILE));
+  yield put(authSetProfile({ is_loading_messages: true }));
+
+  const {
+    error,
+    data: { messages },
+  } = yield call(reqWrapper, apiAuthGetUserMessages, { username });
+
+  if (error || !messages) {
+    return yield put(
+      authSetProfile({
+        is_loading_messages: false,
+        messages_errors: { network: ERRORS.EMPTY_RESPONSE },
+      })
+    );
+  }
+
+  yield put(authSetProfile({ is_loading_messages: false, messages }));
+}
+
 function* authSaga() {
   yield takeLatest(REHYDRATE, checkUserSaga);
   yield takeLatest(AUTH_USER_ACTIONS.LOGOUT, logoutSaga);
   yield takeLatest(AUTH_USER_ACTIONS.SEND_LOGIN_REQUEST, sendLoginRequestSaga);
   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);
 }
 
 export default authSaga;

src/redux/auth/types.ts

@@ -1,4 +1,4 @@
-import { IFile } from '../types';
+import { IFile, IMessage } from '../types';
 
 export interface IToken {
   access: string;
@@ -31,6 +31,9 @@ export type IAuthState = Readonly<{
 
   profile: {
     is_loading: boolean;
+    is_loading_messages: boolean;
     user: IUser;
+    messages: IMessage[];
+    messages_errors: Record<string, string>;
   };
 }>;

src/redux/types.ts

@@ -146,6 +146,11 @@ export interface IComment {
   update_at?: string;
 }
 
+export type IMessage = Omit<IComment, 'user' | 'node'> & {
+  from: IUser;
+  to: IUser;
+};
+
 export interface ICommentGroup {
   user: IUser;
   comments: IComment[];