tudor.stanciu
/
network-resurrector-frontend
mirror of https://dev.azure.com/tstanciu94/NetworkResurrector/_git/NetworkResurrector_Frontend
1
0
Fork 0
Code Issues 2 Packages Projects Releases Wiki Activity

update

master
Tudor Stanciu 2023-03-31 02:09:06 +03:00
parent 9c80ed0bfb
commit 3d3f8fe811
2 changed files with 38 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/features/user/profile/components/ContactOptions.js
View File

@ -1,6 +1,7 @@
import React, { useCallback, useMemo } from "react"; import React, { useCallback, useMemo } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { List } from "@material-ui/core";
import ContactOption from "./ContactOption"; import ContactOption from "./ContactOption";
import BusinessCenterIcon from "@material-ui/icons/BusinessCenter"; import BusinessCenterIcon from "@material-ui/icons/BusinessCenter";
import EmailIcon from "@material-ui/icons/Email"; import EmailIcon from "@material-ui/icons/Email";
@ -80,7 +81,7 @@ const handleEmailSending = email => event => {
event.preventDefault(); event.preventDefault();
}; };
const ContactOptions = ({ contactOptions, userName }) => { const ContactOptions = ({ contactOptions, userName, profilePictureItem }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { copy } = useClipboard(); const { copy } = useClipboard();
@ -125,7 +126,7 @@ const ContactOptions = ({ contactOptions, userName }) => {
); );
return ( return (
<> <List>
{sorted.map((z, index) => ( {sorted.map((z, index) => (
<ContactOption <ContactOption
key={`contact_${index}`} key={`contact_${index}`}
@ -136,13 +137,15 @@ const ContactOptions = ({ contactOptions, userName }) => {
onClick={z.onClick} onClick={z.onClick}
/> />
))} ))}
</> {profilePictureItem && <>{profilePictureItem}</>}
</List>
); );
}; };
ContactOptions.propTypes = { ContactOptions.propTypes = {
contactOptions: PropTypes.array, contactOptions: PropTypes.array,
userName: PropTypes.object.isRequired userName: PropTypes.string.isRequired,
profilePictureItem: PropTypes.node
}; };
export default ContactOptions; export default ContactOptions;

58
src/features/user/profile/components/UserProfileCardContent.js
View File

@ -2,7 +2,6 @@ import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { import {
Grid, Grid,
List,
ListItem, ListItem,
ListItemText, ListItemText,
ListItemIcon, ListItemIcon,
@ -33,32 +32,37 @@ const UserProfileCardContent = ({ userData }) => {
<UserProfilePicture pictureUrl={userData.profilePictureUrl} /> <UserProfilePicture pictureUrl={userData.profilePictureUrl} />
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12} sm={6}> <Grid item xs={12} sm={6}>
<List> <ContactOptions
<ContactOptions contactOptions={userData.contactOptions}
contactOptions={userData.contactOptions} userName={userName}
userName={userName} profilePictureItem={
/> <>
{profilePictureUrl && ( {profilePictureUrl && (
<ListItem dense> <ListItem dense>
<ListItemIcon> <ListItemIcon>
<Tooltip title={t("Generic.Copy")}> <Tooltip title={t("Generic.Copy")}>
<IconButton size="small" onClick={copy(profilePictureUrl)}> <IconButton
<FileCopyOutlined /> size="small"
</IconButton> onClick={copy(profilePictureUrl)}
</Tooltip> >
</ListItemIcon> <FileCopyOutlined />
<ListItemText </IconButton>
primary={ </Tooltip>
<Tooltip title={t("Generic.OpenInNewTab")}> </ListItemIcon>
<Link href={profilePictureUrl} target="_blank"> <ListItemText
{profilePictureUrl} primary={
</Link> <Tooltip title={t("Generic.OpenInNewTab")}>
</Tooltip> <Link href={profilePictureUrl} target="_blank">
} {profilePictureUrl}
/> </Link>
</ListItem> </Tooltip>
)} }
</List> />
</ListItem>
)}
</>
}
/>
</Grid> </Grid>
</Grid> </Grid>
</div> </div>