diff --git a/.gitignore b/.gitignore index 4e2467f..5b6275d 100644 --- a/.gitignore +++ b/.gitignore @@ -11,7 +11,6 @@ # production /build -/extern/material-design-icons-4.0.0 # misc .DS_Store diff --git a/extern/feathericons.com/alert-circle.svg b/extern/feathericons.com/alert-circle.svg new file mode 100644 index 0000000..9fe182e --- /dev/null +++ b/extern/feathericons.com/alert-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extern/feathericons.com/check-circle.svg b/extern/feathericons.com/check-circle.svg new file mode 100644 index 0000000..679a8ee --- /dev/null +++ b/extern/feathericons.com/check-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extern/feathericons.com/info.svg b/extern/feathericons.com/info.svg new file mode 100644 index 0000000..6996584 --- /dev/null +++ b/extern/feathericons.com/info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extern/feathericons.com/plus-circle.svg b/extern/feathericons.com/plus-circle.svg new file mode 100644 index 0000000..c99f5cb --- /dev/null +++ b/extern/feathericons.com/plus-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extern/feathericons.com/x-circle.svg b/extern/feathericons.com/x-circle.svg new file mode 100644 index 0000000..4c51a81 --- /dev/null +++ b/extern/feathericons.com/x-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extern/material-design-icons-4.0.0.zip b/extern/material-design-icons-4.0.0.zip deleted file mode 100644 index cff4b9e..0000000 Binary files a/extern/material-design-icons-4.0.0.zip and /dev/null differ diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index 8246628..961ea2d 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -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(); 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 = () => )} - {message && ( -
- {message} -
- )} Zurück zum Profil diff --git a/src/components/Login.tsx b/src/components/Login.tsx index 1ceb069..83e8203 100644 --- a/src/components/Login.tsx +++ b/src/components/Login.tsx @@ -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:
-
, - 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:
-
, - 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:
-
, - color: 'green', - message: logResp.message - }); + notificationSuccess(logResp.message); mutate(); // update swr } else { - // if(logResp.message === undefined) - // { - // toast.error(logResp); - // } - // else - showNotification( - { - icon:
-
, - color: 'red', - message: logResp.message - }); + notificationError(logResp.message); } } diff --git a/src/components/Qr.tsx b/src/components/Qr.tsx index 36d2a27..7bbd237 100644 --- a/src/components/Qr.tsx +++ b/src/components/Qr.tsx @@ -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)); diff --git a/src/components/Register.tsx b/src/components/Register.tsx index 4f9386a..9d47c33 100644 --- a/src/components/Register.tsx +++ b/src/components/Register.tsx @@ -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:
-
, - color: 'orange', - message: 'Bitte alle Felder ausfüllen!' - }); + notificationAlert('Bitte alle Felder ausfüllen!'); return; } if(formData.password !== formData.password2) { - showNotification( - { - icon:
-
, - 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:
-
, - color: 'green', - message: 'Erfolgreich Registriert!' - }); + notificationSuccess('Erfolgreich Registriert!'); e.currentTarget.reset(); } else if(!data.success && data.message) { - showNotification( - { - icon:
-
, - color: 'red', - message: data.message - }); + notificationError(data.message); } } diff --git a/src/icons/alert-circle.svg b/src/icons/alert-circle.svg new file mode 100644 index 0000000..9fe182e --- /dev/null +++ b/src/icons/alert-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/check-circle.svg b/src/icons/check-circle.svg new file mode 100644 index 0000000..679a8ee --- /dev/null +++ b/src/icons/check-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/info.svg b/src/icons/info.svg new file mode 100644 index 0000000..6996584 --- /dev/null +++ b/src/icons/info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/plus-circle.svg b/src/icons/plus-circle.svg new file mode 100644 index 0000000..c99f5cb --- /dev/null +++ b/src/icons/plus-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/x-circle.svg b/src/icons/x-circle.svg new file mode 100644 index 0000000..4c51a81 --- /dev/null +++ b/src/icons/x-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/services/Notifications.tsx b/src/services/Notifications.tsx new file mode 100644 index 0000000..0d57f6f --- /dev/null +++ b/src/services/Notifications.tsx @@ -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: , + //color: 'green', + message: msg + }); +} + +export function notificationError(msg: string) +{ + const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!; + showNotification( + { + icon: , + //color: 'green', + message: msg + }); +} + +export function notificationAlert(msg: string) +{ + const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!; + showNotification( + { + icon: , + //color: 'green', + message: msg + }); +}