All files / app/pages/settings settings-manage-nodes.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { NodeSelect } from './components/node-select';
import { NodeSelectItem } from './components/node-select-item';
import { SettingDescription } from './components/settings-layout';
import { SettingSection } from './components/settings-section';
import { UpsertStacksNodeSettingsModal } from '@modals/upsert-stacks-node-api/upsert-stacks-node-api';
import { Button } from '@stacks/ui';
import { RootState } from '@store/index';
import {
  selectStacksNodeApis,
  upsertStacksNodeApi,
  selectActiveNodeApi,
  setActiveStacksNode,
  removeStacksNodeApi,
  defaultNode,
} from '@store/stacks-node';
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
 
export const SettingsManageNodes = () => {
  const dispatch = useDispatch();
 
  const { nodes, selectedNodeApi } = useSelector((state: RootState) => ({
    nodes: selectStacksNodeApis(state),
    selectedNodeApi: selectActiveNodeApi(state),
  }));
  const [nodeModalOpen, setNodeModalOpen] = useState(false);
  const [operation, setOperation] = useState<'create' | 'update'>('create');
 
  return (
    <SettingSection title="Node settings">
      <SettingDescription>Select the node you&apos;d like to use</SettingDescription>
      <UpsertStacksNodeSettingsModal
        isOpen={nodeModalOpen}
        selectedNode={operation === 'update' ? selectedNodeApi : undefined}
        onUpdateNode={node => dispatch(upsertStacksNodeApi(node))}
        onClose={() => setNodeModalOpen(false)}
      />
      <NodeSelect>
        {[defaultNode, ...nodes].map((node, i) => (
          <NodeSelectItem
            key={i}
            index={i}
            node={node}
            activeNode={selectedNodeApi}
            onChange={nodeId => dispatch(setActiveStacksNode(nodeId))}
            onEdit={() => (setOperation('update'), setNodeModalOpen(true))}
            onDelete={nodeId => dispatch(removeStacksNodeApi(nodeId))}
          />
        ))}
      </NodeSelect>
      <Button mt="loose" onClick={() => (setOperation('create'), setNodeModalOpen(true))}>
        Add a node
      </Button>
    </SettingSection>
  );
};