contacts refactoring

master
Tudor Stanciu 2023-04-01 22:08:16 +03:00
parent 3d05804625
commit 23acd4dcf2
3 changed files with 56 additions and 29 deletions

View File

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

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

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