From 14c880723485ea6c7c9eda06ef669f5f56512ba2 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Fri, 8 Jan 2021 15:49:53 -0500
Subject: [PATCH] StyleInput: make sure component behaves as controlled on
 first render

We made the error of setting the value of this component statically,
rather than based on global IconWeight state. This meant that it was not
reflecting the current weight on first render, if it was anything other
than 'regular', for example when set by a URL param.
---
 src/components/StyleInput/StyleInput.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/StyleInput/StyleInput.tsx b/src/components/StyleInput/StyleInput.tsx
index c376d57..644573d 100644
--- a/src/components/StyleInput/StyleInput.tsx
+++ b/src/components/StyleInput/StyleInput.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { useSetRecoilState } from "recoil";
+import React, { useMemo } from "react";
+import { useRecoilState } from "recoil";
 import Select from "react-dropdown-select";
 import { PencilLine } from "phosphor-react";
 
@@ -45,7 +45,12 @@ const options: WeightOption[] = [
 type StyleInputProps = {};
 
 const StyleInput: React.FC<StyleInputProps> = () => {
-  const setStyle = useSetRecoilState(iconWeightAtom);
+  const [style, setStyle] = useRecoilState(iconWeightAtom);
+
+  const currentStyle = useMemo(
+    () => [options.find((option) => option.value === style)!!],
+    [style]
+  );
 
   const handleStyleChange = (values: WeightOption[]) =>
     setStyle(values[0].value as IconStyle);
@@ -53,7 +58,7 @@ const StyleInput: React.FC<StyleInputProps> = () => {
   return (
     <Select
       options={options}
-      values={[options[2]]}
+      values={currentStyle}
       searchable={false}
       labelField="key"
       onChange={handleStyleChange}