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 (
Last IP: {token.ip}
Last used: {moment(token.last_used).fromNow()}
Created: {moment(token.created_at).fromNow()}
);
};
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,
};