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

fixed profile patching

Browse source
This commit is contained in:
Fedor Katurov 2019-11-19 15:56:45 +07:00
parent f25d627b4e
commit 60dffc2353
6 changed files with 209 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/containers/CoverBackdrop/index.tsx
View file

@ -1,15 +1,17 @@
import React, { FC, useState, useCallback, useEffect } from 'react';
import { IUser } from '~/redux/auth/types';
import styles from './styles.scss';
import { getURL } from '~/utils/dom';
import { PRESETS } from '~/constants/urls';
import classNames from 'classnames';
import React, { FC, useState, useCallback, useEffect, useRef } from "react";
import { IUser } from "~/redux/auth/types";
import styles from "./styles.scss";
import { getURL } from "~/utils/dom";
import { PRESETS } from "~/constants/urls";
import classNames from "classnames";
interface IProps {
cover: IUser['cover'];
cover: IUser["cover"];
}
const CoverBackdrop: FC<IProps> = ({ cover }) => {
const ref = useRef<HTMLImageElement>();
const [is_loaded, setIsLoaded] = useState(false);
const onLoad = useCallback(() => setIsLoaded(true), [setIsLoaded]);
@ -17,7 +19,11 @@ const CoverBackdrop: FC<IProps> = ({ cover }) => {
const image = getURL(cover, PRESETS.cover);
useEffect(() => {
if (!cover || !cover.url || !ref || !ref.current) return;
ref.current.src = "";
setIsLoaded(false);
ref.current.src = getURL(cover, PRESETS.cover);
}, [cover]);
if (!cover) return null;
@ -27,7 +33,7 @@ const CoverBackdrop: FC<IProps> = ({ cover }) => {
className={classNames(styles.cover, { [styles.active]: is_loaded })}
style={{ backgroundImage: `url("${image}")` }}
>
<img src={image} onLoad={onLoad} />
<img onLoad={onLoad} ref={ref} />
</div>
);
};