contacts refactoring

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 (
     <div className={classes.panel}>
       <UserProfilePicture pictureUrl={userData.profilePictureUrl} />
-      <Grid container spacing={2}>
-        <Grid item xs={12} sm={6}>
-          <ContactOptions
-            contactOptions={_contactOptions}
-            userName={userName}
-          />
-        </Grid>
-      </Grid>
+      <ContactOptions contactOptions={_contactOptions} userName={userName} />
     </div>
   );
 };

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

@@ -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 (
-    <List>
-      {sorted.map((z, index) => (
-        <ContactOption
-          key={`contact_${index}`}
-          icon={z.icon}
-          tooltip={z.tooltip}
-          label={z.label}
-          link={z.link}
-          onClick={z.onClick}
-          onIconClick={z.onIconClick}
-          iconTooltip={z.iconTooltip}
-        />
+    <Grid container>
+      {chunks.map((chunk, index) => (
+        <Grid item xs={12} md={6} key={index}>
+          <ContactOptionList options={chunk} />
+        </Grid>
       ))}
-    </List>
+    </Grid>
   );
 };