removed profile redux items

src/components/main/Notifications/index.tsx

@@ -46,10 +46,7 @@ const NotificationsUnconnected: FC<IProps> = ({
             return;
           }
 
-          return authOpenProfile(
-            (notification as IMessageNotification).content.from!.username,
-            'messages'
-          );
+          return authOpenProfile((notification as IMessageNotification).content.from!.username);
         default:
           return;
       }

src/components/main/UserButton/index.tsx

@@ -16,12 +16,12 @@ interface IProps {
 const UserButton: FC<IProps> = ({ user: { username, photo }, authOpenProfile, onLogout }) => {
   const onProfileOpen = useCallback(() => {
     if (!username) return;
-    authOpenProfile(username, 'profile');
+    authOpenProfile(username);
   }, [authOpenProfile, username]);
 
   const onSettingsOpen = useCallback(() => {
     if (!username) return;
-    authOpenProfile(username, 'settings');
+    authOpenProfile(username);
   }, [authOpenProfile, username]);
 
   return (

src/components/profile/ProfileAvatar/index.tsx

@@ -0,0 +1,45 @@
+import React, { ChangeEvent, FC, useCallback } from 'react';
+import styles from './styles.module.scss';
+import { getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import { Icon } from '~/components/input/Icon';
+import { IFile } from '~/redux/types';
+
+export interface ProfileAvatarProps {
+  canEdit: boolean;
+  photo?: IFile;
+  onChangePhoto: (file: File) => void;
+}
+
+const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit }) => {
+  const onInputChange = useCallback(
+    async (event: ChangeEvent<HTMLInputElement>) => {
+      if (!event.target.files?.length) {
+        return;
+      }
+
+      onChangePhoto(event.target.files[0]);
+    },
+    [onChangePhoto]
+  );
+
+  const backgroundImage = photo ? `url("${getURL(photo, PRESETS.avatar)}")` : undefined;
+
+  return (
+    <div
+      className={styles.avatar}
+      style={{
+        backgroundImage,
+      }}
+    >
+      {canEdit && <input type="file" onInput={onInputChange} />}
+      {canEdit && (
+        <div className={styles.can_edit}>
+          <Icon icon="photo_add" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { ProfileAvatar };

src/components/profile/ProfileAvatar/styles.module.scss

@@ -0,0 +1,55 @@
+@import "src/styles/variables";
+
+.avatar {
+  @include outer_shadow();
+
+  border-radius: $radius;
+  width: 100px;
+  height: 100px;
+  background: $content_bg 50% 50% no-repeat;
+  background-size: cover;
+  position: absolute;
+  bottom: 0;
+  left: $gap;
+  cursor: pointer;
+
+  input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+
+  &:hover {
+    svg {
+      fill: $red;
+    }
+  }
+}
+
+.can_edit {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  touch-action: none;
+  // background: red;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: $gap / 2;
+  box-sizing: border-box;
+  background: linear-gradient(330deg, $content_bg, transparentize($content_bg, 1));
+  border-radius: $radius;
+
+  svg {
+    width: 32px;
+    height: 32px;
+    fill: white;
+    transition: fill 0.25s;
+  }
+}

src/components/profile/ProfileDescription/index.tsx

@@ -1,39 +1,33 @@
 import React, { FC } from 'react';
 import { formatText } from '~/utils/dom';
 import styles from './styles.module.scss';
-import { connect } from 'react-redux';
-import { selectAuthProfile } from '~/redux/auth/selectors';
 import { ProfileLoader } from '~/containers/profile/ProfileLoader';
 import { Group } from '~/components/containers/Group';
 import markdown from '~/styles/common/markdown.module.scss';
 import classNames from 'classnames';
+import { useProfileContext } from '~/utils/providers/ProfileProvider';
 
-const mapStateToProps = state => ({
-  profile: selectAuthProfile(state),
-});
+const ProfileDescription: FC = () => {
+  const { profile, isLoading } = useProfileContext();
 
-type IProps = ReturnType<typeof mapStateToProps> & {};
-
-const ProfileDescriptionUnconnected: FC<IProps> = ({ profile: { user, is_loading } }) => {
-  if (is_loading) return <ProfileLoader />;
+  if (isLoading) return <ProfileLoader />;
 
   return (
     <div className={styles.wrap}>
-      {!!user?.description && (
+      {!!profile?.description && (
         <Group
           className={classNames(styles.content, markdown.wrapper)}
-          dangerouslySetInnerHTML={{ __html: formatText(user.description) }}
+          dangerouslySetInnerHTML={{ __html: formatText(profile.description) }}
         />
       )}
-      {!user?.description && (
+
+      {!profile?.description && (
         <div className={styles.placeholder}>
-          {user?.fullname || user?.username} пока ничего не рассказал о себе
+          {profile?.fullname || profile?.username} пока ничего не рассказал о себе
         </div>
       )}
     </div>
   );
 };
 
-const ProfileDescription = connect(mapStateToProps)(ProfileDescriptionUnconnected);
-
 export { ProfileDescription };

src/components/profile/ProfileSettings/index.tsx

@@ -1,35 +1,25 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
 import styles from './styles.module.scss';
-import { connect } from 'react-redux';
-import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors';
 import { Textarea } from '~/components/input/Textarea';
 import { Button } from '~/components/input/Button';
 import { Group } from '~/components/containers/Group';
 import { Filler } from '~/components/containers/Filler';
 import { InputText } from '~/components/input/InputText';
-import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { ERROR_LITERAL } from '~/constants/errors';
 import { ProfileAccounts } from '~/components/profile/ProfileAccounts';
 import classNames from 'classnames';
+import { useUser } from '~/hooks/user/userUser';
+import { useProfileContext } from '~/utils/providers/ProfileProvider';
+import { showErrorToast } from '~/utils/errors/showToast';
+import { getValidationErrors } from '~/utils/errors/getValidationErrors';
+import { showToastSuccess } from '~/utils/toast';
+import { getRandomPhrase } from '~/constants/phrases';
 
-const mapStateToProps = state => ({
-  user: selectAuthUser(state),
-  profile: selectAuthProfile(state),
-});
+const ProfileSettings: FC = () => {
+  const [errors, setErrors] = useState<Record<string, any>>({});
+  const user = useUser();
+  const { updateProfile } = useProfileContext();
 
-const mapDispatchToProps = {
-  authPatchUser: AUTH_ACTIONS.authPatchUser,
-  authSetProfile: AUTH_ACTIONS.authSetProfile,
-};
-
-type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
-
-const ProfileSettingsUnconnected: FC<IProps> = ({
-  user,
-  profile: { patch_errors, socials },
-  authPatchUser,
-  authSetProfile,
-}) => {
   const [password, setPassword] = useState('');
   const [new_password, setNewPassword] = useState('');
 
@@ -39,28 +29,40 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
     data,
     setData,
   ]);
+
   const setEmail = useCallback(email => setData({ ...data, email }), [data, setData]);
   const setUsername = useCallback(username => setData({ ...data, username }), [data, setData]);
   const setFullname = useCallback(fullname => setData({ ...data, fullname }), [data, setData]);
 
   const onSubmit = useCallback(
-    event => {
-      event.preventDefault();
+    async event => {
+      try {
+        event.preventDefault();
 
-      const fields = {
-        ...data,
-        password: password.length > 0 && password ? password : undefined,
-        new_password: new_password.length > 0 && new_password ? new_password : undefined,
-      };
+        const fields = {
+          ...data,
+          password: password.length > 0 && password ? password : undefined,
+          new_password: new_password.length > 0 && new_password ? new_password : undefined,
+        };
 
-      authPatchUser(fields);
+        await updateProfile(fields);
+
+        showToastSuccess(getRandomPhrase('SUCCESS'));
+      } catch (error) {
+        showErrorToast(error);
+
+        const validationErrors = getValidationErrors(error);
+        if (validationErrors) {
+          setErrors(validationErrors);
+        }
+      }
     },
-    [data, password, new_password, authPatchUser]
+    [data, password, new_password, updateProfile]
   );
 
   useEffect(() => {
-    authSetProfile({ patch_errors: {} });
-  }, [password, new_password, data, authSetProfile]);
+    setErrors({});
+  }, [password, new_password, data]);
 
   return (
     <form className={styles.wrap} onSubmit={onSubmit}>
@@ -74,7 +76,7 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
             value={data.fullname}
             handler={setFullname}
             title="Полное имя"
-            error={patch_errors.fullname && ERROR_LITERAL[patch_errors.fullname]}
+            error={errors.fullname && ERROR_LITERAL[errors.fullname]}
           />
 
           <Textarea value={data.description} handler={setDescription} title="Описание" />
@@ -96,14 +98,14 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
             value={data.username}
             handler={setUsername}
             title="Логин"
-            error={patch_errors.username && ERROR_LITERAL[patch_errors.username]}
+            error={errors.username && ERROR_LITERAL[errors.username]}
           />
 
           <InputText
             value={data.email}
             handler={setEmail}
             title="E-mail"
-            error={patch_errors.email && ERROR_LITERAL[patch_errors.email]}
+            error={errors.email && ERROR_LITERAL[errors.email]}
           />
 
           <InputText
@@ -111,7 +113,7 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
             handler={setNewPassword}
             title="Новый пароль"
             type="password"
-            error={patch_errors.new_password && ERROR_LITERAL[patch_errors.new_password]}
+            error={errors.new_password && ERROR_LITERAL[errors.new_password]}
           />
 
           <InputText
@@ -119,7 +121,7 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
             handler={setPassword}
             title="Старый пароль"
             type="password"
-            error={patch_errors.password && ERROR_LITERAL[patch_errors.password]}
+            error={errors.password && ERROR_LITERAL[errors.password]}
           />
 
           <div className={styles.small}>
@@ -150,6 +152,4 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
   );
 };
 
-const ProfileSettings = connect(mapStateToProps, mapDispatchToProps)(ProfileSettingsUnconnected);
-
 export { ProfileSettings };

src/components/profile/ProfileSidebarInfo/index.tsx

@@ -1,31 +0,0 @@
-import React, { FC } from "react";
-import styles from "./styles.module.scss";
-import { ProfileAvatar } from "~/containers/profile/ProfileAvatar";
-import { Placeholder } from "~/components/placeholders/Placeholder";
-import { getPrettyDate } from "~/utils/dom";
-import { IUser } from "~/redux/auth/types";
-
-interface IProps {
-  is_loading: boolean;
-  user: IUser;
-}
-
-const ProfileSidebarInfo: FC<IProps> = ({ is_loading, user }) => (
-  <div className={styles.wrap}>
-    <div className={styles.avatar}>
-      <ProfileAvatar />
-    </div>
-
-    <div className={styles.field}>
-      <div className={styles.name}>
-        {is_loading ? <Placeholder width="80%" /> : user.fullname || user.username}
-      </div>
-
-      <div className={styles.description}>
-        {is_loading ? <Placeholder /> : getPrettyDate(user.last_seen)}
-      </div>
-    </div>
-  </div>
-);
-
-export { ProfileSidebarInfo };

src/components/profile/ProfileSidebarInfo/styles.module.scss

@@ -1,41 +0,0 @@
-@import "src/styles/variables";
-
-.wrap.wrap {
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  position: relative;
-  flex: 0 0 100px;
-  display: flex;
-  margin: $gap;
-  box-shadow: transparentize(white, 0.95) 0 0 0 1px;
-  border-radius: $radius;
-  background: transparentize(black, 0.8);
-}
-
-.avatar {
-  border-radius: $radius;
-  width: 100px;
-  height: 100px;
-  background-size: cover;
-  position: relative;
-  flex: 0 0 100px;
-  left: -$gap;
-  margin-right: 10px;
-}
-
-.field {
-  flex: 1;
-  padding: $gap;
-}
-
-.name {
-  font: $font_24_bold;
-  margin-bottom: 4px;
-}
-
-.description {
-  color: transparentize($color: white, $amount: 0.7);
-  font: $font_14_regular;
-  text-transform: lowercase;
-}