From 897c85bb98bcdebb7a062b54a6924fcc375f1eda Mon Sep 17 00:00:00 2001
From: rbarbazz <raphael.barbazza@gmail.com>
Date: Thu, 6 Aug 2020 23:12:53 -0700
Subject: [PATCH] fix: made radio-button-group a controlled component

---
 .../app/ui/components/activity-toggle.js      |  1 +
 .../components/multi-switch.stories.js        | 33 ++++++++++-------
 .../components/radio-button-group.js          |  3 ++
 .../components/radio-button-group.stories.js  | 36 ++++++++++++-------
 4 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/packages/insomnia-app/app/ui/components/activity-toggle.js b/packages/insomnia-app/app/ui/components/activity-toggle.js
index e57a4e72854..b123a69338b 100644
--- a/packages/insomnia-app/app/ui/components/activity-toggle.js
+++ b/packages/insomnia-app/app/ui/components/activity-toggle.js
@@ -25,6 +25,7 @@ export default function ActivityToggle({ activity, handleActivityChange, workspa
       name="activity-toggle"
       onChange={a => handleActivityChange(workspace._id, a)}
       choices={choices}
+      selectedValue={activity}
     />
   );
 }
diff --git a/packages/insomnia-components/components/multi-switch.stories.js b/packages/insomnia-components/components/multi-switch.stories.js
index 23a63f00b8b..89e18abb9e6 100644
--- a/packages/insomnia-components/components/multi-switch.stories.js
+++ b/packages/insomnia-components/components/multi-switch.stories.js
@@ -3,15 +3,24 @@ import MultiSwitch from './multi-switch';
 
 export default { title: 'Navigation | Sliding Switch' };
 
-export const _default = () => (
-  <MultiSwitch
-    name="activity"
-    defaultValue="debug"
-    onChange={v => console.log(v)}
-    choices={[
-      { label: 'Design', value: 'design' },
-      { label: 'Debug', value: 'debug' },
-      { label: 'Test', value: 'test' },
-    ]}
-  />
-);
+export const _default = () => {
+  const defaultValue = 'debug';
+  const [selectedValue, setSelectedValue] = React.useState(defaultValue);
+  const onChangeHandler = v => {
+    console.log(v);
+    setSelectedValue(v);
+  };
+  return (
+    <MultiSwitch
+      name="activity"
+      defaultValue={defaultValue}
+      onChange={onChangeHandler}
+      choices={[
+        { label: 'Design', value: 'design' },
+        { label: 'Debug', value: 'debug' },
+        { label: 'Test', value: 'test' },
+      ]}
+      selectedValue={selectedValue}
+    />
+  );
+};
diff --git a/packages/insomnia-components/components/radio-button-group.js b/packages/insomnia-components/components/radio-button-group.js
index bd7246042d6..e0d80577716 100644
--- a/packages/insomnia-components/components/radio-button-group.js
+++ b/packages/insomnia-components/components/radio-button-group.js
@@ -11,6 +11,7 @@ export type Props = {
     value: string,
   }>,
   className?: string,
+  selectedValue: string,
 };
 
 const StyledRadioButtonGroup: React.ComponentType<{}> = styled.div`
@@ -53,6 +54,7 @@ export default function RadioButtonGroup({
   defaultValue,
   onChange,
   className,
+  selectedValue,
 }: Props) {
   const handleChange = e => {
     if (typeof onChange !== 'function') {
@@ -71,6 +73,7 @@ export default function RadioButtonGroup({
             name={name}
             value={value}
             defaultChecked={defaultValue === value}
+            checked={selectedValue === value}
             onChange={handleChange}
           />
           <span>{label}</span>
diff --git a/packages/insomnia-components/components/radio-button-group.stories.js b/packages/insomnia-components/components/radio-button-group.stories.js
index 4636fe7d3db..fcf3502ef79 100644
--- a/packages/insomnia-components/components/radio-button-group.stories.js
+++ b/packages/insomnia-components/components/radio-button-group.stories.js
@@ -5,16 +5,26 @@ import RadioButtonGroup from './radio-button-group';
 
 export default { title: 'Navigation | Radio Button Group' };
 
-export const _default = () => (
-  <RadioButtonGroup
-    name="dummy"
-    defaultValue="scratch"
-    onChange={v => console.log(v)}
-    choices={[
-      { label: 'From Scratch', value: 'scratch' },
-      { label: 'From Repository', value: 'repo' },
-      { label: 'From Clipboard', value: 'clip' },
-      { label: 'From Spec', value: 'spec' },
-    ]}
-  />
-);
+export const _default = () => {
+  const defaultValue = 'scratch';
+  const [selectedValue, setSelectedValue] = React.useState(defaultValue);
+  const onChangeHandler = v => {
+    console.log(v);
+    setSelectedValue(v);
+  };
+
+  return (
+    <RadioButtonGroup
+      name="dummy"
+      defaultValue={defaultValue}
+      onChange={onChangeHandler}
+      choices={[
+        { label: 'From Scratch', value: 'scratch' },
+        { label: 'From Repository', value: 'repo' },
+        { label: 'From Clipboard', value: 'clip' },
+        { label: 'From Spec', value: 'spec' },
+      ]}
+      selectedValue={selectedValue}
+    />
+  );
+};