From b4db1df589ef7f1090fa4639193eccc061bc284b Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Mon, 14 Sep 2020 01:05:55 -0400
Subject: [PATCH] components: memoize and streamline callbacks

---
 src/components/ColorInput/ColorInput.tsx   | 17 ++++++++++-------
 src/components/Header/Header.tsx           | 12 +++++++-----
 src/components/IconGrid/IconGridItem.tsx   |  2 +-
 src/components/SearchInput/SearchInput.tsx |  1 +
 src/components/SizeInput/SizeInput.tsx     |  5 +++--
 src/components/StyleInput/StyleInput.tsx   | 16 ++++++++--------
 6 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/components/ColorInput/ColorInput.tsx b/src/components/ColorInput/ColorInput.tsx
index 17f13a1..b98df2a 100644
--- a/src/components/ColorInput/ColorInput.tsx
+++ b/src/components/ColorInput/ColorInput.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 
 import { iconColorAtom } from "../../state/atoms";
@@ -12,12 +12,15 @@ const ColorInput: React.FC<ColorInputProps> = () => {
   const [color, setColor] = useRecoilState(iconColorAtom);
   const isDark = useRecoilValue(isDarkThemeSelector);
 
-  const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const {
-      target: { value: color },
-    } = event;
-    if (color[0] === "#") setColor(color);
-  };
+  const handleColorChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const {
+        target: { value: color },
+      } = event;
+      if (color[0] === "#") setColor(color);
+    },
+    [setColor]
+  );
 
   const throttledColorChange = useThrottled(handleColorChange, 100, [
     handleColorChange,
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index c436995..08d7540 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -25,19 +25,17 @@ const illustrationVariants = {
   visible: { opacity: 1, transition: { duration: 0.2 } },
 };
 
-const handleGetStarted = () => {
+const handleGetStarted = () =>
   window.open(
     "https://github.com/phosphor-icons/phosphor-web#phosphor-icons",
     "_blank",
     "noopener noreferrer"
   );
-};
 
-const handleScrollToIcons = () => {
+const handleScrollToIcons = () =>
   document
     .getElementById("toolbar")
     ?.scrollIntoView({ behavior: "smooth", block: "start" });
-};
 
 const Header: React.FC<HeaderProps> = () => {
   return (
@@ -62,7 +60,11 @@ const Header: React.FC<HeaderProps> = () => {
             </button>
           </div>
           <div className="links">
-            <a className="nav-link" href="#">
+            <a
+              className="nav-link"
+              href={`${process.env.PUBLIC_URL}/favicon.ico`}
+              download
+            >
               Download all
             </a>
             <a
diff --git a/src/components/IconGrid/IconGridItem.tsx b/src/components/IconGrid/IconGridItem.tsx
index 90d94db..4c02f90 100644
--- a/src/components/IconGrid/IconGridItem.tsx
+++ b/src/components/IconGrid/IconGridItem.tsx
@@ -21,7 +21,6 @@ interface IconGridItemProps extends IconProps {
   originOffset: MutableRefObject<{ top: number; left: number }>;
 }
 
-// const whileTap = { boxShadow: "0 0 0 6px rgba(163, 159, 171, 0.1)" };
 const transition = { duration: 0.2 };
 const originIndex = 0;
 const delayPerPixel = 0.0004;
@@ -67,6 +66,7 @@ const IconGridItem: React.FC<IconGridItemProps> = (props) => {
     const d = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
     delayRef.current = d * delayPerPixel;
   }, [originOffset]);
+
   return (
     <>
       <motion.div
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
index abcae44..a3d9f79 100644
--- a/src/components/SearchInput/SearchInput.tsx
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -29,6 +29,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
         id="search-input"
         aria-label="Search for an icon"
         type="text"
+        autoCapitalize="off"
         autoComplete="off"
         value={value}
         placeholder="Search"
diff --git a/src/components/SizeInput/SizeInput.tsx b/src/components/SizeInput/SizeInput.tsx
index ad9f6d6..ff28cb2 100644
--- a/src/components/SizeInput/SizeInput.tsx
+++ b/src/components/SizeInput/SizeInput.tsx
@@ -7,11 +7,12 @@ import "./SizeInput.css";
 type SizeInputProps = {};
 
 const handleFocus = (event: React.UIEvent<HTMLInputElement>) => {
-  const { currentTarget } = event;
-  currentTarget.focus();
+  event.preventDefault();
+  event.currentTarget.focus();
 };
 
 const handleBlur = (event: React.UIEvent<HTMLInputElement>) => {
+  event.preventDefault();
   event.currentTarget.blur();
 };
 
diff --git a/src/components/StyleInput/StyleInput.tsx b/src/components/StyleInput/StyleInput.tsx
index 160a3f7..3fb9321 100644
--- a/src/components/StyleInput/StyleInput.tsx
+++ b/src/components/StyleInput/StyleInput.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { useRecoilState } from "recoil";
+import { useSetRecoilState } from "recoil";
 import Select from "react-dropdown-select";
 import { PencilLine } from "phosphor-react";
 
@@ -7,7 +7,9 @@ import { iconStyleAtom } from "../../state/atoms";
 import { IconStyle } from "../../lib";
 import "./StyleInput.css";
 
-const options = [
+type WeightOption = { key: string; value: IconStyle; icon: JSX.Element };
+
+const options: WeightOption[] = [
   {
     key: "Thin",
     value: IconStyle.THIN,
@@ -43,12 +45,10 @@ const options = [
 type StyleInputProps = {};
 
 const StyleInput: React.FC<StyleInputProps> = () => {
-  const [style, setStyle] = useRecoilState(iconStyleAtom);
-  void style;
+  const setStyle = useSetRecoilState(iconStyleAtom);
 
-  // const handleStyleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-  //   setStyle(event.target.value as IconStyle);
-  // };
+  const handleStyleChange = (values: WeightOption[]) =>
+    setStyle(values[0].value as IconStyle);
 
   return (
     <Select
@@ -56,7 +56,7 @@ const StyleInput: React.FC<StyleInputProps> = () => {
       values={[options[2]]}
       searchable={false}
       labelField="key"
-      onChange={(values) => setStyle(values[0].value as IconStyle)}
+      onChange={handleStyleChange}
       itemRenderer={({
         item,
         itemIndex,