diff --git a/src/client/actions/settings.actions.tsx b/src/client/actions/settings.actions.tsx index 387ea59..3a85216 100644 --- a/src/client/actions/settings.actions.tsx +++ b/src/client/actions/settings.actions.tsx @@ -10,19 +10,18 @@ import { SETTINGS_SERVICE_BASE_URI, } from "../constants/endpoints"; -export const saveSettings = - (settingsPayload, settingsObjectId?) => async (dispatch) => { - const result = await axios({ - url: `${SETTINGS_SERVICE_BASE_URI}/saveSettings`, - method: "POST", - data: { settingsPayload, settingsObjectId }, - }); - console.log(result.data); - dispatch({ - type: SETTINGS_OBJECT_FETCHED, - data: result.data, - }); - }; +export const saveSettings = (settingsPayload) => async (dispatch) => { + const result = await axios({ + url: `${SETTINGS_SERVICE_BASE_URI}/saveSettings`, + method: "POST", + data: { settingsPayload }, + }); + console.log(result.data); + dispatch({ + type: SETTINGS_OBJECT_FETCHED, + data: result.data, + }); +}; export const getSettings = (settingsKey?) => async (dispatch) => { const result = await axios({ diff --git a/src/client/components/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx b/src/client/components/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx index 7476a42..a7b5d0a 100644 --- a/src/client/components/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx +++ b/src/client/components/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx @@ -2,7 +2,7 @@ import React, { ReactElement } from "react"; export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => { const { settings } = settingsObject; - + console.log(settings); return (
@@ -11,52 +11,17 @@ export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
{settings._id}
-
- Client version:{" "} - { - settings.directConnect.client.airDCPPUserSettings.system_info - .client_version - } -
-
- Hostname:{" "} - { - settings.directConnect.client.airDCPPUserSettings.system_info - .hostname - } -
-
- Platform:{" "} - { - settings.directConnect.client.airDCPPUserSettings.system_info - .platform - } -
+
Client version: {settings.system_info.client_version}
+
Hostname: {settings.system_info.hostname}
+
Platform: {settings.system_info.platform}
-
- Username:{" "} - { - settings.directConnect.client.airDCPPUserSettings.user - .username - } -
+
Username: {settings.user.username}
-
- Active Sessions:{" "} - { - settings.directConnect.client.airDCPPUserSettings.user - .active_sessions - } -
+
Active Sessions: {settings.user.active_sessions}
Permissions:{" "} 
-                  {JSON.stringify(
-                    settings.directConnect.client.airDCPPUserSettings.user
-                      .permissions,
-                    undefined,
-                    2,
-                  )}
+                  {JSON.stringify(settings.user.permissions, undefined, 2)}
diff --git a/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx b/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx index 4f919b4..03b86da 100644 --- a/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx +++ b/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useCallback, useContext } from "react"; +import React, { ReactElement, useCallback, useContext, useEffect } from "react"; import { Form, Field } from "react-final-form"; import { useDispatch } from "react-redux"; import { saveSettings, deleteSettings } from "../../actions/settings.actions"; @@ -8,33 +8,29 @@ import { isUndefined, isEmpty, isNil } from "lodash"; export const AirDCPPSettingsForm = (): ReactElement => { const dispatch = useDispatch(); - const airDCPPConfiguration = useContext(AirDCPPSocketContext); - const { AirDCPPSocket, settings } = airDCPPConfiguration; - - const onSubmit = async (values) => { + const airDCPPSettings = useContext(AirDCPPSocketContext); + const onSubmit = useCallback(async (values) => { try { - if (!isNil(AirDCPPSocket.session_id)) { - dispatch( - saveSettings({ - host: values, - airDCPPUserSettings: settings, - }), - ); - } + airDCPPSettings.setSettings(values); + dispatch( + saveSettings({ + host: values, + }), + ); } catch (error) { console.log(error); } - }; - + }, []); const removeSettings = useCallback(async () => { dispatch(deleteSettings()); }, []); - const validate = async () => {}; - const initFormData = - !isEmpty(settings.directConnect) || !isUndefined(settings.directConnect) - ? settings.directConnect.client.host - : {}; + + // const initFormData = !isUndefined(airDCPPSettings) + // ? airDCPPSettings.airDCPPState.settings.directConnect.client.host + // : {}; + const initFormData = {}; + return ( <>
{
)} /> - {!isEmpty(settings) ? ( - + {!isUndefined(airDCPPSettings.airDCPPState.socketConnectionInformation) ? ( + ) : null} - {!isEmpty(settings) ? ( + {/* {!isUndefined(settings) && + !isEmpty(settings.directConnect.client.airDCPPUserSettings) ? (

- ) : null} + ) : null} */} ); }; diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx index 5b90fd2..798b9ba 100644 --- a/src/client/components/App.tsx +++ b/src/client/components/App.tsx @@ -25,10 +25,14 @@ import { isEmpty, isNil, isUndefined } from "lodash"; const AirDCPPSocketComponent = (): ReactElement => { const airDCPPConfiguration = useContext(AirDCPPSocketContext); - const { AirDCPPSocket, settings } = airDCPPConfiguration; + console.log(airDCPPConfiguration); + useEffect(() => { const foo = async () => { - if (!isUndefined(AirDCPPSocket)) { + if ( + !isUndefined(airDCPPConfiguration.airDCPPState) && + !isEmpty(airDCPPConfiguration.airDCPPState.settings) + ) { await AirDCPPSocket.addListener( "queue", "queue_bundle_added", @@ -40,7 +44,7 @@ const AirDCPPSocketComponent = (): ReactElement => { } }; foo(); - }, [settings]); + }, []); return <>; }; export const App = (): ReactElement => { diff --git a/src/client/components/SystemSettings/SystemSettingsForm.tsx b/src/client/components/SystemSettings/SystemSettingsForm.tsx index 7a3b46f..18a70f1 100644 --- a/src/client/components/SystemSettings/SystemSettingsForm.tsx +++ b/src/client/components/SystemSettings/SystemSettingsForm.tsx @@ -2,8 +2,7 @@ import React, { ReactElement, useCallback } from "react"; import { flushDb } from "../../actions/settings.actions"; import { useDispatch, useSelector } from "react-redux"; -export const SystemSettingsForm = (settingsObject): ReactElement => { - +export const SystemSettingsForm = (): ReactElement => { const dispatch = useDispatch(); const isSettingsCallInProgress = useSelector( (state: RootState) => state.settings.inProgress, diff --git a/src/client/context/AirDCPPSocket.tsx b/src/client/context/AirDCPPSocket.tsx index a247a2f..69ce74e 100644 --- a/src/client/context/AirDCPPSocket.tsx +++ b/src/client/context/AirDCPPSocket.tsx @@ -1,46 +1,81 @@ -import axios from "axios"; +import { isEmpty, isUndefined } from "lodash"; import React, { createContext, useEffect, useMemo, useState } from "react"; -import { SETTINGS_SERVICE_BASE_URI } from "../constants/endpoints"; +import { useDispatch, useSelector } from "react-redux"; +import { getSettings } from "../actions/settings.actions"; import AirDCPPSocket from "../services/DcppSearchService"; -const AirDCPPSocketContext = createContext({}); const AirDCPPSocketContextProvider = ({ children }) => { - const [airDCPPConfiguration, setValue] = useState({}); + // setter for settings for use in the context consumer + const setSettings = (settingsObject) => { + persistSettings({ + ...airDCPPState, + airDCPPState: { + settings: settingsObject, + socket: {}, + socketConnectionInformation: {}, + }, + }); + }; + // 1. default zero-state for AirDC++ configuration + const initState = { + airDCPPState: { settings: {}, socket: {}, socketConnectionInformation: {} }, + setSettings: setSettings, + }; + const dispatch = useDispatch(); + const [airDCPPState, persistSettings] = useState(initState); + const airDCPPSettings = useSelector( + (state: RootState) => state.settings.data, + ); + // 1. get settings from mongo useEffect(() => { - const initializeAirDCPPSocket = () => { - axios({ - url: `${SETTINGS_SERVICE_BASE_URI}/getSettings`, - method: "POST", - data: "", - }) - .then(async (data) => { - const { directConnect } = data.data; - const initializedAirDCPPSocket = new AirDCPPSocket({ - protocol: `${directConnect.client.host.protocol}`, - hostname: `${directConnect.client.host.hostname}`, - }); - - await initializedAirDCPPSocket.connect( - `${directConnect.client.host.username}`, - `${directConnect.client.host.password}`, - true, - ); - setValue({ - AirDCPPSocket: initializedAirDCPPSocket, - settings: data.data, - }); - }) - .catch((error) => console.log(error)); - }; - initializeAirDCPPSocket(); + dispatch(getSettings()); }, []); + + // 2. If available, init AirDC++ Socket with those settings + useEffect(() => { + if (!isEmpty(airDCPPSettings)) { + initializeAirDCPPSocket(airDCPPSettings); + } + }, [airDCPPSettings]); + + // Method to init AirDC++ Socket with supplied settings + const initializeAirDCPPSocket = async (configuration) => { + const { + directConnect: { + client: { host }, + }, + } = configuration; + const initializedAirDCPPSocket = new AirDCPPSocket({ + protocol: `${host.protocol}`, + hostname: `${host.hostname}`, + }); + + const socketConnectionInformation = await initializedAirDCPPSocket.connect( + `${host.username}`, + `${host.password}`, + true, + ); + persistSettings({ + ...airDCPPState, + airDCPPState: { + settings: configuration, + socket: initializedAirDCPPSocket, + socketConnectionInformation, + }, + }); + }; + // the Provider gives access to the context to its children return ( - + {children} ); }; +const AirDCPPSocketContext = createContext({ + airDCPPState: {}, + saveSettings: () => {}, +}); export { AirDCPPSocketContext, AirDCPPSocketContextProvider };