diff --git a/src/renderer/components/fetched-image.tsx b/src/renderer/components/fetched-image.tsx new file mode 100644 index 0000000..855fead --- /dev/null +++ b/src/renderer/components/fetched-image.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { AccountInfo } from '../../shared-types'; + +export function FetchedImage({ + src, + account, +}: { + src: string; + account: AccountInfo; +}) { + const [imgSrc, setImgSrc] = React.useState(); + const isFetched = React.useRef(false); + + const fetchImage = React.useCallback(async () => { + const bytes = await window.electronApi.getRawImage(src, account); + if ('error' in bytes) { + console.error(`Error loading image ${src}`, bytes.error); + return; + } + const blob = new Blob(bytes); + const imageObjectURL = URL.createObjectURL(blob); + setImgSrc(imageObjectURL); + }, [src]); + + React.useEffect(() => { + return () => { + // Make sure to reset isFetched if the component is unmounted. + isFetched.current = false; + }; + }, []); + + React.useEffect(() => { + if (isFetched.current) { + return; + } + isFetched.current = true; + fetchImage(); + }, [fetchImage]); + + if (!imgSrc) { + return ; + } + return ; +} + +function PlaceholderComponent() { + return React.createElement( + 'svg', + { width: '33', height: '33' }, + React.createElement('circle', { + cx: '16', + cy: '16', + r: '15', + fill: 'orange', + }) + ); +} diff --git a/src/renderer/components/notification.tsx b/src/renderer/components/notification.tsx index a0488d0..f0914b5 100644 --- a/src/renderer/components/notification.tsx +++ b/src/renderer/components/notification.tsx @@ -2,7 +2,6 @@ import React from 'react'; import Gridicon from 'gridicons'; import debugFactory from 'debug'; import { formatDistanceToNow } from 'date-fns'; -import EnsuredImage from './ensured-image'; import MuteIcon from './mute-icon'; import { Note, @@ -11,7 +10,11 @@ import { MarkUnread, MuteRepo, UnmuteRepo, + AppReduxState, } from '../types'; +import { FetchedImage } from './fetched-image'; +import { useSelector } from 'react-redux'; +import EnsuredImage from './ensured-image'; const debug = debugFactory('gitnews-menubar'); @@ -47,6 +50,9 @@ export default function Notification({ const isUnread = note.unread === true ? true : note.gitnewsMarkedUnread === true; + const accounts = useSelector((state: AppReduxState) => state.accounts); + const account = accounts.find(({ id }) => id === note.gitnewsAccountId); + const onClick = () => { debug('clicked on notification', note); setMuteRequested(false); @@ -134,7 +140,11 @@ export default function Notification({
{isUnread && } {isMuted && } - + {account ? ( + + ) : ( + + )}