katoikia-app/web-ui/web-react/src/templates/MessagesDemo.js

import React, { useRef, useState } from 'react';
import { Toast } from 'primereact/toast';
import { Messages } from 'primereact/messages';
import { Message } from 'primereact/message';
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';

const MessagesDemo = () => {
    const [username, setUsername] = useState('');
    const [email, setEmail] = useState('');
    const toast = useRef();
    const message = useRef();

    const addSuccessMessage = () => {
        message.current.show({ severity: 'success', content: 'Message Detail' });
    };

    const addInfoMessage = () => {
        message.current.show({ severity: 'info', content: 'Message Detail' });
    };

    const addWarnMessage = () => {
        message.current.show({ severity: 'warn', content: 'Message Detail' });
    };

    const addErrorMessage = () => {
        message.current.show({ severity: 'error', content: 'Message Detail' });
    };

    const showSuccess = () => {
        toast.current.show({ severity: 'success', summary: 'Success Message', detail: 'Message Detail', life: 3000 });
    };

    const showInfo = () => {
        toast.current.show({ severity: 'info', summary: 'Info Message', detail: 'Message Detail', life: 3000 });
    };

    const showWarn = () => {
        toast.current.show({ severity: 'warn', summary: 'Warn Message', detail: 'Message Detail', life: 3000 });
    };

    const showError = () => {
        toast.current.show({ severity: 'error', summary: 'Error Message', detail: 'Message Detail', life: 3000 });
    };

    return (
        <div className="grid">
            <div className="col-12 lg:col-6">
                <div className="card">
                    <h5>Toast</h5>

                    <Toast ref={toast} />
                    <Button type="button" onClick={showSuccess} label="Success" className="p-button-success mr-2" />
                    <Button type="button" onClick={showInfo} label="Info" className="p-button-info mr-2" />
                    <Button type="button" onClick={showWarn} label="Warn" className="p-button-warning mr-2" />
                    <Button type="button" onClick={showError} label="Error" className="p-button-danger mr-2" />
                </div>
            </div>

            <div className="col-12 lg:col-6">
                <div className="card">
                    <h5>Messages</h5>

                    <Button label="Success" type="button" onClick={addSuccessMessage} className="p-button-success mr-2" />
                    <Button label="Info" type="button" onClick={addInfoMessage} className="p-button-info mr-2" />
                    <Button label="Warn" type="button" onClick={addWarnMessage} className="p-button-warning mr-2" />
                    <Button label="Error" type="button" onClick={addErrorMessage} className="p-button-danger mr-2" />
                    <Messages ref={message} />
                </div>
            </div>

            <div className="col-12 lg:col-8">
                <div className="card">
                    <h5>Inline</h5>
                    <div className="field grid">
                        <label htmlFor="username1" className="col-fixed w-9rem">Username</label>
                        <div className="col">
                            <InputText id="username1" value={username} onChange={(e) => setUsername(e.target.value)} required className="p-invalid mr-2"/>
                            <Message severity="error" text="Username is required" />
                        </div>
                    </div>
                    <div className="field grid">
                        <label htmlFor="email" className="col-fixed w-9rem">Email</label>
                        <div className="col">
                            <InputText id="email" value={email} onChange={(e) => setEmail(e.target.value)} required className="p-invalid mr-2"/>
                            <Message severity="error"/>
                        </div>
                    </div>
                </div>
            </div>

            <div className="col-12 lg:col-4">
                <div className="card">
                    <h5>Help Text</h5>
                    <div className="field p-fluid">
                        <label htmlFor="username2">Username</label>
                        <InputText id="username2" type="text" className="p-invalid" aria-describedby="username-help" />
                        <small id="username-help" className="p-error">Enter your username to reset your password.</small>
                    </div>
                </div>
            </div>
        </div>
    );
}

const comparisonFn = function (prevProps, nextProps) {
    return prevProps.location.pathname === nextProps.location.pathname;
};

export default React.memo(MessagesDemo, comparisonFn);