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

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;