muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

refactored component errors

Browse source
This commit is contained in:
Fedor Katurov 2021-03-03 17:54:58 +07:00
parent 7031084b09
commit d4c2e7ee09
79 changed files with 573 additions and 462 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/editors/AudioEditor/index.tsx
View file

@ -1,5 +1,4 @@
import React, { FC, useCallback, useMemo } from 'react';
import { INode } from '~/redux/types';
import { connect } from 'react-redux';
import { UPLOAD_TYPES } from '~/redux/uploads/constants';
import { ImageGrid } from '../ImageGrid';
@ -8,19 +7,14 @@ import { selectUploads } from '~/redux/uploads/selectors';
import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
import styles from './styles.module.scss';
import { NodeEditorProps } from '~/redux/node/types';
const mapStateToProps = selectUploads;
const mapDispatchToProps = {
uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
};
type IProps = ReturnType<typeof mapStateToProps> &
typeof mapDispatchToProps & {
data: INode;
setData: (val: INode) => void;
temp: string[];
setTemp: (val: string[]) => void;
};
type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & NodeEditorProps;
const AudioEditorUnconnected: FC<IProps> = ({ data, setData, temp, statuses }) => {
const images = useMemo(
@ -69,9 +63,6 @@ const AudioEditorUnconnected: FC<IProps> = ({ data, setData, temp, statuses }) =
);
};
const AudioEditor = connect(
mapStateToProps,
mapDispatchToProps
)(AudioEditorUnconnected);
const AudioEditor = connect(mapStateToProps, mapDispatchToProps)(AudioEditorUnconnected);
export { AudioEditor };

2
src/components/editors/AudioGrid/index.tsx
View file

