diff --git a/src/features/user/profile/card/UserProfileCardContent.js b/src/features/user/profile/card/UserProfileCardContent.js
index 0de42eb..ec501a2 100644
--- a/src/features/user/profile/card/UserProfileCardContent.js
+++ b/src/features/user/profile/card/UserProfileCardContent.js
@@ -1,6 +1,5 @@
import React, { useMemo } from "react";
import PropTypes from "prop-types";
-import { Grid } from "@material-ui/core";
import UserProfilePicture from "./UserProfilePicture";
import ContactOptions from "../contact/ContactOptions";
import { makeStyles } from "@material-ui/core/styles";
@@ -34,14 +33,7 @@ const UserProfileCardContent = ({ userData }) => {
return (
-
-
-
-
-
+
);
};
diff --git a/src/features/user/profile/contact/ContactOptionList.js b/src/features/user/profile/contact/ContactOptionList.js
new file mode 100644
index 0000000..17fb8b1
--- /dev/null
+++ b/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 (
+
+ {options.map((z, index) => (
+
+ ))}
+
+ );
+};
+
+ContactOptionList.propTypes = {
+ options: PropTypes.array.isRequired
+};
+
+export default ContactOptionList;
diff --git a/src/features/user/profile/contact/ContactOptions.js b/src/features/user/profile/contact/ContactOptions.js
index a720ded..08c5232 100644
--- a/src/features/user/profile/contact/ContactOptions.js
+++ b/src/features/user/profile/contact/ContactOptions.js
@@ -1,8 +1,8 @@
import React, { useCallback, useMemo } from "react";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
-import { List } from "@material-ui/core";
-import ContactOption from "./ContactOption";
+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";
@@ -42,11 +42,12 @@ const orderNumbers = {
PHONE: 3,
CURRICULUM_VITAE: 4,
LINKEDIN: 5,
- GITEA: 6,
- GITHUB: 7,
- BLOG: 8,
- WEBSITE: 9,
- REDDIT: 10,
+ PROFILE_PICTURE: 6,
+ GITEA: 7,
+ GITHUB: 8,
+ BLOG: 9,
+ WEBSITE: 10,
+ REDDIT: 12,
DEFAULT: 100
};
@@ -84,6 +85,15 @@ const handleEmailSending = email => event => {
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();
@@ -127,6 +137,7 @@ const ContactOptions = ({ contactOptions, userName }) => {
const { onIconClick, iconTooltip } = getIconClickEvent(co);
const orderNo = getOrderNumber(co);
const option = {
+ id: co.id,
icon,
tooltip: t(tooltip),
label,
@@ -146,21 +157,16 @@ const ContactOptions = ({ contactOptions, userName }) => {
[enrichedContactOptions]
);
+ const chunks = useMemo(() => sliceContactOptions(sorted), [sorted]);
+
return (
-
- {sorted.map((z, index) => (
-
+
+ {chunks.map((chunk, index) => (
+
+
+
))}
-
+
);
};