muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +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

20
src/containers/boris/BorisComments/index.tsx
View file

@ -1,13 +1,13 @@
import React, { FC } from "react";
import styles from "./styles.module.scss";
import { Group } from "~/components/containers/Group";
import { NodeCommentForm } from "~/components/node/NodeCommentForm";
import { NodeNoComments } from "~/components/node/NodeNoComments";
import { NodeComments } from "~/containers/node/NodeComments";
import { Footer } from "~/components/main/Footer";
import { CommentContextProvider, useCommentContext } from "~/utils/context/CommentContextProvider";
import { useUserContext } from "~/utils/context/UserContextProvider";
import { useNodeContext } from "~/utils/context/NodeContextProvider";
import React, { FC } from 'react';
import styles from './styles.module.scss';
import { Group } from '~/components/containers/Group';
import { NodeCommentForm } from '~/components/node/NodeCommentForm';
import { NodeNoComments } from '~/components/node/NodeNoComments';
import { NodeComments } from '~/containers/node/NodeComments';
import { Footer } from '~/components/main/Footer';
import { CommentContextProvider, useCommentContext } from '~/utils/context/CommentContextProvider';
import { useUserContext } from '~/utils/context/UserContextProvider';
import { useNodeContext } from '~/utils/context/NodeContextProvider';
interface IProps {}

10
src/containers/dialogs/BetterScrollDialog/index.tsx
View file

