Merge pull request #132 from crupest/refactor

Refactor a lot of things.

1 files changed, 12 insertions, 12 deletions

diff --git a/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
index 11ac9f08..727de1fe 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
@@ -16,8 +16,10 @@ import Svg from 'react-inlinesvg';
 import chevronDownIcon from 'bootstrap-icons/icons/chevron-down.svg';

 import trashIcon from 'bootstrap-icons/icons/trash.svg';

 

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

-import { TimelinePostInfo, usePostDataUrl } from '../data/timeline';

+import BlobImage from '../common/BlobImage';

+

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

+import { TimelinePostInfo } from '../data/timeline';

 

 const TimelinePostDeleteConfirmDialog: React.FC<{

   toggle: () => void;

@@ -70,13 +72,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
 

   const { more, onResize } = props;

 

-  const avatarUrl = useAvatarUrl(props.post.author.username);

-

-  const dataUrl = usePostDataUrl(

-    props.post.content.type === 'image',

-    props.post.timelineName,

-    props.post.id

-  );

+  const avatar = useAvatar(props.post.author.username);

 

   const [deleteDialog, setDeleteDialog] = React.useState<boolean>(false);

   const toggleDeleteDialog = React.useCallback(

@@ -132,7 +128,11 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             className="float-right float-sm-left mx-2"

             to={'/users/' + props.post.author.username}

           >

-            <img onLoad={onResize} src={avatarUrl} className="avatar rounded" />

+            <BlobImage

+              onLoad={onResize}

+              blob={avatar}

+              className="avatar rounded"

+            />

           </Link>

           {(() => {

             const { content } = props.post;

@@ -140,9 +140,9 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
               return content.text;

             } else {

               return (

-                <img

+                <BlobImage

                   onLoad={onResize}

-                  src={dataUrl}

+                  blob={content.data}

                   className="timeline-content-image"

                 />

               );