hope/dog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

notifications feathericons

Browse Source
This commit is contained in:
Peter Hoppe
2023-02-19 18:29:09 +01:00
parent cb28767783
commit e765fed019
17 changed files with 80 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/FileUpload.tsx
View File

@ -3,12 +3,12 @@ import { Link } from "react-router-dom";
import {upload as ApiUpload} from "../services/PhpApi";
import PreviewUpload from "./PreviewUpload";
import './InputForm.css';
import { notificationError, notificationSuccess } from "../services/Notifications";
const FileUpload: React.FC = () =>
{
const [currentFile, setCurrentFile] = useState<File>();
const [progress, setProgress] = useState(0);
const [message, setMessage] = useState("");
const selectFile = (pl: File) =>
@ -28,7 +28,7 @@ const FileUpload: React.FC = () =>
})
.then((response) =>
{
setMessage(response.data.message);
notificationSuccess(response.data.message);
return;
})
.catch((err) =>
@ -37,11 +37,11 @@ const FileUpload: React.FC = () =>
if (err.response && err.response.data && err.response.data.message)
{
setMessage(err.response.data.message);
notificationError(err.response.data.message);
}
else
{
setMessage("Could not upload the File!");
notificationError("Could not upload the File!");
}
setCurrentFile(undefined);
@ -82,11 +82,6 @@ const FileUpload: React.FC = () =>
</div>
)}
{message && (
<div className="alert alert-secondary mt-3" role="alert">
{message}
</div>
)}
<Link to={"/profil"}>Zurück zum Profil</Link>
</div>

60
src/components/Login.tsx
View File

@ -4,8 +4,7 @@ import './InputForm.css';
import {getUser, loginUser} from '../services/PhpApi'
import useSWR from 'swr';
import { PasswordInput, Stack, TextInput } from '@mantine/core';
import { showNotification } from '@mantine/notifications';
import { CheckCircledIcon, CrossCircledIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
import { notificationAlert, notificationError, notificationSuccess } from '../services/Notifications';
const Login = () =>
@ -22,18 +21,7 @@ const Login = () =>
if (error)
{
showNotification(
{
icon: <div style=
{
{
transform: "translate(0px, -2px) scale(2.2)"
}
}>
<CrossCircledIcon/></div>,
color: 'red',
message: error.message
});
notificationError(error.message);
return (
<>
@ -64,57 +52,19 @@ const Login = () =>
if(!Object.values(formData).every(val => val.trim() !== ''))
{
showNotification(
{
icon: <div style=
{
{
transform: "translate(0px, -2px) scale(1.5)"
}
}>
<ExclamationTriangleIcon/></div>,
color: 'orange',
message: 'Bitte alle Felder ausfüllen!'
});
notificationAlert('Bitte alle Felder ausfüllen!');
return;
}
const logResp = await loginUser(formData);
if(logResp.success)
{
showNotification(
{
icon: <div style=
{
{
transform: "translate(0px, -2px) scale(2.2)"
}
}>
<CheckCircledIcon/></div>,
color: 'green',
message: logResp.message
});
notificationSuccess(logResp.message);
mutate(); // update swr
}
else
{
// if(logResp.message === undefined)
// {
// toast.error(logResp);
// }
// else
showNotification(
{
icon: <div style=
{
{
transform: "translate(0px, -2px) scale(2.2)"
}
}>
<CrossCircledIcon/></div>,
color: 'red',
message: logResp.message
});
notificationError(logResp.message);
}
}

13
src/components/Qr.tsx
View File

@ -7,8 +7,8 @@ import './Qr.css';
import './InputForm.css';
import useSWR from 'swr';
import { NumberInput, Stack, Checkbox, MantineProvider } from '@mantine/core';
import { showNotification } from '@mantine/notifications';
import {DndList, DndListProps, TDataItem} from './DndList';
import { notificationError, notificationSuccess } from '../services/Notifications';
export default function Qr()
@ -141,19 +141,12 @@ export default function Qr()
{
if(resQR.success)
{
showNotification(
{
message: 'Daten gesichert!'
});
notificationSuccess('Daten gesichert!');
mutate();
}
else if(!resQR.success && resQR.message)
{
showNotification(
{
message: resQR.message
});
notificationError(resQR.message);
}
})
.catch((err) => console.error(err));

55
src/components/Register.tsx
View File

@ -3,8 +3,7 @@ import {Link} from 'react-router-dom'
import './InputForm.css';
import {registerUser} from '../services/PhpApi';
import { PasswordInput, Stack, TextInput } from '@mantine/core';
import { CheckCircledIcon, CrossCircledIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
import { showNotification } from '@mantine/notifications';
import { notificationAlert, notificationError, notificationSuccess } from '../services/Notifications';
const Register = () =>
{
@ -27,70 +26,26 @@ const Register = () =>
if(!Object.values(formData).every(val => val.trim() !== ''))
{
showNotification(
{
icon: <div style=
{
{
transform: "translate(0px, -2px) scale(1.5)"
}
}>
<ExclamationTriangleIcon/></div>,
color: 'orange',
message: 'Bitte alle Felder ausfüllen!'
});
notificationAlert('Bitte alle Felder ausfüllen!');
return;
}
if(formData.password !== formData.password2)
{
showNotification(
{
icon: <div style=
{
{
transform: "translate(0px, -2px) scale(1.5)"
}
}>
<ExclamationTriangleIcon/></div>,
color: 'orange',
message: 'Bitte 2mal das gleiche Passwort eingeben!'
});
notificationAlert('Bitte 2mal das gleiche Passwort eingeben!');
return;
}
const data = await registerUser(formData);
if(data.success)
{
showNotification(
{
icon: <div style=
{
{
transform: "translate(0px, -2px) scale(2.2)"
}
}>
<CheckCircledIcon/></div>,
color: 'green',
message: 'Erfolgreich Registriert!'
});
notificationSuccess('Erfolgreich Registriert!');
e.currentTarget.reset();
}
else if(!data.success && data.message)
{
showNotification(
{
icon: <div style=
{
{
transform: "translate(0px, -2px) scale(2.2)"
}
}>
<CrossCircledIcon/></div>,
color: 'red',
message: data.message
});
notificationError(data.message);
}
}

1
src/icons/alert-circle.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 356 B

1
src/icons/check-circle.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
Side by Side

After

Width:  |  Height:  |  Size: 328 B

1
src/icons/info.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 347 B

1
src/icons/plus-circle.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 351 B

1
src/icons/x-circle.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 346 B

53
src/services/Notifications.tsx Normal file
View File

@ -0,0 +1,53 @@
import React from 'react';
import { showNotification } from '@mantine/notifications';
export function notificationSuccess(msg: string)
{
const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!;
showNotification(
{
icon: <img
style=
{{
backgroundColor: 'lightgreen',
borderRadius: '16px'
}}
src = {WWW_ROOT+'uploads/check-circle.svg'}/> ,
//color: 'green',
message: msg
});
}
export function notificationError(msg: string)
{
const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!;
showNotification(
{
icon: <img
style=
{{
backgroundColor: 'red',
borderRadius: '16px'
}}
src = {WWW_ROOT+'uploads/x-circle.svg'}/> ,
//color: 'green',
message: msg
});
}
export function notificationAlert(msg: string)
{
const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!;
showNotification(
{
icon: <img
style=
{{
backgroundColor: 'orange',
borderRadius: '16px'
}}
src = {WWW_ROOT+'uploads/alert-circle.svg'}/> ,
//color: 'green',
message: msg
});
}