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,
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 = ({ 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,
};
export default connect(mapStateToProps, mapDispatchToProps)(UserTokens);