-
-
-
-
-
-
-
-
-
-
{title}
+ {url === address ? (
+
-
+ ) : (
+
+ )}
);
});
diff --git a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentEmbedBlock/styles.module.scss b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentEmbedBlock/styles.module.scss
index a8e0520b..cd91dcf2 100644
--- a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentEmbedBlock/styles.module.scss
+++ b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentEmbedBlock/styles.module.scss
@@ -1,8 +1,8 @@
@import 'src/styles/variables';
.embed {
- padding: 0 $gap;
- height: $comment_height;
+ padding: 0 0;
+ min-height: $comment_height;
width: 100%;
box-sizing: border-box;
background: 50% 50% no-repeat;
@@ -43,7 +43,7 @@
left: 0;
width: 100%;
height: 100%;
- background: $content_bg_backdrop 50% 50%;
+ background: $content_bg_backdrop;
background-size: cover;
z-index: 15;
border-radius: $radius;
@@ -69,6 +69,7 @@
justify-content: stretch;
box-sizing: border-box;
z-index: 2;
+ cursor: pointer;
& > div {
width: 100%;
@@ -98,3 +99,47 @@
overflow: hidden;
text-overflow: ellipsis;
}
+
+@keyframes appear {
+ 0% {
+ grid-template-columns: 0fr;
+ opacity: 0;
+ }
+
+ 50% {
+ grid-template-columns: 1fr;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+.video {
+ width: 100%;
+ position: relative;
+ padding: $gap / 2;
+}
+
+.close {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color_danger);
+ width: 64px;
+ height: 24px;
+ position: absolute;
+ bottom: calc(100% - #{$gap / 2});
+ right: 24px;
+ border-radius: $radius $radius 0 0;
+ z-index: 10;
+ cursor: pointer;
+}
+
+.animation {
+ background-color: var(--content_bg_darker);
+ display: grid;
+ animation: appear 0.5s forwards;
+ width: 100%;
+ border-radius: $radius;
+}
diff --git a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/styles.module.scss b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/styles.module.scss
index de654b99..3a45aad6 100644
--- a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/styles.module.scss
+++ b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/styles.module.scss
@@ -7,7 +7,7 @@
&.multiple {
// Desktop devices
- @include flexbin(25vh, $flexbin-space);
+ @include flexbin(300px, $flexbin-space);
// Tablet devices
@media (max-width: $flexbin-tablet-max) {
@@ -22,13 +22,16 @@
}
.image {
- max-height: 500px;
+ max-height: 300px;
border-radius: $radius;
max-width: 100%;
.multiple & {
- max-height: 250px;
- max-inline-size: 250px;
+ // both of that were 250px,
+ // if you know why it should be like this, tell me
+ // it messes up with the flexbin above
+ max-height: 300px;
+ max-inline-size: 300px;
}
}
diff --git a/src/containers/node/NodeComments/components/Comment/index.tsx b/src/containers/node/NodeComments/components/Comment/index.tsx
index 121d8051..1e3f2b60 100644
--- a/src/containers/node/NodeComments/components/Comment/index.tsx
+++ b/src/containers/node/NodeComments/components/Comment/index.tsx
@@ -8,6 +8,7 @@ import { CommentWrapper } from '~/containers/comments/CommentWrapper';
import { IComment, ICommentGroup, IFile } from '~/types';
import { CommendDeleted } from '../../../../../components/node/CommendDeleted';
+import { getCommentId } from '../../../../../constants/dom/links';
import { CommentContent } from './components/CommentContent';
import { CommentDistance } from './components/CommentDistance';
@@ -83,18 +84,22 @@ const Comment: FC
= memo(
);
return (
- onLike(comment.id, !comment.liked)}
- onDelete={(val: boolean) => onDelete(comment.id, val)}
- onShowImageModal={onShowImageModal}
- key={comment.id}
- />
+ <>
+
+
+ onLike(comment.id, !comment.liked)}
+ onDelete={(val: boolean) => onDelete(comment.id, val)}
+ onShowImageModal={onShowImageModal}
+ key={comment.id}
+ />
+
);
})}
diff --git a/src/containers/node/NodeComments/components/Comment/styles.module.scss b/src/containers/node/NodeComments/components/Comment/styles.module.scss
index 01c1e131..92cd93b4 100644
--- a/src/containers/node/NodeComments/components/Comment/styles.module.scss
+++ b/src/containers/node/NodeComments/components/Comment/styles.module.scss
@@ -15,3 +15,9 @@
.highlighted {
box-shadow: $color_primary 0 0 0px 2px;
}
+
+.anchor {
+ display: block;
+ position: relative;
+ top: -($header_height * 2);
+}
diff --git a/src/containers/node/NodeComments/index.tsx b/src/containers/node/NodeComments/index.tsx
index acba75b0..fa39d493 100644
--- a/src/containers/node/NodeComments/index.tsx
+++ b/src/containers/node/NodeComments/index.tsx
@@ -1,9 +1,13 @@
-import { FC, useMemo } from 'react';
+import { FC, useEffect, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { LoadMoreButton } from '~/components/input/LoadMoreButton';
import { ANNOUNCE_USER_ID, BORIS_NODE_ID } from '~/constants/boris/constants';
+import {
+ isCommentAnchor,
+ NEW_COMMENT_ANCHOR_NAME,
+} from '~/constants/dom/links';
import { Comment } from '~/containers/node/NodeComments/components/Comment';
import { useGrouppedComments } from '~/hooks/node/useGrouppedComments';
import { ICommentGroup } from '~/types';
@@ -11,6 +15,7 @@ import { useCommentContext } from '~/utils/context/CommentContextProvider';
import { useNodeContext } from '~/utils/context/NodeContextProvider';
import { useUserContext } from '~/utils/context/UserContextProvider';
import { canEditComment, canLikeComment } from '~/utils/node';
+import { VideoPlayerProvider } from '~/utils/providers/VideoPlayerProvider';
import styles from './styles.module.scss';
@@ -18,6 +23,11 @@ interface Props {
order: 'ASC' | 'DESC';
}
+const isFirstGroupWithNewComment = (
+ group: ICommentGroup,
+ prevGroup: ICommentGroup | undefined,
+) => group.hasNew && (!prevGroup || !prevGroup.hasNew);
+
const NodeComments: FC
= observer(({ order }) => {
const user = useUserContext();
const { node } = useNodeContext();
@@ -35,7 +45,7 @@ const NodeComments: FC = observer(({ order }) => {
onSaveComment,
} = useCommentContext();
- const groupped: ICommentGroup[] = useGrouppedComments(
+ const groupped = useGrouppedComments(
comments,
order,
lastSeenCurrent ?? undefined,
@@ -59,30 +69,56 @@ const NodeComments: FC = observer(({ order }) => {
return null;
}
+ /** Scrolls down to new comments or specific one from anchor */
+ useEffect(() => {
+ const anchor = location.hash?.replace('#', '');
+
+ if (!isLoading && isCommentAnchor(anchor)) {
+ setTimeout(
+ () =>
+ document
+ .getElementById(anchor)
+ ?.scrollIntoView({ behavior: 'smooth' }),
+ 300,
+ );
+ }
+ }, [isLoading]);
+
return (
-
- {order === 'DESC' && more}
+
+
+ {order === 'DESC' && more}
- {groupped.map((group) => (
-
- ))}
+ {groupped.map((group, index) => (
+ <>
+ {isFirstGroupWithNewComment(group, groupped[index - 1]) && (
+
+ )}
- {order === 'ASC' && more}
-
+
+
+ ))}
+
+ {order === 'ASC' && more}
+
-
+
+
+
+
+
+ {isLoading ?
: profile?.fullname}
+
+
+
+ {isLoading ?
: `~${profile?.username}`}
+
+
-
- {isLoading ?
: profile?.fullname}
-
-
-
- {isLoading ?
: `~${profile?.username}`}
-
+
{description}
- {item.colors.map((color) => (
+ {[...item.colors].reverse().map((color) => (
{
diff --git a/src/hooks/auth/useLastSeenBoris.ts b/src/hooks/auth/useLastSeenBoris.ts
index c8e08bbe..3cc5a5bb 100644
--- a/src/hooks/auth/useLastSeenBoris.ts
+++ b/src/hooks/auth/useLastSeenBoris.ts
@@ -10,7 +10,7 @@ export const useLastSeenBoris = () => {
async (date: string) => {
await update({ last_seen_boris: date }, false);
},
- [update]
+ [update],
);
return { setLastSeen, lastSeen };
diff --git a/src/hooks/auth/useLoginLogoutRestore.ts b/src/hooks/auth/useLoginLogoutRestore.ts
index 4e438f16..76e74458 100644
--- a/src/hooks/auth/useLoginLogoutRestore.ts
+++ b/src/hooks/auth/useLoginLogoutRestore.ts
@@ -20,7 +20,7 @@ export const useLoginLogoutRestore = () => {
showToastInfo(getRandomPhrase('WELCOME'));
return result.user;
},
- [auth]
+ [auth],
);
return { logout, login };
diff --git a/src/hooks/auth/useRestoreCode.ts b/src/hooks/auth/useRestoreCode.ts
index 8e957b58..74e3fa68 100644
--- a/src/hooks/auth/useRestoreCode.ts
+++ b/src/hooks/auth/useRestoreCode.ts
@@ -5,8 +5,9 @@ import { API } from '~/constants/api';
import { getErrorMessage } from '~/utils/errors/getErrorMessage';
export const useRestoreCode = (code: string) => {
- const { data, isValidating, error } = useSWR(API.USER.REQUEST_CODE(code), () =>
- apiCheckRestoreCode({ code })
+ const { data, isValidating, error } = useSWR(
+ API.USER.REQUEST_CODE(code),
+ () => apiCheckRestoreCode({ code }),
);
const codeUser = data?.user;
diff --git a/src/hooks/auth/useRestorePasswordForm.ts b/src/hooks/auth/useRestorePasswordForm.ts
index 0373dfd0..0405993d 100644
--- a/src/hooks/auth/useRestorePasswordForm.ts
+++ b/src/hooks/auth/useRestorePasswordForm.ts
@@ -18,7 +18,7 @@ const validationSchema = object({
.test(
'sameAsPassword',
'Должен совпадать с паролем',
- (val, ctx) => val === ctx.parent.newPassword
+ (val, ctx) => val === ctx.parent.newPassword,
),
});
@@ -26,15 +26,21 @@ export type RestorePasswordData = Asserts
;
export const useRestorePasswordForm = (
code: string,
- fetcher: (props: { code: string; password: string }) => Promise<{ token: string; user: IUser }>,
- onSuccess: () => void
+ fetcher: (props: {
+ code: string;
+ password: string;
+ }) => Promise<{ token: string; user: IUser }>,
+ onSuccess: () => void,
) => {
const auth = useAuthStore();
const onSubmit = useCallback['onSubmit']>(
async (values, { setErrors }) => {
try {
- const { token, user } = await fetcher({ password: values.newPassword, code });
+ const { token, user } = await fetcher({
+ password: values.newPassword,
+ code,
+ });
auth.setUser(user);
auth.setToken(token);
onSuccess();
@@ -47,7 +53,7 @@ export const useRestorePasswordForm = (
}
}
},
- [onSuccess, fetcher, code, auth]
+ [onSuccess, fetcher, code, auth],
);
return useFormik({
diff --git a/src/hooks/auth/useRestoreRequestForm.ts b/src/hooks/auth/useRestoreRequestForm.ts
index 6dc63a37..7386a9ac 100644
--- a/src/hooks/auth/useRestoreRequestForm.ts
+++ b/src/hooks/auth/useRestoreRequestForm.ts
@@ -15,7 +15,7 @@ type RestoreRequestData = Asserts;
export const useRestoreRequestForm = (
fetcher: (field: string) => Promise,
- onSuccess: () => void
+ onSuccess: () => void,
) => {
const onSubmit = useCallback['onSubmit']>(
async (values, { setErrors }) => {
@@ -31,7 +31,7 @@ export const useRestoreRequestForm = (
}
}
},
- [fetcher, onSuccess]
+ [fetcher, onSuccess],
);
return useFormik({
diff --git a/src/hooks/auth/useSessionCookie.ts b/src/hooks/auth/useSessionCookie.ts
index 0d7ce68d..eeeab746 100644
--- a/src/hooks/auth/useSessionCookie.ts
+++ b/src/hooks/auth/useSessionCookie.ts
@@ -13,6 +13,6 @@ export const useSessionCookie = () => {
autorun(() => {
setCookie('session', auth.token, 30);
}),
- [auth]
+ [auth],
);
};
diff --git a/src/hooks/auth/useSocialRegisterForm.ts b/src/hooks/auth/useSocialRegisterForm.ts
index 3acad2d0..7ea8c26b 100644
--- a/src/hooks/auth/useSocialRegisterForm.ts
+++ b/src/hooks/auth/useSocialRegisterForm.ts
@@ -9,9 +9,7 @@ import { showErrorToast } from '~/utils/errors/showToast';
const validationSchema = object({
username: string().required(ERRORS.REQUIRED),
- password: string()
- .required(ERRORS.REQUIRED)
- .min(6, ERRORS.PASSWORD_IS_SHORT),
+ password: string().required(ERRORS.REQUIRED).min(6, ERRORS.PASSWORD_IS_SHORT),
});
type SocialRegisterData = Asserts;
@@ -23,7 +21,7 @@ export const useSocialRegisterForm = (
username: string;
password: string;
}) => Promise<{ token: string }>,
- onSuccess: (token: string) => void
+ onSuccess: (token: string) => void,
) => {
const onSubmit = useCallback['onSubmit']>(
async (values, { setErrors }) => {
@@ -43,7 +41,7 @@ export const useSocialRegisterForm = (
}
}
},
- [token, onSuccess, fetcher]
+ [token, onSuccess, fetcher],
);
return useFormik({
diff --git a/src/hooks/auth/useUserActiveStatus.ts b/src/hooks/auth/useUserActiveStatus.ts
index ba90caa9..ea364e88 100644
--- a/src/hooks/auth/useUserActiveStatus.ts
+++ b/src/hooks/auth/useUserActiveStatus.ts
@@ -7,7 +7,10 @@ const today = new Date();
export const useUserActiveStatus = (lastSeen?: string) => {
try {
const lastSeenDate = lastSeen ? parseISO(lastSeen) : undefined;
- return lastSeenDate && differenceInDays(today, lastSeenDate) < INACTIVE_ACCOUNT_DAYS;
+ return (
+ lastSeenDate &&
+ differenceInDays(today, lastSeenDate) < INACTIVE_ACCOUNT_DAYS
+ );
} catch (e) {
return false;
}
diff --git a/src/hooks/boris/useBorisStats.ts b/src/hooks/boris/useBorisStats.ts
index 47d8a7b9..7713fe0b 100644
--- a/src/hooks/boris/useBorisStats.ts
+++ b/src/hooks/boris/useBorisStats.ts
@@ -6,12 +6,14 @@ import { initialBackendStats } from '~/constants/boris/constants';
import { BorisUsageStats } from '~/types/boris';
export const useBorisStats = () => {
- const { data: backend = initialBackendStats, isValidating: isValidatingBackend } = useSWR(
- API.BORIS.GET_BACKEND_STATS,
- () => getBorisBackendStats()
- );
+ const {
+ data: backend = initialBackendStats,
+ isValidating: isValidatingBackend,
+ } = useSWR(API.BORIS.GET_BACKEND_STATS, () => getBorisBackendStats());
- const { data: issues = [] } = useSWR(API.BORIS.GITHUB_ISSUES, () => getGithubIssues());
+ const { data: issues = [] } = useSWR(API.BORIS.GITHUB_ISSUES, () =>
+ getGithubIssues(),
+ );
const stats: BorisUsageStats = {
backend,
diff --git a/src/hooks/color/useColorFromString.ts b/src/hooks/color/useColorFromString.ts
index 10668fb8..dba30155 100644
--- a/src/hooks/color/useColorFromString.ts
+++ b/src/hooks/color/useColorFromString.ts
@@ -3,9 +3,16 @@ import { useMemo } from 'react';
import { normalizeBrightColor } from '~/utils/color';
import { stringToColour } from '~/utils/dom';
-export const useColorFromString = (val?: string, saturation = 3, lightness = 3) => {
+export const useColorFromString = (
+ val?: string,
+ saturation = 3,
+ lightness = 3,
+) => {
return useMemo(
- () => (val && normalizeBrightColor(stringToColour(val), saturation, lightness)) || '',
- [lightness, saturation, val]
+ () =>
+ (val &&
+ normalizeBrightColor(stringToColour(val), saturation, lightness)) ||
+ '',
+ [lightness, saturation, val],
);
};
diff --git a/src/hooks/color/useColorGradientFromString.ts b/src/hooks/color/useColorGradientFromString.ts
index b94864f1..10e17cdc 100644
--- a/src/hooks/color/useColorGradientFromString.ts
+++ b/src/hooks/color/useColorGradientFromString.ts
@@ -6,7 +6,7 @@ export const useColorGradientFromString = (
val?: string,
saturation = 3,
lightness = 3,
- angle = 155
+ angle = 155,
) =>
useMemo(() => {
if (!val) {
diff --git a/src/hooks/data/usePersistedState.ts b/src/hooks/data/usePersistedState.ts
index 80a48418..f0403824 100644
--- a/src/hooks/data/usePersistedState.ts
+++ b/src/hooks/data/usePersistedState.ts
@@ -1,6 +1,9 @@
import { useEffect, useMemo, useState } from 'react';
-export const usePersistedState = (key: string, initial: string): [string, (val: string) => any] => {
+export const usePersistedState = (
+ key: string,
+ initial: string,
+): [string, (val: string) => any] => {
const stored = useMemo(() => {
try {
return localStorage.getItem(`vault_${key}`) || initial;
diff --git a/src/hooks/dom/useFocusEvent.ts b/src/hooks/dom/useFocusEvent.ts
index baaf273a..3af9ab24 100644
--- a/src/hooks/dom/useFocusEvent.ts
+++ b/src/hooks/dom/useFocusEvent.ts
@@ -4,15 +4,18 @@ export const useFocusEvent = (initialState = false, delay = 0) => {
const [focused, setFocused] = useState(initialState);
const onFocus = useCallback(
- event => {
+ (event) => {
event.preventDefault();
event.stopPropagation();
setFocused(true);
},
- [setFocused]
+ [setFocused],
+ );
+ const onBlur = useCallback(
+ () => setTimeout(() => setFocused(false), delay),
+ [delay],
);
- const onBlur = useCallback(() => setTimeout(() => setFocused(false), delay), [delay]);
return { focused, onBlur, onFocus };
};
diff --git a/src/hooks/dom/useFormatWrapper.ts b/src/hooks/dom/useFormatWrapper.ts
index 89c25b23..96b832a9 100644
--- a/src/hooks/dom/useFormatWrapper.ts
+++ b/src/hooks/dom/useFormatWrapper.ts
@@ -7,12 +7,13 @@ export const useFormatWrapper = (onChange: (val: string) => void) => {
target: HTMLTextAreaElement,
prefix = '',
- suffix = ''
- ) => event => {
- event.preventDefault();
- wrapTextInsideInput(target, prefix, suffix, onChange);
- },
- [onChange]
+ suffix = '',
+ ) =>
+ (event) => {
+ event.preventDefault();
+ wrapTextInsideInput(target, prefix, suffix, onChange);
+ },
+ [onChange],
);
};
@@ -21,7 +22,7 @@ export const wrapTextInsideInput = (
target: HTMLTextAreaElement,
prefix: string,
suffix: string,
- onChange: (val: string) => void
+ onChange: (val: string) => void,
) => {
if (!target) return;
@@ -34,7 +35,7 @@ export const wrapTextInsideInput = (
onChange(
target.value.substring(0, start) +
replacement +
- target.value.substring(end, target.value.length)
+ target.value.substring(end, target.value.length),
);
target.focus();
diff --git a/src/hooks/dom/useInfiniteLoader.ts b/src/hooks/dom/useInfiniteLoader.ts
index e6eb2608..32236c63 100644
--- a/src/hooks/dom/useInfiniteLoader.ts
+++ b/src/hooks/dom/useInfiniteLoader.ts
@@ -2,7 +2,8 @@ import { useCallback, useEffect } from 'react';
export const useInfiniteLoader = (loader: () => void, isLoading?: boolean) => {
const onLoadMore = useCallback(() => {
- const pos = window.scrollY + window.innerHeight - document.body.scrollHeight;
+ const pos =
+ window.scrollY + window.innerHeight - document.body.scrollHeight;
if (isLoading || pos < -600) return;
diff --git a/src/hooks/dom/useInputPasteUpload.ts b/src/hooks/dom/useInputPasteUpload.ts
index 50ab42ba..b45ed986 100644
--- a/src/hooks/dom/useInputPasteUpload.ts
+++ b/src/hooks/dom/useInputPasteUpload.ts
@@ -5,13 +5,13 @@ import { getImageFromPaste } from '~/utils/uploader';
// useInputPasteUpload attaches event listener to input, that calls onUpload if user pasted any image
export const useInputPasteUpload = (onUpload: (files: File[]) => void) => {
return useCallback(
- async event => {
+ async (event) => {
const image = await getImageFromPaste(event);
if (!image) return;
onUpload([image]);
},
- [onUpload]
+ [onUpload],
);
};
diff --git a/src/hooks/dom/usePopperModifiers.ts b/src/hooks/dom/usePopperModifiers.ts
index f057ccb0..4cccfa7e 100644
--- a/src/hooks/dom/usePopperModifiers.ts
+++ b/src/hooks/dom/usePopperModifiers.ts
@@ -17,7 +17,11 @@ const sameWidth = {
},
};
-export const usePopperModifiers = (offsetX = 0, offsetY = 10, justify?: boolean): Modifier[] =>
+export const usePopperModifiers = (
+ offsetX = 0,
+ offsetY = 10,
+ justify?: boolean,
+): Modifier[] =>
useMemo(
() =>
[
@@ -35,5 +39,5 @@ export const usePopperModifiers = (offsetX = 0, offsetY = 10, justify?: boolean)
},
...(justify ? [sameWidth] : []),
] as Modifier[],
- [offsetX, offsetY, justify]
+ [offsetX, offsetY, justify],
);
diff --git a/src/hooks/dom/useScrollHeight.ts b/src/hooks/dom/useScrollHeight.ts
index 48bf7f4d..b2eaae11 100644
--- a/src/hooks/dom/useScrollHeight.ts
+++ b/src/hooks/dom/useScrollHeight.ts
@@ -11,7 +11,7 @@ const getHeight = () => {
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
- html.offsetHeight
+ html.offsetHeight,
);
};
export const useScrollHeight = () => getHeight();
diff --git a/src/hooks/dom/useScrollToTop.ts b/src/hooks/dom/useScrollToTop.ts
index f1c5c846..6127f83c 100644
--- a/src/hooks/dom/useScrollToTop.ts
+++ b/src/hooks/dom/useScrollToTop.ts
@@ -18,6 +18,6 @@ export const useScrollToTop = (deps?: any[]) => {
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
- deps && Array.isArray(deps) ? deps : []
+ deps && Array.isArray(deps) ? deps : [],
);
};
diff --git a/src/hooks/dom/useScrollTop.ts b/src/hooks/dom/useScrollTop.ts
index d8e7e066..d8e33579 100644
--- a/src/hooks/dom/useScrollTop.ts
+++ b/src/hooks/dom/useScrollTop.ts
@@ -1,7 +1,9 @@
import { useEffect, useState } from 'react';
export const useScrollTop = () => {
- const [top, setTop] = useState(typeof window !== 'undefined' ? window.scrollY : 0);
+ const [top, setTop] = useState(
+ typeof window !== 'undefined' ? window.scrollY : 0,
+ );
useEffect(() => {
setTop(window.scrollY);
diff --git a/src/hooks/flow/useFlowCellControls.ts b/src/hooks/flow/useFlowCellControls.ts
index 6440ece4..3e749a4f 100644
--- a/src/hooks/flow/useFlowCellControls.ts
+++ b/src/hooks/flow/useFlowCellControls.ts
@@ -6,11 +6,12 @@ export const useFlowCellControls = (
id: INode['id'],
description: string | undefined,
flow: FlowDisplay,
- onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void
+ onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void,
) => {
const onChange = useCallback(
- (value: Partial) => onChangeCellView(id, { ...flow, ...value }),
- [flow, id, onChangeCellView]
+ (value: Partial) =>
+ onChangeCellView(id, { ...flow, ...value }),
+ [flow, id, onChangeCellView],
);
const hasDescription = !!description && description.length > 32;
diff --git a/src/hooks/flow/useFlowSetCellView.ts b/src/hooks/flow/useFlowSetCellView.ts
index 8f391dac..8c688137 100644
--- a/src/hooks/flow/useFlowSetCellView.ts
+++ b/src/hooks/flow/useFlowSetCellView.ts
@@ -17,6 +17,6 @@ export const useFlowSetCellView = () => {
showErrorToast(error);
}
},
- [updateNode]
+ [updateNode],
);
};
diff --git a/src/hooks/lab/useGetLabStats.ts b/src/hooks/lab/useGetLabStats.ts
index 9a484a80..97853d49 100644
--- a/src/hooks/lab/useGetLabStats.ts
+++ b/src/hooks/lab/useGetLabStats.ts
@@ -21,15 +21,19 @@ export const useGetLabStats = () => {
heroes: lab.heroes,
tags: lab.tags,
},
- onSuccess: data => {
+ onSuccess: (data) => {
lab.setHeroes(data.heroes);
lab.setTags(data.tags);
},
refreshInterval,
- }
+ },
);
- const { data: updatesData, isValidating: isValidatingUpdates, mutate: mutateUpdates } = useSWR(
+ const {
+ data: updatesData,
+ isValidating: isValidatingUpdates,
+ mutate: mutateUpdates,
+ } = useSWR(
isUser ? API.LAB.UPDATES : null,
async () => {
const result = await getLabUpdates();
@@ -37,26 +41,27 @@ export const useGetLabStats = () => {
},
{
fallbackData: lab.updates,
- onSuccess: data => {
+ onSuccess: (data) => {
lab.setUpdates(data);
},
refreshInterval,
- }
+ },
);
const heroes = useMemo(() => stats?.heroes || [], [stats]);
const tags = useMemo(() => stats?.tags || [], [stats]);
const updates = useMemo(() => updatesData || [], [updatesData]);
- const isLoading = (!stats || !updates) && (isValidatingStats || isValidatingUpdates);
+ const isLoading =
+ (!stats || !updates) && (isValidatingStats || isValidatingUpdates);
const seenNode = useCallback(
async (nodeId: number) => {
await mutateUpdates(
- updates.filter(it => it.id !== nodeId),
- false
+ updates.filter((it) => it.id !== nodeId),
+ false,
);
},
- [mutateUpdates, updates]
+ [mutateUpdates, updates],
);
return { heroes, tags, updates, isLoading, seenNode };
diff --git a/src/hooks/messages/useMessages.ts b/src/hooks/messages/useMessages.ts
index e7614fea..6349202d 100644
--- a/src/hooks/messages/useMessages.ts
+++ b/src/hooks/messages/useMessages.ts
@@ -11,7 +11,7 @@ const getKey = (username: string): string | null => {
};
export const useMessages = (username: string) => {
const { data, isValidating } = useSWR(getKey(username), async () =>
- apiGetUserMessages({ username })
+ apiGetUserMessages({ username }),
);
const messages: IMessage[] = useMemo(() => data?.messages || [], [data]);
diff --git a/src/hooks/modal/useModal.ts b/src/hooks/modal/useModal.ts
index de5ce0d2..66266935 100644
--- a/src/hooks/modal/useModal.ts
+++ b/src/hooks/modal/useModal.ts
@@ -5,7 +5,9 @@ import { useModalStore } from '~/store/modal/useModalStore';
import { DialogComponentProps } from '~/types/modal';
export type DialogContentProps = {
- [K in keyof typeof DIALOG_CONTENT]: typeof DIALOG_CONTENT[K] extends (props: infer U) => any
+ [K in keyof typeof DIALOG_CONTENT]: (typeof DIALOG_CONTENT)[K] extends (
+ props: infer U,
+ ) => any
? U extends DialogComponentProps
? keyof Omit extends never
? {}
@@ -21,7 +23,7 @@ export const useModal = () => {
(dialog: T, props: DialogContentProps[T]) => {
setCurrent(dialog, props);
},
- [setCurrent]
+ [setCurrent],
);
return { showModal, hideModal: hide, current, isOpened: !!current };
diff --git a/src/hooks/modal/useShowModal.ts b/src/hooks/modal/useShowModal.ts
index 57452600..3ef0204a 100644
--- a/src/hooks/modal/useShowModal.ts
+++ b/src/hooks/modal/useShowModal.ts
@@ -10,6 +10,6 @@ export const useShowModal = (dialog: T) => {
(props: DialogContentProps[T]) => {
modal.showModal(dialog, props);
},
- [dialog, modal]
+ [dialog, modal],
);
};
diff --git a/src/hooks/navigation/useImageModal.ts b/src/hooks/navigation/useImageModal.ts
index ce3af6bd..68accfa9 100644
--- a/src/hooks/navigation/useImageModal.ts
+++ b/src/hooks/navigation/useImageModal.ts
@@ -11,6 +11,6 @@ export const useImageModal = () => {
(images: IFile[], index: number) => {
showModal({ items: images, index });
},
- [showModal]
+ [showModal],
);
};
diff --git a/src/hooks/navigation/useNavigation.ts b/src/hooks/navigation/useNavigation.ts
index 199801d8..b6f26c47 100644
--- a/src/hooks/navigation/useNavigation.ts
+++ b/src/hooks/navigation/useNavigation.ts
@@ -17,7 +17,7 @@ export const useNavigation = () => {
craHistory.push(url);
}
},
- [craHistory, nextRouter]
+ [craHistory, nextRouter],
);
return { push };
diff --git a/src/hooks/node/useCreateNode.ts b/src/hooks/node/useCreateNode.ts
index 75b2a87a..6dfd10de 100644
--- a/src/hooks/node/useCreateNode.ts
+++ b/src/hooks/node/useCreateNode.ts
@@ -16,9 +16,13 @@ export const useCreateNode = () => {
if (node.is_promoted) {
flow.setNodes([result.node, ...flow.nodes]);
} else {
- await lab.unshift({ node: result.node, comment_count: 0, last_seen: node.created_at });
+ await lab.unshift({
+ node: result.node,
+ comment_count: 0,
+ last_seen: node.created_at,
+ });
}
},
- [flow, lab]
+ [flow, lab],
);
};
diff --git a/src/hooks/node/useGrouppedComments.ts b/src/hooks/node/useGrouppedComments.ts
index dde9182e..22dfb3df 100644
--- a/src/hooks/node/useGrouppedComments.ts
+++ b/src/hooks/node/useGrouppedComments.ts
@@ -6,13 +6,13 @@ import { groupCommentsByUser } from '~/utils/fn';
export const useGrouppedComments = (
comments: IComment[],
order: 'ASC' | 'DESC',
- lastSeen?: string
+ lastSeen?: string,
) =>
useMemo(
() =>
(order === 'DESC' ? [...comments].reverse() : comments).reduce(
groupCommentsByUser(lastSeen),
- []
+ [],
),
- [comments, lastSeen, order]
+ [comments, lastSeen, order],
);
diff --git a/src/hooks/node/useNodeActions.ts b/src/hooks/node/useNodeActions.ts
index 58377560..06bb88ae 100644
--- a/src/hooks/node/useNodeActions.ts
+++ b/src/hooks/node/useNodeActions.ts
@@ -6,7 +6,10 @@ import { useModal } from '~/hooks/modal/useModal';
import { INode } from '~/types';
import { showErrorToast } from '~/utils/errors/showToast';
-export const useNodeActions = (node: INode, update: (node: Partial) => Promise) => {
+export const useNodeActions = (
+ node: INode,
+ update: (node: Partial) => Promise,
+) => {
const { showModal } = useModal();
const onLike = useCallback(async () => {
@@ -35,17 +38,20 @@ export const useNodeActions = (node: INode, update: (node: Partial) => Pr
const onLock = useCallback(async () => {
try {
- const result = await apiLockNode({ id: node.id, is_locked: !node.deleted_at });
+ const result = await apiLockNode({
+ id: node.id,
+ is_locked: !node.deleted_at,
+ });
await update({ deleted_at: result.deleted_at });
} catch (error) {
showErrorToast(error);
}
}, [node.deleted_at, node.id, update]);
- const onEdit = useCallback(() => showModal(Dialog.EditNode, { nodeId: node.id! }), [
- node,
- showModal,
- ]);
+ const onEdit = useCallback(
+ () => showModal(Dialog.EditNode, { nodeId: node.id! }),
+ [node, showModal],
+ );
return { onLike, onStar, onLock, onEdit };
};
diff --git a/src/hooks/node/useNodeAudios.ts b/src/hooks/node/useNodeAudios.ts
index 1ad28cf1..3149a171 100644
--- a/src/hooks/node/useNodeAudios.ts
+++ b/src/hooks/node/useNodeAudios.ts
@@ -4,7 +4,8 @@ import { UploadType } from '~/constants/uploads';
import { INode } from '~/types';
export const useNodeAudios = (node: INode) => {
- return useMemo(() => node.files.filter(file => file && file.type === UploadType.Audio), [
- node.files,
- ]);
+ return useMemo(
+ () => node.files.filter((file) => file && file.type === UploadType.Audio),
+ [node.files],
+ );
};
diff --git a/src/hooks/node/useNodeFormFormik.ts b/src/hooks/node/useNodeFormFormik.ts
index 089f5ae2..cc723a4f 100644
--- a/src/hooks/node/useNodeFormFormik.ts
+++ b/src/hooks/node/useNodeFormFormik.ts
@@ -1,6 +1,11 @@
import { useCallback, useRef } from 'react';
-import { FormikConfig, FormikHelpers, useFormik, useFormikContext } from 'formik';
+import {
+ FormikConfig,
+ FormikHelpers,
+ useFormik,
+ useFormikContext,
+} from 'formik';
import { object } from 'yup';
import { INode } from '~/types';
@@ -10,31 +15,31 @@ import { showErrorToast } from '~/utils/errors/showToast';
const validationSchema = object().shape({});
-const afterSubmit = ({ resetForm, setSubmitting, setErrors }: FormikHelpers) => (
- error?: unknown
-) => {
- setSubmitting(false);
+const afterSubmit =
+ ({ resetForm, setSubmitting, setErrors }: FormikHelpers) =>
+ (error?: unknown) => {
+ setSubmitting(false);
- if (error) {
- showErrorToast(error);
- return;
- }
+ if (error) {
+ showErrorToast(error);
+ return;
+ }
- if (getValidationErrors(error)) {
- setErrors(getValidationErrors(error)!);
- return;
- }
+ if (getValidationErrors(error)) {
+ setErrors(getValidationErrors(error)!);
+ return;
+ }
- if (resetForm) {
- resetForm();
- }
-};
+ if (resetForm) {
+ resetForm();
+ }
+ };
export const useNodeFormFormik = (
values: INode,
uploader: Uploader,
stopEditing: () => void,
- sendSaveRequest: (node: INode) => Promise
+ sendSaveRequest: (node: INode) => Promise,
) => {
const { current: initialValues } = useRef(values);
@@ -53,7 +58,7 @@ export const useNodeFormFormik = (
afterSubmit(helpers)(error);
}
},
- [sendSaveRequest, uploader.files]
+ [sendSaveRequest, uploader.files],
);
return useFormik({
diff --git a/src/hooks/node/useNodeImages.ts b/src/hooks/node/useNodeImages.ts
index e162be05..08cc1947 100644
--- a/src/hooks/node/useNodeImages.ts
+++ b/src/hooks/node/useNodeImages.ts
@@ -4,7 +4,8 @@ import { UploadType } from '~/constants/uploads';
import { INode } from '~/types';
export const useNodeImages = (node: INode) => {
- return useMemo(() => node.files.filter(file => file && file.type === UploadType.Image), [
- node.files,
- ]);
+ return useMemo(
+ () => node.files.filter((file) => file && file.type === UploadType.Image),
+ [node.files],
+ );
};
diff --git a/src/hooks/node/useUpdateNode.ts b/src/hooks/node/useUpdateNode.ts
index 1a6ff356..cc1ad033 100644
--- a/src/hooks/node/useUpdateNode.ts
+++ b/src/hooks/node/useUpdateNode.ts
@@ -27,6 +27,6 @@ export const useUpdateNode = (id: number) => {
await lab.updateNode(result.node.id!, result.node);
}
},
- [update, flow, lab]
+ [update, flow, lab],
);
};
diff --git a/src/hooks/profile/useGetProfile.ts b/src/hooks/profile/useGetProfile.ts
index 8d3eacbc..3e8c9308 100644
--- a/src/hooks/profile/useGetProfile.ts
+++ b/src/hooks/profile/useGetProfile.ts
@@ -20,7 +20,7 @@ export const useGetProfile = (username?: string) => {
},
{
refreshInterval: 60000,
- }
+ },
);
const profile = data || EMPTY_USER;
@@ -29,7 +29,7 @@ export const useGetProfile = (username?: string) => {
async (user: Partial) => {
await mutate({ ...profile, ...user });
},
- [mutate, profile]
+ [mutate, profile],
);
return { profile, isLoading: !data && isValidating, update };
diff --git a/src/hooks/search/useSearch.ts b/src/hooks/search/useSearch.ts
index 4fa3b874..a38dd2f0 100644
--- a/src/hooks/search/useSearch.ts
+++ b/src/hooks/search/useSearch.ts
@@ -9,21 +9,19 @@ import { flatten } from '~/utils/ramda';
const RESULTS_COUNT = 20;
-const getKey: (text: string) => SWRInfiniteKeyLoader = text => (
- pageIndex,
- previousPageData: INode[]
-) => {
- if ((pageIndex > 0 && !previousPageData?.length) || !text) return null;
+const getKey: (text: string) => SWRInfiniteKeyLoader =
+ (text) => (pageIndex, previousPageData: INode[]) => {
+ if ((pageIndex > 0 && !previousPageData?.length) || !text) return null;
- const props: GetSearchResultsRequest = {
- text,
- skip: pageIndex * RESULTS_COUNT,
- take: RESULTS_COUNT,
+ const props: GetSearchResultsRequest = {
+ text,
+ skip: pageIndex * RESULTS_COUNT,
+ take: RESULTS_COUNT,
+ };
+
+ return JSON.stringify(props);
};
- return JSON.stringify(props);
-};
-
export const useSearch = () => {
const [searchText, setSearchText] = useState('');
const [debouncedSearchText, setDebouncedSearchText] = useState('');
@@ -40,7 +38,7 @@ export const useSearch = () => {
const result = await getSearchResults(props);
return result.nodes;
- }
+ },
);
const loadMore = useCallback(() => setSize(size + 1), [setSize, size]);
diff --git a/src/hooks/tag/useTagAutocomplete.ts b/src/hooks/tag/useTagAutocomplete.ts
index 8cbfb495..493690c8 100644
--- a/src/hooks/tag/useTagAutocomplete.ts
+++ b/src/hooks/tag/useTagAutocomplete.ts
@@ -26,5 +26,5 @@ export const useTagAutocomplete = (
},
);
- return useMemo(() => (search ? data ?? [] : []), [data, search]);
+ return useMemo(() => (search ? (data ?? []) : []), [data, search]);
};
diff --git a/src/hooks/tag/useTagNodes.ts b/src/hooks/tag/useTagNodes.ts
index 7df94f90..53d02b12 100644
--- a/src/hooks/tag/useTagNodes.ts
+++ b/src/hooks/tag/useTagNodes.ts
@@ -9,13 +9,11 @@ import { flatten, isNil } from '~/utils/ramda';
const PAGE_SIZE = 10;
-const getKey: (tag: string) => SWRInfiniteKeyLoader = tag => (
- pageIndex,
- previousPageData: INode[]
-) => {
- if (pageIndex > 0 && !previousPageData?.length) return null;
- return `${API.TAG.NODES}?tag=${tag}&page=${pageIndex}`;
-};
+const getKey: (tag: string) => SWRInfiniteKeyLoader =
+ (tag) => (pageIndex, previousPageData: INode[]) => {
+ if (pageIndex > 0 && !previousPageData?.length) return null;
+ return `${API.TAG.NODES}?tag=${tag}&page=${pageIndex}`;
+ };
const extractKey = (key: string) => {
const re = new RegExp(`${API.TAG.NODES}\\?tag=[^&]+&page=(\\d+)`);
@@ -39,7 +37,7 @@ export const useTagNodes = (tag: string) => {
});
return result.nodes;
- }
+ },
);
const nodes = useMemo(() => flatten(data || []), [data]);
@@ -47,5 +45,12 @@ export const useTagNodes = (tag: string) => {
const loadMore = useCallback(() => setSize(size + 1), [setSize, size]);
- return { nodes, hasMore, loadMore, isLoading: !data && isValidating, mutate, data };
+ return {
+ nodes,
+ hasMore,
+ loadMore,
+ isLoading: !data && isValidating,
+ mutate,
+ data,
+ };
};
diff --git a/src/hooks/updates/useUpdates.ts b/src/hooks/updates/useUpdates.ts
index 91614788..9f1d4be0 100644
--- a/src/hooks/updates/useUpdates.ts
+++ b/src/hooks/updates/useUpdates.ts
@@ -9,7 +9,7 @@ export const useUpdates = () => {
const { data } = useSWR(
isUser ? API.USER.GET_UPDATES : null,
() => apiAuthGetUpdates({ exclude_dialogs: 0, last: '' }),
- { refreshInterval: 5 * 60 * 1000 }
+ { refreshInterval: 5 * 60 * 1000 },
);
const borisCommentedAt = data?.boris?.commented_at || '';
diff --git a/src/layouts/FlowLayout/styles.module.scss b/src/layouts/FlowLayout/styles.module.scss
index c3b0d2e0..fbc432c3 100644
--- a/src/layouts/FlowLayout/styles.module.scss
+++ b/src/layouts/FlowLayout/styles.module.scss
@@ -2,6 +2,8 @@
@import 'src/styles/variables';
+$target_flow_cell_width: 225px;
+
.wrap {
max-width: 2000px;
padding: 0 40px 40px 40px;
@@ -13,6 +15,8 @@ $cols: math.div($content_width, $cell);
.container {
@include container;
+ @include flow_container;
+
margin-top: $page_top_offset;
@include tablet {
@@ -22,9 +26,35 @@ $cols: math.div($content_width, $cell);
}
.grid {
- grid-template-rows: 50vh;
+ width: 100%;
+ min-height: 200px;
- @include flow_grid;
+ @include flow_grid() {
+ grid-template-rows: min(50vh, 33cqw);
+ }
+
+ @include flow_breakpoint(5);
+ @include flow_breakpoint(4);
+ @include flow_breakpoint(3) {
+ grid-template-rows: calc(66cqw - #{$gap}) auto;
+ }
+
+ @include flow_breakpoint(2) {
+ grid-template-rows: calc(100cqw - #{$gap}) auto;
+ }
+
+ @container sizer (width < #{$flow_hide_recents}) {
+ .stamp {
+ grid-column-start: 1;
+ grid-row-end: span 1;
+ }
+
+ .login {
+ display: flex;
+ grid-column: 1 / 2;
+ grid-row-end: span 2;
+ }
+ }
}
.pad_last {
@@ -52,11 +82,6 @@ $cols: math.div($content_width, $cell);
justify-content: stretch;
overflow: hidden;
position: relative;
-
- @media (max-width: $flow_hide_recents) {
- grid-column-start: 1;
- grid-row-end: span 1;
- }
}
.login {
@@ -72,10 +97,4 @@ $cols: math.div($content_width, $cell);
@include desktop {
display: none;
}
-
- @media (max-width: $flow_hide_recents) {
- display: flex;
- grid-column: 1 / 2;
- grid-row-end: span 2;
- }
}
diff --git a/src/layouts/ProfileLayout/index.tsx b/src/layouts/ProfileLayout/index.tsx
index fcdc8d66..e2f50377 100644
--- a/src/layouts/ProfileLayout/index.tsx
+++ b/src/layouts/ProfileLayout/index.tsx
@@ -2,7 +2,10 @@ import { FC } from 'react';
import { observer } from 'mobx-react-lite';
+import { Card } from '~/components/common/Card';
import { Container } from '~/components/common/Container';
+import { Sticky } from '~/components/common/Sticky';
+import { FlowGrid } from '~/containers/flow/FlowGrid';
import { ProfilePageLeft } from '~/containers/profile/ProfilePageLeft';
import { useUser } from '~/hooks/auth/useUser';
import { useGetProfile } from '~/hooks/profile/useGetProfile';
@@ -23,17 +26,76 @@ const ProfileLayout: FC = observer(({ username }) => {
return (
-
-
+ {
+
+
+ Inceptos cubilia velit faucibus mattis enim, massa conubia primis
+ torquent orci etiam? Pharetra arcu maecenas eget aptent auctor
+ massa habitant metus faucibus enim rhoncus. Laoreet fusce odio
+ litora primis senectus leo risus tristique semper augue tempor
+ arcu. Gravida sed cubilia malesuada hac proin parturient cubilia
+ habitant vulputate erat laoreet egestas. Condimentum.
+
+
+ Porta dui non eget varius pretium blandit fusce luctus sem
+ fermentum ac. At, porta iaculis primis! Mus aenean quam himenaeos
+ est vel interdum nostra sociosqu sodales sodales. Senectus
+ penatibus erat penatibus orci a suspendisse purus tristique
+ habitant rutrum ornare maecenas. Sapien vestibulum est ad
+ ridiculus viverra curae; suscipit penatibus lectus. A parturient
+ viverra morbi. Elit class primis laoreet, fusce integer pulvinar
+ facilisi. Dapibus scelerisque, leo mattis non primis dis. Sapien
+ lobortis mauris platea porttitor per class natoque maecenas fusce!
+ Est tellus sed leo!
+
+
+ Eros enim ac posuere vel mollis duis vivamus vivamus in est.
+ Elementum nostra himenaeos donec augue fermentum nascetur faucibus
+ dui lobortis. Hac per conubia a nunc primis. Tempus tempus erat
+ quam platea viverra nibh laoreet at aenean. Convallis habitasse,
+ luctus libero dis natoque suspendisse commodo hac? Natoque velit
+ pulvinar fusce posuere aliquam amet non. Dui phasellus netus
+ luctus. Potenti nostra tristique maecenas quisque egestas sociis!
+ A a sociosqu molestie sed blandit sapien sed pellentesque. Nisi
+ purus auctor aliquam tortor auctor faucibus. Quisque, ullamcorper
+ nisi tellus dignissim tempus.
+
+
+ Orci dis tincidunt porttitor amet ad hendrerit proin sollicitudin
+ mi. Amet sodales mi vivamus lacus sociosqu eleifend eros blandit
+ quisque mus dignissim imperdiet? Viverra suscipit metus eleifend
+ cras nibh nisl, fusce cum nascetur nibh. Sagittis cubilia
+ vulputate mauris lobortis! Rhoncus, ultrices magna ut condimentum.
+ Accumsan consequat penatibus vehicula varius nulla magna arcu leo
+ primis. Lacus pretium facilisis luctus quis sodales torquent
+ tempor? Nam scelerisque hendrerit diam ante cubilia volutpat. Nisi
+ curae; accumsan phasellus cursus orci tempus dolor ridiculus?
+ Taciti dis scelerisque sit.
+
+
+ Ligula odio aliquam donec platea? Ut; urna per praesent erat
+ conubia fermentum. Dis dapibus vulputate quisque odio cum et
+ vivamus ut. Risus accumsan cubilia ante nisi cum. Vulputate tempor
+ platea eget eleifend auctor rhoncus, vivamus vel ut? Nunc turpis
+ inceptos molestie molestie. Class libero eros volutpat placerat
+ quisque. Inceptos litora, felis.
+
+
+ }
+
+
+
-
-
+
+
-
here should be grid
+
{}} />
+ {}} />