@ -35,7 +35,7 @@ const AudioGrid: FC<IProps> = ({ files, setFiles, locked }) => {
);
const onTitleChange = useCallback(
(changeId: IFile['id'], title: IFile['metadata']['title']) => {
(changeId: IFile['id'], title: string) => {
setFiles(
files.map(file =>
file && file.id === changeId ? { ...file, metadata: { ...file.metadata, title } } : file

23
src/components/editors/EditorPanel/index.tsx
View file

@ -2,6 +2,7 @@ import React, { FC, createElement } from 'react';
import styles from './styles.module.scss';
import { INode } from '~/redux/types';
import { NODE_PANEL_COMPONENTS } from '~/redux/node/constants';
import { has } from 'ramda';
interface IProps {
data: INode;
@ -10,13 +11,19 @@ interface IProps {
setTemp: (val: string[]) => void;
}
const EditorPanel: FC<IProps> = ({ data, setData, temp, setTemp }) => (
<div className={styles.panel}>
{NODE_PANEL_COMPONENTS[data.type] &&
NODE_PANEL_COMPONENTS[data.type].map((el, key) =>
createElement(el, { key, data, setData, temp, setTemp })
)}
</div>
);
const EditorPanel: FC<IProps> = ({ data, setData, temp, setTemp }) => {
if (!data.type || !has(data.type, NODE_PANEL_COMPONENTS)) {
return null;
}
return (
<div className={styles.panel}>
{NODE_PANEL_COMPONENTS[data.type] &&
NODE_PANEL_COMPONENTS[data.type].map((el, key) =>
createElement(el, { key, data, setData, temp, setTemp })
)}
</div>
);
};
export { EditorPanel };

5
src/components/editors/EditorUploadButton/index.tsx
View file

@ -64,7 +64,10 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
})
);
const temps = items.map(file => file.temp_id).slice(0, limit);
const temps = items
.filter(file => file?.temp_id)
.map(file => file.temp_id!)
.slice(0, limit);
setTemp([...temp, ...temps]);
uploadUploadFiles(items);

14
src/components/editors/EditorUploadCoverButton/index.tsx
View file

@ -33,16 +33,16 @@ const EditorUploadCoverButtonUnconnected: FC<IProps> = ({
statuses,
uploadUploadFiles,
}) => {
const [cover_temp, setCoverTemp] = useState<string>(null);
const [coverTemp, setCoverTemp] = useState<string>('');
useEffect(() => {
Object.entries(statuses).forEach(([id, status]) => {
if (cover_temp === id && !!status.uuid && files[status.uuid]) {
if (coverTemp === id && !!status.uuid && files[status.uuid]) {
setData({ ...data, cover: files[status.uuid] });
setCoverTemp(null);
setCoverTemp('');
}
});
}, [statuses, files, cover_temp, setData, data]);
}, [statuses, files, coverTemp, setData, data]);
const onUpload = useCallback(
(uploads: File[]) => {
@ -56,7 +56,7 @@ const EditorUploadCoverButtonUnconnected: FC<IProps> = ({
})
);
setCoverTemp(path([0, 'temp_id'], items));
setCoverTemp(path([0, 'temp_id'], items) || '');
uploadUploadFiles(items);
},
[uploadUploadFiles, setCoverTemp]
@ -73,11 +73,11 @@ const EditorUploadCoverButtonUnconnected: FC<IProps> = ({
[onUpload]
);
const onDropCover = useCallback(() => {
setData({ ...data, cover: null });
setData({ ...data, cover: undefined });
}, [setData, data]);
const background = data.cover ? getURL(data.cover, PRESETS['300']) : null;
const status = cover_temp && path([cover_temp], statuses);
const status = coverTemp && path([coverTemp], statuses);
const preview = status && path(['preview'], status);
return (

14
src/components/editors/ImageEditor/index.tsx
View file

@ -5,19 +5,14 @@ import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
import { selectUploads } from '~/redux/uploads/selectors';
import { ImageGrid } from '~/components/editors/ImageGrid';
import styles from './styles.module.scss';
import { NodeEditorProps } from '~/redux/node/types';
const mapStateToProps = selectUploads;
const mapDispatchToProps = {
uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
};
type IProps = ReturnType<typeof mapStateToProps> &
typeof mapDispatchToProps & {
data: INode;
setData: (val: INode) => void;
temp: string[];
setTemp: (val: string[]) => void;
};
type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & NodeEditorProps;
const ImageEditorUnconnected: FC<IProps> = ({ data, setData, temp, statuses }) => {
const pending_files = useMemo(() => temp.filter(id => !!statuses[id]).map(id => statuses[id]), [
@ -34,9 +29,6 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, temp, statuses }) =
);
};
const ImageEditor = connect(
mapStateToProps,
mapDispatchToProps
)(ImageEditorUnconnected);
const ImageEditor = connect(mapStateToProps, mapDispatchToProps)(ImageEditorUnconnected);
export { ImageEditor };

2
src/components/editors/SortableAudioGrid/index.tsx
View file

@ -17,7 +17,7 @@ const SortableAudioGrid = SortableContainer(
items: IFile[];
locked: IUploadStatus[];
onDelete: (file_id: IFile['id']) => void;
onTitleChange: (file_id: IFile['id'], title: IFile['metadata']['title']) => void;
onTitleChange: (file_id: IFile['id'], title: string) => void;
}) => {
return (
<div className={styles.grid}>

6
src/components/editors/TextEditor/index.tsx
View file

@ -3,11 +3,9 @@ import { INode } from '~/redux/types';
import styles from './styles.module.scss';
import { Textarea } from '~/components/input/Textarea';
import { path } from 'ramda';
import { NodeEditorProps } from '~/redux/node/types';
interface IProps {
data: INode;
setData: (val: INode) => void;
}
type IProps = NodeEditorProps & {};
const TextEditor: FC<IProps> = ({ data, setData }) => {
const setText = useCallback(

9
src/components/editors/VideoEditor/index.tsx
View file

@ -5,11 +5,9 @@ import { path } from 'ramda';
import { InputText } from '~/components/input/InputText';
import classnames from 'classnames';
import { getYoutubeThumb } from '~/utils/dom';
import { NodeEditorProps } from '~/redux/node/types';
interface IProps {
data: INode;
setData: (val: INode) => void;
}
type IProps = NodeEditorProps & {};
const VideoEditor: FC<IProps> = ({ data, setData }) => {
const setUrl = useCallback(
@ -19,9 +17,10 @@ const VideoEditor: FC<IProps> = ({ data, setData }) => {
const url = (path(['blocks', 0, 'url'], data) as string) || '';
const preview = useMemo(() => getYoutubeThumb(url), [url]);
const backgroundImage = (preview && `url("${preview}")`) || '';
return (
<div className={styles.preview} style={{ backgroundImage: preview && `url("${preview}")` }}>
<div className={styles.preview} style={{ backgroundImage }}>
<div className={styles.input_wrap}>
<div className={classnames(styles.input, { active: !!preview })}>
<InputText value={url} handler={setUrl} placeholder="Адрес видео" />