Compare commits

..

9 Commits

Author SHA1 Message Date
Tudor Stanciu 23acd4dcf2 contacts refactoring 2023-04-01 22:08:16 +03:00
Tudor Stanciu 3d05804625 contacts refactoring 2023-04-01 20:24:18 +03:00
Tudor Stanciu c5e7319324 contact info refactoring 2023-04-01 20:17:23 +03:00
Tudor Stanciu 3d3f8fe811 update 2023-03-31 02:09:06 +03:00
Tudor Stanciu 9c80ed0bfb replaced useTuitioDecodedToken with useTuitioUserInfo 2023-03-31 01:54:45 +03:00
Tudor Stanciu c4275df4bc Upgraded @flare/tuitio-client and @flare/js-utils packages. 2023-03-30 19:33:30 +03:00
Tudor Stanciu f6f7a9fa0b moved token decodint to @flare/tuitio-client-react 2023-03-30 19:31:02 +03:00
Tudor Stanciu 1addddb268 Merge branch 'master' of https://dev.azure.com/tstanciu94/NetworkResurrector/_git/NetworkResurrector_Frontend 2023-03-29 18:27:31 +03:00
Tudor Stanciu cb1d07432c @flare/tuitio-client update 2023-03-29 18:27:11 +03:00
16 changed files with 400 additions and 207 deletions

4
.env
View File

@ -1,5 +1,5 @@
#REACT_APP_TUITIO_URL=http://localhost:5063
REACT_APP_TUITIO_URL=https://lab.code-rove.com/tuitio
REACT_APP_TUITIO_URL=http://localhost:5063
# REACT_APP_TUITIO_URL=https://lab.code-rove.com/tuitio
REACT_APP_NETWORK_RESURRECTOR_API_URL=http://localhost:5064
#REACT_APP_NETWORK_RESURRECTOR_API_URL=https://lab.code-rove.com/network-resurrector-api

77
package-lock.json generated
View File

