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

refactored some common components

Browse source
This commit is contained in:
Fedor Katurov 2023-11-20 22:29:13 +06:00
parent 5e9c111e0f
commit a9a220273f
67 changed files with 238 additions and 220 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/containers/auth/LoginDialog/components/TelegramLoginForm/index.tsx
View file

@ -4,7 +4,7 @@ import TelegramLoginButton, {
TelegramUser,
} from '@v9v/ts-react-telegram-login';
import { LoaderCircle } from '~/components/input/LoaderCircle';
import { LoaderCircle } from '~/components/common/LoaderCircle';
import styles from './styles.module.scss';

2
src/containers/auth/RestorePasswordDialog/components/RestoreInvalidCode/index.tsx
View file

@ -1,8 +1,8 @@
import React, { VFC } from 'react';
import { Group } from '~/components/common/Group';
import { Icon } from '~/components/common/Icon';
import { Button } from '~/components/input/Button';
import { Icon } from '~/components/input/Icon';
import { ERROR_LITERAL, ERRORS } from '~/constants/errors';
import styles from './styles.module.scss';

2
src/containers/auth/RestorePasswordDialog/components/RestoreSuccess/index.tsx
View file

@ -1,8 +1,8 @@
import React, { VFC } from 'react';
import { Group } from '~/components/common/Group';
import { Icon } from '~/components/common/Icon';
import { Button } from '~/components/input/Button';
import { Icon } from '~/components/input/Icon';
import styles from './styles.module.scss';

2
src/containers/auth/RestoreRequestDialog/components/RestoreSent/index.tsx
View file

@ -1,8 +1,8 @@
import React, { VFC } from 'react';
import { Group } from '~/components/common/Group';
import { Icon } from '~/components/common/Icon';
import { Button } from '~/components/input/Button';
import { Icon } from '~/components/input/Icon';
import styles from './styles.module.scss';

2
src/containers/boris/BorisSidebar/components/BorisContacts/components/BorisContactItem/index.tsx
View file

