jeirmeister/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-06-11 08:34:52 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Webclient: Add Toasts component and show on known host CUD operations (#4556)

Browse source 
* Add Toasts component and show on known host CUD operations

* add slide transition

* NIT

Co-authored-by: Brent Clark <brent@backboneiq.com>
This commit is contained in:
Brent Clark 2022-02-01 12:08:05 -06:00 • committed by GitHub
parent 8203a2fdeb
commit 81d031ca0f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 91 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

14
webclient/src/components/KnownHosts/KnownHosts.tsx
View file

@ -1,5 +1,4 @@
// eslint-disable-next-line
import React, { useCallback, useEffect, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { Select, MenuItem } from '@material-ui/core';
import Button from '@material-ui/core/Button';
import FormControl from '@material-ui/core/FormControl';
@ -14,6 +13,7 @@ import ErrorOutlinedIcon from '@material-ui/icons/ErrorOutlined';
import { KnownHostDialog } from 'dialogs';
import { HostDTO } from 'services';
import { DefaultHosts, Host, getHostPort } from 'types';
import Toast from 'components/Toast/Toast';
import './KnownHosts.css';
@ -44,6 +44,10 @@ const KnownHosts = (props) => {
edit: null,
});
const [showCreateToast, setShowCreateToast] = useState(false)
const [showDeleteToast, setShowDeleteToast] = useState(false)
const [showEditToast, setShowEditToast] = useState(false)
const loadKnownHosts = useCallback(async () => {
const hosts = await HostDTO.getAll();
@ -96,6 +100,7 @@ const KnownHosts = (props) => {
closeKnownHostDialog();
HostDTO.delete(id);
setShowDeleteToast(true)
};
const handleDialogSubmit = async ({ id, name, host, port }) => {
@ -111,6 +116,7 @@ const KnownHosts = (props) => {
hosts: s.hosts.map(h => h.id === id ? hostDTO : h),
selectedHost: hostDTO
}));
setShowEditToast(true)
} else {
const newHost: Host = { name, host, port, editable: true };
newHost.id = await HostDTO.add(newHost) as number;
@ -120,6 +126,7 @@ const KnownHosts = (props) => {
hosts: [...s.hosts, newHost],
selectedHost: newHost,
}));
setShowCreateToast(true)
}
closeKnownHostDialog();
@ -206,6 +213,9 @@ const KnownHosts = (props) => {
onSubmit={handleDialogSubmit}
handleClose={closeKnownHostDialog}
/>
<Toast open={showCreateToast} onClose={() => setShowCreateToast(false)}>Host successfully created.</Toast>
<Toast open={showDeleteToast} onClose={() => setShowDeleteToast(false)}>Host successfully deleted.</Toast>
<Toast open={showEditToast} onClose={() => setShowEditToast(false)}>Host successfully edited.</Toast>
</div>
)
};