Merge pull request #219 from jeyemwey/fix-issue-202

Fix: Optional socialHandles and tags

webroot/js/app.js

@@ -4,7 +4,7 @@ const html = htm.bind(h);
 import showdown from '/js/web_modules/showdown.js';
 
 import { OwncastPlayer } from './components/player.js';
-import SocialIcon from './components/social.js';
+import SocialIconsList from './components/social-icons-list.js';
 import UsernameForm from './components/chat/username.js';
 import Chat from './components/chat/chat.js';
 import Websocket from './utils/websocket.js';
@@ -388,9 +388,8 @@ export default class App extends Component {
     const bgLogo = { backgroundImage: `url(${smallLogo})` };
     const bgLogoLarge = { backgroundImage: `url(${largeLogo})` };
 
-    const tagList = !tags.length
-      ? null
-      : tags.map(
+    const tagList = (tags !== null && tags.length > 0)
+      ? tags.map(
           (tag, index) => html`
             <li
               key="tag${index}"
@@ -399,17 +398,8 @@ export default class App extends Component {
               ${tag}
             </li>
           `
-        );
-
-    const socialIconsList = !socialHandles.length
-      ? null
-      : socialHandles.map(
-          (item, index) => html`
-            <li key="social${index}">
-              <${SocialIcon} platform=${item.platform} url=${item.url} />
-            </li>
-          `
-        );
+        )
+      : null;
 
     const mainClass = playerActive ? 'online' : '';
     const streamInfoClass = streamOnline ? 'online' : ''; // need?
@@ -518,15 +508,7 @@ export default class App extends Component {
                   >${streamerName}</span
                 >
               </h2>
-              <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>
-                ${socialIconsList}
-              </ul>
+              <${SocialIconsList} handles=${socialHandles} />
               <div
                 id="stream-summary"
                 class="stream-summary my-4"

webroot/js/components/social-icons-list.js

@@ -1,10 +1,11 @@
-import { h } from '/js/web_modules/preact.js';
+import { h, Component } from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
 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>`;
+}