-
-
);
});
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 cd91dcf2..a8e0520b 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 0;
- min-height: $comment_height;
+ padding: 0 $gap;
+ 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;
+ background: $content_bg_backdrop 50% 50%;
background-size: cover;
z-index: 15;
border-radius: $radius;
@@ -69,7 +69,6 @@
justify-content: stretch;
box-sizing: border-box;
z-index: 2;
- cursor: pointer;
& > div {
width: 100%;
@@ -99,47 +98,3 @@
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 3a45aad6..de654b99 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(300px, $flexbin-space);
+ @include flexbin(25vh, $flexbin-space);
// Tablet devices
@media (max-width: $flexbin-tablet-max) {
@@ -22,16 +22,13 @@
}
.image {
- max-height: 300px;
+ max-height: 500px;
border-radius: $radius;
max-width: 100%;
.multiple & {
- // 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;
+ max-height: 250px;
+ max-inline-size: 250px;
}
}
diff --git a/src/containers/node/NodeComments/components/Comment/index.tsx b/src/containers/node/NodeComments/components/Comment/index.tsx
index 1e3f2b60..121d8051 100644
--- a/src/containers/node/NodeComments/components/Comment/index.tsx
+++ b/src/containers/node/NodeComments/components/Comment/index.tsx
@@ -8,7 +8,6 @@ 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';
@@ -84,22 +83,18 @@ 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 92cd93b4..01c1e131 100644
--- a/src/containers/node/NodeComments/components/Comment/styles.module.scss
+++ b/src/containers/node/NodeComments/components/Comment/styles.module.scss
@@ -15,9 +15,3 @@
.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 fa39d493..acba75b0 100644
--- a/src/containers/node/NodeComments/index.tsx
+++ b/src/containers/node/NodeComments/index.tsx
@@ -1,13 +1,9 @@
-import { FC, useEffect, useMemo } from 'react';
+import { FC, 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';
@@ -15,7 +11,6 @@ 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';
@@ -23,11 +18,6 @@ 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();
@@ -45,7 +35,7 @@ const NodeComments: FC = observer(({ order }) => {
onSaveComment,
} = useCommentContext();
- const groupped = useGrouppedComments(
+ const groupped: ICommentGroup[] = useGrouppedComments(
comments,
order,
lastSeenCurrent ?? undefined,
@@ -69,56 +59,30 @@ 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, index) => (
- <>
- {isFirstGroupWithNewComment(group, groupped[index - 1]) && (
-
- )}
+ {groupped.map((group) => (
+
+ ))}
-
-
- ))}
-
- {order === 'ASC' && more}
-
-
+ {order === 'ASC' && more}
+
+
-
-
- {isLoading ?
: profile?.fullname}
-
-
-
- {isLoading ?
: `~${profile?.username}`}
-
-
-
-
{description}
+
+ {isLoading ?
: profile?.fullname}
+
+
+
+ {isLoading ?
: `~${profile?.username}`}
+
-
+
- {[...item.colors].reverse().map((color) => (
+ {item.colors.map((color) => (
{
diff --git a/src/hooks/auth/useLastSeenBoris.ts b/src/hooks/auth/useLastSeenBoris.ts
index 3cc5a5bb..c8e08bbe 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 76e74458..4e438f16 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 74e3fa68..8e957b58 100644
--- a/src/hooks/auth/useRestoreCode.ts
+++ b/src/hooks/auth/useRestoreCode.ts
@@ -5,9 +5,8 @@ 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 0405993d..0373dfd0 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,21 +26,15 @@ 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();
@@ -53,7 +47,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 7386a9ac..6dc63a37 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 eeeab746..0d7ce68d 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 7ea8c26b..3acad2d0 100644
--- a/src/hooks/auth/useSocialRegisterForm.ts
+++ b/src/hooks/auth/useSocialRegisterForm.ts
@@ -9,7 +9,9 @@ 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;
@@ -21,7 +23,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 }) => {
@@ -41,7 +43,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 ea364e88..ba90caa9 100644
--- a/src/hooks/auth/useUserActiveStatus.ts
+++ b/src/hooks/auth/useUserActiveStatus.ts
@@ -7,10 +7,7 @@ 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 7713fe0b..47d8a7b9 100644
--- a/src/hooks/boris/useBorisStats.ts
+++ b/src/hooks/boris/useBorisStats.ts
@@ -6,15 +6,13 @@ 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: issues = [] } = useSWR(API.BORIS.GITHUB_ISSUES, () =>
- getGithubIssues(),
+ const { data: backend = initialBackendStats, isValidating: isValidatingBackend } = useSWR(
+ API.BORIS.GET_BACKEND_STATS,
+ () => getBorisBackendStats()
);
+ const { data: issues = [] } = useSWR(API.BORIS.GITHUB_ISSUES, () => getGithubIssues());
+
const stats: BorisUsageStats = {
backend,
issues,
diff --git a/src/hooks/color/useColorFromString.ts b/src/hooks/color/useColorFromString.ts
index dba30155..10668fb8 100644
--- a/src/hooks/color/useColorFromString.ts
+++ b/src/hooks/color/useColorFromString.ts
@@ -3,16 +3,9 @@ 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 10e17cdc..b94864f1 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 f0403824..80a48418 100644
--- a/src/hooks/data/usePersistedState.ts
+++ b/src/hooks/data/usePersistedState.ts
@@ -1,9 +1,6 @@
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 3af9ab24..baaf273a 100644
--- a/src/hooks/dom/useFocusEvent.ts
+++ b/src/hooks/dom/useFocusEvent.ts
@@ -4,18 +4,15 @@ export const useFocusEvent = (initialState = false, delay = 0) => {
const [focused, setFocused] = useState(initialState);
const onFocus = useCallback(
- (event) => {
+ event => {
event.preventDefault();
event.stopPropagation();
setFocused(true);
},
- [setFocused],
- );
- const onBlur = useCallback(
- () => setTimeout(() => setFocused(false), delay),
- [delay],
+ [setFocused]
);
+ 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 96b832a9..89c25b23 100644
--- a/src/hooks/dom/useFormatWrapper.ts
+++ b/src/hooks/dom/useFormatWrapper.ts
@@ -7,13 +7,12 @@ 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]
);
};
@@ -22,7 +21,7 @@ export const wrapTextInsideInput = (
target: HTMLTextAreaElement,
prefix: string,
suffix: string,
- onChange: (val: string) => void,
+ onChange: (val: string) => void
) => {
if (!target) return;
@@ -35,7 +34,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 32236c63..e6eb2608 100644
--- a/src/hooks/dom/useInfiniteLoader.ts
+++ b/src/hooks/dom/useInfiniteLoader.ts
@@ -2,8 +2,7 @@ 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 b45ed986..50ab42ba 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 4cccfa7e..f057ccb0 100644
--- a/src/hooks/dom/usePopperModifiers.ts
+++ b/src/hooks/dom/usePopperModifiers.ts
@@ -17,11 +17,7 @@ const sameWidth = {
},
};
-export const usePopperModifiers = (
- offsetX = 0,
- offsetY = 10,
- justify?: boolean,
-): Modifier[] =>
+export const usePopperModifiers = (offsetX = 0, offsetY = 10, justify?: boolean): Modifier[] =>
useMemo(
() =>
[
@@ -39,5 +35,5 @@ export const usePopperModifiers = (
},
...(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 b2eaae11..48bf7f4d 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 6127f83c..f1c5c846 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 d8e33579..d8e7e066 100644
--- a/src/hooks/dom/useScrollTop.ts
+++ b/src/hooks/dom/useScrollTop.ts
@@ -1,9 +1,7 @@
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 3e749a4f..6440ece4 100644
--- a/src/hooks/flow/useFlowCellControls.ts
+++ b/src/hooks/flow/useFlowCellControls.ts
@@ -6,12 +6,11 @@ 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 8c688137..8f391dac 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 97853d49..9a484a80 100644
--- a/src/hooks/lab/useGetLabStats.ts
+++ b/src/hooks/lab/useGetLabStats.ts
@@ -21,19 +21,15 @@ 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();
@@ -41,27 +37,26 @@ 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 6349202d..e7614fea 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 66266935..de5ce0d2 100644
--- a/src/hooks/modal/useModal.ts
+++ b/src/hooks/modal/useModal.ts
@@ -5,9 +5,7 @@ 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
? {}
@@ -23,7 +21,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 3ef0204a..57452600 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 68accfa9..ce3af6bd 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 b6f26c47..199801d8 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 6dfd10de..75b2a87a 100644
--- a/src/hooks/node/useCreateNode.ts
+++ b/src/hooks/node/useCreateNode.ts
@@ -16,13 +16,9 @@ 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 22dfb3df..dde9182e 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 06bb88ae..58377560 100644
--- a/src/hooks/node/useNodeActions.ts
+++ b/src/hooks/node/useNodeActions.ts
@@ -6,10 +6,7 @@ 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 () => {
@@ -38,20 +35,17 @@ export const useNodeActions = (
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 3149a171..1ad28cf1 100644
--- a/src/hooks/node/useNodeAudios.ts
+++ b/src/hooks/node/useNodeAudios.ts
@@ -4,8 +4,7 @@ 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 cc723a4f..089f5ae2 100644
--- a/src/hooks/node/useNodeFormFormik.ts
+++ b/src/hooks/node/useNodeFormFormik.ts
@@ -1,11 +1,6 @@
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';
@@ -15,31 +10,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);
@@ -58,7 +53,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 08cc1947..e162be05 100644
--- a/src/hooks/node/useNodeImages.ts
+++ b/src/hooks/node/useNodeImages.ts
@@ -4,8 +4,7 @@ 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 cc1ad033..1a6ff356 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 3e8c9308..8d3eacbc 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 a38dd2f0..4fa3b874 100644
--- a/src/hooks/search/useSearch.ts
+++ b/src/hooks/search/useSearch.ts
@@ -9,19 +9,21 @@ 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,
- };
-
- return JSON.stringify(props);
+ const props: GetSearchResultsRequest = {
+ text,
+ skip: pageIndex * RESULTS_COUNT,
+ take: RESULTS_COUNT,
};
+ return JSON.stringify(props);
+};
+
export const useSearch = () => {
const [searchText, setSearchText] = useState('');
const [debouncedSearchText, setDebouncedSearchText] = useState('');
@@ -38,7 +40,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 493690c8..8cbfb495 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 53d02b12..7df94f90 100644
--- a/src/hooks/tag/useTagNodes.ts
+++ b/src/hooks/tag/useTagNodes.ts
@@ -9,11 +9,13 @@ 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+)`);
@@ -37,7 +39,7 @@ export const useTagNodes = (tag: string) => {
});
return result.nodes;
- },
+ }
);
const nodes = useMemo(() => flatten(data || []), [data]);
@@ -45,12 +47,5 @@ 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 9f1d4be0..91614788 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 fbc432c3..c3b0d2e0 100644
--- a/src/layouts/FlowLayout/styles.module.scss
+++ b/src/layouts/FlowLayout/styles.module.scss
@@ -2,8 +2,6 @@
@import 'src/styles/variables';
-$target_flow_cell_width: 225px;
-
.wrap {
max-width: 2000px;
padding: 0 40px 40px 40px;
@@ -15,8 +13,6 @@ $cols: math.div($content_width, $cell);
.container {
@include container;
- @include flow_container;
-
margin-top: $page_top_offset;
@include tablet {
@@ -26,35 +22,9 @@ $cols: math.div($content_width, $cell);
}
.grid {
- width: 100%;
- min-height: 200px;
+ grid-template-rows: 50vh;
- @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;
- }
- }
+ @include flow_grid;
}
.pad_last {
@@ -82,6 +52,11 @@ $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 {
@@ -97,4 +72,10 @@ $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 e2f50377..fcdc8d66 100644
--- a/src/layouts/ProfileLayout/index.tsx
+++ b/src/layouts/ProfileLayout/index.tsx
@@ -2,10 +2,7 @@ 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';
@@ -26,76 +23,17 @@ 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