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

fixed window callers

Browse source
This commit is contained in:
Fedor Katurov 2022-01-07 19:16:42 +07:00
parent ba2e610e01
commit 224c27b6f4
6 changed files with 55 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/editors/AudioGrid/index.tsx
View file

@ -1,11 +1,12 @@
import React, { FC, useCallback } from "react";
import { SortEnd } from "react-sortable-hoc";
import { IFile } from "~/redux/types";
import { moveArrItem } from "~/utils/fn";
import { SortableAudioGrid } from "~/components/editors/SortableAudioGrid";
import React, { FC, useCallback } from 'react';
import { SortEnd } from 'react-sortable-hoc';
import { IFile } from '~/redux/types';
import { moveArrItem } from '~/utils/fn';
import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
import styles from "./styles.module.scss";
import { UploadStatus } from "~/store/uploader/UploaderStore";
import styles from './styles.module.scss';
import { UploadStatus } from '~/store/uploader/UploaderStore';
import { useWindowSize } from '~/hooks/dom/useWindowSize';
interface IProps {
files: IFile[];
@ -14,6 +15,8 @@ interface IProps {
}
const AudioGrid: FC<IProps> = ({ files, setFiles, locked }) => {
const { innerWidth } = useWindowSize();
const onMove = useCallback(
({ oldIndex, newIndex }: SortEnd) => {
setFiles(
@ -53,7 +56,7 @@ const AudioGrid: FC<IProps> = ({ files, setFiles, locked }) => {
axis="xy"
items={files}
locked={locked}
pressDelay={window.innerWidth < 768 ? 200 : 0}
pressDelay={innerWidth < 768 ? 200 : 0}
helperClass={styles.helper}
/>
);

19
src/components/editors/ImageGrid/index.tsx
View file

@ -1,10 +1,11 @@
import React, { FC, useCallback } from "react";
import { SortEnd } from "react-sortable-hoc";
import styles from "./styles.module.scss";
import { IFile } from "~/redux/types";
import { moveArrItem } from "~/utils/fn";
import { SortableImageGrid } from "~/components/editors/SortableImageGrid";
import { UploadStatus } from "~/store/uploader/UploaderStore";
import React, { FC, useCallback } from 'react';
import { SortEnd } from 'react-sortable-hoc';
import styles from './styles.module.scss';
import { IFile } from '~/redux/types';
import { moveArrItem } from '~/utils/fn';
import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
import { UploadStatus } from '~/store/uploader/UploaderStore';
import { useWindowSize } from '~/hooks/dom/useWindowSize';
interface IProps {
files: IFile[];
@ -13,6 +14,8 @@ interface IProps {
}
const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
const { innerWidth } = useWindowSize();
const onMove = useCallback(
({ oldIndex, newIndex }: SortEnd) => {
setFiles(
@ -40,7 +43,7 @@ const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
axis="xy"
items={files}
locked={locked}
pressDelay={window.innerWidth < 768 ? 200 : 0}
pressDelay={innerWidth < 768 ? 200 : 0}
helperClass={styles.helper}
/>
);

7
src/components/flow/FlowSwiperHero/index.tsx
View file

@ -11,6 +11,7 @@ import { LoaderCircle } from '~/components/input/LoaderCircle';
import { useHistory } from 'react-router';
import classNames from 'classnames';
import { IFlowNode } from '~/redux/types';
import { useWindowSize } from '~/hooks/dom/useWindowSize';
SwiperCore.use([EffectFade, Lazy, Autoplay, Navigation]);
@ -19,9 +20,13 @@ interface Props {
}
export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
const { innerWidth } = useWindowSize();
const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(undefined);
const [currentIndex, setCurrentIndex] = useState(heroes.length);
const preset = useMemo(() => (window.innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), []);
const preset = useMemo(() => (innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), [
innerWidth,
]);
const history = useHistory();
const onNext = useCallback(() => {

8
src/constants/dom/index.ts
View file

@ -1 +1,7 @@
export const isTablet = () => window.innerWidth < 599;
export const isTablet = () => {
if (typeof window === 'undefined') {
return false;
}
return window.innerWidth < 599;
};

10
src/hooks/dom/useWindowSize.ts Normal file
View file

@ -0,0 +1,10 @@
import { useMemo } from 'react';
export const useWindowSize = () =>
useMemo(() => {
if (typeof window === 'undefined') {
return { innerWidth: 0, innerHeight: 0 };
}
return { innerWidth: window.innerWidth, innerHeight: window.innerHeight };
}, []);

18
src/redux/store.ts
View file

@ -64,14 +64,6 @@ export function configureStore(): {
sagaMiddleware.run(authSaga);
sagaMiddleware.run(messagesSaga);
window.addEventListener('message', message => {
if (message && message.data && message.data.type === 'oauth_login' && message.data.token)
return store.dispatch(gotAuthPostMessage({ token: message.data.token }));
if (message && message.data && message.data.type === 'username' && message.data.username)
return store.dispatch(authOpenProfile(message.data.username));
});
const persistor = persistStore(store);
// Pass token to axios
@ -96,5 +88,15 @@ export function configureStore(): {
throw error;
});
if (typeof window !== 'undefined') {
window.addEventListener('message', message => {
if (message && message.data && message.data.type === 'oauth_login' && message.data.token)
return store.dispatch(gotAuthPostMessage({ token: message.data.token }));
if (message && message.data && message.data.type === 'username' && message.data.username)
return store.dispatch(authOpenProfile(message.data.username));
});
}
return { store, persistor };
}