import React, { useEffect } from "react"; import PropTypes from "prop-types"; import { useDispatch, useSelector } from "react-redux"; import { UAParser } from "ua-parser-js"; import moment from "moment"; import { getUserTokens, deleteUserToken } from "../../actions/users"; export const UserTokens = () => { const dispatch = useDispatch(); const tokens = useSelector((state) => state.user.tokens); useEffect(() => { dispatch(getUserTokens()); }, [dispatch]); return (
{tokens.map((token, index) => ( ))}
); }; const Token = ({ token }) => { const ua = UAParser(token.user_agent); return (

{token.description}

Last IP: {token.ip}

Last used: {moment(token.last_used).fromNow()}

Created: {moment(token.created_at).fromNow()}

Device:

OS:

Browser:

); }; Token.propTypes = { token: PropTypes.object.isRequired, }; const Actions = ({ token }) => { const dispatch = useDispatch(); const handleClick = () => { dispatch(deleteUserToken(token)); }; return ( ); }; Actions.propTypes = { token: PropTypes.string.isRequired, }; const Logo = ({ ua, device, browser }) => { var className; if (ua === "canape-cli") { className = "terminal"; } else if (device.type == "mobile") { className = "mobile"; } else { switch (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 ; }; Logo.propTypes = { ua: PropTypes.string, device: PropTypes.object, browser: PropTypes.object, }; const OS = ({ name, version }) => { var osName = "-"; if (name !== undefined) { osName = name; if (version !== undefined) { osName += " " + version; } } return {osName}; }; OS.propTypes = { name: PropTypes.string, version: PropTypes.string, }; const Device = ({ model }) => { var deviceName = "-"; if (model !== undefined) { deviceName = model; } return {deviceName}; }; Device.propTypes = { model: PropTypes.string, }; const Browser = ({ name, version }) => { var browserName = "-"; if (name !== undefined) { browserName = name; if (version !== undefined) { browserName += " - " + version; } } return {browserName}; }; Browser.propTypes = { name: PropTypes.string, version: PropTypes.string, };