Upgrading redux; Refactoring tabs; Adding servers index

2020-04-26 22:04:39 +12:00
parent b95c0fe3cb
commit 92292b18d7
20 changed files with 8852 additions and 4806 deletions
--- a/src/js/components/Servers.js
+++ b/src/js/components/Servers.js
@ -0,0 +1,95 @@
+
+import React, { memo, useCallback } from 'react';
+import { useStore, useDispatch } from 'react-redux'
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import Link from './Link';
+import Icon from './Icon';
+import URILink from './URILink';
+import TextField from './Fields/TextField';
+import { indexToArray } from '../util/arrays';
+
+import * as uiActions from '../services/ui/actions';
+import * as coreActions from '../services/core/actions';
+import * as mopidyActions from '../services/mopidy/actions';
+
+const Servers = ({
+  match: { params: { id: serverId } },
+  history,
+}) => {
+  const store = useStore();
+  const dispatch = useDispatch();
+  const { mopidy: { servers } } = store.getState();
+
+  const renderMenu = () => (
+    <div className="sub-tabs__menu" id="servers-menu">
+      <div className="menu__inner">
+        {indexToArray(servers).map((server) => (
+          <Link
+            history={history}
+            className="menu-item"
+            activeClassName="menu-item--active"
+            to={`/settings/servers/${server.id}`}
+            scrollTo="#servers-menu"
+            key={server.id}
+          >
+            <div className="menu-item__inner">
+              <div className="menu-item__title">
+                {server.name}
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+
+  const renderServer = () => {
+    if (!serverId) return null;
+    const server = servers[serverId];
+    if (!server) return null;
+
+    return (
+      <div className="sub-tabs__content">
+        <label className="field">
+          <div className="name">Name</div>
+          <div className="input">
+            <TextField
+              type="text"
+              value={server.name}
+              onChange={value => dispatch(mopidyActions.updateServer({ id: server.id, name: value }))}
+            />
+          </div>
+        </label>
+        <label className="field">
+          <div className="name">Host</div>
+          <div className="input">
+            <TextField
+              value={server.host}
+              onChange={value => updateServer({ id: server.id, host: value })}
+            />
+          </div>
+        </label>
+        <label className="field">
+          <div className="name">Port</div>
+          <div className="input">
+            <TextField
+              type="text"
+              value={server.port}
+              onChange={value => updateServer({ id: server.id, port: value })}
+            />
+          </div>
+        </label>
+      </div>
+    );
+  };
+
+  return (
+    <div className="sub-tabs sub-tabs--servers">
+      {renderMenu()}
+      {renderServer()}
+    </div>
+  );
+};
+
+export default Servers;