mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
removed profile redux items
This commit is contained in:
Fedor Katurov
parent
5b28313afd
commit
3c0571816c
55 changed files with 488 additions and 710 deletions
45
src/components/profile/ProfileAvatar/index.tsx
Normal file
45
src/components/profile/ProfileAvatar/index.tsx
Normal file
|
|
@ -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 };
|
||||
55
src/components/profile/ProfileAvatar/styles.module.scss
Normal file
55
src/components/profile/ProfileAvatar/styles.module.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue