Created the SettingsItem.jsx

src/states/Manage/pages/ManageChannel/components/SettingsItem/SettingsItem.jsx

@@ -0,0 +1,44 @@
+import "./styles.sass";
+import {useParams} from "react-router-dom";
+import {useContext, useEffect, useState} from "react";
+import {ChannelContext} from "@/states/Manage/pages/Channels/contexts/ChannelContext";
+import {patchRequest} from "@/common/util/RequestUtil.js";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faFloppyDisk} from "@fortawesome/free-solid-svg-icons";
+
+export const SettingsItem = ({name, description, options, type, current}) => {
+    const params = useParams();
+    const {channels, getChannelById, updateChannels} = useContext(ChannelContext);
+    const [currentChannel, setCurrentChannel] = useState();
+
+    const [settingUpdated, setSettingUpdated] = useState(false);
+
+    useEffect(() => {
+        if (channels) setCurrentChannel(getChannelById(params.channel));
+    }, [channels]);
+
+    if (!currentChannel) return;
+
+    const pathSetting = (e) => patchRequest("/channels/" + params.channel, {[type]: e.target.value}).then(() => {
+        updateChannels();
+        setSettingUpdated(true);
+        setTimeout(() => setSettingUpdated(false), 1000);
+    });
+
+    return (
+        <div className="settings-box">
+            <div className="setting-info">
+                <h2>{name}</h2>
+                <p>{description}</p>
+            </div>
+            <div className="settings-input">
+
+                {settingUpdated && <FontAwesomeIcon icon={faFloppyDisk} bounce/>}
+
+                <select onChange={pathSetting} value={current}>
+                    {options.map(option => (<option key={option.id} value={option.id}>{option.value}</option>))}
+                </select>
+            </div>
+        </div>
+    );
+}