import React, { useState } from "react" import PropTypes from "prop-types" import { connect } from "react-redux" import { UAParser } from "ua-parser-js" import moment from "moment" import { Map, List } from "immutable" import { getUserTokens, deleteUserToken } from "../../actions/users" const mapStateToProps = (state) => ({ tokens: state.userStore.get("tokens"), }); const mapDispatchToProps = { getUserTokens, deleteUserToken }; const UserTokens = (props) => { const [fetched, setIsFetched] = useState(false); if (!fetched) { props.getUserTokens(); setIsFetched(true); } return (
{props.tokens.map((el, index) => ( ))}
); } UserTokens.propTypes = { tokens: PropTypes.instanceOf(List), isLoading: PropTypes.bool.isRequired, getUserTokens: PropTypes.func.isRequired, deleteUserToken: PropTypes.func.isRequired, }; const Token = (props) => { const ua = UAParser(props.data.get("user_agent")); return (

{props.data.get("description")}

Last IP: {props.data.get("ip")}

Last used: {moment(props.data.get("last_used")).fromNow()}

Created: {moment(props.data.get("created_at")).fromNow()}

Device:

OS:

Browser:

); } Token.propTypes = { data: PropTypes.instanceOf(Map).isRequired, }; const Actions = (props) => { const handleClick = () => { props.deleteToken(props.data.get("token")); } return ( ); } Actions.propTypes = { data: PropTypes.instanceOf(Map).isRequired, deleteToken: PropTypes.func.isRequired, }; const Logo = (props) => { var className; if (props.ua === "canape-cli") { className = "terminal"; } else if (props.device.type == "mobile" ){ className = "mobile"; } else { switch (props.browser.name) { case "Chrome": case "chrome": className = "chrome"; break; case "Safari": case "safari": className = "safari"; break; case "Firefox": case "firefox": className = "firefox"; break; default: className = "question"; break; } } return (); } const OS = (props) => { var osName = "-"; if (props.name !== undefined) { osName = props.name; if (props.version !== undefined) { osName += " " + props.version; } } return ( {osName} ); } const Device = (props) => { var deviceName = "-"; if (props.model !== undefined) { deviceName = props.model; } return ( {deviceName} ); } const Browser = (props) => { var browserName = "-"; if (props.name !== undefined) { browserName = props.name; if (props.version !== undefined) { browserName += " - " + props.version; } } return ( {browserName} ); } export default connect(mapStateToProps, mapDispatchToProps)(UserTokens);