From 268545c7284023b3c686c5478041c4e91b4eded4 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Mon, 20 Mar 2023 16:54:26 -0700
Subject: [PATCH] Better radio dropdown type

---
 src-web/components/RequestPane.tsx        |  2 +-
 src-web/components/core/RadioDropdown.tsx | 23 +++++++++--------------
 src-web/components/core/Tabs/Tabs.tsx     | 14 +++++++-------
 3 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/src-web/components/RequestPane.tsx b/src-web/components/RequestPane.tsx
index bd50243a..480c4926 100644
--- a/src-web/components/RequestPane.tsx
+++ b/src-web/components/RequestPane.tsx
@@ -27,7 +27,7 @@ export function RequestPane({ fullHeight, className }: Props) {
     defaultValue: 'body',
   });
 
-  const tabs: TabItem[] = useMemo(
+  const tabs: TabItem<string | null>[] = useMemo(
     () => [
       {
         value: 'body',
diff --git a/src-web/components/core/RadioDropdown.tsx b/src-web/components/core/RadioDropdown.tsx
index 69864a5c..6bff1b6d 100644
--- a/src-web/components/core/RadioDropdown.tsx
+++ b/src-web/components/core/RadioDropdown.tsx
@@ -1,26 +1,21 @@
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 import type { DropdownProps } from './Dropdown';
 import { Dropdown } from './Dropdown';
 import { Icon } from './Icon';
 
-export interface RadioDropdownItem {
+export interface RadioDropdownItem<T> {
   label: string;
-  value: string | null;
+  value: T;
 }
 
-export interface RadioDropdownProps {
-  value: string | null;
-  onChange: (value: string | null) => void;
-  items: RadioDropdownItem[];
+export interface RadioDropdownProps<T> {
+  value: T;
+  onChange: (value: T) => void;
+  items: RadioDropdownItem<T>[];
   children: DropdownProps['children'];
 }
 
-export const RadioDropdown = memo(function RadioDropdown({
-  value,
-  items,
-  onChange,
-  children,
-}: RadioDropdownProps) {
+export function RadioDropdown<T>({ value, items, onChange, children }: RadioDropdownProps<T>) {
   const dropdownItems = useMemo(
     () =>
       items.map(({ label, value: v }) => ({
@@ -32,4 +27,4 @@ export const RadioDropdown = memo(function RadioDropdown({
   );
 
   return <Dropdown items={dropdownItems}>{children}</Dropdown>;
-});
+}
diff --git a/src-web/components/core/Tabs/Tabs.tsx b/src-web/components/core/Tabs/Tabs.tsx
index 6634855b..0410af38 100644
--- a/src-web/components/core/Tabs/Tabs.tsx
+++ b/src-web/components/core/Tabs/Tabs.tsx
@@ -9,23 +9,23 @@ import { HStack } from '../Stacks';
 
 import './Tabs.css';
 
-export type TabItem = {
+export type TabItem<T> = {
   value: string;
   label: string;
-  options?: Omit<RadioDropdownProps, 'children'>;
+  options?: Omit<RadioDropdownProps<T>, 'children'>;
 };
 
-interface Props {
+interface Props<T = unknown> {
   label: string;
   value?: string;
   onChangeValue: (value: string) => void;
-  tabs: TabItem[];
+  tabs: TabItem<T>[];
   tabListClassName?: string;
   className?: string;
   children: ReactNode;
 }
 
-export const Tabs = memo(function Tabs({
+export function Tabs<T>({
   value,
   onChangeValue,
   label,
@@ -33,7 +33,7 @@ export const Tabs = memo(function Tabs({
   tabs,
   className,
   tabListClassName,
-}: Props) {
+}: Props<T>) {
   const ref = useRef<HTMLDivElement | null>(null);
 
   const handleTabChange = (value: string) => {
@@ -109,7 +109,7 @@ export const Tabs = memo(function Tabs({
       {children}
     </div>
   );
-});
+}
 
 interface TabContentProps {
   value: string;