import React, { createRef, Fragment, useEffect, useState } from 'react'; import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator'; import BootstrapTable from 'react-bootstrap-table-next'; import { toast } from 'react-toastify'; import { Row, Col, Card, CardBody, Button, CustomInput, DropdownItem, DropdownMenu, DropdownToggle, InputGroup, UncontrolledDropdown, Spinner, } from 'reactstrap'; import ButtonIcon from '../../common/ButtonIcon'; import { Link } from 'react-router-dom'; import Badge from 'reactstrap/es/Badge'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import FalconCardHeader from '../../common/FalconCardHeader'; import uuid from 'uuid/v1'; import { getPaginationArray } from '../../../helpers/utils'; import { getCookieValue, createCookie } from '../../../helpers/utils'; import withRedirect from '../../../hoc/withRedirect'; import { withTranslation } from 'react-i18next'; import moment from 'moment'; import { APIBaseURL } from '../../../config'; const Notification = ({ setRedirect, setRedirectUrl, t }) => { let current_moment = moment(); const [startDatetime, setStartDatetime] = useState(current_moment.clone().subtract(6, 'months')); const [endDatetime, setEndDatetime] = useState(current_moment); const [fetchSuccess, setFetchSuccess] = useState(false); //Results const [notifications, setNotifications] = useState([]); const [spinnerHidden, setSpinnerHidden] = useState(false); useEffect(() => { let is_logged_in = getCookieValue('is_logged_in'); let user_name = getCookieValue('user_name'); let user_display_name = getCookieValue('user_display_name'); let user_uuid = getCookieValue('user_uuid'); let token = getCookieValue('token'); if (is_logged_in === null || !is_logged_in) { setRedirectUrl(`/authentication/basic/login`); setRedirect(true); } else { //update expires time of cookies createCookie('is_logged_in', true, 1000 * 60 * 60 * 8); createCookie('user_name', user_name, 1000 * 60 * 60 * 8); createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8); createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8); createCookie('token', token, 1000 * 60 * 60 * 8); let isResponseOK = false; if (!fetchSuccess) { fetch(APIBaseURL + '/webmessages?' + 'startdatetime=' + startDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&enddatetime=' + endDatetime.format('YYYY-MM-DDTHH:mm:ss'), { method: 'GET', headers: { "Content-type": "application/json", "User-UUID": getCookieValue('user_uuid'), "Token": getCookieValue('token') }, body: null, }).then(response => { if (response.ok) { isResponseOK = true; } return response.json(); }).then(json => { if (isResponseOK) { console.log(json); setFetchSuccess(true); let notificationList = [] if (json.length > 0) { json.forEach((currentValue, index) => { let notification = {} notification['id'] = json[index]['id']; notification['subject'] = json[index]['subject']; notification['created_datetime'] = moment(parseInt(json[index]['created_datetime'])) .format("YYYY-MM-DD HH:mm:ss"); notification['message'] = json[index]['message']; notification['status'] = json[index]['status']; notification['url'] = json[index]['url']; notificationList.push(notification); }); } setNotifications(notificationList); setSpinnerHidden(true); } }); } } }, ); // State let table = createRef(); const [isSelected, setIsSelected] = useState(false); const handleNextPage = ({ page, onPageChange }) => () => { onPageChange(page + 1); }; const handlePrevPage = ({ page, onPageChange }) => () => { onPageChange(page - 1); }; const onSelect = () => { setImmediate(() => { setIsSelected(!!table.current.selectionContext.selected.length); }); }; const subjectFormatter = (dataField, { url }) => ( {dataField} ); const messageFormatter = (dataField,) => ( {dataField} ); const statusFormatter = status => { let color = ''; let icon = ''; let text = ''; switch (status) { case 'read': color = 'success'; icon = 'envelope-open'; text = t('Notification Read'); break; case 'unread': color = 'primary'; icon = 'envelope'; text = t('Notification Unread'); break; default: color = 'primary'; icon = 'envelope'; text = t('Notification Unread'); } return ( {text} ); }; const actionFormatter = (dataField, { id }) => ( // Control your row with this id handleRead(id)}>{t('Notification Mark As Read')} console.log('Archive: ', id)}>{t('Notification Archive')} console.log('Delete: ', id)} className="text-danger">{t('Notification Delete')} ); const columns = [ { dataField: 'subject', text: t('Notification Subject'), classes: 'py-2 align-middle', formatter: subjectFormatter, sort: true }, { dataField: 'created_datetime', text: t('Notification Created Datetime'), classes: 'py-2 align-middle', sort: true }, { dataField: 'message', text: t('Notification Message'), classes: 'py-2 align-middle', formatter: messageFormatter, sort: true }, { dataField: 'status', text: t('Notification Status'), classes: 'py-2 align-middle', formatter: statusFormatter, sort: true }, { dataField: '', text: '', classes: 'py-2 align-middle', formatter: actionFormatter, align: 'right' } ]; const options = { custom: true, sizePerPage: 10, totalSize: notifications.length }; const SelectRowInput = ({ indeterminate, rowIndex, ...rest }) => (
{ }} ref={input => { if (input) input.indeterminate = indeterminate; }} />
); const selectRow = onSelect => ({ mode: 'checkbox', classes: 'py-2 align-middle', clickToSelect: false, selectionHeaderRenderer: ({ mode, ...rest }) => , selectionRenderer: ({ mode, ...rest }) => , onSelect: onSelect, onSelectAll: onSelect }); const handleRead = (id, ) => { console.log('Mark As Read: ', id) let isResponseOK = false; fetch(APIBaseURL + '/webmessages/' + id, { method: 'PUT', headers: { "Content-type": "application/json", "User-UUID": getCookieValue('user_uuid'), "Token": getCookieValue('token') }, body: JSON.stringify({ "data": { "status": 'acknowledged', "reply": 'ok' } }), }).then(response => { if (response.ok) { isResponseOK = true; return null; } else { return response.json(); } }).then(json => { console.log(isResponseOK); if (isResponseOK) { } else { toast.error(json.description) } }).catch(err => { console.log(err); }); }; return ( ); }; export default withTranslation()(withRedirect(Notification));