import {
Accordion,
AccordionDetails,
AccordionSummary,
Checkbox,
Grid,
IconButton,
Typography,
} from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import RefreshIcon from "@material-ui/icons/Refresh";
import { useCallback, useEffect, useState } from "react";
import DataTable from "react-data-table-component";
import { useParams } from "react-router-dom";
import API from "utils/API";
import { parseValue, replaceValue, setValue } from "utils/ChangeHelper";
import AddMember from "./components/AddMember";
import DeleteMember from "./components/DeleteMember";
import ManagedIP from "./components/ManagedIP";
import MemberName from "./components/MemberName";
import MemberSettings from "./components/MemberSettings";
function NetworkMembers({ network }) {
const { nwid } = useParams();
const [members, setMembers] = useState([]);
const fetchData = useCallback(async () => {
try {
const members = await API.get("network/" + nwid + "/member");
setMembers(members.data);
console.log("Members:", members.data);
} catch (err) {
console.error(err);
}
}, [nwid]);
useEffect(() => {
fetchData();
const timer = setInterval(() => fetchData(), 30000);
return () => clearInterval(timer);
}, [nwid, fetchData]);
const sendReq = async (mid, data) => {
const req = await API.post("/network/" + nwid + "/member/" + mid, data);
console.log("Action:", req);
};
const handleChange =
(member, key1, key2 = null, mode = "text", id = null) =>
(event) => {
const value = parseValue(event, mode, member, key1, key2, id);
const updatedMember = replaceValue({ ...member }, key1, key2, value);
const index = members.findIndex((item) => {
return item["config"]["id"] === member["config"]["id"];
});
let mutableMembers = [...members];
mutableMembers[index] = updatedMember;
setMembers(mutableMembers);
const data = setValue({}, key1, key2, value);
sendReq(member["config"]["id"], data);
};
const columns = [
{
id: "auth",
name: "Authorized",
minWidth: "80px",
cell: (row) => (
),
},
{
id: "address",
name: "Address",
minWidth: "150px",
cell: (row) => (
{row.config.address}
),
},
{
id: "name",
name: "Name/Description",
minWidth: "250px",
cell: (row) => ,
},
{
id: "ips",
name: "Managed IPs",
minWidth: "220px",
cell: (row) => ,
},
{
id: "status",
name: "Peer status",
minWidth: "100px",
cell: (row) =>
row.online ? (
{"ONLINE (v" +
row.config.vMajor +
"." +
row.config.vMinor +
"." +
row.config.vRev +
")"}
) : (
OFFLINE
),
},
{
id: "delete",
name: "",
minWidth: "50px",
right: true,
cell: (row) => (
<>
>
),
},
];
return (
}>
Members
{members.length ? (
) : (
No devices have joined this network. Use the app on your
devices to join {nwid}.
)}
);
}
export default NetworkMembers;