mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
refactored component errors
This commit is contained in:
parent
7031084b09
commit
d4c2e7ee09
79 changed files with 573 additions and 462 deletions
|
@ -1,43 +1,42 @@
|
|||
import React, { FC, useCallback, useEffect, useState } from "react";
|
||||
import styles from "./styles.module.scss";
|
||||
import { connect } from "react-redux";
|
||||
import { getURL } from "~/utils/dom";
|
||||
import { pick } from "ramda";
|
||||
import { selectAuthProfile, selectAuthUser } from "~/redux/auth/selectors";
|
||||
import { PRESETS } from "~/constants/urls";
|
||||
import { selectUploads } from "~/redux/uploads/selectors";
|
||||
import { IFileWithUUID } from "~/redux/types";
|
||||
import uuid from "uuid4";
|
||||
import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from "~/redux/uploads/constants";
|
||||
import React, { FC, useCallback, useEffect, useState } from 'react';
|
||||
import styles from './styles.module.scss';
|
||||
import { connect } from 'react-redux';
|
||||
import { getURL } from '~/utils/dom';
|
||||
import { pick } from 'ramda';
|
||||
import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors';
|
||||
import { PRESETS } from '~/constants/urls';
|
||||
import { selectUploads } from '~/redux/uploads/selectors';
|
||||
import { IFileWithUUID } from '~/redux/types';
|
||||
import uuid from 'uuid4';
|
||||
import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants';
|
||||
import { path } from 'ramda';
|
||||
import * as UPLOAD_ACTIONS from "~/redux/uploads/actions";
|
||||
import * as AUTH_ACTIONS from "~/redux/auth/actions";
|
||||
import { Icon } from "~/components/input/Icon";
|
||||
import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
|
||||
import * as AUTH_ACTIONS from '~/redux/auth/actions';
|
||||
import { Icon } from '~/components/input/Icon';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
user: pick(["id"], selectAuthUser(state)),
|
||||
profile: pick(["is_loading", "user"], selectAuthProfile(state)),
|
||||
uploads: pick(["statuses", "files"], selectUploads(state))
|
||||
user: pick(['id'], selectAuthUser(state)),
|
||||
profile: pick(['is_loading', 'user'], selectAuthProfile(state)),
|
||||
uploads: pick(['statuses', 'files'], selectUploads(state)),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
|
||||
authPatchUser: AUTH_ACTIONS.authPatchUser
|
||||
authPatchUser: AUTH_ACTIONS.authPatchUser,
|
||||
};
|
||||
|
||||
type IProps = ReturnType<typeof mapStateToProps> &
|
||||
typeof mapDispatchToProps & {};
|
||||
type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
|
||||
|
||||
const ProfileAvatarUnconnected: FC<IProps> = ({
|
||||
user: { id },
|
||||
profile: { is_loading, user },
|
||||
uploads: { statuses, files },
|
||||
uploadUploadFiles,
|
||||
authPatchUser
|
||||
authPatchUser,
|
||||
}) => {
|
||||
const can_edit = !is_loading && id && id === user.id;
|
||||
const can_edit = !is_loading && id && id === user?.id;
|
||||
|
||||
const [temp, setTemp] = useState<string>(null);
|
||||
const [temp, setTemp] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!can_edit) return;
|
||||
|
@ -45,7 +44,7 @@ const ProfileAvatarUnconnected: FC<IProps> = ({
|
|||
Object.entries(statuses).forEach(([id, status]) => {
|
||||
if (temp === id && !!status.uuid && files[status.uuid]) {
|
||||
authPatchUser({ photo: files[status.uuid] });
|
||||
setTemp(null);
|
||||
setTemp('');
|
||||
}
|
||||
});
|
||||
}, [statuses, files, temp, can_edit, authPatchUser]);
|
||||
|
@ -58,11 +57,11 @@ const ProfileAvatarUnconnected: FC<IProps> = ({
|
|||
temp_id: uuid(),
|
||||
subject: UPLOAD_SUBJECTS.AVATAR,
|
||||
target: UPLOAD_TARGETS.PROFILES,
|
||||
type: UPLOAD_TYPES.IMAGE
|
||||
type: UPLOAD_TYPES.IMAGE,
|
||||
})
|
||||
);
|
||||
|
||||
setTemp(path([0, "temp_id"], items));
|
||||
setTemp(path([0, 'temp_id'], items) || '');
|
||||
uploadUploadFiles(items.slice(0, 1));
|
||||
},
|
||||
[uploadUploadFiles, setTemp]
|
||||
|
@ -81,13 +80,15 @@ const ProfileAvatarUnconnected: FC<IProps> = ({
|
|||
[onUpload, can_edit]
|
||||
);
|
||||
|
||||
const backgroundImage = is_loading
|
||||
? undefined
|
||||
: `url("${user && getURL(user.photo, PRESETS.avatar)}")`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.avatar}
|
||||
style={{
|
||||
backgroundImage: is_loading
|
||||
? null
|
||||
: `url("${user && getURL(user.photo, PRESETS.avatar)}")`
|
||||
backgroundImage,
|
||||
}}
|
||||
>
|
||||
{can_edit && <input type="file" onInput={onInputChange} />}
|
||||
|
@ -100,9 +101,6 @@ const ProfileAvatarUnconnected: FC<IProps> = ({
|
|||
);
|
||||
};
|
||||
|
||||
const ProfileAvatar = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(ProfileAvatarUnconnected);
|
||||
const ProfileAvatar = connect(mapStateToProps, mapDispatchToProps)(ProfileAvatarUnconnected);
|
||||
|
||||
export { ProfileAvatar };
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue