muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

fixed user hydration

Browse source
This commit is contained in:
Fedor Katurov 2022-11-22 10:46:41 +06:00
parent ed9694c246
commit 75dc20ca0b
13 changed files with 194 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/components/comment/CommentContent/index.tsx
View file

@ -1,9 +1,19 @@
import React, { createElement, FC, Fragment, memo, ReactNode, useCallback, useMemo, useState } from 'react';
import React, {
createElement,
FC,
Fragment,
memo,
ReactNode,
useCallback,
useMemo,
useState,
} from 'react';
import classnames from 'classnames';
import classNames from 'classnames';
import { CommentForm } from '~/components/comment/CommentForm';
import { Authorized } from '~/components/containers/Authorized';
import { Group } from '~/components/containers/Group';
import { AudioPlayer } from '~/components/media/AudioPlayer';
import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
@ -28,7 +38,15 @@ interface IProps {
}
const CommentContent: FC<IProps> = memo(
({ comment, canEdit, nodeId, saveComment, onDelete, onShowImageModal, prefix }) => {
({
comment,
canEdit,
nodeId,
saveComment,
onDelete,
onShowImageModal,
prefix,
}) => {
const [isEditing, setIsEditing] = useState(false);
const startEditing = useCallback(() => setIsEditing(true), [setIsEditing]);
@ -38,11 +56,13 @@ const CommentContent: FC<IProps> = memo(
() =>
reduce(
(group, file) =>
file.type ? assocPath([file.type], append(file, group[file.type]), group) : group,
file.type
? assocPath([file.type], append(file, group[file.type]), group)
: group,
{} as Record<UploadType, IFile[]>,
comment.files
comment.files,
),
[comment]
[comment],
);
const onLockClick = useCallback(() => {
@ -50,8 +70,9 @@ const CommentContent: FC<IProps> = memo(
}, [comment, onDelete]);
const menu = useMemo(
() => canEdit && <CommentMenu onDelete={onLockClick} onEdit={startEditing} />,
[canEdit, startEditing, onLockClick]
() =>
canEdit && <CommentMenu onDelete={onLockClick} onEdit={startEditing} />,
[canEdit, startEditing, onLockClick],
);
const blocks = useMemo(
@ -59,7 +80,7 @@ const CommentContent: FC<IProps> = memo(
!!comment.text.trim()
? formatCommentText(path(['user', 'username'], comment), comment.text)
: [],
[comment]
[comment],
);
if (isEditing) {
@ -78,17 +99,22 @@ const CommentContent: FC<IProps> = memo(
{!!prefix && <div className={styles.prefix}>{prefix}</div>}
{comment.text.trim() && (
<Group className={classnames(styles.block, styles.block_text)}>
{menu}
<Authorized>{menu}</Authorized>
<Group className={styles.renderers}>
{blocks.map(
(block, key) =>
COMMENT_BLOCK_RENDERERS[block.type] &&
createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key })
createElement(COMMENT_BLOCK_RENDERERS[block.type], {
block,
key,
}),
)}
</Group>
<div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
<div className={styles.date}>
{getPrettyDate(comment.created_at)}
</div>
</Group>
)}
@ -102,32 +128,45 @@ const CommentContent: FC<IProps> = memo(
})}
>
{groupped.image.map((file, index) => (
<div key={file.id} onClick={() => onShowImageModal(groupped.image, index)}>
<img src={getURL(file, ImagePresets['600'])} alt={file.name} />
<div
key={file.id}
onClick={() => onShowImageModal(groupped.image, index)}
>
<img
src={getURL(file, ImagePresets['600'])}
alt={file.name}
/>
</div>
))}
</div>
<div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
<div className={styles.date}>
{getPrettyDate(comment.created_at)}
</div>
</div>
)}
{groupped.audio && groupped.audio.length > 0 && (
<Fragment>
{groupped.audio.map(file => (
<div className={classnames(styles.block, styles.block_audio)} key={file.id}>
{groupped.audio.map((file) => (
<div
className={classnames(styles.block, styles.block_audio)}
key={file.id}
>
{menu}
<AudioPlayer file={file} />
<div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
<div className={styles.date}>
{getPrettyDate(comment.created_at)}
</div>
</div>
))}
</Fragment>
)}
</div>
);
}
},
);
export { CommentContent };

15
src/components/containers/Authorized/index.tsx
View file

@ -1,15 +1,20 @@
import React, { FC } from 'react';
import { observer } from 'mobx-react-lite';
import { useAuth } from '~/hooks/auth/useAuth';
interface IProps {}
interface IProps {
// don't wait for user refetch, trust hydration
hydratedOnly?: boolean;
}
const Authorized: FC<IProps> = ({ children }) => {
const { isUser } = useAuth();
const Authorized: FC<IProps> = observer(({ children, hydratedOnly }) => {
const { isUser, fetched } = useAuth();
if (!isUser) return null;
if (!isUser || (!hydratedOnly && !fetched)) return null;
return <>{children}</>;
};
});
export { Authorized };

60
src/components/flow/FlowGrid/index.tsx
View file

@ -1,9 +1,11 @@
import React, { FC, Fragment } from 'react';
import classNames from 'classnames';
import { observer } from 'mobx-react-lite';
import { FlowCell } from '~/components/flow/FlowCell';
import { flowDisplayToPreset, URLS } from '~/constants/urls';
import { useAuth } from '~/hooks/auth/useAuth';
import { FlowDisplay, IFlowNode, INode } from '~/types';
import { IUser } from '~/types/auth';
import { getURLFromString } from '~/utils/dom';
@ -17,28 +19,38 @@ interface Props {
onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void;
}
export const FlowGrid: FC<Props> = ({ user, nodes, onChangeCellView }) => {
if (!nodes) {
return null;
}
export const FlowGrid: FC<Props> = observer(
({ user, nodes, onChangeCellView }) => {
const { fetched, isUser } = useAuth();
return (
<Fragment>
{nodes.map(node => (
<div className={classNames(styles.cell, styles[node.flow.display])} key={node.id}>
<FlowCell
id={node.id}
color={node.flow.dominant_color}
to={URLS.NODE_URL(node.id)}
image={getURLFromString(node.thumbnail, flowDisplayToPreset[node.flow.display])}
flow={node.flow}
text={node.description}
title={node.title}
canEdit={canEditNode(node, user)}
onChangeCellView={onChangeCellView}
/>
</div>
))}
</Fragment>
);
};
if (!nodes) {
return null;
}
return (
<Fragment>
{nodes.map((node) => (
<div
className={classNames(styles.cell, styles[node.flow.display])}
key={node.id}
>
<FlowCell
id={node.id}
color={node.flow.dominant_color}
to={URLS.NODE_URL(node.id)}
image={getURLFromString(
node.thumbnail,
flowDisplayToPreset[node.flow.display],
)}
flow={node.flow}
text={node.description}
title={node.title}
canEdit={fetched && isUser && canEditNode(node, user)}
onChangeCellView={onChangeCellView}
/>
</div>
))}
</Fragment>
);
},
);

4
src/components/menu/SeparatedMenu/index.tsx
View file

