import PropTypes from 'prop-types';
import React from 'react';
+import SettingsDialog from '../components/snes/SettingsDialog';
import SNESSocket from '../helpers/SNESSocket';
const context = React.createContext({});
export const SNESProvider = ({ children }) => {
const [enabled, setEnabled] = React.useState(false);
+ const [showSettingsDialog, setShowSettingsDialog] = React.useState(false);
const sock = React.useRef(null);
const [settings, setSettings] = React.useState({
proto: 'ws',
host: 'localhost',
- port: 8080,
+ port: 23074,
device: '',
});
});
}, []);
+ const openSettings = React.useCallback(() => {
+ setShowSettingsDialog(true);
+ }, []);
+
+ const closeSettings = React.useCallback(() => {
+ setShowSettingsDialog(false);
+ }, []);
+
+ const saveSettings = React.useCallback((values) => {
+ setSettings(s => {
+ const newSettings = { ...s, ...values };
+ localStorage.setItem('snes.settings', JSON.stringify(newSettings));
+ return newSettings;
+ });
+ setShowSettingsDialog(false);
+ }, []);
+
React.useEffect(() => {
const savedSettings = localStorage.getItem('snes.settings');
if (savedSettings) {
}, []);
const value = React.useMemo(() => {
- return { disable, enable, enabled, settings, sock, status };
- }, [disable, enable, enabled, settings, sock, status]);
+ return { disable, enable, enabled, openSettings, settings, sock, status };
+ }, [disable, enable, enabled, openSettings, settings, sock, status]);
return <context.Provider value={value}>
{children}
+ <SettingsDialog
+ deviceList={status.deviceList}
+ onHide={closeSettings}
+ onSubmit={saveSettings}
+ settings={settings}
+ show={showSettingsDialog}
+ />
</context.Provider>;
};