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

fixed audio attaches

Browse source
This commit is contained in:
Fedor Katurov 2020-08-26 18:30:01 +07:00
parent c9d84a4947
commit b11593c45e
7 changed files with 68 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,10 @@ const SortableAudioGrid = SortableContainer(
locked: IUploadStatus[];
onDrop: (file_id: IFile['id']) => void;
onTitleChange: (file_id: IFile['id'], title: IFile['metadata']['title']) => void;
}) => (
}) => {
console.log(locked);
return (
<div className={styles.grid}>
{items
.filter(file => file && file.id)
@ -34,7 +37,8 @@ const SortableAudioGrid = SortableContainer(
</SortableAudioGridItem>
))}
</div>
)
);
}
);
export { SortableAudioGrid };

14
src/components/node/CommentForm/index.tsx
View file

@ -1,10 +1,10 @@
import React, { FC, useCallback, KeyboardEventHandler, useEffect, useMemo, memo } from 'react';
import React, { FC, KeyboardEventHandler, memo, useCallback, useEffect, useMemo } from 'react';
import { Textarea } from '~/components/input/Textarea';
import * as styles from './styles.scss';
import { Filler } from '~/components/containers/Filler';
import { Button } from '~/components/input/Button';
import assocPath from 'ramda/es/assocPath';
import { InputHandler, IFileWithUUID, IFile } from '~/redux/types';
import { IFile, IFileWithUUID, InputHandler } from '~/redux/types';
import { connect } from 'react-redux';
import * as NODE_ACTIONS from '~/redux/node/actions';
import { selectNode } from '~/redux/node/selectors';
@ -233,6 +233,10 @@ const CommentFormUnconnected: FC<IProps> = memo(
const placeholder = getRandomPhrase('SIMPLE');
const hasImageAttaches = images.length > 0 || locked_images.length > 0;
const hasAudioAttaches = audios.length > 0 || locked_audios.length > 0;
const hasAttaches = hasImageAttaches || hasAudioAttaches;
return (
<form onSubmit={onSubmit} className={styles.wrap}>
<div className={styles.input}>
@ -246,9 +250,9 @@ const CommentFormUnconnected: FC<IProps> = memo(
/>
</div>
{(!!images.length || !!audios.length) && (
{hasAttaches && (
<div className={styles.attaches}>
{!!images.length && (
{hasImageAttaches && (
<SortableImageGrid
onDrop={onFileDrop}
onSortEnd={onImageMove}
@ -261,7 +265,7 @@ const CommentFormUnconnected: FC<IProps> = memo(
/>
)}
{(!!audios.length || !!locked_audios.length) && (
{hasAudioAttaches && (
<SortableAudioGrid
items={audios}
onDrop={onFileDrop}

15
src/components/node/Tag/index.tsx
View file

@ -1,7 +1,6 @@
import React, { FC, ChangeEventHandler, KeyboardEventHandler, FocusEventHandler } from 'react';
import React, { ChangeEventHandler, FC, FocusEventHandler, KeyboardEventHandler } from 'react';
import * as styles from './styles.scss';
import { ITag } from '~/redux/types';
import classNames = require('classnames');
const getTagFeature = (tag: Partial<ITag>) => {
@ -14,13 +13,21 @@ interface IProps {
tag: Partial<ITag>;
is_hoverable?: boolean;
is_editing?: boolean;
onInput?: ChangeEventHandler<HTMLInputElement>;
onKeyUp?: KeyboardEventHandler;
onBlur?: FocusEventHandler<HTMLInputElement>;
}
const Tag: FC<IProps> = ({ tag, is_hoverable, onInput, onKeyUp, onBlur }) => (
<div className={classNames(styles.tag, getTagFeature(tag), { is_hoverable, input: !!onInput })}>
const Tag: FC<IProps> = ({ tag, is_hoverable, is_editing, onInput, onKeyUp, onBlur }) => (
<div
className={classNames(styles.tag, getTagFeature(tag), {
is_hoverable,
is_editing,
input: !!onInput,
})}
>
<div className={styles.hole} />
<div className={styles.title}>{tag.title}</div>

6
src/components/node/Tag/styles.scss
View file

@ -11,7 +11,6 @@
font: $font_14_semibold;
align-self: flex-start;
padding: 0 8px 0 0;
// box-shadow: $shadow_depth_2;
margin: 0 $gap $gap 0;
position: relative;
@ -19,6 +18,11 @@
cursor: pointer;
}
&:global(.is_editing) {
cursor: pointer;
background-color: lighten($tag_bg, 10%);
}
&:global(.red) {
background: $red_gradient;
}

10
src/components/node/Tags/index.tsx
View file

@ -77,9 +77,15 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props })
const onSubmit = useCallback(() => {
const title = input && input.trim();
const items = title ? [...data, { title }] : data;
const items = (title ? [...data, { title }] : data)
.filter(tag => tag.title.length > 0)
.map(tag => ({
...tag,
title: tag.title.toLowerCase(),
}));
if (!items.length) return;
setData(items);
setInput('');
onTagsChange(uniq([...tags, ...items]).map(tag => tag.title));
@ -100,7 +106,7 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props })
))}
{data.map(tag => (
<Tag key={tag.title} tag={tag} />
<Tag key={tag.title} tag={tag} is_editing />
))}
{is_editable && (

3
src/redux/node/sagas.ts
View file

@ -240,7 +240,8 @@ function* onCancelCommentEdit({ id }: ReturnType<typeof nodeCancelCommentEdit>)
}
function* onUpdateTags({ id, tags }: ReturnType<typeof nodeUpdateTags>) {
yield delay(1000);
yield delay(100);
const {
data: { node },
}: IResultWithStatus<{ node: INode }> = yield call(reqWrapper, updateNodeTags, { id, tags });

81
src/redux/uploads/sagas.ts
View file

@ -1,49 +1,37 @@
import {
takeEvery,
all,
spawn,
call,
put,
take,
fork,
race
} from "redux-saga/effects";
import { postUploadFile } from "./api";
import { UPLOAD_ACTIONS, FILE_MIMES } from "~/redux/uploads/constants";
import { takeEvery, all, spawn, call, put, take, fork, race } from 'redux-saga/effects';
import { postUploadFile } from './api';
import { UPLOAD_ACTIONS, FILE_MIMES } from '~/redux/uploads/constants';
import {
uploadUploadFiles,
uploadSetStatus,
uploadAddStatus,
uploadDropStatus,
uploadAddFile
} from "./actions";
import { reqWrapper } from "../auth/sagas";
import { createUploader, uploadGetThumb } from "~/utils/uploader";
import { HTTP_RESPONSES } from "~/utils/api";
import { IFileWithUUID, IFile, IUploadProgressHandler } from "../types";
uploadAddFile,
} from './actions';
import { reqWrapper } from '../auth/sagas';
import { createUploader, uploadGetThumb } from '~/utils/uploader';
import { HTTP_RESPONSES } from '~/utils/api';
import { IFileWithUUID, IFile, IUploadProgressHandler } from '../types';
function* uploadCall({
file,
temp_id,
target,
type,
onProgress
onProgress,
}: IFileWithUUID & { onProgress: IUploadProgressHandler }) {
return yield call(reqWrapper, postUploadFile, {
file,
temp_id,
type,
target,
onProgress
onProgress,
});
}
function* onUploadProgress(chan) {
while (true) {
const {
progress,
temp_id
}: { progress: number; temp_id: string } = yield take(chan);
const { progress, temp_id }: { progress: number; temp_id: string } = yield take(chan);
yield put(uploadSetStatus(temp_id, { progress }));
}
@ -59,10 +47,10 @@ function* uploadCancelWorker(id) {
}
function* uploadWorker({ file, temp_id, target, type }: IFileWithUUID) {
const [promise, chan] = createUploader<
Partial<IFileWithUUID>,
Partial<IFileWithUUID>
>(uploadCall, { temp_id, target, type });
const [promise, chan] = createUploader<Partial<IFileWithUUID>, Partial<IFileWithUUID>>(
uploadCall,
{ temp_id, target, type }
);
yield fork(onUploadProgress, chan);
@ -70,23 +58,16 @@ function* uploadWorker({ file, temp_id, target, type }: IFileWithUUID) {
temp_id,
file,
target,
type
type,
});
}
function* uploadFile({
file,
temp_id,
type,
target,
onSuccess,
onFail
}: IFileWithUUID) {
if (!file.type || !file.type || !FILE_MIMES[type].includes(file.type)) {
function* uploadFile({ file, temp_id, type, target, onSuccess, onFail }: IFileWithUUID) {
if (!file.type || !FILE_MIMES[type] || !FILE_MIMES[type].includes(file.type)) {
return {
error: "File_Not_Image",
error: 'File_Not_Image',
status: HTTP_RESPONSES.BAD_REQUEST,
data: {}
data: {},
};
}
@ -99,10 +80,9 @@ function* uploadFile({
{
preview,
is_uploading: true,
// type: file.type,
temp_id,
type,
name: file.name
name: file.name,
}
)
);
@ -112,13 +92,9 @@ function* uploadFile({
file,
temp_id,
target,
type
type,
}),
cancel: call(uploadCancelWorker, temp_id)
// subject_cancel: call(uploadSubjectCancelWorker, subject)
// add here CANCEL_UPLOADS worker, that will watch for subject
// cancel_editing: take(UPLOAD_ACTIONS.CANCEL_EDITING),
// save_inventory: take(INVENTORY_ACTIONS.SAVE_INVENTORY),
cancel: call(uploadCancelWorker, temp_id),
});
if (cancel || cancel_editing) {
@ -126,10 +102,7 @@ function* uploadFile({
return yield put(uploadDropStatus(temp_id));
}
const {
data,
error
}: { data: IFile & { detail: string }; error: string } = result;
const { data, error }: { data: IFile & { detail: string }; error: string } = result;
if (error) {
if (onFail) onFail();
@ -138,7 +111,7 @@ function* uploadFile({
uploadSetStatus(temp_id, {
is_uploading: false,
error: data.detail || error,
type
type,
})
);
}
@ -152,7 +125,7 @@ function* uploadFile({
type,
thumbnail_url: data.full_path,
progress: 1,
name: file.name
name: file.name,
})
);