flexor-web/src/app/components/notification-container.tsx

// notification-container.tsx
// Copyright (C) 2020  Dwayne Harris

// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.

// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.

// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <https://www.gnu.org/licenses/>.

import React, { FC } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDoorOpen } from '@fortawesome/free-solid-svg-icons'

import { setNotificationAuto, removeNotification } from '../actions/notifications'
import { getNotifications } from '../selectors'

import Notification from './notification'

const NotificationContainer: FC = () => {
    const notifications = useSelector(getNotifications)
    const dispatch = useDispatch()

    const setAuto = (id: string) => {
        dispatch(setNotificationAuto(id))
    }

    const dismiss = (id: string) => {
        dispatch(removeNotification(id))
    }

    return (
        <div className="notification-container">
            {notifications.map(notification => {
                const content = () => {
                    switch (notification.type) {
                        case 'welcome':
                            return (
                                <p>
                                    <span className="icon">
                                        <FontAwesomeIcon icon={faDoorOpen} />
                                    </span>
                                    &nbsp;&nbsp;
                                    <span>{notification.content}</span>
                                </p>
                            )
                        default:
                            return <span>{notification.content}</span>
                    }
                }

                return (
                    <Notification
                        key={notification.id}
                        id={notification.id}
                        type={notification.type}
                        auto={notification.auto}
                        setAuto={setAuto}
                        dismiss={dismiss}>
                        {content()}
                    </Notification>
                )
            })}
        </div>
    )
}

export default NotificationContainer