@ -4,7 +4,7 @@ import classNames from 'classnames';
import styles from './styles.module.scss';
interface SeparatedMenuProps {
export interface SeparatedMenuProps {
className?: string;
}
@ -14,7 +14,7 @@ const SeparatedMenu: FC<SeparatedMenuProps> = ({ children, className }) => {
return [];
}
return (Array.isArray(children) ? children : [children]).filter(it => it);
return (Array.isArray(children) ? children : [children]).filter((it) => it);
}, [children]);
return (

61
src/components/node/NodeTitle/index.tsx
View file

@ -2,6 +2,7 @@ import React, { memo, VFC } from 'react';
import classNames from 'classnames';
import { Authorized } from '~/components/containers/Authorized';
import { Icon } from '~/components/input/Icon';
import { SeparatedMenu } from '~/components/menu/SeparatedMenu';
import { NodeEditMenu } from '~/components/node/NodeEditMenu';
@ -76,37 +77,39 @@ const NodeTitle: VFC<IProps> = memo(
)}
</div>
<SeparatedMenu className={styles.buttons}>
{canEdit && (
<NodeEditMenu
className={styles.button}
canStar={canStar}
isHeroic={isHeroic}
isLocked={isLocked}
onStar={onStar}
onLock={onLock}
onEdit={onEdit}
/>
)}
<Authorized>
<SeparatedMenu className={styles.buttons}>
{canEdit && (
<NodeEditMenu
className={styles.button}
canStar={canStar}
isHeroic={isHeroic}
isLocked={isLocked}
onStar={onStar}
onLock={onLock}
onEdit={onEdit}
/>
)}
{canLike && (
<div
className={classNames(styles.button, styles.like, {
[styles.is_liked]: isLiked,
})}
>
{isLiked ? (
<Icon icon="heart_full" size={24} onClick={onLike} />
) : (
<Icon icon="heart" size={24} onClick={onLike} />
)}
{canLike && (
<div
className={classNames(styles.button, styles.like, {
[styles.is_liked]: isLiked,
})}
>
{isLiked ? (
<Icon icon="heart_full" size={24} onClick={onLike} />
) : (
<Icon icon="heart" size={24} onClick={onLike} />
)}
{!!likeCount && likeCount > 0 && (
<div className={styles.like_count}>{likeCount}</div>
)}
</div>
)}
</SeparatedMenu>
{!!likeCount && likeCount > 0 && (
<div className={styles.like_count}>{likeCount}</div>
)}
</div>
)}
</SeparatedMenu>
</Authorized>
</div>
</div>
);

