Move socialIconsList to its own component

webroot/js/app.js

@@ -3,7 +3,7 @@ import htm from 'https://unpkg.com/htm?module';
 const html = htm.bind(h);
 
 import { OwncastPlayer } from './components/player.js';
-import SocialIcon from './components/social.js';
+import SocialIconsList from './components/socialIconsList.js';
 import UsernameForm from './components/chat/username.js';
 import Chat from './components/chat/chat.js';
 import Websocket from './utils/websocket.js';
@@ -400,31 +400,6 @@ export default class App extends Component {
         )
       : null;
 
-    const socialIconsList = (function () {
-      if (socialHandles === null || socialHandles.length === 0) {
-        return null;
-      }
-
-	     const list = socialHandles.map(
-        (item, index) => html`
-          <li key="social${index}">
-            <${SocialIcon} platform=${item.platform} url=${item.url} />
-          </li>
-        `
-      );
-	
-	    return html`<ul
-          id="social-list"
-          class="social-list flex flex-row items-center justify-start flex-wrap"
-        >
-          <span class="follow-label text-xs	font-bold mr-2 uppercase"
-            >Follow me:
-          </span>
-          ${list}
-        </ul>
-	    `;
-    })();
-
     const mainClass = playerActive ? 'online' : '';
     const streamInfoClass = streamOnline ? 'online' : ''; // need?
 
@@ -532,7 +507,7 @@ export default class App extends Component {
                   >${streamerName}</span
                 >
               </h2>
-              ${socialIconsList}
+              <${SocialIconsList} handles=${socialHandles} />
               <div
                 id="stream-summary"
                 class="stream-summary my-4"

webroot/js/components/socialIconsList.js

@@ -1,10 +1,11 @@
-import { h } from 'https://unpkg.com/preact?module';
+import { h, Component } from 'https://unpkg.com/preact?module';
 import htm from 'https://unpkg.com/htm?module';
 const html = htm.bind(h);
+
 import { SOCIAL_PLATFORMS } from '../utils/social.js';
 import { classNames } from '../utils/helpers.js';
 
-export default function SocialIcon(props) {
+function SocialIcon(props) {
   const { platform, url } = props;
   const platformInfo = SOCIAL_PLATFORMS[platform.toLowerCase()];
   const inList = !!platformInfo;
@@ -40,3 +41,23 @@ export default function SocialIcon(props) {
       </a>
   `);
 }
+
+export default function (props) {
+  const { handles } = props;
+  if (handles == null) {
+    return null;
+  }
+
+  const list = handles.map((item, index) => html`
+    <li key="social${index}">
+      <${SocialIcon} platform=${item.platform} url=${item.url} />
+    </li>
+  `);
+
+  return html`<ul
+      id="social-list"
+      class="social-list flex flex-row items-center justify-start flex-wrap">
+    <span class="follow-label text-xs font-bold mr-2 uppercase">Follow me:</span>
+    ${list}
+  </ul>`;
+}