ODWRTW/canape
2
2
Fork 0
Code Issues 3 Pull Requests 1 Releases Activity

Use redux hooks on notification components

Browse Source
This commit is contained in:
Grégoire Delattre 2020-04-03 15:59:09 +02:00
parent d998d2838d
commit ea62b1c6ec
2 changed files with 10 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/js/components/notifications/notification.js
View File

@ -1,12 +1,12 @@
import React, { useState } from "react"; import React, { useState } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { connect } from "react-redux"; import { useDispatch } from "react-redux";
import { Toast } from "react-bootstrap"; import { Toast } from "react-bootstrap";
import { removeNotification } from "../../actions/notifications"; import { removeNotification } from "../../actions/notifications";
const NotificationConnected = ({ export const Notification = ({
id, id,
icon, icon,
title, title,
@ -14,13 +14,13 @@ const NotificationConnected = ({
imageUrl, imageUrl,
autohide, autohide,
delay, delay,
removeNotification,
}) => { }) => {
const dispatch = useDispatch();
const [show, setShow] = useState(true); const [show, setShow] = useState(true);
const hide = () => { const hide = () => {
setShow(false); setShow(false);
setTimeout(() => removeNotification(id), 200); setTimeout(() => dispatch(removeNotification(id)), 200);
}; };
return ( return (
@ -38,7 +38,7 @@ const NotificationConnected = ({
</Toast> </Toast>
); );
}; };
NotificationConnected.propTypes = { Notification.propTypes = {
id: PropTypes.string, id: PropTypes.string,
icon: PropTypes.string, icon: PropTypes.string,
title: PropTypes.string, title: PropTypes.string,
@ -46,10 +46,9 @@ NotificationConnected.propTypes = {
imageUrl: PropTypes.string, imageUrl: PropTypes.string,
autohide: PropTypes.bool, autohide: PropTypes.bool,
delay: PropTypes.number, delay: PropTypes.number,
removeNotification: PropTypes.func,
}; };
NotificationConnected.defaultProps = { Notification.defaultProps = {
autohide: false, autohide: false,
delay: 5000, delay: 5000,
icon: "", icon: "",
@ -57,7 +56,3 @@ NotificationConnected.defaultProps = {
title: "Info", title: "Info",
message: "", message: "",
}; };
export const Notification = connect(null, { removeNotification })(
NotificationConnected
);

13
frontend/js/components/notifications/notifications.js
View File

@ -1,11 +1,12 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { List } from "immutable"; import { List } from "immutable";
import { connect } from "react-redux"; import { useSelector } from "react-redux";
import { Notification } from "./notification"; import { Notification } from "./notification";
const NotificationsConnected = ({ notifications }) => { export const Notifications = () => {
const notifications = useSelector((state) => state.notifications);
return ( return (
<div className="notifications"> <div className="notifications">
{notifications.map((el) => ( {notifications.map((el) => (
@ -23,12 +24,6 @@ const NotificationsConnected = ({ notifications }) => {
</div> </div>
); );
}; };
NotificationsConnected.propTypes = { Notifications.propTypes = {
notifications: PropTypes.instanceOf(List), notifications: PropTypes.instanceOf(List),
}; };
const mapStateToProps = (state) => ({
notifications: state.notifications,
});
export const Notifications = connect(mapStateToProps)(NotificationsConnected);