12
src/containers/main/Header/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import classNames from 'classnames';
import isBefore from 'date-fns/isBefore';
@ -16,7 +16,6 @@ import { URLS } from '~/constants/urls';
import { useAuth } from '~/hooks/auth/useAuth';
import { useScrollTop } from '~/hooks/dom/useScrollTop';
import { useFlow } from '~/hooks/flow/useFlow';
import { useGetLabStats } from '~/hooks/lab/useGetLabStats';
import { useModal } from '~/hooks/modal/useModal';
import { useUpdates } from '~/hooks/updates/useUpdates';
import { useSidebar } from '~/utils/providers/SidebarProvider';
@ -66,8 +65,13 @@ const Header: FC<HeaderProps> = observer(() => {
<Filler className={styles.filler} />
<nav className={styles.plugs}>
<Authorized>
<nav
className={classNames(styles.plugs, {
// [styles.active]: isHydrated && fetched,
[styles.active]: true,
})}
>
<Authorized hydratedOnly>
<Anchor
className={classNames(styles.item, {
[styles.has_dot]: hasFlowUpdates,

10
src/containers/main/Header/styles.module.scss
View file

@ -2,10 +2,10 @@
@keyframes appear {
from {
transform: translate(0, -$header_height);
opacity: 0;
}
to {
transform: translate(0, 0);
opacity: 1;
}
}
@ -55,6 +55,12 @@
user-select: none;
text-transform: uppercase;
align-items: center;
opacity: 0;
transition: all 250ms;
&.active {
opacity: 1;
}
@include tablet {
flex: 1;

1
src/hooks/auth/useAuth.ts
View file

@ -16,5 +16,6 @@ export const useAuth = () => {
setToken: auth.setToken,
isTester: auth.isTester,
setIsTester: auth.setIsTester,
fetched: auth.fetched,
};
};

20
src/hooks/auth/useUser.ts
View file

@ -10,11 +10,19 @@ import { IUser } from '~/types/auth';
import { showErrorToast } from '~/utils/errors/showToast';
export const useUser = () => {
const { token, setUser } = useAuthStore();
const { data, mutate } = useSWR(token ? API.USER.ME : null, () => apiAuthGetUser(), {
onSuccess: data => setUser(data?.user || EMPTY_USER),
onError: error => showErrorToast(error),
});
const { token, setUser, setFetched, user } = useAuthStore();
const { data, mutate } = useSWR(
token ? API.USER.ME : null,
() => apiAuthGetUser(),
{
onSuccess: (data) => {
setUser(data?.user || EMPTY_USER);
setFetched(true);
},
onError: (error) => showErrorToast(error),
fallbackData: { user },
},
);
const update = useCallback(
async (user: Partial<IUser>, revalidate?: boolean) => {
@ -25,7 +33,7 @@ export const useUser = () => {
await mutate({ ...data, user: { ...data.user, ...user } }, revalidate);
},
[data, mutate]
[data, mutate],
);
return { user: data?.user || EMPTY_USER, update };

18
src/hooks/node/useNodePermissions.ts
View file

@ -4,12 +4,24 @@ import { useUser } from '~/hooks/auth/useUser';
import { INode } from '~/types';
import { canEditNode, canLikeNode, canStarNode } from '~/utils/node';
import { useAuth } from '../auth/useAuth';
export const useNodePermissions = (node?: INode) => {
const { user } = useUser();
const { fetched, isUser } = useAuth();
const edit = useMemo(() => canEditNode(node, user), [node, user]);
const like = useMemo(() => canLikeNode(node, user), [node, user]);
const star = useMemo(() => canStarNode(node, user), [node, user]);
const edit = useMemo(
() => fetched && isUser && canEditNode(node, user),
[node, user, fetched, isUser],
);
const like = useMemo(
() => fetched && isUser && canLikeNode(node, user),
[node, user, fetched, isUser],
);
const star = useMemo(
() => fetched && isUser && canStarNode(node, user),
[node, user, fetched, isUser],
);
return [edit, like, star];
};

6
src/layouts/NodeLayout/index.tsx
View file

@ -1,5 +1,7 @@
import React, { FC } from 'react';
import { observer } from 'mobx-react-lite';
import { Superpower } from '~/components/boris/Superpower';
import { ScrollHelperBottom } from '~/components/common/ScrollHelperBottom';
import { Card } from '~/components/containers/Card';
@ -18,7 +20,7 @@ import styles from './styles.module.scss';
type IProps = {};
const NodeLayout: FC<IProps> = () => {
const NodeLayout: FC<IProps> = observer(() => {
const { node, isLoading, update } = useNodeContext();
const { head, block } = useNodeBlocks(node, isLoading);
const [canEdit, canLike, canStar] = useNodePermissions(node);
@ -70,6 +72,6 @@ const NodeLayout: FC<IProps> = () => {
</Superpower>
</div>
);
};
});
export { NodeLayout };

5
src/store/auth/AuthStore.ts
View file

@ -9,6 +9,7 @@ export class AuthStore {
token: string = '';
user: IUser = EMPTY_USER;
isTesterInternal: boolean = false;
fetched = false;
constructor() {
makeAutoObservable(this);
@ -46,4 +47,8 @@ export class AuthStore {
this.token = '';
this.setUser(EMPTY_USER);
};
setFetched = (fetched: boolean) => {
this.fetched = fetched;
};
}

2
src/utils/providers/AuthProvider.tsx
View file

@ -1,6 +1,7 @@
import { createContext, FC, useContext } from 'react';
import { observer } from 'mobx-react-lite';
import { boolean } from 'yup';
import { EMPTY_USER } from '~/constants/auth';
import { useAuth } from '~/hooks/auth/useAuth';
@ -18,6 +19,7 @@ const AuthContext = createContext<AuthProviderContextType>({
logout: () => {},
login: async () => EMPTY_USER,
setToken: () => {},
fetched: false,
});
export const AuthProvider: FC = observer(({ children }) => {