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) => ( + + + ))} - + ); };