removed redux completely

src/containers/profile/ProfileAccounts/index.tsx

@@ -0,0 +1,89 @@
+import React, { FC, Fragment } from 'react';
+import styles from './styles.module.scss';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { Icon } from '~/components/input/Icon';
+import { Button } from '~/components/input/Button';
+import { Group } from '~/components/containers/Group';
+import { useOAuth } from '~/hooks/auth/useOAuth';
+import { SOCIAL_ICONS } from '~/constants/auth/socials';
+
+type ProfileAccountsProps = {};
+
+const ProfileAccounts: FC<ProfileAccountsProps> = () => {
+  const { isLoading, accounts, dropAccount, openOauthWindow } = useOAuth();
+
+  return (
+    <Group className={styles.wrap}>
+      <Group className={styles.info}>
+        <p>
+          Ты можешь входить в Убежище, используя аккаунты на других сайтах вместо ввода логина и
+          пароля.
+        </p>
+
+        <p>
+          Мы честно украдём и будем хранить твои имя, фото и адрес на этом сайте, но никому о них не
+          расскажем.
+        </p>
+      </Group>
+
+      {isLoading && (
+        <div className={styles.loader}>
+          {[...new Array(accounts.length || 1)].map((_, i) => (
+            <Fragment key={i}>
+              <Placeholder width="50%" />
+              <Placeholder width="auto" />
+            </Fragment>
+          ))}
+        </div>
+      )}
+
+      {!isLoading && accounts.length > 0 && (
+        <div className={styles.list}>
+          {!isLoading &&
+            accounts.map(it => (
+              <div className={styles.account} key={`${it.provider}-${it.id}`}>
+                <div
+                  className={styles.account__photo}
+                  style={{ backgroundImage: it.photo ? `url(${it.photo})` : 'none' }}
+                >
+                  <div className={styles.account__provider}>
+                    <Icon icon={SOCIAL_ICONS[it.provider]} size={12} />
+                  </div>
+                </div>
+
+                <div className={styles.account__name}>{it.name || it.id}</div>
+
+                <div className={styles.account__drop}>
+                  <Icon icon="close" size={22} onClick={() => dropAccount(it.provider, it.id)} />
+                </div>
+              </div>
+            ))}
+        </div>
+      )}
+
+      <Group horizontal className={styles.buttons}>
+        <Button
+          size="small"
+          type="button"
+          iconLeft="vk"
+          color="gray"
+          onClick={() => openOauthWindow('vkontakte')}
+        >
+          Вконтакте
+        </Button>
+
+        <Button
+          size="small"
+          type="button"
+          iconLeft="google"
+          color="gray"
+          onClick={() => openOauthWindow('google')}
+        >
+          Google
+        </Button>
+      </Group>
+    </Group>
+  );
+};
+
+export { ProfileAccounts };

src/containers/profile/ProfileAccounts/styles.module.scss

