135 lines
4.6 KiB
TypeScript
135 lines
4.6 KiB
TypeScript
import React, { useState, useEffect, ReactElement, useContext } from "react";
|
|
import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm";
|
|
import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
|
|
import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
|
|
import settingsObject from "../constants/settings/settingsMenu.json";
|
|
import { isEmpty, isUndefined, map } from "lodash";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { getSettings } from "../actions/settings.actions";
|
|
import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
|
|
import AirDCPPSocket from "../services/DcppSearchService";
|
|
|
|
interface ISettingsProps {}
|
|
|
|
export const Settings = (props: ISettingsProps): ReactElement => {
|
|
// fetch saved AirDC++ settings, if any
|
|
const airDCPPClientSettings = useSelector(
|
|
(state: RootState) => state.settings.data,
|
|
);
|
|
const dispatch = useDispatch();
|
|
const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext);
|
|
useEffect(() => {
|
|
dispatch(getSettings());
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!isEmpty(airDCPPClientSettings)) {
|
|
setADCPPSocket(
|
|
new AirDCPPSocket({
|
|
hostname: `${airDCPPClientSettings.directConnect.client.host.hostname}`,
|
|
protocol: `${airDCPPClientSettings.directConnect.client.host.protocol}`,
|
|
}),
|
|
);
|
|
}
|
|
}, [airDCPPClientSettings]);
|
|
const [active, setActive] = useState("gen-db");
|
|
|
|
const settingsContent = [
|
|
{
|
|
id: "adc-hubs",
|
|
content: (
|
|
<>
|
|
{!isEmpty(airDCPPClientSettings) ? (
|
|
<AirDCPPHubsForm settings={airDCPPClientSettings} />
|
|
) : null}
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
id: "adc-connection",
|
|
content: (
|
|
<>
|
|
<AirDCPPSettingsForm settings={airDCPPClientSettings} />
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
id: "flushdb",
|
|
content: (
|
|
<>
|
|
<SystemSettingsForm settings={airDCPPClientSettings} />
|
|
</>
|
|
),
|
|
},
|
|
];
|
|
return (
|
|
<section className="container">
|
|
<div className="columns">
|
|
<div className="section column is-one-quarter">
|
|
<h1 className="title">Settings</h1>
|
|
<aside className="menu">
|
|
{map(settingsObject, (settingObject, idx) => {
|
|
return (
|
|
<div key={idx}>
|
|
<p className="menu-label">{settingObject.category}</p>
|
|
{/* First level children */}
|
|
{!isUndefined(settingObject.children) ? (
|
|
<ul className="menu-list" key={settingObject.id}>
|
|
{map(settingObject.children, (item, idx) => {
|
|
return (
|
|
<li key={item.id}>
|
|
<a
|
|
className={
|
|
item.id.toString() === active ? "is-active" : ""
|
|
}
|
|
onClick={() => setActive(item.id.toString())}
|
|
>
|
|
{item.displayName}
|
|
</a>
|
|
{/* Second level children */}
|
|
{!isUndefined(item.children) ? (
|
|
<ul>
|
|
{map(item.children, (item, idx) => (
|
|
<li key={item.id}>
|
|
<a
|
|
className={
|
|
item.id.toString() === active
|
|
? "is-active"
|
|
: ""
|
|
}
|
|
onClick={() =>
|
|
setActive(item.id.toString())
|
|
}
|
|
>
|
|
{item.displayName}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : null}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
) : null}
|
|
</div>
|
|
);
|
|
})}
|
|
</aside>
|
|
</div>
|
|
|
|
{/* content for settings */}
|
|
<div className="section column is-half mt-6">
|
|
<div className="content">
|
|
{map(settingsContent, ({ id, content }) =>
|
|
active === id ? content : null,
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|