Skip to content

Commit

Permalink
Merge pull request #9 from hendriksen-mark/main
Browse files Browse the repository at this point in the history
add remove apiusers
  • Loading branch information
hendriksen-mark authored Mar 31, 2024
2 parents 81f68b0 + 9bea24e commit 0639862
Show file tree
Hide file tree
Showing 6 changed files with 126 additions and 14 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"react-confirm-alert": "^2.7.0",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.1",
"react-icons": "^4.4.0",
"react-icons": "^5.0.1",
"react-modal": "^3.15.1",
"react-redux": "^7.2.9",
"react-responsive": "^8.2.0",
Expand Down
19 changes: 6 additions & 13 deletions src/containers/Device.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ import {
import axios from "axios";
import { confirmAlert } from "react-confirm-alert"; // Import
import "react-confirm-alert/src/react-confirm-alert.css"; // Import css
import { toast } from 'react-hot-toast';

const Device = ({ HOST_IP, api_key, id, device, setType, setMessage }) => {
const Device = ({ HOST_IP, api_key, id, device }) => {
const deleteAlert = () => {
confirmAlert({
title: "Delete device " + device["name"],
Expand All @@ -33,15 +34,11 @@ const Device = ({ HOST_IP, api_key, id, device, setType, setMessage }) => {
.delete(`${HOST_IP}/api/${api_key}/sensors/${id}`)
.then((fetchedData) => {
//console.log(fetchedData.data);
setMessage("Device successfully deleted");
setType("none");
setType("success");
toast.success("Device successfully deleted");
})
.catch((error) => {
console.error(error);
setMessage("Error occured, check browser console");
setType("none");
setType("error");
toast.error("Error occured, check browser console");
});
};

Expand All @@ -50,17 +47,13 @@ const Device = ({ HOST_IP, api_key, id, device, setType, setMessage }) => {
.put(`${HOST_IP}/api/${api_key}/sensors/${id}/config`, { on: state })
.then((fetchedData) => {
//console.log(fetchedData.data);
setMessage(
toast.success(
device["name"] + " successfully " + (state ? "enabled" : "disabled")
);
setType("none");
setType("success");
})
.catch((error) => {
console.error(error);
setMessage("Error occured, check browser console");
setType("none");
setType("error");
toast.error("Error occured, check browser console");
});
};

Expand Down
2 changes: 2 additions & 0 deletions src/containers/TheSidebar.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
import { SiHomeassistant } from "react-icons/si";
import { MdSettingsRemote } from "react-icons/md";
import { IoExtensionPuzzle } from "react-icons/io5";
import { PiUserListFill } from "react-icons/pi";
import { Bridge } from "../icons/Bridge"
import { Zigbee } from "../icons/Zigbee"
import { Deconz } from "../icons/Deconz"
Expand Down Expand Up @@ -43,6 +44,7 @@ const TheSidebar = ({ showSidebar, setShowSidebar, isMobile }) => {
subItems: [
{ label: 'Bridge', icon: <Diybridge style={{ color: "#9CD747" }} />, link: '#bridge' },
{ label: 'Linkbutton', icon: <FaLink style={{ color: "#70C877" }} />, link: '#linkbutton' },
{ label: 'App Users', icon: <PiUserListFill style={{ color: "#30cfff" }} />, link: '#users' },
{ label: 'Alarm', icon: <FaExclamationTriangle style={{ color: "#CD3D45" }} />, link: '#alarm' },
{ label: 'Settings', icon: <FaCog style={{ color: "#D85BCD" }} />, link: '#settings' },
]
Expand Down
62 changes: 62 additions & 0 deletions src/containers/Users.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { MdDeleteForever } from "react-icons/md";
import { RiApps2Fill } from "react-icons/ri";

import axios from "axios";
import { confirmAlert } from "react-confirm-alert"; // Import
import "react-confirm-alert/src/react-confirm-alert.css"; // Import css
import { toast } from 'react-hot-toast';

const Users = ({ HOST_IP, api_key, id, user }) => {
const deleteAlert = () => {
confirmAlert({
title: "Delete User " + user["name"],
message: "Are you sure to do this?",
buttons: [
{
label: "Yes",
onClick: () => deleteUser(),
},
{
label: "No",
},
],
});
};

const deleteUser = () => {
axios
.delete(`${HOST_IP}/api/${api_key}/config/whitelist/${id}`)
.then((fetchedData) => {
//console.log(fetchedData.data);
toast.success("User successfully deleted");
})
.catch((error) => {
console.error(error);
toast.error(`Error occurred: ${error.message}`);
});
};

return (
<div className="devicecard device">
<div className="row1">
<div className="icon">
<RiApps2Fill />
</div>
<div className="text">{user["name"]}</div>
</div>
<div className="row2">
<div className="text">
Last use date: {user["last use date"]} <br />
Create date: {user["create date"]} <br />
</div>
</div>
<div className="row3">
<div className="iconbtn red">
<MdDeleteForever title="Delete" onClick={() => deleteAlert()} />
</div>
</div>
</div>
);
};

export default Users;
2 changes: 2 additions & 0 deletions src/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const HueBridge = React.lazy(() => import('./views/HueBridge'));
const About = React.lazy(() => import('./views/About'));
const Settings = React.lazy(() => import('./views/Settings'));
const Account = React.lazy(() => import('./views/Account'));
const Users = React.lazy(() => import('./views/AppUsers'));

const routes = [
{ path: '/', exact: true, name: 'Groups', component: Groups },
Expand All @@ -31,6 +32,7 @@ const routes = [
{ path: '/about', exact: true, name: 'About', component: About },
{ path: '/settings', exact: true, name: 'Settings', component: Settings },
{ path: '/account', exact: true, name: 'Account', component: Account },
{ path: '/users', exact: true, name: 'App Users', component: Users },
];

export default routes;
53 changes: 53 additions & 0 deletions src/views/AppUsers.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { useState, useEffect } from "react";
import axios from "axios";
import Users from "../containers/Users";
import { toast } from 'react-hot-toast';

const Config = ({ HOST_IP, API_KEY }) => {
const [whitelist, setWhitelist] = useState({});

useEffect(() => {
const fetchConfig = () => {
if (API_KEY !== undefined) {
axios
.get(`${HOST_IP}/api/${API_KEY}/config`)
.then((fetchedData) => {
console.log(fetchedData.data);
setWhitelist(fetchedData.data.whitelist);
})
.catch((error) => {
console.error(error);
toast.error(`Error occurred: ${error.message}`, { duration: 5000 });
});
}
};

fetchConfig();
const interval = setInterval(() => {
fetchConfig();
}, 2000); // <<-- ⏱ 1000ms = 1s
return () => clearInterval(interval);
}, [HOST_IP, API_KEY]);

return (
<div className="content">
<div className="inner">
<div className="devicecontainer">
<div className="cardGrid">
{Object.entries(whitelist).map(([id, user]) => (
<Users
key={id}
HOST_IP={HOST_IP}
api_key={API_KEY}
id={id}
user={user}
/>
))}
</div>
</div>
</div>
</div>
);
};

export default Config;

0 comments on commit 0639862

Please sign in to comment.