Implement sorting and refactor

1 files changed, 37 insertions, 0 deletions

diff --git a/extension/src/components/RadioButtonGroup.tsx b/extension/src/components/RadioButtonGroup.tsx
new file mode 100644
index 0000000..297800d
--- /dev/null
+++ b/extension/src/components/RadioButtonGroup.tsx
@@ -0,0 +1,37 @@
+import React, {ReactElement, useEffect, useId, useState} from "react";
+
+/**
+ * A component for a group of radio buttons where only one can be selected
+ *
+ * @param props.children html <option> elements for each radio option
+ * @param props.value The option which is selected
+ * @param props.onChange A function that will be called when the selected option changes
+ */
+function RadioButtonGroup(props: { children: ReactElement<HTMLOptionElement>[], value: any, onChange?: (arg0: any) => void }) {
+    const [selected, setSelected] = useState(props.value);
+    useEffect(() => {
+        setSelected(props.value);
+    }, [props.value]);
+    useEffect(() => {
+        props.onChange && props.onChange(selected);
+    }, [selected])
+
+    return (
+        <div className="radio-group">
+            { props.children.map((item) => (
+                <label>
+                    <input
+                        type="radio"
+                        name={useId()}
+                        value={item.props.value}
+                        checked={item.props.value === selected}
+                        onChange={e => setSelected(e.target.value)}
+                    />
+                    {item.props.children.toString()}
+                </label>
+            )) }
+        </div>
+    )
+}
+
+export default RadioButtonGroup
\ No newline at end of file