From 457cef55b6a56e66686286bb57f0b415a1e03734 Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Mon, 5 Feb 2024 10:45:05 -0500
Subject: [PATCH 1/2] improved input seed to fit bombay's uiux spec

---
 .../components/common/InputSeed/inputSeed.tsx | 65 +++++++++++++------
 1 file changed, 44 insertions(+), 21 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/InputSeed/inputSeed.tsx b/packages/fakeyou.com/src/components/common/InputSeed/inputSeed.tsx
index 7b29255b55..a5e4e6e4a3 100644
--- a/packages/fakeyou.com/src/components/common/InputSeed/inputSeed.tsx
+++ b/packages/fakeyou.com/src/components/common/InputSeed/inputSeed.tsx
@@ -1,4 +1,5 @@
 import React, {useState, useEffect, memo} from 'react';
+import { useLocalize } from 'hooks';
 import {
   Input,
   SegmentButtons
@@ -7,46 +8,67 @@ import {
 import generateRandomSeed from 'resources/generateRandomSeed';
 
 export default memo (function InputSeed({
+  t: tProps,
   label,
   initialValue : initialValueProps,
   onChange : onChangeCallback
 }:{
+  t?: Function
   label:string;
   initialValue?: string;
   onChange: (newSeed: string)=>void;
 }){
-  const [inputType, setInputType] = useState<"random"|"custom">("random");
-  const [seedValue, setSeedValue] = useState<string>(initialValueProps || "");
+  const {t:tHook} = useLocalize("SeedInput");
+  const t = tProps ? tProps : tHook;
+  const[{firstLoad, inputType, seedValue}, setState] = useState<{
+    firstLoad: boolean;
+    inputType: "random" | "custom";
+    seedValue: string;
+  }>({
+    firstLoad: false,
+    inputType: "random",
+    seedValue: ""
+  })
+  const setNewRandomSeed = (newType:"custom"|"random")=>{
+    const newRandom = generateRandomSeed();
+    setState({
+      firstLoad: true,
+      inputType: newType,
+      seedValue: newRandom
+    });
+    onChangeCallback(newRandom);
+  };
   useEffect(()=>{
-    // console.log('should run only once when mount')
-    if (!initialValueProps && seedValue===""){
-      const newRandom = generateRandomSeed();
-      setSeedValue(newRandom);
-      onChangeCallback(newRandom);
+    if (!initialValueProps && !firstLoad){
+      setNewRandomSeed("random");
     }
-  },[initialValueProps, onChangeCallback, seedValue]);
+  },[initialValueProps, setNewRandomSeed]);
+
 
   const handleInputTypeChange = (e:any) => {
     const newValue = e.target.value;
     if (newValue === "custom") {
-      setInputType("custom");
+      setNewRandomSeed("custom");
     } else {
-      const newRandom = generateRandomSeed();
-      setInputType("random");
-      setSeedValue(newRandom);
-      onChangeCallback(newRandom);
+      setNewRandomSeed("random");
     }
   };
   const handleSeedChange = (e: any) => {
     const customSeed = e.target.value;
-    setInputType("custom");
-    setSeedValue(customSeed);
+    setState({
+      firstLoad: true,
+      inputType: "custom",
+      seedValue: customSeed
+    })
     onChangeCallback(customSeed);
   };
-
+  const handleOnBlur = () => {
+    if(inputType==="custom" && seedValue==="")
+      setNewRandomSeed(inputType);
+  }
   const seedOpts = [
-    { label: "Random", value: "random" },
-    { label: "Custom", value: "custom" },
+    { label: t("random"), value: "random" },
+    { label: t("custom"), value: "custom" },
   ];
 
   return(
@@ -55,7 +77,7 @@ export default memo (function InputSeed({
       <div className="d-flex gap-2 align-items-center">
         <SegmentButtons
           {...{
-            name: "seed",
+            name: t("seed"),
             onChange: handleInputTypeChange,
             options: seedOpts,
             value: inputType,
@@ -63,9 +85,10 @@ export default memo (function InputSeed({
         />
         <Input
           className="numberInputNoArrows"
-          placeholder="Random"
-          value={seedValue}
+          placeholder={t("randomPlaceholder")}
+          value={inputType === "custom" ? seedValue : ""}
           onChange={handleSeedChange}
+          onBlur={handleOnBlur}
           type="number"
         />
       </div>

From a9b5abdbcf0842d9a68b036f92416d2d8529e62a Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Mon, 5 Feb 2024 10:48:39 -0500
Subject: [PATCH 2/2] dealing with react warning

---
 .../src/components/common/InputSeed/inputSeed.tsx         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/InputSeed/inputSeed.tsx b/packages/fakeyou.com/src/components/common/InputSeed/inputSeed.tsx
index a5e4e6e4a3..93c91d64af 100644
--- a/packages/fakeyou.com/src/components/common/InputSeed/inputSeed.tsx
+++ b/packages/fakeyou.com/src/components/common/InputSeed/inputSeed.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useEffect, memo} from 'react';
+import React, {useState, useEffect, useCallback, memo} from 'react';
 import { useLocalize } from 'hooks';
 import {
   Input,
@@ -29,7 +29,7 @@ export default memo (function InputSeed({
     inputType: "random",
     seedValue: ""
   })
-  const setNewRandomSeed = (newType:"custom"|"random")=>{
+  const setNewRandomSeed = useCallback((newType:"custom"|"random")=>{
     const newRandom = generateRandomSeed();
     setState({
       firstLoad: true,
@@ -37,12 +37,12 @@ export default memo (function InputSeed({
       seedValue: newRandom
     });
     onChangeCallback(newRandom);
-  };
+  }, [onChangeCallback]);
   useEffect(()=>{
     if (!initialValueProps && !firstLoad){
       setNewRandomSeed("random");
     }
-  },[initialValueProps, setNewRandomSeed]);
+  },[initialValueProps, firstLoad, setNewRandomSeed]);
 
 
   const handleInputTypeChange = (e:any) => {