@ -1,7 +1,7 @@
import { FC, ReactNode } from 'react';
import { Icon } from '~/components/common/Icon';
import { WithDescription } from '~/components/common/WithDescription';
import { Icon } from '~/components/input/Icon';
interface Props {
icon: string;

2
src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorPublicSwitch/index.tsx
View file

@ -1,7 +1,7 @@
import React, { FC, useCallback } from 'react';
import { Icon } from '~/components/common/Icon';
import { Button } from '~/components/input/Button';
import { Icon } from '~/components/input/Icon';
import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
import { IEditorComponentProps } from '~/types/node';

2
src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorUploadButton/index.tsx
View file

@ -1,7 +1,7 @@
import React, { ChangeEvent, FC, useCallback } from 'react';
import { Icon } from '~/components/common/Icon';
import { Button } from '~/components/input/Button';
import { Icon } from '~/components/input/Icon';
import { UploadType } from '~/constants/uploads';
import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
import { IEditorComponentProps } from '~/types/node';

2
src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorUploadCoverButton/index.tsx
View file

@ -1,6 +1,6 @@
import React, { ChangeEvent, FC, useCallback, useEffect } from 'react';
import { Icon } from '~/components/input/Icon';
import { Icon } from '~/components/common/Icon';
import { UploadSubject, UploadTarget, UploadType } from '~/constants/uploads';
import { imagePresets } from '~/constants/urls';
import { useUploader } from '~/hooks/data/useUploader';

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

@ -2,8 +2,8 @@ import React, { FC, useCallback } from 'react';
import { observer } from 'mobx-react-lite';
import { LoaderCircle } from '~/components/common/LoaderCircle';
import { ModalWrapper } from '~/components/common/ModalWrapper';
import { LoaderCircle } from '~/components/input/LoaderCircle';
import { EditorDialog } from '~/containers/dialogs/EditorDialog';
import { useLoadNode } from '~/hooks/node/useLoadNode';
import { useUpdateNode } from '~/hooks/node/useUpdateNode';

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

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

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

@ -3,10 +3,10 @@ import React, { FC, FormEvent, useCallback, useMemo } from 'react';
import classNames from 'classnames';
import { Group } from '~/components/common/Group';
import { Icon } from '~/components/common/Icon';
import { Superpower } from '~/components/common/Superpower';
import { FlowRecent } from '~/components/flow/FlowRecent';
import { FlowSearchResults } from '~/components/flow/FlowSearchResults';
import { Icon } from '~/components/input/Icon';
import { InputText } from '~/components/input/InputText';
import { Toggle } from '~/components/input/Toggle';
import { experimentalFeatures } from '~/constants/features';

11
src/containers/main/SubmitBarRouter/components/SubmitBar/index.tsx
View file

@ -2,7 +2,7 @@ import React, { FC, useCallback, useState } from 'react';
import classNames from 'classnames';
import { Icon } from '~/components/input/Icon';
import { Icon } from '~/components/common/Icon';
import { Dialog } from '~/constants/modal';
import { useShowModal } from '~/hooks/modal/useShowModal';
@ -23,7 +23,7 @@ const SubmitBar: FC<SubmitBarProps> = ({ isLab }) => {
(type: string) => () => {
showModal({ type, isInLab: !!isLab });
},
[isLab, showModal]
[isLab, showModal],
);
const icon = isLab ? 'lab' : 'plus';
@ -48,7 +48,12 @@ const SubmitBar: FC<SubmitBarProps> = ({ isLab }) => {
</button>
</div>
<button className={styles.button} onFocus={onFocus} onBlur={onBlur} type="button">
<button
className={styles.button}
onFocus={onFocus}
onBlur={onBlur}
type="button"
>
<Icon icon={icon} />
</button>
</div>

10
src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentEmbedBlock/index.tsx
View file

@ -1,19 +1,18 @@
import React, { FC, memo, useMemo } from 'react';
import { Icon } from '~/components/input/Icon';
import { Icon } from '~/components/common/Icon';
import { ICommentBlockProps } from '~/constants/comment';
import { useYoutubeMetadata } from '~/hooks/metadata/useYoutubeMetadata';
import { getYoutubeThumb } from '~/utils/dom';
import styles from './styles.module.scss';
type Props = ICommentBlockProps & {};
const CommentEmbedBlock: FC<Props> = memo(({ block }) => {
const id = useMemo(() => {
const match = block.content.match(
/https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([\w\-=]+)/
/https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([\w\-=]+)/,
);
return (match && match[1]) || '';
@ -21,7 +20,10 @@ const CommentEmbedBlock: FC<Props> = memo(({ block }) => {
const url = useMemo(() => `https://youtube.com/watch?v=${id}`, [id]);
const preview = useMemo(() => getYoutubeThumb(block.content), [block.content]);
const preview = useMemo(
() => getYoutubeThumb(block.content),
[block.content],
);
const metadata = useYoutubeMetadata(id);
const title = metadata?.metadata?.title || '';

2
src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/index.tsx
View file

@ -3,7 +3,7 @@ import { FC } from 'react';
import classNames from 'classnames';
import { Hoverable } from '~/components/common/Hoverable';
import { Icon } from '~/components/input/Icon';
import { Icon } from '~/components/common/Icon';
import { imagePresets } from '~/constants/urls';
import { IFile } from '~/types';
import { getURL } from '~/utils/dom';

2
src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentLike/index.tsx
View file

@ -2,7 +2,7 @@ import React, { FC } from 'react';
import classnames from 'classnames';
import { Icon } from '~/components/input/Icon';
import { Icon } from '~/components/common/Icon';
import styles from './styles.module.scss';

4
src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentMenu/index.tsx
View file

@ -1,6 +1,6 @@
import React, { FC, useMemo } from 'react';
import { CornerMenu } from '~/components/common/CornerMenu';
import { CornerMenu } from '~/components/menu/CornerMenu';
interface IProps {
onEdit: () => void;
@ -16,7 +16,7 @@ const CommentMenu: FC<IProps> = ({ onEdit, onDelete }) => {
},
{ title: 'Удалить', action: onDelete },
],
[onEdit, onDelete]
[onEdit, onDelete],
);
return <CornerMenu actions={actions} />;

2
src/containers/notifications/NotificationList/index.tsx
View file

@ -3,9 +3,9 @@ import { FC, useCallback, useEffect } from 'react';
import classNames from 'classnames';
import { isAfter, parseISO } from 'date-fns';
import { LoaderScreen } from '~/components/common/LoaderScreen';
import { Button } from '~/components/input/Button';
import { InputRow } from '~/components/input/InputRow';
import { LoaderScreen } from '~/components/input/LoaderScreen';
import { NotificationComment } from '~/components/notifications/NotificationComment';
import { NotificationNode } from '~/components/notifications/NotificationNode';
import { useNotificationsList } from '~/hooks/notifications/useNotificationsList';

20
src/containers/player/PlayerView/components/PlayerBar/index.tsx
View file

@ -1,6 +1,6 @@
import React, { useCallback, VFC } from 'react';
import { Icon } from '~/components/input/Icon';
import { Icon } from '~/components/common/Icon';
import { PlayerState } from '~/constants/player';
import { IFile } from '~/types';
import { PlayerProgress } from '~/types/player';
@ -33,13 +33,13 @@ const PlayerBar: VFC<Props> = ({
}, [playerPlay, playerPause, status]);
const onSeek = useCallback(
event => {
(event) => {
event.stopPropagation();
const { clientX, target } = event;
const { left, width } = target.getBoundingClientRect();
playerSeek(((clientX - left) / width) * 100);
},
[playerSeek]
[playerSeek],
);
if (status === PlayerState.UNSET) return null;
@ -47,21 +47,29 @@ const PlayerBar: VFC<Props> = ({
const metadata: IFile['metadata'] = path(['metadata'], file);
const title =
metadata &&
(metadata.title || [metadata.id3artist, metadata.id3title].filter(el => !!el).join(' - '));
(metadata.title ||
[metadata.id3artist, metadata.id3title].filter((el) => !!el).join(' - '));
return (
<div className={styles.place}>
<div className={styles.wrap}>
<div className={styles.status}>
<div className={styles.playpause} onClick={onClick}>
{status === PlayerState.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />}
{status === PlayerState.PLAYING ? (
<Icon icon="pause" />
) : (
<Icon icon="play" />
)}
</div>
<div className={styles.info}>
<div className={styles.title}>{title}</div>
<div className={styles.progress} onClick={onSeek}>
<div className={styles.bar} style={{ width: `${progress.progress}%` }} />
<div
className={styles.bar}
style={{ width: `${progress.progress}%` }}
/>
</div>
</div>

2
src/containers/profile/ProfileAccounts/index.tsx
View file

@ -1,8 +1,8 @@
import React, { FC, Fragment } from 'react';
import { Group } from '~/components/common/Group';
import { Icon } from '~/components/common/Icon';
import { Button } from '~/components/input/Button';
import { Icon } from '~/components/input/Icon';
import { Placeholder } from '~/components/placeholders/Placeholder';
import { SOCIAL_ICONS } from '~/constants/auth/socials';
import { useOAuth } from '~/hooks/auth/useOAuth';

2
src/containers/profile/ProfileLoader/index.tsx
View file

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

2
src/containers/settings/SettingsDeleted/index.tsx
View file

@ -2,9 +2,9 @@ import React, { VFC } from 'react';
import { Filler } from '~/components/common/Filler';
import { Group } from '~/components/common/Group';
import { Icon } from '~/components/common/Icon';
import { Padder } from '~/components/common/Padder';
import { FlowRecentItem } from '~/components/flow/FlowRecentItem';
import { Icon } from '~/components/input/Icon';
import { InputText } from '~/components/input/InputText';
import { HorizontalMenu } from '~/components/menu/HorizontalMenu';
import { useFlowStore } from '~/store/flow/useFlowStore';

2
src/containers/sidebars/TagSidebar/index.tsx
View file

@ -1,7 +1,7 @@
import { useMemo, VFC } from 'react';
import { Icon } from '~/components/common/Icon';
import { InfiniteScroll } from '~/components/common/InfiniteScroll';
import { Icon } from '~/components/input/Icon';
import { SidebarStack } from '~/components/sidebar/SidebarStack';
import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
import { SidebarWrapper } from '~/components/sidebar/SidebarWrapper';