contacts refactoring

.env

@@ -1,5 +1,5 @@
-#REACT_APP_TUITIO_URL=http://localhost:5063
+REACT_APP_TUITIO_URL=http://localhost:5063
-REACT_APP_TUITIO_URL=https://lab.code-rove.com/tuitio
+# 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

package-lock.json

@@ -1311,25 +1311,26 @@
       }
     },
     "@flare/js-utils": {
-      "version": "1.0.3",
+      "version": "1.1.0",
-      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/js-utils/-/js-utils-1.0.3.tgz",
+      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/js-utils/-/js-utils-1.1.0.tgz",
-      "integrity": "sha512-VgXQHoQEVZ/71B6YQHQP8/Yd/w1smGD+kCCiNvJKZ1xMD3nkN9mjoHxIqbOJMZ2q5PZlV6gXYT7eVol8Wm+D0A=="
+      "integrity": "sha512-6NBXdZgRrHbLXw4EMgyqCIzOVAlUgr1+8QGHjlA+n5Iw2Lp/+dP3FTgAfPW/cHR/PBI3cj7gUDVUf/zD/qTPOQ=="
     },
     "@flare/tuitio-client": {
-      "version": "1.1.0",
+      "version": "1.2.2",
-      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client/-/tuitio-client-1.1.0.tgz",
+      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client/-/tuitio-client-1.2.2.tgz",
-      "integrity": "sha512-m2cYFaIdHx6eGqSo1V9Rx5sy8Zz5Y/y02OCTwuA++QceJLelUeUID+ymEts54nkG6nFxsGRBaNhpcC5lwsPMng==",
+      "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",
+      "version": "1.2.2",
-      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.1.1.tgz",
+      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.2.2.tgz",
-      "integrity": "sha512-CTxc1Ra0b3RcMuHakIw5B+d/n/42N8s64avXPAWKmWfBkuOIdPJ3P9s2kpG+CV2MIBlUCPSTbfOi+Ve1pf/cig==",
+      "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",
+          "version": "17.0.24",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.22.tgz",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
-          "integrity": "sha512-pet5WJ9U8yPVRhkwuEIp5ktAeAqRZOq4UdAyWLWzxbtpyXnzbtLdKiXAjJzi/KLmPGS9wk86lUFWZFN6sISo4g==",
+          "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",
+      "version": "18.15.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.3.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz",
-      "integrity": "sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw=="
+      "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",
+      "version": "18.0.31",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.28.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.31.tgz",
-      "integrity": "sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==",
+      "integrity": "sha512-EEG67of7DsvRDU6BLLI0p+k1GojDLz9+lZsnCpCRTa/lOokvyPBvp8S5x+A24hME3yyQuIipcP70KJ6H7Qupww==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -2870,9 +2871,9 @@
       }
     },
     "@types/scheduler": {
-      "version": "0.16.2",
+      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
     },
     "@types/source-list-map": {
       "version": "0.1.2",
@@ -4482,9 +4483,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001467",
+      "version": "1.0.30001473",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001467.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001473.tgz",
-      "integrity": "sha512-cEdN/5e+RPikvl9AHm4uuLXxeCNq8rFsQ+lPHTfe/OtypP3WwnVVbjn+6uBV7PaFL6xUFzTh+sSCOz1rKhcO+Q=="
+      "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",
+      "version": "1.4.345",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.333.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.345.tgz",
-      "integrity": "sha512-YyE8+GKyGtPEP1/kpvqsdhD6rA/TP1DUFDN4uiU/YI52NzDxmwHkEb3qjId8hLBa5siJvG0sfC3O66501jMruQ=="
+      "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",
+      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+      "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",
+      "version": "2.8.7",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
-      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
+      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
       "dev": true
     },
     "pretty-bytes": {
@@ -15191,9 +15192,9 @@
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "terser": {
-          "version": "5.16.6",
+          "version": "5.16.8",
-          "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.6.tgz",
+          "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz",
-          "integrity": "sha512-IBZ+ZQIA9sMaXmRZCUMDjNH0D5AQQfdn4WUjHL0+1lF4TP1IHRJbrhb6fNaXWikrYQTSkb7SLxkeXAiy1p7mbg==",
+          "integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==",
           "requires": {
             "@jridgewell/source-map": "^0.3.2",
             "acorn": "^8.5.0",

package.json

@@ -13,8 +13,8 @@
   },
   "private": true,
   "dependencies": {
-    "@flare/js-utils": "^1.0.3",
+    "@flare/js-utils": "^1.1.0",
-    "@flare/tuitio-client-react": "^1.1.1",
+    "@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",

src/components/layout/AppRoutes.js

@@ -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 = () => {

src/features/about/releaseNotes/ReleaseNotesList.js

@@ -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 => {

src/features/user/profile/card/UserProfileCardContent.js

@@ -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;

src/features/user/profile/card/UserProfileComponent.js

@@ -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;

src/features/user/profile/card/UserProfileContainer.js

@@ -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;

src/features/user/profile/card/UserProfilePicture.js

@@ -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 = pictureUrl ?? DefaultUserProfilePicture;
-  const url = profilePictureUrl ?? DefaultUserProfilePicture;
   return <Avatar src={url} alt="..." className={classes.profilePicture} />;
 };
 
 UserProfilePicture.propTypes = {
-  userData: PropTypes.object.isRequired
+  pictureUrl: PropTypes.string
 };
 
 export default UserProfilePicture;

src/features/user/profile/components/UserProfileCardContent.js

@@ -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;

src/features/user/profile/contact/ContactOption.js

@@ -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;

src/features/user/profile/contact/ContactOptionList.js

@@ -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;

src/features/user/profile/contact/ContactOptions.js

@@ -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;

src/hooks/index.js

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

src/hooks/useClipboard.js

@@ -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 };

src/utils/camelizeKeys.js

@@ -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 };