From e083150e334a23e71a2ff99721c49794dfb4f7fc Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 1 Dec 2018 19:35:23 -0800
Subject: [PATCH] Make logo clickable

---
 src/App.js         | 14 +++++++++++++-
 src/Skin.js        | 10 +---------
 src/redux/epics.js |  2 +-
 src/utils.js       | 10 +++++++++-
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/App.js b/src/App.js
index 389d8716..9c2209de 100644
--- a/src/App.js
+++ b/src/App.js
@@ -129,7 +129,19 @@ class App extends React.Component {
     return (
       <div>
         <div id="search">
-          <h1>{"🌩️"}</h1>
+          <h1>
+            <a
+              href="/"
+              onClick={e => {
+                if (Utils.eventIsLinkClick(e)) {
+                  e.preventDefault();
+                  this.props.setSearchQuery(null);
+                }
+              }}
+            >
+              {"🌩️"}
+            </a>
+          </h1>
           <input
             type="text"
             onChange={e => this.props.setSearchQuery(e.target.value)}
diff --git a/src/Skin.js b/src/Skin.js
index c02085e2..a5ba1d04 100644
--- a/src/Skin.js
+++ b/src/Skin.js
@@ -1,10 +1,6 @@
 import React from "react";
 import * as Utils from "./utils";
 
-function isModifiedEvent(event) {
-  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
-}
-
 export default class Skin extends React.Component {
   constructor(props) {
     super(props);
@@ -45,11 +41,7 @@ export default class Skin extends React.Component {
           cursor: "pointer"
         }}
         onClick={e => {
-          if (
-            !e.defaultPrevented && // onClick prevented default
-            e.button === 0 && // ignore everything but left clicks
-            !isModifiedEvent(e) // ignore clicks with modifier keys
-          ) {
+          if (Utils.eventIsLinkClick(e)) {
             e.preventDefault();
             const { top, left } = this._ref.getBoundingClientRect();
             this.props.selectSkin(this.props.hash, { top, left });
diff --git a/src/redux/epics.js b/src/redux/epics.js
index 6153ea20..b3db3263 100644
--- a/src/redux/epics.js
+++ b/src/redux/epics.js
@@ -26,7 +26,7 @@ const searchEpic = actions =>
   actions.pipe(
     filter(action => action.type === "SEARCH_QUERY_CHANGED"),
     switchMap(({ query }) => {
-      if (query.length === 0) {
+      if (query == null || query.length === 0) {
         return of(Actions.gotNewMatchingHashes(null));
       }
 
diff --git a/src/utils.js b/src/utils.js
index eff39915..79b24025 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -13,7 +13,7 @@ export function skinUrlFromHash(hash) {
 }
 
 export function getPermalinkUrlFromHash(hash) {
-  return `/skin/${hash}/${filenameFromHash(hash)}/`;
+  return `/skin/${hash}/${filenameFromHash(hash)}`;
 }
 
 export function getWindowSize() {
@@ -29,3 +29,11 @@ export function getWindowSize() {
     windowHeight: y
   };
 }
+
+export function eventIsLinkClick(event) {
+  return (
+    !event.defaultPrevented && // onClick prevented default
+    event.button === 0 &&
+    !(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
+  );
+}