From ac313f55fe09c3ec374abf09f22148233527d30d Mon Sep 17 00:00:00 2001
From: Tom <mottoes_recap0u@icloud.com>
Date: Sat, 29 Apr 2023 16:12:56 +0200
Subject: [PATCH] add subplebbit.suggested.avatarUrl to Home

---
 src/App.js                            |  2 +-
 src/components/styled/Home.styled.jsx |  4 ++--
 src/components/views/Home.jsx         | 20 ++++++++++++++++++--
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 62a013e6..4146c473 100644
--- a/src/App.js
+++ b/src/App.js
@@ -89,7 +89,7 @@ export default function App() {
       {subplebbitAddresses: defaultSubplebbits.map(
         (subplebbit) => subplebbit.address
       ), sortType: 'new'},
-      {subplebbitAddresses: account.subscriptions, sortType: 'new'}
+      {subplebbitAddresses: account?.subscriptions, sortType: 'new'}
     ]
   });
   
diff --git a/src/components/styled/Home.styled.jsx b/src/components/styled/Home.styled.jsx
index 0415a261..ccc54596 100644
--- a/src/components/styled/Home.styled.jsx
+++ b/src/components/styled/Home.styled.jsx
@@ -216,8 +216,8 @@ export const BoardsContent = styled.div`
   img {
     border: 1px solid #800;
     display: inline-block;
-    width: 150px;
-    height: 150px;
+    max-width: 150px;
+    max-height: 150px;
   }
 
   .board-text {
diff --git a/src/components/views/Home.jsx b/src/components/views/Home.jsx
index 619d1f46..cc481609 100644
--- a/src/components/views/Home.jsx
+++ b/src/components/views/Home.jsx
@@ -1,5 +1,6 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
+import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Link, useNavigate } from 'react-router-dom';
 import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
@@ -7,6 +8,21 @@ import packageJson from '../../../package.json'
 const {version} = packageJson
 
 
+const BoardAvatar = ({ address }) => {
+  const [avatarUrl, setAvatarUrl] = useState('assets/plebchan.png');
+  const subplebbit = useSubplebbit({ subplebbitAddress: address });
+
+  useEffect(() => {
+    if (subplebbit.suggested?.avatarUrl) {
+      setAvatarUrl(subplebbit.suggested.avatarUrl);
+    }
+    console.log(subplebbit);
+  }, [subplebbit.suggested?.avatarUrl, subplebbit]);
+
+  return <img alt="board logo" src={avatarUrl} />;
+};
+
+
 const Home = () => {
   const { 
     setBodyStyle,
@@ -92,7 +108,7 @@ const Home = () => {
                       setSelectedTitle(subplebbit.title);
                       setSelectedAddress(subplebbit.address);
                     }} >
-                      <img alt="board logo" src="assets/plebchan.png" />
+                      <BoardAvatar address={subplebbit.address} />
                     </Link>
                     <div className="board-text">
                       <b>{subplebbit.address}</b>