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()}
);
}
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);