added account list and ability to drop them

src/components/profile/ProfileSettings/index.tsx

@@ -1,17 +1,16 @@
-import React, { FC, useState, useEffect, useCallback } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
 import styles from './styles.scss';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
-import { selectAuthUser, selectAuthProfile } from '~/redux/auth/selectors';
+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 { TextInput } from '~/components/input/TextInput';
 import { InputText } from '~/components/input/InputText';
 import reject from 'ramda/es/reject';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { ERROR_LITERAL } from '~/constants/errors';
+import { ProfileSettingsSocials } from '~/components/profile/ProfileSettingsSocials';
 
 const mapStateToProps = state => ({
   user: selectAuthUser(state),
@@ -21,15 +20,19 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = {
   authPatchUser: AUTH_ACTIONS.authPatchUser,
   authSetProfile: AUTH_ACTIONS.authSetProfile,
+  authGetSocials: AUTH_ACTIONS.authGetSocials,
+  authDropSocial: AUTH_ACTIONS.authDropSocial,
 };
 
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
 const ProfileSettingsUnconnected: FC<IProps> = ({
   user,
-  profile: { patch_errors },
+  profile: { patch_errors, socials },
   authPatchUser,
   authSetProfile,
+  authGetSocials,
+  authDropSocial,
 }) => {
   const [password, setPassword] = useState('');
   const [new_password, setNewPassword] = useState('');
@@ -40,11 +43,8 @@ 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(
@@ -88,6 +88,13 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
           комментариях.
         </div>
 
+        <ProfileSettingsSocials
+          accounts={socials.accounts}
+          is_loading={socials.is_loading}
+          authGetSocials={authGetSocials}
+          authDropSocial={authDropSocial}
+        />
+
         <Group className={styles.pad}>
           <InputText
             value={data.username}
@@ -135,9 +142,6 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
   );
 };
 
-const ProfileSettings = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ProfileSettingsUnconnected);
+const ProfileSettings = connect(mapStateToProps, mapDispatchToProps)(ProfileSettingsUnconnected);
 
 export { ProfileSettings };

src/components/profile/ProfileSettingsSocials/index.tsx

@@ -0,0 +1,63 @@
+import React, { FC, useEffect, Fragment } from 'react';
+import * as AUTH_ACTIONS from '~/redux/auth/actions';
+import { IAuthState, ISocialProvider } from '~/redux/auth/types';
+import styles from './styles.scss';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { Icon } from '~/components/input/Icon';
+
+interface IProps {
+  accounts: IAuthState['profile']['socials']['accounts'];
+  is_loading: boolean;
+  authGetSocials: typeof AUTH_ACTIONS.authGetSocials;
+  authDropSocial: typeof AUTH_ACTIONS.authDropSocial;
+}
+
+const SOCIAL_ICONS: Record<ISocialProvider, string> = {
+  vkontakte: 'vk',
+  google: 'google',
+};
+
+const ProfileSettingsSocials: FC<IProps> = ({
+  authGetSocials,
+  authDropSocial,
+  accounts,
+  is_loading,
+}) => {
+  useEffect(() => {
+    authGetSocials();
+  }, [authGetSocials]);
+
+  if (!accounts.length) return null;
+
+  return (
+    <div className={styles.wrap}>
+      {is_loading && (
+        <div className={styles.loader}>
+          {[...new Array(accounts.length || 1)].map((_, i) => (
+            <Fragment key={i}>
+              <Placeholder width="50%" />
+              <Placeholder width="auto" />
+            </Fragment>
+          ))}
+        </div>
+      )}
+
+      {!is_loading &&
+        accounts.map(it => (
+          <div className={styles.account}>
+            <div className={styles.account__provider}>
+              <Icon icon={SOCIAL_ICONS[it.provider]} />
+            </div>
+
+            <div className={styles.account__name}>{it.name}</div>
+
+            <div className={styles.account__drop}>
+              <Icon icon="close" size={22} onClick={() => authDropSocial(it.provider, it.id)} />
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export { ProfileSettingsSocials };

src/components/profile/ProfileSettingsSocials/styles.scss

@@ -0,0 +1,36 @@
+.wrap {
+  padding: $gap,
+}
+
+.loader {
+  display: grid;
+  grid-row-gap: $gap;
+  grid-column-gap: $gap * 4;
+  grid-template-columns: 1fr 32px;
+
+  & > div {
+    height: 22px;
+    width: auto;
+  }
+}
+
+.account {
+  display: grid;
+  grid-template-columns: 20px auto 20px;
+  grid-column-gap: $gap;
+
+  &__name {
+    font: $font_16_semibold;
+  }
+
+  &__drop {
+    cursor: pointer;
+    opacity: 0.5;
+    transition: opacity 0.25s;
+    fill: $red;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}