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

removed messages reducer

Browse source
This commit is contained in:
Fedor Katurov 2022-01-08 16:40:48 +07:00
parent 82308d2a91
commit 5849e68258
61 changed files with 314 additions and 898 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/boris/BorisContactItem/index.tsx
View file

@ -1,6 +1,6 @@
import React, { FC } from 'react';
import styles from './styles.module.scss';
import { Icon } from '~/components/input/Icon';
import React, { FC } from "react";
import styles from "./styles.module.scss";
import { Icon } from "~/components/input/Icon";
interface Props {
icon: string;

10
src/components/boris/BorisStatsGit/index.tsx
View file

@ -1,8 +1,8 @@
import React, { FC, useMemo } from 'react';
import { GithubIssue } from '~/types/boris';
import styles from './styles.module.scss';
import { Placeholder } from '~/components/placeholders/Placeholder';
import { BorisStatsGitCard } from '../BorisStatsGitCard';
import React, { FC, useMemo } from "react";
import { GithubIssue } from "~/types/boris";
import styles from "./styles.module.scss";
import { Placeholder } from "~/components/placeholders/Placeholder";
import { BorisStatsGitCard } from "../BorisStatsGitCard";
interface IProps {
issues: GithubIssue[];

10
src/components/boris/BorisStatsGitCard/index.tsx
View file

@ -1,8 +1,8 @@
import React, { FC, useMemo } from 'react';
import styles from './styles.module.scss';
import { getPrettyDate } from '~/utils/dom';
import { GithubIssue } from '~/types/boris';
import classNames from 'classnames';
import React, { FC, useMemo } from "react";
import styles from "./styles.module.scss";
import { getPrettyDate } from "~/utils/dom";
import { GithubIssue } from "~/types/boris";
import classNames from "classnames";
interface IProps {
data: GithubIssue;

12
src/components/comment/CommentEmbedBlock/index.tsx
View file

@ -1,9 +1,9 @@
import React, { FC, memo, useMemo } from 'react';
import { ICommentBlockProps } from '~/constants/comment';
import styles from './styles.module.scss';
import { getYoutubeThumb } from '~/utils/dom';
import { Icon } from '~/components/input/Icon';
import { useYoutubeMetadata } from '~/hooks/metadata/useYoutubeMetadata';
import React, { FC, memo, useMemo } from "react";
import { ICommentBlockProps } from "~/constants/comment";
import styles from "./styles.module.scss";
import { getYoutubeThumb } from "~/utils/dom";
import { Icon } from "~/components/input/Icon";
import { useYoutubeMetadata } from "~/hooks/metadata/useYoutubeMetadata";
type Props = ICommentBlockProps & {};

10
src/components/comment/CommentFormFormatButtons/index.tsx
View file

@ -1,8 +1,8 @@
import React, { FC, useCallback, useEffect } from 'react';
import { ButtonGroup } from '~/components/input/ButtonGroup';
import { Button } from '~/components/input/Button';
import { useFormatWrapper, wrapTextInsideInput } from '~/hooks/dom/useFormatWrapper';
import styles from './styles.module.scss';
import React, { FC, useCallback, useEffect } from "react";
import { ButtonGroup } from "~/components/input/ButtonGroup";
import { Button } from "~/components/input/Button";
import { useFormatWrapper, wrapTextInsideInput } from "~/hooks/dom/useFormatWrapper";
import styles from "./styles.module.scss";
interface IProps {
element: HTMLTextAreaElement;

12
src/components/containers/CoverBackdrop/index.tsx
View file

@ -1,9 +1,9 @@
import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import { IUser } from '~/redux/auth/types';
import styles from './styles.module.scss';
import { getURL } from '~/utils/dom';
import { PRESETS } from '~/constants/urls';
import classNames from 'classnames';
import React, { FC, useCallback, useEffect, useRef, useState } from "react";
import { IUser } from "~/redux/auth/types";
import styles from "./styles.module.scss";
import { getURL } from "~/utils/dom";
import { PRESETS } from "~/constants/urls";
import classNames from "classnames";
interface IProps {
cover: IUser['cover'];

4
src/components/containers/Sticky/index.tsx
View file

@ -1,5 +1,5 @@
import React, { DetailsHTMLAttributes, FC } from 'react';
import StickyBox from 'react-sticky-box';
import React, { DetailsHTMLAttributes, FC } from "react";
import StickyBox from "react-sticky-box";
interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {
offsetTop?: number;

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

@ -1,12 +1,12 @@
import React, { FC, useCallback } from 'react';
import { SortEnd } from 'react-sortable-hoc';
import { IFile } from '~/redux/types';
import { moveArrItem } from '~/utils/fn';
import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
import React, { FC, useCallback } from "react";
import { SortEnd } from "react-sortable-hoc";
import { IFile } from "~/redux/types";
import { moveArrItem } from "~/utils/fn";
import { SortableAudioGrid } from "~/components/editors/SortableAudioGrid";
import styles from './styles.module.scss';
import { UploadStatus } from '~/store/uploader/UploaderStore';
import { useWindowSize } from '~/hooks/dom/useWindowSize';
import styles from "./styles.module.scss";
import { UploadStatus } from "~/store/uploader/UploaderStore";
import { useWindowSize } from "~/hooks/dom/useWindowSize";
interface IProps {
files: IFile[];

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

@ -1,13 +1,13 @@
import React, { ChangeEvent, FC, useCallback, useEffect } from 'react';
import styles from './styles.module.scss';
import { UploadSubject, UploadTarget, UploadType } from '~/constants/uploads';
import { getURL } from '~/utils/dom';
import { Icon } from '~/components/input/Icon';
import { PRESETS } from '~/constants/urls';
import { IEditorComponentProps } from '~/types/node';
import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
import { getFileType } from '~/utils/uploader';
import { useUploader } from '~/hooks/data/useUploader';
import React, { ChangeEvent, FC, useCallback, useEffect } from "react";
import styles from "./styles.module.scss";
import { UploadSubject, UploadTarget, UploadType } from "~/constants/uploads";
import { getURL } from "~/utils/dom";
import { Icon } from "~/components/input/Icon";
import { PRESETS } from "~/constants/urls";
import { IEditorComponentProps } from "~/types/node";
import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik";
import { getFileType } from "~/utils/uploader";
import { useUploader } from "~/hooks/data/useUploader";
type IProps = IEditorComponentProps & {};

16
src/components/editors/ImageGrid/index.tsx
View file

@ -1,11 +1,11 @@
import React, { FC, useCallback } from 'react';
import { SortEnd } from 'react-sortable-hoc';
import styles from './styles.module.scss';
import { IFile } from '~/redux/types';
import { moveArrItem } from '~/utils/fn';
import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
import { UploadStatus } from '~/store/uploader/UploaderStore';
import { useWindowSize } from '~/hooks/dom/useWindowSize';
import React, { FC, useCallback } from "react";
import { SortEnd } from "react-sortable-hoc";
import styles from "./styles.module.scss";
import { IFile } from "~/redux/types";
import { moveArrItem } from "~/utils/fn";
import { SortableImageGrid } from "~/components/editors/SortableImageGrid";
import { UploadStatus } from "~/store/uploader/UploaderStore";
import { useWindowSize } from "~/hooks/dom/useWindowSize";
interface IProps {
files: IFile[];

2
src/components/main/GodRays/index.tsx
View file

@ -1,4 +1,4 @@
import * as React from 'react';
import * as React from "react";
interface IGodRaysProps {
raised?: boolean;

8
src/components/main/SidePane/index.tsx
View file

@ -1,7 +1,7 @@
import React, { FC, useCallback, useEffect, useState } from 'react';
import classNames from 'classnames';
import styles from './styles.module.scss';
import { Group } from '~/components/containers/Group';
import React, { FC, useCallback, useEffect, useState } from "react";
import classNames from "classnames";
import styles from "./styles.module.scss";
import { Group } from "~/components/containers/Group";
interface IProps {}

4
src/components/node/NodeDeletedBadge/index.tsx
View file

@ -1,5 +1,5 @@
import React, { FC } from 'react';
import styles from './styles.module.scss';
import React, { FC } from "react";
import styles from "./styles.module.scss";
interface IProps {}

6
src/components/node/NodeTagsBlock/index.tsx
View file

@ -1,6 +1,6 @@
import React, { FC } from 'react';
import { NodeTags } from '~/components/node/NodeTags';
import { useTagContext } from '~/utils/context/TagsContextProvider';
import React, { FC } from "react";
import { NodeTags } from "~/components/node/NodeTags";
import { useTagContext } from "~/utils/context/TagsContextProvider";
interface IProps {}

8
src/components/node/NodeVideoBlock/index.tsx
View file

@ -1,7 +1,7 @@
import React, { FC, useMemo } from 'react';
import styles from './styles.module.scss';
import { path } from 'ramda';
import { INodeComponentProps } from '~/constants/node';
import React, { FC, useMemo } from "react";
import styles from "./styles.module.scss";
import { path } from "ramda";
import { INodeComponentProps } from "~/constants/node";
interface IProps extends INodeComponentProps {}

68
src/components/profile/Message/index.tsx
View file

@ -1,78 +1,26 @@
import React, { FC, useCallback } from "react";
import React, { FC } from "react";
import { IMessage } from "~/redux/types";
import styles from "./styles.module.scss";
import { formatText, getPrettyDate, getURL } from "~/utils/dom";
import { PRESETS } from "~/constants/urls";
import classNames from "classnames";
import { Group } from "~/components/containers/Group";
import { CommentMenu } from "~/components/comment/CommentMenu";
import { MessageForm } from "~/components/profile/MessageForm";
import { Filler } from "~/components/containers/Filler";
import { Button } from "~/components/input/Button";
import markdown from "~/styles/common/markdown.module.scss";
interface IProps {
message: IMessage;
incoming: boolean;
onEdit: (id: number) => void;
onDelete: (id: number) => void;
onRestore: (id: number) => void;
onCancelEdit: () => void;
isEditing: boolean;
}
const Message: FC<IProps> = ({
message,
incoming,
onEdit,
onDelete,
isEditing,
onCancelEdit,
onRestore,
}) => {
const onEditClicked = useCallback(() => onEdit(message.id), [onEdit, message.id]);
const onDeleteClicked = useCallback(() => onDelete(message.id), [onDelete, message.id]);
const onRestoreClicked = useCallback(() => onRestore(message.id), [onRestore, message.id]);
if (message.deleted_at) {
return (
<div className={classNames(styles.message)}>
<Group className={styles.deleted} horizontal>
<Filler>Сообщение удалено</Filler>
<Button
size="mini"
onClick={onRestoreClicked}
color="link"
iconLeft="restore"
className={styles.restore}
>
Восстановить
</Button>
</Group>
<div
className={styles.avatar}
style={{ backgroundImage: `url("${getURL(message.from.photo, PRESETS.avatar)}")` }}
/>
</div>
);
}
const Message: FC<IProps> = ({ message, incoming }) => {
return (
<div className={classNames(styles.message, { [styles.incoming]: incoming })}>
{isEditing ? (
<div className={styles.form}>
<MessageForm id={message.id} text={message.text} onCancel={onCancelEdit} />
</div>
) : (
<div className={styles.text}>
{!incoming && <CommentMenu onEdit={onEditClicked} onDelete={onDeleteClicked} />}
<Group
dangerouslySetInnerHTML={{ __html: formatText(message.text) }}
className={markdown.wrapper}
/>
</div>
)}
<div className={styles.text}>
<Group
dangerouslySetInnerHTML={{ __html: formatText(message.text) }}
className={markdown.wrapper}
/>
</div>
<div
className={styles.avatar}

4
src/components/profile/Message/styles.module.scss
View file

@ -11,10 +11,6 @@ $outgoing_color: $comment_bg;
position: relative;
word-break: break-word;
.avatar {
// margin: 0 0 0 10px;
}
&::before {
position: absolute;
content: '';

106
src/components/profile/MessageForm/index.tsx
View file

@ -1,106 +0,0 @@
import React, { FC, KeyboardEventHandler, useCallback, useMemo, useState } from 'react';
import styles from './styles.module.scss';
import { Textarea } from '~/components/input/Textarea';
import { Filler } from '~/components/containers/Filler';
import { Button } from '~/components/input/Button';
import { Group } from '~/components/containers/Group';
import { connect } from 'react-redux';
import { LoaderCircle } from '~/components/input/LoaderCircle';
import * as MESSAGES_ACTIONS from '~/redux/messages/actions';
import { ERROR_LITERAL } from '~/constants/errors';
import { selectMessages } from '~/redux/messages/selectors';
const mapStateToProps = state => ({
messages: selectMessages(state),
});
const mapDispatchToProps = {
messagesSendMessage: MESSAGES_ACTIONS.messagesSendMessage,
};
type IProps = ReturnType<typeof mapStateToProps> &
typeof mapDispatchToProps & {
id?: number;
text?: string;
onCancel?: () => void;
};
const MessageFormUnconnected: FC<IProps> = ({
messages: { is_sending_messages, is_loading_messages, error },
messagesSendMessage,
id = 0,
text: initialText = '',
onCancel,
}) => {
const isEditing = useMemo(() => id > 0, [id]);
const [text, setText] = useState(initialText);
const onSuccess = useCallback(() => {
setText('');
if (isEditing && onCancel) {
onCancel();
}
}, [setText, isEditing, onCancel]);
const onSubmit = useCallback(() => {
messagesSendMessage({ text, id }, onSuccess);
}, [messagesSendMessage, text, id, onSuccess]);
const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
({ ctrlKey, key }) => {
if (ctrlKey && key === 'Enter') onSubmit();
},
[onSubmit]
);
return (
<div className={styles.wrap}>
{error && <div className={styles.error}>{ERROR_LITERAL[error]}</div>}
{is_loading_messages && !error && (
<Group className={styles.loader} horizontal>
<LoaderCircle size={20} />
<div>Обновляем</div>
</Group>
)}
<Group className={styles.content}>
<Textarea
value={text}
handler={setText}
minRows={1}
maxRows={isEditing ? 15 : 5}
onKeyDown={onKeyDown}
disabled={is_sending_messages}
autoFocus
/>
<Group className={styles.buttons} horizontal>
<Filler />
{is_sending_messages && <LoaderCircle size={20} />}
{isEditing && (
<Button size="small" color="link" onClick={onCancel}>
Отмена
</Button>
)}
<Button
size="small"
color="gray"
iconRight="enter"
disabled={is_sending_messages}
onClick={onSubmit}
>
{isEditing ? 'Схоронить' : 'Сказать'}
</Button>
</Group>
</Group>
</div>
);
};
const MessageForm = connect(mapStateToProps, mapDispatchToProps)(MessageFormUnconnected);
export { MessageForm };

61
src/components/profile/MessageForm/styles.module.scss
View file

@ -1,61 +0,0 @@
@import "src/styles/variables";
.wrap {
@include outer_shadow();
padding: $gap;
background: $content_bg;
textarea {
padding-bottom: 0 !important;
}
}
.content {
@include inner_shadow();
background: $input_bg_color;
border-radius: $radius;
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
padding: 0 $gap / 2 $gap / 2 $gap / 2;
border-radius: 0 0 $radius $radius;
:global(.loader-circle) {
svg {
fill: $wisegreen;
}
}
}
.error {
position: absolute;
top: 100%;
padding: 10px;
left: 5%;
width: 90%;
background: linear-gradient($red, transparentize($red, 0.1));
z-index: 1;
box-sizing: border-box;
text-align: center;
border-radius: 0 0 $radius $radius;
}
.loader {
position: absolute;
right: 50%;
bottom: 0;
z-index: 2;
padding: $gap;
text-transform: uppercase;
background: $wisegreen;
border-radius: $radius;
transform: translate(50%, -10px);
svg {
fill: white;
}
}