From 4144eae45e68fcee46d7acb5a59f7af0f596890c Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sun, 3 Nov 2024 01:31:09 -0400
Subject: State of settings now stored in SettingEditor

---
 extension/src/RadioButtonGroup.tsx | 52 +++++++++++-------------
 extension/src/SettingsEditor.tsx   | 81 ++++++++++++--------------------------
 extension/src/index.css            |  8 +++-
 3 files changed, 53 insertions(+), 88 deletions(-)

diff --git a/extension/src/RadioButtonGroup.tsx b/extension/src/RadioButtonGroup.tsx
index 14f348d..1e86e7e 100644
--- a/extension/src/RadioButtonGroup.tsx
+++ b/extension/src/RadioButtonGroup.tsx
@@ -1,38 +1,30 @@
-import React, {useId, useState} from "react";
+import React, {ReactElement, ReactNode, useId, useState} from "react";
 
-interface radioEntry {
-    label: string,
-    data: any,
+interface RadioProps {
+    children: ReactElement<HTMLOptionElement>[],
+    defaultValue: any,
+    onChange?: (arg0: any) => void
 }
 
-interface IProps {
-    groupLabel: string,
-    items: radioEntry[],
-    defaultData: any
-}
-
-function RadioButtonGroup(props: IProps) {
-    const [selected, setSelected] = useState(props.defaultData);
+function RadioButtonGroup(props: RadioProps) {
+    const [selected, setSelected] = useState(props.defaultValue);
+    props.onChange && props.onChange(selected);
 
     return (
-        <>
-            <h3>{props.groupLabel}</h3>
-            <div className="radio-group">
-                { props.items.map((item) => (
-                    <label>
-                        <input
-                            type="radio"
-                            name={useId()}
-                            value={item.data}
-                            checked={item.data === selected}
-                            onChange={e => setSelected(e.target.value)}
-                        />
-                        {item.label}
-                    </label>
-                )) }
-            </div>
-            <span>currently selected: {selected}</span>
-        </>
+        <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>
     )
 }
 
diff --git a/extension/src/SettingsEditor.tsx b/extension/src/SettingsEditor.tsx
index b10a705..7335a18 100644
--- a/extension/src/SettingsEditor.tsx
+++ b/extension/src/SettingsEditor.tsx
@@ -2,72 +2,41 @@ import RadioButtonGroup from "./RadioButtonGroup.tsx";
 import React, {useState} from "react";
 
 function SettingsEditor() {
-    const [selected, setSelected] = useState('0');
+    const [backgroundType, setBackgroundType] = useState("fromTheme");
+    const [sort, setSort] = useState("fromBookmarks");
+    const [rootFolder, setRootFolder] = useState('0');
 
     return (
         <form>
-            <RadioButtonGroup groupLabel="Background Type" defaultData={"fromTheme"} items={[
-                {label: "From Theme", data: "fromTheme"},
-                {label: "Solid Color", data: "solidColor"},
-                {label: "Image", data: "image"},
-            ]}/>
-            <RadioButtonGroup groupLabel="Sort" defaultData={"fromBookmarks"} items={[
-                {label: "From Bookmarks", data: "fromBookmarks"},
-                {label: "Alphabetical", data: "alphabetical"},
-                {label: "Frequency", data: "frequency"},
-                {label: "Recently used", data: "recent"},
-            ]}/>
+            <h3>Background Type</h3>
+            <RadioButtonGroup defaultValue={backgroundType} onChange={e => setBackgroundType(e)}>
+                <option value={"fromTheme"}>From Theme</option>
+                <option value={"solidColor"}>Solid Color</option>
+                <option value={"image"}>Image</option>
+            </RadioButtonGroup>
+
+            <h3>Sort</h3>
+            <RadioButtonGroup defaultValue={sort} onChange={e => setSort(e)}>
+                <option value={"fromBookmarks"}>From Bookmarks</option>
+                <option value={"alphabetical"}>Alphabetical</option>
+                <option value={"frequency"}>Frequency</option>
+                <option value={"recent"}>Recently used</option>
+            </RadioButtonGroup>
 
             <h3>Root folder</h3>
-            <select onChange={e => setSelected(e.target.value)}>
+            <select defaultValue={rootFolder} onChange={e => setRootFolder(e.target.value)}>
                 <option value={'0'}>Bookmarks Toolbar id:0</option>
                 <option value={'1'}>Mobile Bookmarks id:1</option>
                 <option value={'2'}>Other Bookmarks id:2</option>
             </select>
-            <span>currently selected: {selected}</span>
+
+            <br/>
+            <span>value of bg type: {backgroundType}</span>
+            <span>value of sort: {sort}</span>
+            <span>value of root folder: {rootFolder}</span>
+            <input type="submit"/>
         </form>
     )
 }
 
-export default SettingsEditor;
-
-// <div id="settings-menu">
-//     <h2>Settings</h2>
-//
-//     <h3>Sort</h3>
-//     <label>
-//         <input type="radio" name="sort"/>
-//         From bookmarks
-//     </label>
-//     <label>
-//         <input type="radio" name="sort"/>
-//         Alphabetical
-//     </label>
-//     <label>
-//         <input type="radio" name="sort"/>
-//         Frequency
-//     </label>
-//
-//     <h3>Background</h3>
-//     <label>
-//         <input type="radio" name="bg"/>
-//         From Theme
-//     </label>
-//     <label>
-//         <input type="radio" name="bg"/>
-//         Solid color
-//     </label>
-//     <label>
-//         <input type="radio" name="bg"/>
-//         Image
-//     </label>
-//
-//     <h3>Root folder</h3>
-//     <label>
-//         <select>
-//             <option>Bookmarks Toolbar id:0</option>
-//             <option>Mobile Bookmarks id:1</option>
-//             <option>Other Bookmarks id:2</option>
-//         </select>
-//     </label>
-// </div>
\ No newline at end of file
+export default SettingsEditor;
\ No newline at end of file
diff --git a/extension/src/index.css b/extension/src/index.css
index 82a8182..79b8adb 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -21,12 +21,16 @@ body {
   width: 300px;
   background-color: black;
   padding: 10px;
-  display: flex;
-  flex-direction: column;
   right: 0;
   animation: slideIn 0.3s ease-in-out;
 }
 
+#settings-menu form {
+  display: flex;
+  flex-direction: column;
+  place-items: flex-start;
+}
+
 .radio-group {
   display: flex;
   flex-direction: column;
-- 
cgit v1.2.3