From b11593c45e962774f03672b4961d17cb0835f704 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Wed, 26 Aug 2020 18:30:01 +0700 Subject: [PATCH] fixed audio attaches --- .../editors/SortableAudioGrid/index.tsx | 8 +- src/components/node/CommentForm/index.tsx | 14 ++-- src/components/node/Tag/index.tsx | 15 +++- src/components/node/Tag/styles.scss | 6 +- src/components/node/Tags/index.tsx | 10 ++- src/redux/node/sagas.ts | 3 +- src/redux/uploads/sagas.ts | 81 +++++++------------ 7 files changed, 68 insertions(+), 69 deletions(-) diff --git a/src/components/editors/SortableAudioGrid/index.tsx b/src/components/editors/SortableAudioGrid/index.tsx index 98a40cb3..cb919d95 100644 --- a/src/components/editors/SortableAudioGrid/index.tsx +++ b/src/components/editors/SortableAudioGrid/index.tsx @@ -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 (
{items .filter(file => file && file.id) @@ -34,7 +37,8 @@ const SortableAudioGrid = SortableContainer( ))}
- ) + ); + } ); export { SortableAudioGrid }; diff --git a/src/components/node/CommentForm/index.tsx b/src/components/node/CommentForm/index.tsx index 4b9ce225..b9bc991d 100644 --- a/src/components/node/CommentForm/index.tsx +++ b/src/components/node/CommentForm/index.tsx @@ -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 = 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 (
@@ -246,9 +250,9 @@ const CommentFormUnconnected: FC = memo( />
- {(!!images.length || !!audios.length) && ( + {hasAttaches && (
- {!!images.length && ( + {hasImageAttaches && ( = memo( /> )} - {(!!audios.length || !!locked_audios.length) && ( + {hasAudioAttaches && ( ) => { @@ -14,13 +13,21 @@ interface IProps { tag: Partial; is_hoverable?: boolean; + is_editing?: boolean; + onInput?: ChangeEventHandler; onKeyUp?: KeyboardEventHandler; onBlur?: FocusEventHandler; } -const Tag: FC = ({ tag, is_hoverable, onInput, onKeyUp, onBlur }) => ( -
+const Tag: FC = ({ tag, is_hoverable, is_editing, onInput, onKeyUp, onBlur }) => ( +
{tag.title}
diff --git a/src/components/node/Tag/styles.scss b/src/components/node/Tag/styles.scss index 238aff8c..d5280c5c 100644 --- a/src/components/node/Tag/styles.scss +++ b/src/components/node/Tag/styles.scss @@ -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; } diff --git a/src/components/node/Tags/index.tsx b/src/components/node/Tags/index.tsx index 61e4c2ea..eafb933f 100644 --- a/src/components/node/Tags/index.tsx +++ b/src/components/node/Tags/index.tsx @@ -77,9 +77,15 @@ export const Tags: FC = ({ 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 = ({ tags, is_editable, onTagsChange, ...props }) ))} {data.map(tag => ( - + ))} {is_editable && ( diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts index c67720b3..d6800a17 100644 --- a/src/redux/node/sagas.ts +++ b/src/redux/node/sagas.ts @@ -240,7 +240,8 @@ function* onCancelCommentEdit({ id }: ReturnType) } function* onUpdateTags({ id, tags }: ReturnType) { - yield delay(1000); + yield delay(100); + const { data: { node }, }: IResultWithStatus<{ node: INode }> = yield call(reqWrapper, updateNodeTags, { id, tags }); diff --git a/src/redux/uploads/sagas.ts b/src/redux/uploads/sagas.ts index 21cbba33..b24ada1c 100644 --- a/src/redux/uploads/sagas.ts +++ b/src/redux/uploads/sagas.ts @@ -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, - Partial - >(uploadCall, { temp_id, target, type }); + const [promise, chan] = createUploader, Partial>( + 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, }) );