@ -1311,25 +1311,26 @@
}
},
"@flare/js-utils": {
"version": "1.0.3",
"resolved": "https://lab.code-rove.com/public-node-registry/@flare/js-utils/-/js-utils-1.0.3.tgz",
"integrity": "sha512-VgXQHoQEVZ/71B6YQHQP8/Yd/w1smGD+kCCiNvJKZ1xMD3nkN9mjoHxIqbOJMZ2q5PZlV6gXYT7eVol8Wm+D0A=="
"version": "1.1.0",
"resolved": "https://lab.code-rove.com/public-node-registry/@flare/js-utils/-/js-utils-1.1.0.tgz",
"integrity": "sha512-6NBXdZgRrHbLXw4EMgyqCIzOVAlUgr1+8QGHjlA+n5Iw2Lp/+dP3FTgAfPW/cHR/PBI3cj7gUDVUf/zD/qTPOQ=="
},
"@flare/tuitio-client": {
"version": "1.1.0",
"resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client/-/tuitio-client-1.1.0.tgz",
"integrity": "sha512-m2cYFaIdHx6eGqSo1V9Rx5sy8Zz5Y/y02OCTwuA++QceJLelUeUID+ymEts54nkG6nFxsGRBaNhpcC5lwsPMng==",
"version": "1.2.2",
"resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client/-/tuitio-client-1.2.2.tgz",
"integrity": "sha512-Rqz9seWFY5nUivMHrONphgYEeVriAq3yn8icAUQ+TFgf/ajoOqv0GlVfo2Nc//vqsLBJkZtHexmF92/5WHvvhQ==",
"requires": {
"@flare/js-utils": "^1.0.3",
"@flare/js-utils": "^1.1.0",
"axios": "^1.3.2"
}
},
"@flare/tuitio-client-react": {
"version": "1.1.1",
"resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.1.1.tgz",
"integrity": "sha512-CTxc1Ra0b3RcMuHakIw5B+d/n/42N8s64avXPAWKmWfBkuOIdPJ3P9s2kpG+CV2MIBlUCPSTbfOi+Ve1pf/cig==",
"version": "1.2.2",
"resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.2.2.tgz",
"integrity": "sha512-mhO1psmLgNXe2bIYwi+2J1WYQM63IDr8162M3s3tjm4V+9pyM0lQs7EGIXJfn344TSmXFde3SZwyxakIyWeIbQ==",
"requires": {
"@flare/tuitio-client": "^1.1.0"
"@flare/js-utils": "^1.1.0",
"@flare/tuitio-client": "^1.2.2"
}
},
"@gar/promisify": {
@ -2621,9 +2622,9 @@
}
},
"@types/yargs": {
"version": "17.0.22",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.22.tgz",
"integrity": "sha512-pet5WJ9U8yPVRhkwuEIp5ktAeAqRZOq4UdAyWLWzxbtpyXnzbtLdKiXAjJzi/KLmPGS9wk86lUFWZFN6sISo4g==",
"version": "17.0.24",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
"integrity": "sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==",
"dev": true,
"requires": {
"@types/yargs-parser": "*"
@ -2807,9 +2808,9 @@
"integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA=="
},
"@types/node": {
"version": "18.15.3",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.3.tgz",
"integrity": "sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw=="
"version": "18.15.11",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz",
"integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q=="
},
"@types/normalize-package-data": {
"version": "2.4.1",
@ -2837,9 +2838,9 @@
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
},
"@types/react": {
"version": "18.0.28",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.28.tgz",
"integrity": "sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==",
"version": "18.0.31",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.31.tgz",
"integrity": "sha512-EEG67of7DsvRDU6BLLI0p+k1GojDLz9+lZsnCpCRTa/lOokvyPBvp8S5x+A24hME3yyQuIipcP70KJ6H7Qupww==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -2870,9 +2871,9 @@
}
},
"@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
"version": "0.16.3",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
"integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
},
"@types/source-list-map": {
"version": "0.1.2",
@ -4482,9 +4483,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001467",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001467.tgz",
"integrity": "sha512-cEdN/5e+RPikvl9AHm4uuLXxeCNq8rFsQ+lPHTfe/OtypP3WwnVVbjn+6uBV7PaFL6xUFzTh+sSCOz1rKhcO+Q=="
"version": "1.0.30001473",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001473.tgz",
"integrity": "sha512-ewDad7+D2vlyy+E4UJuVfiBsU69IL+8oVmTuZnH5Q6CIUbxNfI50uVpRHbUPDD6SUaN2o0Lh4DhTrvLG/Tn1yg=="
},
"capture-exit": {
"version": "2.0.0",
@ -5813,9 +5814,9 @@
"integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA=="
},
"electron-to-chromium": {
"version": "1.4.333",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.333.tgz",
"integrity": "sha512-YyE8+GKyGtPEP1/kpvqsdhD6rA/TP1DUFDN4uiU/YI52NzDxmwHkEb3qjId8hLBa5siJvG0sfC3O66501jMruQ=="
"version": "1.4.345",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.345.tgz",
"integrity": "sha512-znGhOQK2TUYLICgS25uaM0a7pHy66rSxbre7l762vg9AUoCcJK+Bu+HCPWpjL/U/kK8/Hf+6E0szAUJSyVYb3Q=="
},
"elliptic": {
"version": "6.5.4",
@ -10841,9 +10842,9 @@
"integrity": "sha512-cnAsSVxIDsYt0v7HmC0hWZFwwXSh+E6PgCrREDuN/EsjgLwA5XRmlMHhSiDPrt6HxY1gTivEa/Zh7GtODoLevQ=="
},
"nanoid": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
"version": "3.3.6",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
"integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
},
"nanomatch": {
"version": "1.2.13",
@ -12627,9 +12628,9 @@
"integrity": "sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg=="
},
"prettier": {
"version": "2.8.4",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
"integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
"version": "2.8.7",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
"integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
"dev": true
},
"pretty-bytes": {
@ -15191,9 +15192,9 @@
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
},
"terser": {
"version": "5.16.6",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.16.6.tgz",
"integrity": "sha512-IBZ+ZQIA9sMaXmRZCUMDjNH0D5AQQfdn4WUjHL0+1lF4TP1IHRJbrhb6fNaXWikrYQTSkb7SLxkeXAiy1p7mbg==",
"version": "5.16.8",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz",
"integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==",
"requires": {
"@jridgewell/source-map": "^0.3.2",
"acorn": "^8.5.0",

View File

@ -13,8 +13,8 @@
},
"private": true,
"dependencies": {
"@flare/js-utils": "^1.0.3",
"@flare/tuitio-client-react": "^1.1.1",
"@flare/js-utils": "^1.1.0",
"@flare/tuitio-client-react": "^1.2.2",
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.61",

View File

@ -5,7 +5,7 @@ import NetworkContainer from "../../features/network/components/NetworkContainer
import SystemContainer from "../../features/system/SystemContainer";
import SettingsContainer from "../../features/settings/SettingsContainer";
import DashboardContainer from "../../features/dashboard/components/DashboardContainer";
import UserProfileContainer from "../../features/user/profile/components/UserProfileContainer";
import UserProfileContainer from "../../features/user/profile/card/UserProfileContainer";
import AboutContainer from "../../features/about/AboutContainer";
const AppRoutes = () => {

View File

@ -25,11 +25,6 @@ const ReleaseNotesList = ({ releases }) => {
return collapsed;
};
console.log(
"sortedReleases",
JSON.stringify(releases.map(z => ({ version: z.version, date: z.date })))
);
return (
<>
{releases.map(release => {

View File

@ -0,0 +1,45 @@
import React, { useMemo } from "react";
import PropTypes from "prop-types";
import UserProfilePicture from "./UserProfilePicture";
import ContactOptions from "../contact/ContactOptions";
import { makeStyles } from "@material-ui/core/styles";
import styles from "../styles";
const useStyles = makeStyles(styles);
const UserProfileCardContent = ({ userData }) => {
const { profilePictureUrl } = userData;
const classes = useStyles();
const userName = useMemo(
() => `${userData.firstName} ${userData.lastName}`,
[userData.firstName, userData.lastName]
);
const _contactOptions = useMemo(
() =>
profilePictureUrl
? [
...userData.contactOptions,
{
id: userData.contactOptions.length + 1,
contactTypeCode: "PROFILE_PICTURE",
contactValue: profilePictureUrl
}
]
: userData.contactOptions,
[profilePictureUrl, userData.contactOptions]
);
return (
<div className={classes.panel}>
<UserProfilePicture pictureUrl={userData.profilePictureUrl} />
<ContactOptions contactOptions={_contactOptions} userName={userName} />
</div>
);
};
UserProfileCardContent.propTypes = {
userData: PropTypes.object.isRequired
};
export default UserProfileCardContent;

View File

@ -1,27 +1,19 @@
import React, { useMemo } from "react";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import { Card, CardHeader, CardContent } from "@material-ui/core";
import { useTuitioToken } from "@flare/tuitio-client-react";
import { camelizeKeys } from "../../../../utils/camelizeKeys";
import PageTitle from "../../../../components/common/PageTitle";
import UserProfileCardContent from "./UserProfileCardContent";
const UserProfileContainer = () => {
const UserProfileComponent = ({ userData }) => {
const { t } = useTranslation();
const { token } = useTuitioToken();
const decodedToken = useMemo(() => atob(token), [token]);
const userData = useMemo(
() => camelizeKeys(JSON.parse(decodedToken)),
[decodedToken]
);
console.log("userData", userData);
const userLoginDate = useMemo(
() =>
t("DATE_FORMAT", {
date: { value: userData.createdAt, format: "DD-MM-YYYY HH:mm:ss" }
date: { value: userData.lastLoginDate, format: "DD-MM-YYYY HH:mm:ss" }
}),
[t, userData.createdAt]
[t, userData.lastLoginDate]
);
const userDescription = t("User.Profile.Description", {
@ -44,4 +36,8 @@ const UserProfileContainer = () => {
);
};
export default UserProfileContainer;
UserProfileComponent.propTypes = {
userData: PropTypes.object.isRequired
};
export default UserProfileComponent;

View File

@ -0,0 +1,10 @@
import React from "react";
import { useTuitioUserInfo } from "@flare/tuitio-client-react";
import UserProfileComponent from "./UserProfileComponent";
const UserProfileContainer = () => {
const { userInfo } = useTuitioUserInfo();
return <>{userInfo && <UserProfileComponent userData={userInfo} />}</>;
};
export default UserProfileContainer;

View File

@ -7,15 +7,14 @@ import DefaultUserProfilePicture from "../../../../assets/images/DefaultUserProf
const useStyles = makeStyles(style);
const UserProfilePicture = ({ userData }) => {
const UserProfilePicture = ({ pictureUrl }) => {
const classes = useStyles();
const { profilePictureUrl } = userData;
const url = profilePictureUrl ?? DefaultUserProfilePicture;
const url = pictureUrl ?? DefaultUserProfilePicture;
return <Avatar src={url} alt="..." className={classes.profilePicture} />;
};
UserProfilePicture.propTypes = {
userData: PropTypes.object.isRequired
pictureUrl: PropTypes.string
};
export default UserProfilePicture;

View File

@ -1,110 +0,0 @@
import React from "react";
import PropTypes from "prop-types";
import {
Grid,
List,
ListItem,
ListItemText,
ListItemIcon,
Link,
IconButton,
Tooltip
} from "@material-ui/core";
import UserProfilePicture from "./UserProfilePicture";
import BusinessCenterIcon from "@material-ui/icons/BusinessCenter";
import { FileCopyOutlined } from "@material-ui/icons";
import EmailIcon from "@material-ui/icons/Email";
import { useToast } from "../../../../hooks";
import { useTranslation } from "react-i18next";
import { makeStyles } from "@material-ui/core/styles";
import styles from "../styles";
const useStyles = makeStyles(styles);
const UserProfileCardContent = ({ userData }) => {
const { email, profilePictureUrl } = userData;
const { t } = useTranslation();
const { info } = useToast();
const classes = useStyles();
const handleCopyToClipboard = url => () => {
navigator.clipboard.writeText(url);
info(t("Generic.CopiedToClipboard"));
};
const handleEmailSending = event => {
window.location.href = `mailto:${email}`;
event.preventDefault();
};
const userName = `${userData.firstName} ${userData.lastName}`;
return (
<div className={classes.panel}>
<UserProfilePicture userData={userData} />
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<List>
<ListItem dense>
<ListItemIcon>
<BusinessCenterIcon />
</ListItemIcon>
<ListItemText
primary={
<Tooltip title={t("User.Profile.OpenPortfolio")}>
<Link href="https://lab.code-rove.com/tsp/" target="_blank">
{userName}
</Link>
</Tooltip>
}
/>
</ListItem>
<ListItem dense>
<ListItemIcon>
<EmailIcon />
</ListItemIcon>
<ListItemText
primary={
<Tooltip title={t("Generic.SendEmail")}>
<Link href="#" onClick={handleEmailSending}>
{email}
</Link>
</Tooltip>
}
/>
</ListItem>
{profilePictureUrl && (
<ListItem dense>
<ListItemIcon>
<Tooltip title={t("Generic.Copy")}>
<IconButton
size="small"
onClick={handleCopyToClipboard(profilePictureUrl)}
>
<FileCopyOutlined />
</IconButton>
</Tooltip>
</ListItemIcon>
<ListItemText
primary={
<Tooltip title={t("Generic.OpenInNewTab")}>
<Link href={profilePictureUrl} target="_blank">
{profilePictureUrl}
</Link>
</Tooltip>
}
/>
</ListItem>
)}
</List>
</Grid>
</Grid>
</div>
);
};
UserProfileCardContent.propTypes = {
userData: PropTypes.object.isRequired
};
export default UserProfileCardContent;

View File

@ -0,0 +1,62 @@
import React from "react";
import PropTypes from "prop-types";
import {
ListItem,
ListItemText,
ListItemIcon,
Link,
Tooltip,
IconButton
} from "@material-ui/core";
const ContactIcon = ({ onIconClick, iconTooltip, ...props }) => {
if (!onIconClick) return <props.icon />;
return (
<Tooltip title={iconTooltip}>
<IconButton size="small" onClick={onIconClick}>
<props.icon />
</IconButton>
</Tooltip>
);
};
ContactIcon.propTypes = {
onIconClick: PropTypes.func,
iconTooltip: PropTypes.string
};
const ContactOption = ({ tooltip, label, link, onClick, ...props }) => {
const linkLabel = label ?? link;
return (
<ListItem dense>
<ListItemIcon>
<ContactIcon {...props} />
</ListItemIcon>
<ListItemText
primary={
<Tooltip title={tooltip}>
{onClick ? (
<Link href="#" onClick={onClick}>
{linkLabel}
</Link>
) : (
<Link href={link} target="_blank">
{linkLabel}
</Link>
)}
</Tooltip>
}
/>
</ListItem>
);
};
ContactOption.propTypes = {
tooltip: PropTypes.string.isRequired,
label: PropTypes.string,
link: PropTypes.string.isRequired,
onClick: PropTypes.func,
onIconClick: PropTypes.func
};
export default ContactOption;

View File

@ -0,0 +1,29 @@
import React from "react";
import PropTypes from "prop-types";
import { List } from "@material-ui/core";
import ContactOption from "./ContactOption";
const ContactOptionList = ({ options }) => {
return (
<List>
{options.map((z, index) => (
<ContactOption
key={`contact_${index}_${z.id}`}
icon={z.icon}
tooltip={z.tooltip}
label={z.label}
link={z.link}
onClick={z.onClick}
onIconClick={z.onIconClick}
iconTooltip={z.iconTooltip}
/>
))}
</List>
);
};
ContactOptionList.propTypes = {
options: PropTypes.array.isRequired
};
export default ContactOptionList;

View File

@ -0,0 +1,178 @@
import React, { useCallback, useMemo } from "react";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import { Grid } from "@material-ui/core";
import ContactOptionList from "./ContactOptionList";
import BusinessCenterIcon from "@material-ui/icons/BusinessCenter";
import EmailIcon from "@material-ui/icons/Email";
import PhoneAndroidIcon from "@material-ui/icons/PhoneAndroid";
import LanguageIcon from "@material-ui/icons/Language";
import LinkedInIcon from "@material-ui/icons/LinkedIn";
import GitHubIcon from "@material-ui/icons/GitHub";
import RedditIcon from "@material-ui/icons/Reddit";
import BookIcon from "@material-ui/icons/Book";
import MenuBookIcon from "@material-ui/icons/MenuBook";
import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
import { useClipboard } from "../../../../hooks";
const icons = {
EMAIL: EmailIcon,
PHONE: PhoneAndroidIcon,
PORTFOLIO: BusinessCenterIcon,
LINKEDIN: LinkedInIcon,
GITHUB: GitHubIcon,
GITEA: GitHubIcon,
REDDIT: RedditIcon,
BLOG: BookIcon,
CURRICULUM_VITAE: MenuBookIcon,
PROFILE_PICTURE: FileCopyOutlinedIcon,
DEFAULT: LanguageIcon
};
const tooltips = {
EMAIL: "Generic.SendEmail",
PHONE: "Generic.Copy",
PORTFOLIO: "User.Profile.OpenPortfolio",
DEFAULT: "Generic.OpenInNewTab"
};
const orderNumbers = {
PORTFOLIO: 1,
EMAIL: 2,
PHONE: 3,
CURRICULUM_VITAE: 4,
LINKEDIN: 5,
PROFILE_PICTURE: 6,
GITEA: 7,
GITHUB: 8,
BLOG: 9,
WEBSITE: 10,
REDDIT: 12,
DEFAULT: 100
};
const getIcon = contactOption => {
const icon = icons[contactOption.contactTypeCode] || icons.DEFAULT;
return icon;
};
const getTooltip = contactOption => {
const tooltip = tooltips[contactOption.contactTypeCode] || tooltips.DEFAULT;
return tooltip;
};
const getOrderNumber = contactOption => {
const orderNo =
orderNumbers[contactOption.contactTypeCode] || orderNumbers.DEFAULT;
return orderNo;
};
const getLabel = (contactOption, userName) => {
switch (contactOption.contactTypeCode) {
case "EMAIL":
case "PHONE":
case "PROFILE_PICTURE":
return contactOption.contactValue;
case "PORTFOLIO":
return userName;
default:
return contactOption.contactTypeName;
}
};
const handleEmailSending = email => event => {
window.location.href = `mailto:${email}`;
event.preventDefault();
};
const chunkSize = 6;
const sliceContactOptions = options => {
const chunks = [];
for (let i = 0; i < options.length; i += chunkSize) {
chunks.push(options.slice(i, i + chunkSize));
}
return chunks;
};
const ContactOptions = ({ contactOptions, userName }) => {
const { t } = useTranslation();
const { copy } = useClipboard();
const getOnClickEvent = useCallback(
contactOption => {
switch (contactOption.contactTypeCode) {
case "EMAIL":
return handleEmailSending(contactOption.contactValue);
case "PHONE":
return copy(contactOption.contactValue);
default:
return undefined;
}
},
[copy]
);
const getIconClickEvent = useCallback(
contactOption => {
switch (contactOption.contactTypeCode) {
case "PROFILE_PICTURE":
return {
onIconClick: copy(contactOption.contactValue),
iconTooltip: t("Generic.Copy")
};
default:
return { onIconClick: undefined, iconTooltip: undefined };
}
},
[copy, t]
);
const enrichedContactOptions = useMemo(
() =>
contactOptions.map(co => {
const icon = getIcon(co);
const tooltip = getTooltip(co);
const label = getLabel(co, userName);
const onClick = getOnClickEvent(co);
const { onIconClick, iconTooltip } = getIconClickEvent(co);
const orderNo = getOrderNumber(co);
const option = {
id: co.id,
icon,
tooltip: t(tooltip),
label,
link: co.contactValue,
onClick,
onIconClick,
iconTooltip,
orderNo
};
return option;
}),
[contactOptions, getOnClickEvent, getIconClickEvent, t, userName]
);
const sorted = useMemo(
() => enrichedContactOptions.sort((a, b) => a.orderNo - b.orderNo),
[enrichedContactOptions]
);
const chunks = useMemo(() => sliceContactOptions(sorted), [sorted]);
return (
<Grid container>
{chunks.map((chunk, index) => (
<Grid item xs={12} md={6} key={index}>
<ContactOptionList options={chunk} />
</Grid>
))}
</Grid>
);
};
ContactOptions.propTypes = {
contactOptions: PropTypes.array,
userName: PropTypes.string.isRequired
};
export default ContactOptions;

View File

@ -1,4 +1,5 @@
import { useToast } from "./useToast";
import { useSensitiveInfo } from "../providers/SensitiveInfoProvider";
import { useClipboard } from "./useClipboard";
export { useToast, useSensitiveInfo };
export { useToast, useSensitiveInfo, useClipboard };

18
src/hooks/useClipboard.js Normal file
View File

@ -0,0 +1,18 @@
import { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { useToast } from "./useToast";
const useClipboard = () => {
const { t } = useTranslation();
const { info } = useToast();
const copy = useCallback(
url => () => {
navigator.clipboard.writeText(url);
info(t("Generic.CopiedToClipboard"));
},
[info, t]
);
return { copy };
};
export { useClipboard };

View File

@ -1,31 +0,0 @@
function camelizeKeys(o) {
var newO, origKey, newKey, value;
if (o instanceof Array) {
return o.map(function (value) {
if (typeof value === "object") {
value = camelizeKeys(value);
}
return value;
});
} else {
newO = {};
for (origKey in o) {
if (Object.prototype.hasOwnProperty.call(o, origKey)) {
newKey = (
origKey.charAt(0).toLowerCase() + origKey.slice(1) || origKey
).toString();
value = o[origKey];
if (
value instanceof Array ||
(value !== null && value.constructor === Object)
) {
value = camelizeKeys(value);
}
newO[newKey] = value;
}
}
}
return newO;
}
export { camelizeKeys };