SettingsMenu.js

import React from 'react';
import StandardMenu from '../Shared/StandardMenu/StandardMenu';
import Checkbox from "../Shared/checkbox";

export default class SettingsMenu extends React.component{
    constructor(props) {
        super(props);

        this.updateSettings = this.updateSettings.bind(this);
        this.changePath = this.changePath.bind(this);

        this.state ={
            settings: props.settings
        };
        this.menu = React.createRef();
    }
    updateSettings(settingsObj){
        this.setState(prev => ({
                settings:  Object.assign({}, prev, settingsObj)
        }));
        this.saveSettings();
    }
    saveSettings(){
        // TODO: save somehow
    }
    changePath(){
       this.setState(prev => ({
           settings:  Object.assign({}, prev, {
               savePath: this.props._electron.ipcRenderer.sendSync('pickDir') || prev.savePath
           })
       }));
    }
    render(){
        return (
            <StandardMenu ref={this.menu}>
                <h2>Appearance</h2>
                <div className={"settings-group"}>
                    <div className={"setting"}>
                        <label htmlFor="dark">Dark Theme</label>
                        <input
                            onChange={field => {
                                if (field.target.value === "on"){
                                   this.updateSettings({
                                      theme: "dark"
                                   });
                                }
                            }}
                            className={"standard_radio right_aligned"}
                            name={"theme"}
                            id={"dark"}
                            type={"radio"}
                            checked={this.state.settings.theme === 'dark'}/>
                    </div>
                    <div className={"setting"}>
                        <label htmlFor="light">Light Theme</label>
                        <input
                            onChange={field => {
                                if (field.target.value === "on"){
                                    this.updateSettings({
                                        theme: "light"
                                    });
                                }
                            }}
                            className={"standard_radio right_aligned"}
                            name={"theme"}
                            id={"light"}
                            type={"radio"}
                            checked={this.state.settings.theme === 'light'}/>
                    </div>
                </div>

                <Checkbox checked={this.state.settings.advanced}
                          onChange={value => this.updateSettings({
                              advanced: value
                          })}
                          text={"Show Advanced Download Details"}/>

                <br/>

                <h2>General</h2>
                <div className={"settingsGroup"}>
                    <label htmlFor={"save-location"}>Save Location</label>
                    <label onClick={() => this.changePath()} htmlFor="save-location"
                           className={"standard_path_input"}>{this.state.settings.savePath}</label>

                    <label htmlFor={"numOfParts"}>How many parts to use during download</label>
                    <br/>
                    <input id={"numOfParts"}
                           placeholder={"Number of parts to use during download"}
                           type={"number"}
                           min={0}
                           max={50}
                           className={"inline_input"}
                           value={this.state.settings.partsToCreate}
                           onChange={field => this.updateSettings({
                              partsToCreate: Number(field.target.value)
                           })}
                    />
                    {/* //TODO: Add reference to docs explaining how to find the optimum part number */}

                    {/*{platform === "win32" ? <div><br/><Checkbox*/}
                    {/*	checked={window.localStorage.getItem('autoHideMenuBar') === true}*/}
                    {/*	text={`Auto-hide the menu bar (reveal by pressing Alt`}*/}
                    {/*	onChange={value => void window.localStorage.setItem('autoHideMenuBar', value) || this.forceUpdate()}/>*/}
                    {/*</div> : null}*/}

                    <br/>
                    <br/>
                    <h3>Units</h3>

                    <hr/>

                    <div className={"setting"}>
                        <input type={"radio"} className={"standard_radio right_aligned"}
                               name={"unit"}
                               onChange={field => {
                                   if (field.target.value === "on") {
                                       this.updateSettings({
                                           preferredUnit: "bin"
                                       });
                                   }
                               }} id={"bin"}
                               checked={this.state.preferredUnit === "bin"}/>
                        <label htmlFor={"bin"}>Binary Units (MiB = 1024 KiB)</label>
                    </div>

                    <div className={"setting"}>
                        <input type={"radio"} className={"standard_radio right_aligned"}
                               name={"unit"}
                               onChange={field => {
                                   if (field.target.value === "on") {
                                       this.updateSettings({
                                           preferredUnit: "dec"
                                       });
                                   }
                               }} id={"bin"}
                               checked={this.state.preferredUnit === "dec"}/>
                        <label htmlFor={"dec"}>Decimal Units (MB = 1000 KB)</label>
                    </div>

                    <hr/>
                    <br/>

                    <Checkbox checked={window.localStorage.getItem('allowNotifications') === true}
                              text={"Allow Notifications"}
                              onChange={value => void window.localStorage.setItem('allowNotifications', value) || this.forceUpdate()}/>

                    <br/>
                    <hr/>

                    <input type={"button"} className={"standard_full_button"} onClick={() => {
                        if (this.props._electron.ipcRenderer.sendSync('confirmClear'))
                            window.localStorage.clear();

                        App.loadSettings();
                        this.forceUpdate();
                    }} value={"Reset to default settings"}/>
                </div>

                <br/>

                <h2>Network</h2>

                <div className={"setting"}>
                    <label htmlFor={"none"}>None</label>
                    <input className={"standard_radio right_aligned"} type={"radio"}
                           name={"proxy-auth-type"}
                           checked={window.localStorage.getItem('proxySettings') === 'none'}
                           id={"none"}
                           onChange={field => {
                               if (field.target.value === "on") {
                                   window.localStorage.setItem('proxySettings', 'none');
                               }
                               this.forceUpdate();
                           }}/>
                </div>
                {(() => false)() ? (
                        <div className={"setting"}>
                            <label htmlFor={"none"}>Pac Script</label>
                            <input className={"standard_radio right_aligned"} type={"radio"}
                                   name={"proxy-auth-type"}
                                   checked={window.localStorage.getItem('proxySettings') === 'pac'}
                                   id={"pac"}
                                   onChange={field => {
                                       if (field.target.value === "on") {
                                           window.localStorage.setItem('proxySettings', 'pac');
                                       }
                                       this.forceUpdate();
                                   }}/>
                        </div>)
                    : null} {/* <-- won't render anything */}

                <div className={"setting"}>
                    <label htmlFor={"none"}>HTTPS Proxy</label>
                    <input className={"standard_radio right_aligned"}
                           type={"radio"}
                           name={"proxy-auth-type"}
                           checked={window.localStorage.getItem('proxySettings') === 'auth'}
                           id={"auth"}
                           onChange={field => {
                               if (field.target.value === "on") {
                                   window.localStorage.setItem('proxySettings', 'auth');
                               }
                               this.forceUpdate();
                           }}/>
                </div>

                {
                    window.localStorage.getItem('proxySettings') === "pac" ?
                        <div>
                            <input placeholder={"https://example.com/proxy/proxy.pac"}
                                   className={"input_standard"}
                                   value={window.localStorage.getItem('pacFile') || ""}
                                   onChange={field => void window.localStorage.setItem('pacFile', field.target.value) || this.forceUpdate()}
                                   id={"pac-location"}/>

                            <label htmlFor={"pac-location"}>Pac Script Location</label></div> :
                        (window.localStorage.getItem('proxySettings') === "auth" ? (
                            <div>
                                <label htmlFor={"proxy-host"}>Proxy Host</label>
                                <input placeholder={"proxy.example.com"}
                                       className={"input_standard"}
                                       value={window.localStorage.getItem('proxyHost') || ""}
                                       onChange={field => void window.localStorage.setItem('proxyHost', field.target.value) || this.forceUpdate()}
                                       id={"proxy-host"}/>

                                <label htmlFor={"proxy-port"}>Proxy Port</label>
                                <br/>
                                <input placeholder={8080}
                                       className={"inline_input"}
                                       type={"number"}
                                       value={window.localStorage.getItem('proxyPort') || ""}
                                       onChange={field => void window.localStorage.setItem('proxyPort', field.target.value) || this.forceUpdate()}
                                       id={"proxy-port"}/>
                                <br/>
                                <br/>

                                <Checkbox
                                    checked={window.localStorage.proxyRequiresCredentials === "true"}
                                    onChange={value => (void window.localStorage.setItem("proxyRequiresCredentials", value)) || this.forceUpdate()}
                                    text={"Proxy Requires Credentials"}/>

                                {(window.localStorage.proxyRequiresCredentials === "true" ?
                                    <div>
                                        <input placeholder={"Proxy Username"}
                                               type={"text"}
                                               className={"input_standard"}
                                               onChange={field => void (window.localStorage.proxyUsername = field.target.value) || this.forceUpdate()}
                                               value={window.localStorage.proxyUsername || ""}
                                               id={"proxy-username"}/>
                                        <input placeholder={"Proxy Password"}
                                               type={"password"}
                                               className={"input_standard"}
                                               onChange={field => void (window.localStorage.proxyPassword = field.target.value) || this.forceUpdate()}
                                               value={window.localStorage.proxyPassword || ""}
                                               id={"proxy-password"}/>
                                    </div> : null)}
                            </div>) : null)
                }
            </StandardMenu>
        )
    }
}