@@ -0,0 +1,87 @@
+@import "../../../styles/variables";
+
+.wrap {
+}
+
+.list {
+  border-radius: $radius;
+  background: transparentize(white, 0.95);
+}
+
+.buttons {
+  background: transparentize(black, 0.8);
+  border-radius: $radius;
+  padding: $gap / 2;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.add {
+  //background-color: $content_bg !important;
+}
+
+.loader {
+  display: grid;
+  grid-row-gap: $gap;
+  grid-column-gap: $gap * 4;
+  grid-template-columns: 1fr 32px;
+
+  & > div {
+    height: 48px;
+    width: auto;
+  }
+}
+
+.account {
+  display: grid;
+  grid-template-columns: 20px auto 20px;
+  grid-column-gap: $gap * 1.5;
+  align-items: center;
+  border-bottom: 1px solid transparentize(white, 0.9);
+  padding: $gap;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &__photo {
+    width: 28px;
+    height: 28px;
+    background: 50% 50% no-repeat;
+    background-size: cover;
+    border-radius: 2px;
+    position: relative;
+    background: $content_bg;
+  }
+
+  &__provider {
+    position: absolute;
+    right: -2px;
+    bottom: -8px;
+    background: $content_bg;
+  }
+
+  &__name {
+    font: $font_16_semibold;
+    padding-left: $gap / 2;
+  }
+
+  &__drop {
+    cursor: pointer;
+    opacity: 0.5;
+    transition: opacity 0.25s;
+    fill: $red;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.info {
+  padding: $gap $gap / 2;
+  font: $font_14_regular;
+}

src/containers/profile/ProfileInfo/index.tsx

@@ -1,11 +1,13 @@
-import React, { FC } from "react";
-import styles from "./styles.module.scss";
-import { Group } from "~/components/containers/Group";
-import { Placeholder } from "~/components/placeholders/Placeholder";
-import { getPrettyDate } from "~/utils/dom";
-import { ProfileTabs } from "../ProfileTabs";
-import { ProfileAvatar } from "~/components/profile/ProfileAvatar";
-import { useProfileContext } from "~/utils/providers/ProfileProvider";
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Group } from '~/components/containers/Group';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { getPrettyDate } from '~/utils/dom';
+import { ProfileTabs } from '../ProfileTabs';
+import { ProfileAvatar } from '~/components/profile/ProfileAvatar';
+import { useProfileContext } from '~/utils/providers/ProfileProvider';
+import { usePatchUser } from '~/hooks/auth/usePatchUser';
+import { useUser } from '~/hooks/auth/useUser';
 
 interface IProps {
   isLoading?: boolean;
@@ -13,20 +15,27 @@ interface IProps {
 }
 
 const ProfileInfo: FC<IProps> = ({ isOwn }) => {
-  const { updatePhoto, profile, isLoading } = useProfileContext();
+  const { user } = useUser();
+  const { updatePhoto } = usePatchUser();
+  const { profile, isLoading } = useProfileContext();
+
+  const photo = isOwn ? user.photo : profile.photo;
+  const fullName = isOwn ? user.fullname : profile.fullname;
+  const lastSeen = isOwn ? new Date().toISOString() : profile.last_seen;
+  const username = isOwn ? user.username : profile.username;
 
   return (
     <div>
       <Group className={styles.wrap} horizontal>
-        <ProfileAvatar canEdit={isOwn} onChangePhoto={updatePhoto} photo={profile.photo} />
+        <ProfileAvatar canEdit={isOwn} onChangePhoto={updatePhoto} photo={photo} />
 
         <div className={styles.field}>
           <div className={styles.name}>
-            {isLoading ? <Placeholder width="80%" /> : profile?.fullname || profile?.username}
+            {isLoading ? <Placeholder width="80%" /> : fullName || username}
           </div>
 
           <div className={styles.description}>
-            {isLoading ? <Placeholder /> : getPrettyDate(profile?.last_seen)}
+            {isLoading ? <Placeholder /> : getPrettyDate(lastSeen)}
           </div>
         </div>
       </Group>

src/containers/profile/ProfileLoader/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from "react";
-import styles from "./styles.module.scss";
-import { LoaderCircle } from "~/components/input/LoaderCircle";
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
 
 interface IProps {}
 

src/containers/profile/ProfileMessages/index.tsx

@@ -3,12 +3,12 @@ import styles from './styles.module.scss';
 import { Message } from '~/components/profile/Message';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { useMessages } from '~/hooks/messages/useMessages';
-import { useUser } from '~/hooks/user/userUser';
+import { useUser } from '~/hooks/auth/useUser';
 import { useProfileContext } from '~/utils/providers/ProfileProvider';
 
 const ProfileMessages: FC = () => {
   const { profile, isLoading: isLoadingProfile } = useProfileContext();
-  const user = useUser();
+  const { user } = useUser();
   const { messages, isLoading: isLoadingMessages } = useMessages(profile?.username || '');
 
   if (!messages.length || isLoadingProfile)

src/containers/profile/ProfilePageLeft/index.tsx

@@ -1,12 +1,12 @@
-import React, { FC } from "react";
-import { IUser } from "~/redux/auth/types";
-import { formatText } from "~/utils/dom";
-import { PRESETS } from "~/constants/urls";
-import { Placeholder } from "~/components/placeholders/Placeholder";
+import React, { FC } from 'react';
+import { IUser } from '~/types/auth';
+import { formatText } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import { Placeholder } from '~/components/placeholders/Placeholder';
 
-import styles from "./styles.module.scss";
-import { Avatar } from "~/components/common/Avatar";
-import { Markdown } from "~/components/containers/Markdown";
+import styles from './styles.module.scss';
+import { Avatar } from '~/components/common/Avatar';
+import { Markdown } from '~/components/containers/Markdown';
 
 interface IProps {
   profile: IUser;

src/containers/profile/ProfilePageStats/index.tsx

@@ -1,17 +1,10 @@
-import React, { FC } from "react";
-import styles from "./styles.module.scss";
-import { StatsRow } from "~/components/common/StatsRow";
-import { SubTitle } from "~/components/common/SubTitle";
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { StatsRow } from '~/components/common/StatsRow';
+import { SubTitle } from '~/components/common/SubTitle';
 
 interface Props {}
 
-const Row: FC<{ count: number; title: string; icon?: string }> = ({ count, title, icon }) => (
-  <div className={styles.row}>
-    <div className={styles.title}>{title}</div>
-    <div className={styles.counter}>{count > 999 ? '999+' : count}</div>
-  </div>
-);
-
 const ProfilePageStats: FC<Props> = () => (
   <div className={styles.wrap}>
     <SubTitle>Ачивментс</SubTitle>

src/containers/profile/ProfileTabs/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from "react";
-import styles from "./styles.module.scss";
-import { Tabs } from "~/components/dialogs/Tabs";
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Tabs } from '~/components/dialogs/Tabs';
 
 interface IProps {
   is_own: boolean;