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;
+}