@ -1,8 +1,8 @@
import React, { FC, MouseEventHandler, useEffect, useRef } from "react";
import styles from "./styles.module.scss";
import { clearAllBodyScrollLocks, disableBodyScroll } from "body-scroll-lock";
import { Icon } from "~/components/input/Icon";
import { LoaderCircle } from "~/components/input/LoaderCircle";
import React, { FC, MouseEventHandler, useEffect, useRef } from 'react';
import styles from './styles.module.scss';
import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
import { Icon } from '~/components/input/Icon';
import { LoaderCircle } from '~/components/input/LoaderCircle';
interface IProps {
children: React.ReactChild;

38
src/containers/dialogs/EditorDialog/index.tsx
View file

@ -1,22 +1,22 @@
import React, { createElement, FC, useCallback, useMemo, useState } from "react";
import styles from "./styles.module.scss";
import { NODE_EDITORS } from "~/constants/node";
import { BetterScrollDialog } from "../BetterScrollDialog";
import { CoverBackdrop } from "~/components/containers/CoverBackdrop";
import { prop } from "ramda";
import { useNodeFormFormik } from "~/hooks/node/useNodeFormFormik";
import { EditorButtons } from "~/components/editors/EditorButtons";
import { UploadSubject, UploadTarget } from "~/constants/uploads";
import { FormikProvider } from "formik";
import { INode } from "~/redux/types";
import { ModalWrapper } from "~/components/dialogs/ModalWrapper";
import { useTranslatedError } from "~/hooks/data/useTranslatedError";
import { useCloseOnEscape } from "~/hooks";
import { EditorConfirmClose } from "~/components/editors/EditorConfirmClose";
import { IDialogProps } from "~/types/modal";
import { useUploader } from "~/hooks/data/useUploader";
import { UploaderContextProvider } from "~/utils/context/UploaderContextProvider";
import { observer } from "mobx-react-lite";
import React, { createElement, FC, useCallback, useMemo, useState } from 'react';
import styles from './styles.module.scss';
import { NODE_EDITORS } from '~/constants/node';
import { BetterScrollDialog } from '../BetterScrollDialog';
import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
import { prop } from 'ramda';
import { useNodeFormFormik } from '~/hooks/node/useNodeFormFormik';
import { EditorButtons } from '~/components/editors/EditorButtons';
import { UploadSubject, UploadTarget } from '~/constants/uploads';
import { FormikProvider } from 'formik';
import { INode } from '~/redux/types';
import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
import { useTranslatedError } from '~/hooks/data/useTranslatedError';
import { useCloseOnEscape } from '~/hooks';
import { EditorConfirmClose } from '~/components/editors/EditorConfirmClose';
import { IDialogProps } from '~/types/modal';
import { useUploader } from '~/hooks/data/useUploader';
import { UploaderContextProvider } from '~/utils/context/UploaderContextProvider';
import { observer } from 'mobx-react-lite';
interface Props extends IDialogProps {
node: INode;

2
src/containers/dialogs/LoadingDialog/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, VFC } from 'react';
import React, { VFC } from 'react';
import { LoaderCircle } from '~/components/input/LoaderCircle';
import styles from './styles.module.scss';

12
src/containers/dialogs/LoginDialogButtons/index.tsx
View file

@ -1,9 +1,9 @@
import React, { FC, MouseEventHandler } from "react";
import { Button } from "~/components/input/Button";
import { Grid } from "~/components/containers/Grid";
import { Group } from "~/components/containers/Group";
import styles from "./styles.module.scss";
import { ISocialProvider } from "~/redux/auth/types";
import React, { FC, MouseEventHandler } from 'react';
import { Button } from '~/components/input/Button';
import { Grid } from '~/components/containers/Grid';
import { Group } from '~/components/containers/Group';
import styles from './styles.module.scss';
import { ISocialProvider } from '~/redux/auth/types';
interface IProps {
openOauthWindow: (provider: ISocialProvider) => MouseEventHandler;

6
src/containers/dialogs/LoginSocialRegisterButtons/index.tsx
View file

@ -1,6 +1,6 @@
import React, { FC } from "react";
import { Button } from "~/components/input/Button";
import styles from "./styles.module.scss";
import React, { FC } from 'react';
import { Button } from '~/components/input/Button';
import styles from './styles.module.scss';
interface IProps {}

9
src/containers/dialogs/ProfileDialog/index.tsx
View file

@ -7,7 +7,6 @@ import * as AUTH_ACTIONS from '~/redux/auth/actions';
import { IAuthState } from '~/redux/auth/types';
import { pick } from 'ramda';
import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
import { MessageForm } from '~/components/profile/MessageForm';
import { Tabs } from '~/components/dialogs/Tabs';
import { ProfileDescription } from '~/components/profile/ProfileDescription';
import { ProfileMessages } from '~/containers/profile/ProfileMessages';
@ -26,13 +25,9 @@ const mapDispatchToProps = {
type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
const PROFILE_HEADERS = {
// messages: <MessageForm />,
};
const PROFILE_HEADERS = {};
const PROFILE_FOOTERS = {
messages: <MessageForm />,
};
const PROFILE_FOOTERS = {};
const ProfileDialogUnconnected: FC<IProps> = ({
onRequestClose,

4
src/containers/dialogs/RestoreRequestDialog/index.tsx
View file

@ -1,5 +1,5 @@
import React, { FC, useCallback, useEffect, useMemo, useState, VFC } from 'react';
import { connect, useDispatch } from 'react-redux';
import React, { useCallback, useEffect, useMemo, useState, VFC } from 'react';
import { useDispatch } from 'react-redux';
import { BetterScrollDialog } from '../BetterScrollDialog';
import { Group } from '~/components/containers/Group';
import { InputText } from '~/components/input/InputText';

26
src/containers/flow/FlowStamp/index.tsx
View file

@ -1,17 +1,17 @@
import React, { FC, FormEvent, useCallback, useMemo } from "react";
import { InputText } from "~/components/input/InputText";
import { FlowRecent } from "~/components/flow/FlowRecent";
import React, { FC, FormEvent, useCallback, useMemo } from 'react';
import { InputText } from '~/components/input/InputText';
import { FlowRecent } from '~/components/flow/FlowRecent';
import styles from "~/containers/flow/FlowStamp/styles.module.scss";
import { FlowSearchResults } from "~/components/flow/FlowSearchResults";
import { Icon } from "~/components/input/Icon";
import { Group } from "~/components/containers/Group";
import { Toggle } from "~/components/input/Toggle";
import classNames from "classnames";
import { Superpower } from "~/components/boris/Superpower";
import { experimentalFeatures } from "~/constants/features";
import { useSearchContext } from "~/utils/providers/SearchProvider";
import { useFlowContext } from "~/utils/context/FlowContextProvider";
import styles from '~/containers/flow/FlowStamp/styles.module.scss';
import { FlowSearchResults } from '~/components/flow/FlowSearchResults';
import { Icon } from '~/components/input/Icon';
import { Group } from '~/components/containers/Group';
import { Toggle } from '~/components/input/Toggle';
import classNames from 'classnames';
import { Superpower } from '~/components/boris/Superpower';
import { experimentalFeatures } from '~/constants/features';
import { useSearchContext } from '~/utils/providers/SearchProvider';
import { useFlowContext } from '~/utils/context/FlowContextProvider';
interface IProps {
isFluid: boolean;

18
src/containers/lab/LabStats/index.tsx
View file

@ -1,12 +1,12 @@
import React, { FC } from "react";
import styles from "./styles.module.scss";
import { LabBanner } from "~/components/lab/LabBanner";
import { Group } from "~/components/containers/Group";
import { LabTags } from "~/components/lab/LabTags";
import { LabHeroes } from "~/components/lab/LabHeroes";
import { FlowRecentItem } from "~/components/flow/FlowRecentItem";
import { SubTitle } from "~/components/common/SubTitle";
import { useLabContext } from "~/utils/context/LabContextProvider";
import React, { FC } from 'react';
import styles from './styles.module.scss';
import { LabBanner } from '~/components/lab/LabBanner';
import { Group } from '~/components/containers/Group';
import { LabTags } from '~/components/lab/LabTags';
import { LabHeroes } from '~/components/lab/LabHeroes';
import { FlowRecentItem } from '~/components/flow/FlowRecentItem';
import { SubTitle } from '~/components/common/SubTitle';
import { useLabContext } from '~/utils/context/LabContextProvider';
interface IProps {}

6
src/containers/main/BottomContainer/index.tsx
View file

@ -1,6 +1,6 @@
import React, { FC } from "react";
import styles from "./styles.module.scss";
import { PlayerView } from "~/containers/player/PlayerView";
import React, { FC } from 'react';
import styles from './styles.module.scss';
import { PlayerView } from '~/containers/player/PlayerView';
type IProps = {};

6
src/containers/main/Container/index.tsx
View file

@ -1,6 +1,6 @@
import React, { FC } from "react";
import styles from "./styles.module.scss";
import classNames from "classnames";
import React, { FC } from 'react';
import styles from './styles.module.scss';
import classNames from 'classnames';
interface IProps {
className?: string;

22
src/containers/main/MainRouter/index.tsx
View file

@ -1,14 +1,14 @@
import React, { FC } from "react";
import { URLS } from "~/constants/urls";
import { ErrorNotFound } from "~/containers/pages/ErrorNotFound";
import { Redirect, Route, Switch, useLocation } from "react-router";
import { useShallowSelect } from "~/hooks/data/useShallowSelect";
import { selectAuthUser } from "~/redux/auth/selectors";
import { ProfileLayout } from "~/layouts/ProfileLayout";
import FlowPage from "~/pages";
import BorisPage from "~/pages/boris";
import NodePage from "~/pages/node/[id]";
import LabPage from "~/pages/lab";
import React, { FC } from 'react';
import { URLS } from '~/constants/urls';
import { ErrorNotFound } from '~/containers/pages/ErrorNotFound';
import { Redirect, Route, Switch, useLocation } from 'react-router';
import { useShallowSelect } from '~/hooks/data/useShallowSelect';
import { selectAuthUser } from '~/redux/auth/selectors';
import { ProfileLayout } from '~/layouts/ProfileLayout';
import FlowPage from '~/pages';
import BorisPage from '~/pages/boris';
import NodePage from '~/pages/node/[id]';
import LabPage from '~/pages/lab';
interface IProps {}

16
src/containers/main/SidebarRouter/index.tsx
View file

@ -1,11 +1,11 @@
import React, { FC } from "react";
import { createPortal } from "react-dom";
import { Route, Switch } from "react-router";
import { TagSidebar } from "~/containers/sidebars/TagSidebar";
import { ProfileSidebar } from "~/containers/sidebars/ProfileSidebar";
import { Authorized } from "~/components/containers/Authorized";
import { SubmitBar } from "~/components/bars/SubmitBar";
import { EditorCreateDialog } from "~/containers/dialogs/EditorCreateDialog";
import React, { FC } from 'react';
import { createPortal } from 'react-dom';
import { Route, Switch } from 'react-router';
import { TagSidebar } from '~/containers/sidebars/TagSidebar';
import { ProfileSidebar } from '~/containers/sidebars/ProfileSidebar';
import { Authorized } from '~/components/containers/Authorized';
import { SubmitBar } from '~/components/bars/SubmitBar';
import { EditorCreateDialog } from '~/containers/dialogs/EditorCreateDialog';
interface IProps {
prefix?: string;

18
src/containers/node/NodeComments/index.tsx
View file

@ -1,13 +1,13 @@
import React, { FC, memo, useMemo } from "react";
import React, { FC, memo, useMemo } from 'react';
import styles from "./styles.module.scss";
import { ICommentGroup } from "~/redux/types";
import { canEditComment } from "~/utils/node";
import { useGrouppedComments } from "~/hooks/node/useGrouppedComments";
import { useCommentContext } from "~/utils/context/CommentContextProvider";
import { Comment } from "~/components/comment/Comment";
import { useUserContext } from "~/utils/context/UserContextProvider";
import { useNodeContext } from "~/utils/context/NodeContextProvider";
import styles from './styles.module.scss';
import { ICommentGroup } from '~/redux/types';
import { canEditComment } from '~/utils/node';
import { useGrouppedComments } from '~/hooks/node/useGrouppedComments';
import { useCommentContext } from '~/utils/context/CommentContextProvider';
import { Comment } from '~/components/comment/Comment';
import { useUserContext } from '~/utils/context/UserContextProvider';
import { useNodeContext } from '~/utils/context/NodeContextProvider';
interface IProps {
order: 'ASC' | 'DESC';

6
src/containers/player/PlayerView/index.tsx
View file

@ -1,6 +1,6 @@
import React, { VFC } from "react";
import { PlayerBar } from "~/components/bars/PlayerBar";
import { useAudioPlayer } from "~/utils/providers/AudioPlayerProvider";
import React, { VFC } from 'react';
import { PlayerBar } from '~/components/bars/PlayerBar';
import { useAudioPlayer } from '~/utils/providers/AudioPlayerProvider';
interface PlayerViewProps {}

16
src/containers/profile/ProfileInfo/index.tsx
View file

@ -1,11 +1,11 @@
import React, { FC, ReactNode } from "react";
import { IAuthState, IUser } from "~/redux/auth/types";
import styles from "./styles.module.scss";
import { Group } from "~/components/containers/Group";
import { Placeholder } from "~/components/placeholders/Placeholder";
import { getPrettyDate } from "~/utils/dom";
import { ProfileTabs } from "../ProfileTabs";
import { ProfileAvatar } from "../ProfileAvatar";
import React, { FC, ReactNode } from 'react';
import { IAuthState, IUser } from '~/redux/auth/types';
import styles from './styles.module.scss';
import { Group } from '~/components/containers/Group';
import { Placeholder } from '~/components/placeholders/Placeholder';
import { getPrettyDate } from '~/utils/dom';
import { ProfileTabs } from '../ProfileTabs';
import { ProfileAvatar } from '../ProfileAvatar';
interface IProps {
user?: IUser;

136
src/containers/profile/ProfileMessages/index.tsx
View file

@ -1,130 +1,52 @@
import React, { FC, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { connect } from 'react-redux';
import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors';
import React, { FC } from 'react';
import styles from './styles.module.scss';
import * as AUTH_ACTIONS from '~/redux/messages/actions';
import { Message } from '~/components/profile/Message';
import { pick } from 'ramda';
import { NodeNoComments } from '~/components/node/NodeNoComments';
import { selectMessages } from '~/redux/messages/selectors';
import { useShallowSelect } from '~/hooks/data/useShallowSelect';
import { selectAuthProfile } from '~/redux/auth/selectors';
import { useMessages } from '~/hooks/messages/useMessages';
import { useUser } from '~/hooks/user/userUser';
const mapStateToProps = state => ({
profile: selectAuthProfile(state),
messages: selectMessages(state),
user: pick(['id'], selectAuthUser(state)),
});
const ProfileMessages: FC = () => {
const profile = useShallowSelect(selectAuthProfile);
const user = useUser();
const { messages, isLoading } = useMessages(profile.user?.username || '');
const mapDispatchToProps = {
messagesGetMessages: AUTH_ACTIONS.messagesGetMessages,
messagesRefreshMessages: AUTH_ACTIONS.messagesRefreshMessages,
messagesDeleteMessage: AUTH_ACTIONS.messagesDeleteMessage,
};
if (!messages.length || profile.is_loading)
return <NodeNoComments is_loading={isLoading || profile.is_loading} />;
type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
const ProfileMessagesUnconnected: FC<IProps> = ({
profile,
messages,
user: { id },
messagesGetMessages,
messagesDeleteMessage,
messagesRefreshMessages,
}) => {
const wasAtBottom = useRef(true);
const [wrap, setWrap] = useState<HTMLDivElement | undefined>(undefined);
const [editingMessageId, setEditingMessageId] = useState(0);
const onEditMessage = useCallback((id: number) => setEditingMessageId(id), [setEditingMessageId]);
const onCancelEdit = useCallback(() => setEditingMessageId(0), [setEditingMessageId]);
const onDeleteMessage = useCallback((id: number) => messagesDeleteMessage(id, true), [
messagesDeleteMessage,
]);
const onRestoreMessage = useCallback((id: number) => messagesDeleteMessage(id, false), [
messagesDeleteMessage,
]);
useEffect(() => {
if (profile.is_loading || !profile.user || !profile.user.username) return;
messagesGetMessages(profile.user.username);
}, [messagesGetMessages, profile.is_loading, profile.user]);
useEffect(() => {
const timer = setInterval(messagesRefreshMessages, 20000);
return () => clearTimeout(timer);
}, [messagesRefreshMessages]);
const storeRef = useCallback(
(div: HTMLDivElement) => {
if (!div || !div.parentElement) return;
const parent = div.parentElement;
parent.scrollTo(0, parent.scrollHeight);
setWrap(div);
},
[setWrap]
);
useLayoutEffect(() => {
const parent = wrap?.parentElement;
if (!parent) return;
if (wasAtBottom.current) {
parent.scrollTo(0, parent.scrollHeight);
}
}, [messages.messages, wrap]);
const onScroll = useCallback(() => {
const parent = wrap?.parentElement;
if (!parent) return;
const scrollPos = parent.scrollTop + parent.clientHeight;
wasAtBottom.current = parent.scrollHeight - scrollPos < 40;
}, [wrap]);
useEffect(() => {
const parent = wrap?.parentElement;
if (!parent) return;
parent.addEventListener('scroll', onScroll);
return () => parent.removeEventListener('scroll', onScroll);
}, [wrap, onScroll]);
if (!messages.messages.length || profile.is_loading)
return <NodeNoComments is_loading={messages.is_loading_messages || profile.is_loading} />;
if (messages.messages.length <= 0) {
if (messages.length <= 0) {
return null;
}
return (
<div className={styles.messages} ref={storeRef}>
{messages.messages
<div className={styles.messages}>
<div className={styles.warning}>
<p>В будущем мы собираемся убрать сообщения, превратив их в заметки.</p>
<p>
Вся твоя история сообщений, написанных себе, сохранится. Исчезнут только сообщения другим
участникам.
</p>
<p>
Давай обсудим это в <a href="/boris">Борисе</a>, если это так важно.
</p>
</div>
{messages
.filter(message => !!message.text)
.map((
message // TODO: show files / memo
) => (
<Message
message={message}
incoming={id !== message.from.id}
key={message.id}
onEdit={onEditMessage}
onDelete={onDeleteMessage}
isEditing={editingMessageId === message.id}
onCancelEdit={onCancelEdit}
onRestore={onRestoreMessage}
/>
<Message message={message} incoming={user.id !== message.from.id} key={message.id} />
))}
{!messages.is_loading_messages && messages.messages.length > 0 && (
{!isLoading && messages.length > 0 && (
<div className={styles.placeholder}>Когда-нибудь здесь будут еще сообщения</div>
)}
</div>
);
};
const ProfileMessages = connect(mapStateToProps, mapDispatchToProps)(ProfileMessagesUnconnected);
export { ProfileMessages };

18
src/containers/profile/ProfileMessages/styles.module.scss
View file

@ -4,7 +4,7 @@
padding: $gap;
background: $node_bg;
display: flex;
flex-direction: column-reverse !important;
flex-direction: column !important;
overflow: auto;
& > * {
@ -25,3 +25,19 @@
padding: $gap;
text-align: center;
}
div.warning.warning {
padding: $gap;
box-shadow: $red 0 0 0 2px;
border-radius: $radius;
font: $font_14_semibold;
margin-bottom: $gap * 2;
p {
margin-bottom: $gap;
&:last-child {
margin-bottom: 0;
}
}
}

16
src/containers/profile/ProfilePageLeft/index.tsx
View file

@ -1,12 +1,12 @@
import React, { FC } from "react";
import { IAuthState } from "~/redux/auth/types";
import { formatText } from "~/utils/dom";
import { PRESETS } from "~/constants/urls";
import { Placeholder } from "~/components/placeholders/Placeholder";
import React, { FC } from 'react';
import { IAuthState } from '~/redux/auth/types';
import { formatText } from '~/utils/dom';
import { PRESETS } from '~/constants/urls';
import { Placeholder } from '~/components/placeholders/Placeholder';
import styles from "./styles.module.scss";
import { Avatar } from "~/components/common/Avatar";
import { Markdown } from "~/components/containers/Markdown";
import styles from './styles.module.scss';
import { Avatar } from '~/components/common/Avatar';
import { Markdown } from '~/components/containers/Markdown';
interface IProps {
profile: IAuthState['profile'];

8
src/containers/profile/ProfilePageStats/index.tsx
View file

@ -1,7 +1,7 @@
import React, { FC } from "react";
import styles from "./styles.module.scss";
import { StatsRow } from "~/components/common/StatsRow";
import { SubTitle } from "~/components/common/SubTitle";
import React, { FC } from 'react';
import styles from './styles.module.scss';
import { StatsRow } from '~/components/common/StatsRow';
import { SubTitle } from '~/components/common/SubTitle';
interface Props {}

8
src/containers/profile/ProfileTabs/index.tsx
View file

@ -1,7 +1,7 @@
import React, { FC } from "react";
import styles from "./styles.module.scss";
import { IAuthState } from "~/redux/auth/types";
import { Tabs } from "~/components/dialogs/Tabs";
import React, { FC } from 'react';
import styles from './styles.module.scss';
import { IAuthState } from '~/redux/auth/types';
import { Tabs } from '~/components/dialogs/Tabs';
interface IProps {
tab: string;

10
src/containers/sidebars/SidebarWrapper/index.tsx
View file

@ -1,8 +1,8 @@
import React, { FC, useEffect, useRef } from "react";
import styles from "./styles.module.scss";
import { createPortal } from "react-dom";
import { clearAllBodyScrollLocks, disableBodyScroll } from "body-scroll-lock";
import { useCloseOnEscape } from "~/hooks";
import React, { FC, useEffect, useRef } from 'react';
import styles from './styles.module.scss';
import { createPortal } from 'react-dom';
import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
import { useCloseOnEscape } from '~/hooks';
interface IProps {
onClose?: () => void;

14
src/containers/tags/Tags/index.tsx
View file

@ -1,10 +1,10 @@
import React, { FC, HTMLAttributes, useCallback, useMemo, useState } from "react";
import { TagField } from "~/components/containers/TagField";
import { ITag } from "~/redux/types";
import { uniq } from "ramda";
import { Tag } from "~/components/tags/Tag";
import { TagInput } from "~/containers/tags/TagInput";
import { separateTags } from "~/utils/tag";
import React, { FC, HTMLAttributes, useCallback, useMemo, useState } from 'react';
import { TagField } from '~/components/containers/TagField';
import { ITag } from '~/redux/types';
import { uniq } from 'ramda';
import { Tag } from '~/components/tags/Tag';
import { TagInput } from '~/containers/tags/TagInput';
import { separateTags } from '~/utils/tag';
type IProps = HTMLAttributes<HTMLDivElement> & {
tags: Partial<ITag>[];