Merge pull request #132 from crupest/refactor

Refactor a lot of things.

2 files changed, 32 insertions, 4 deletions

diff --git a/Timeline/ClientApp/src/app/common/AppBar.tsx b/Timeline/ClientApp/src/app/common/AppBar.tsx
index 061ba08c..8349aef7 100644
--- a/Timeline/ClientApp/src/app/common/AppBar.tsx
+++ b/Timeline/ClientApp/src/app/common/AppBar.tsx
@@ -5,14 +5,15 @@ import { Navbar, NavbarToggler, Collapse, Nav, NavItem } from 'reactstrap';
 import { useMediaQuery } from 'react-responsive';

 import { useTranslation } from 'react-i18next';

 

-import { useUser, useAvatarUrl } from '../data/user';

+import { useUser, useAvatar } from '../data/user';

 

 import TimelineLogo from './TimelineLogo';

+import BlobImage from './BlobImage';

 

 const AppBar: React.FC = (_) => {

   const history = useHistory();

   const user = useUser();

-  const avatarUrl = useAvatarUrl(user?.username);

+  const avatar = useAvatar(user?.username);

 

   const { t } = useTranslation();

 

@@ -34,9 +35,9 @@ const AppBar: React.FC = (_) => {
     <div className="ml-auto mr-2">

       {user != null ? (

         <NavLink to={`/users/${user.username}`}>

-          <img

+          <BlobImage

             className="avatar small rounded-circle bg-white"

-            src={avatarUrl}

+            blob={avatar}

           />

         </NavLink>

       ) : (

diff --git a/Timeline/ClientApp/src/app/common/BlobImage.tsx b/Timeline/ClientApp/src/app/common/BlobImage.tsx
new file mode 100644
index 00000000..91497705
--- /dev/null
+++ b/Timeline/ClientApp/src/app/common/BlobImage.tsx
@@ -0,0 +1,27 @@
+import React from 'react';

+

+import { ExcludeKey } from '../utilities/type';

+

+const BlobImage: React.FC<

+  ExcludeKey<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> & { blob?: Blob }

+> = (props) => {

+  const { blob, ...otherProps } = props;

+

+  const [url, setUrl] = React.useState<string | undefined>(undefined);

+

+  React.useEffect(() => {

+    if (blob != null) {

+      const url = URL.createObjectURL(blob);

+      setUrl(url);

+      return () => {

+        URL.revokeObjectURL(url);

+      };

+    } else {

+      setUrl(undefined);

+    }

+  }, [blob]);

+

+  return <img {...otherProps} src={url} />;

+};

+

+export default BlobImage;