selenaaasi
/
trampa-frontend
Beobachten 1
Favorisieren 0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Quellcode durchsuchen

Profile code cleanup

feature/1612
jovan.cirkovic vor 3 Jahren
Ursprung
d773a61892
Commit
e0945698f7
10 geänderte Dateien mit 294 neuen und 596 gelöschten Zeilen
Gesamtansicht Diff-Statistik anzeigen
  1. 6
    83
      src/components/Cards/ProfileCard/BigProfileCard/BigProfileCard.js
  2. 1
    122
      src/components/Cards/ProfileCard/BigProfileCard/BigProfileCard.styled.js
  3. 9
    99
      src/components/Cards/ProfileCard/ProfileCard.js
  4. 1
    289
      src/components/Cards/ProfileCard/ProfileCard.styled.js
  5. 104
    0
      src/components/Cards/ProfileCard/ProfileControl/ProfileControl.js
  6. 37
    0
      src/components/Cards/ProfileCard/ProfileControl/ProfileControl.styled.js
  7. 51
    0
      src/components/Cards/ProfileCard/ProfileControl/ProfileControlButton/ProfileControlButton.js
  8. 83
    0
      src/components/Cards/ProfileCard/ProfileControl/ProfileControlButton/ProfileControlButton.styled.js
  9. 2
    2
      src/components/Paging/Paging.styled.js
  10. 0
    1
      src/components/ProfileMini/ProfileMini.js

+ 6
- 83
src/components/Cards/ProfileCard/BigProfileCard/BigProfileCard.js Datei anzeigen

import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { import {
BlockIcon,
BlockIconContainer,
BlockLabelIcon,
ButtonsContainer,
CheckButton,
EditButton,
EditIcon,
ProfileCardContainer, ProfileCardContainer,
ProfileCardWrapper, ProfileCardWrapper,
ProfileInfoContainer, ProfileInfoContainer,
RemoveIcon,
RemoveIconContainer,
UnblockIcon,
UnblockIconContainer,
UnblockLabelIcon,
CheckButton,
} from "./BigProfileCard.styled"; } from "./BigProfileCard.styled";
import ProfileMainInfo from "../ProfileMainInfo/ProfileMainInfo"; import ProfileMainInfo from "../ProfileMainInfo/ProfileMainInfo";
import ProfileContact from "../ProfileContact/ProfileContact"; import ProfileContact from "../ProfileContact/ProfileContact";
import history from "../../../../store/utils/history"; import history from "../../../../store/utils/history";
import { replaceInRoute } from "../../../../util/helpers/routeHelpers"; import { replaceInRoute } from "../../../../util/helpers/routeHelpers";
import { ADMIN_SINGLE_USER_PAGE } from "../../../../constants/pages"; import { ADMIN_SINGLE_USER_PAGE } from "../../../../constants/pages";
import UserLabeledCard from "../../LabeledCard/User/UserLabeledCard";
import {
USERS_BLOCK_TYPE,
USERS_DELETE_TYPE,
USERS_UNBLOCK_TYPE,
} from "../../../../constants/adminTypeConstants";
import { useDispatch } from "react-redux";
import {
toggleDeleteCategoryModal,
toggleEditProfileModal,
} from "../../../../store/actions/modal/modalActions";
import ProfileControl from "../ProfileControl/ProfileControl";


const BigProfileCard = (props) => { const BigProfileCard = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useDispatch();
const removeUser = () => {
dispatch(
toggleDeleteCategoryModal({
customId: props.profile._id,
type: USERS_DELETE_TYPE,
customLabeledCard: <UserLabeledCard user={props.profile} />,
customLabeledCardHeight: "90px",
})
);
};
const blockUser = () => {
dispatch(
toggleDeleteCategoryModal({
customId: props.profile._id,
type: USERS_BLOCK_TYPE,
customLabeledCard: <UserLabeledCard user={props.profile} />,
customLabeledCardHeight: "90px",
customLabeledCardIcon: <BlockLabelIcon />,
})
);
};
const unblockUser = () => {
dispatch(
toggleDeleteCategoryModal({
customId: props.profile._id,
type: USERS_UNBLOCK_TYPE,
customLabeledCard: <UserLabeledCard user={props.profile} />,
customLabeledCardHeight: "90px",
customLabeledCardIcon: <UnblockLabelIcon />,
})
);
};
const editUser = () => {
dispatch(
toggleEditProfileModal({
profile: props.profile,
reFetchProfile: () => {},
isAdmin: true,
userId: props.profile._id,
})
);
};
const goToUser = () => { const goToUser = () => {
history.push( history.push(
replaceInRoute(ADMIN_SINGLE_USER_PAGE, { replaceInRoute(ADMIN_SINGLE_USER_PAGE, {
return ( return (
<ProfileCardContainer halfwidth={props.halfwidth}> <ProfileCardContainer halfwidth={props.halfwidth}>
<ProfileCardWrapper variant="outlined"> <ProfileCardWrapper variant="outlined">
<ButtonsContainer>
<EditButton onClick={editUser}>
<EditIcon />
</EditButton>
<RemoveIconContainer onClick={removeUser}>
<RemoveIcon />
</RemoveIconContainer>
{props.profile?._blocked ? (
<UnblockIconContainer onClick={unblockUser}>
<UnblockIcon />
</UnblockIconContainer>
) : (
<BlockIconContainer onClick={blockUser}>
<BlockIcon />
</BlockIconContainer>
)}
</ButtonsContainer>
{/* Profile Control (edit, remove, block, unblock) */}
<ProfileControl profile={props.profile} isAdmin bigProfileCard />

<ProfileInfoContainer> <ProfileInfoContainer>
{/* Profile Main Info */} {/* Profile Main Info */}
<ProfileMainInfo profile={props.profile} bigProfileCard isAdmin /> <ProfileMainInfo profile={props.profile} bigProfileCard isAdmin />
BigProfileCard.propTypes = { BigProfileCard.propTypes = {
profile: PropTypes.any, profile: PropTypes.any,
halfwidth: PropTypes.bool, halfwidth: PropTypes.bool,
isAdmin: PropTypes.bool,
}; };


export default BigProfileCard; export default BigProfileCard;

+ 1
- 122
src/components/Cards/ProfileCard/BigProfileCard/BigProfileCard.styled.js Datei anzeigen

import styled from "styled-components"; import styled from "styled-components";
import { Card, Typography, Grid, Box } from "@mui/material";
import { Card, Grid, Box } from "@mui/material";
import selectedTheme from "../../../../themes"; import selectedTheme from "../../../../themes";
import { ReactComponent as Edit } from "../../../../assets/images/svg/edit.svg";
// import { ReactComponent as Pocket } from "../../../assets/images/svg/pocket.svg";
// import { ReactComponent as Globe } from "../../../assets/images/svg/globe.svg";
import { ReactComponent as Mail } from "../../../../assets/images/svg/mail.svg";
import { ReactComponent as Remove } from "../../../../assets/images/svg/trash.svg";
import { ReactComponent as Block } from "../../../../assets/images/svg/block.svg";
import { ReactComponent as Unblock } from "../../../../assets/images/svg/unblock.svg";
import { ReactComponent as UnblockGold } from "../../../../assets/images/svg/unblock-gold.svg";
import { IconButton } from "../../../Buttons/IconButton/IconButton";
import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton"; import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
// import { ReactComponent as Location } from "../../../assets/images/svg/location.svg";


export const ProfileCardContainer = styled(Box)` export const ProfileCardContainer = styled(Box)`
width: ${(props) => (props.halfwidth ? `49%` : `100%`)}; width: ${(props) => (props.halfwidth ? `49%` : `100%`)};
position: relative; position: relative;
`; `;


export const ProfileCardHeader = styled(Grid)`
display: flex;
justify-content: start;
align-items: center;
margin-bottom: 11px;
`;

export const EditIcon = styled(Edit)`
width: 18px;
height: 18px;
& path {
stroke: ${selectedTheme.colors.primaryPurple};
}
`;

export const ButtonsContainer = styled(Box)`
position: absolute;
top: 18px;
right: 18px;
display: flex;
flex-direction: row;
gap: 18px;
@media (max-width: 600px) {
gap: 12px;
}
`;

export const MessageButton = styled(IconButton)`
width: 40px;
height: 40px;
background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
border-radius: 100%;
padding-top: 2px;
text-align: center;
@media (max-width: 600px) {
width: 32px;
height: 32px;
top: 16px;
right: 16px;
padding: 0;
${(props) =>
props.vertical &&
`
display: none;
`}
& button svg {
width: 16px;
height: 16px;
position: relative;
top: -2px;
left: -2px;
}
}
`;
export const EditButton = styled(MessageButton)``;

export const RemoveIconContainer = styled(MessageButton)`
display: block;
`;
export const RemoveIcon = styled(Remove)``;
export const BlockIconContainer = styled(MessageButton)`
display: block;
`;
export const BlockIcon = styled(Block)``;
export const UnblockIconContainer = styled(MessageButton)`
display: block;
`;
export const UnblockIcon = styled(Unblock)``;
export const BlockLabelIcon = styled(Block)`
width: 18px;
height: 18px;
position: relative;
top: 10px;
left: 11px;
& path {
stroke: ${selectedTheme.colors.iconYellowColor};
}
`;
export const UnblockLabelIcon = styled(UnblockGold)`
width: 18px;
height: 18px;
position: relative;
top: 10px;
left: 11px;
`;
export const CheckButton = styled(PrimaryButton)` export const CheckButton = styled(PrimaryButton)`
width: 180px; width: 180px;
height: 48px; height: 48px;
} }
`; `;


export const HeaderTitle = styled(Typography)`
font-size: 16px;
font-family: ${selectedTheme.fonts.textFont};
color: ${selectedTheme.colors.primaryText};
position: relative;
@media (max-width: 600px) {
font-size: 12px;
}
`;
export const MessageIcon = styled(Mail)`
width: 19.5px;
height: 19.5px;
position: relative;
left: 1px;
top: 3px;
& path {
stroke: ${selectedTheme.colors.primaryYellow};
}
@media (max-width: 600px) {
width: 16px;
height: 16px;
left: -1px;
top: 1px;
}
`;

export const ProfileInfoContainer = styled(Grid)` export const ProfileInfoContainer = styled(Grid)`
display: flex; display: flex;
flex-direction: column; flex-direction: column;

+ 9
- 99
src/components/Cards/ProfileCard/ProfileCard.js Datei anzeigen

import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { import {
EditButton,
ProfileCardWrapper, ProfileCardWrapper,
ProfileCardContainer, ProfileCardContainer,
ProfileCardHeader, ProfileCardHeader,
HeaderTitle, HeaderTitle,
EditIcon,
ProfileInfoContainer, ProfileInfoContainer,
RemoveButton,
RemoveIcon,
BlockButton,
BlockIcon,
ButtonsContainer,
BlockLabelIcon,
ProfileInfoAndContactContainer, ProfileInfoAndContactContainer,
UnblockButton,
UnblockIcon,
BlockedProfileContainer, BlockedProfileContainer,
} from "./ProfileCard.styled"; } from "./ProfileCard.styled";
import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
import SkeletonProfileCard from "./SkeletonProfileCard/SkeletonProfileCard"; import SkeletonProfileCard from "./SkeletonProfileCard/SkeletonProfileCard";
import { useMemo } from "react"; import { useMemo } from "react";
import companyData from "../../../notFoundData/companyData"; import companyData from "../../../notFoundData/companyData";
import UserLabeledCard from "../LabeledCard/User/UserLabeledCard";
import history from "../../../store/utils/history"; import history from "../../../store/utils/history";
import { HOME_PAGE } from "../../../constants/pages"; import { HOME_PAGE } from "../../../constants/pages";
import useIsMobile from "../../../hooks/useIsMobile"; import useIsMobile from "../../../hooks/useIsMobile";
import BlockedProfile from "./BlockedProfile/BlockedProfile"; import BlockedProfile from "./BlockedProfile/BlockedProfile";
import {
toggleDeleteCategoryModal,
toggleEditProfileModal,
} from "../../../store/actions/modal/modalActions";
import {
USERS_BLOCK_TYPE,
USERS_DELETE_TYPE,
USERS_UNBLOCK_TYPE,
} from "../../../constants/adminTypeConstants";
import { Tooltip } from "@mui/material";
import ProfileControl from "./ProfileControl/ProfileControl";


const ProfileCard = (props) => { const ProfileCard = (props) => {
const isLoading = useSelector(selectIsLoadingByActionType(PROFILE_SCOPE)); const isLoading = useSelector(selectIsLoadingByActionType(PROFILE_SCOPE));
100 100
); );
} }
const removeUser = () => {
dispatch(
toggleDeleteCategoryModal({
customId: profile?._id,
type: USERS_DELETE_TYPE,
customLabeledCard: <UserLabeledCard user={profile} />,
customLabeledCardHeight: "90px",
})
);
};
const blockUser = () => {
dispatch(
toggleDeleteCategoryModal({
customId: profile?._id,
type: USERS_BLOCK_TYPE,
customLabeledCard: <UserLabeledCard user={profile} />,
customLabeledCardHeight: "90px",
customLabeledCardIcon: <BlockLabelIcon />,
})
);
};
const unblockUser = () => {
dispatch(
toggleDeleteCategoryModal({
customId: profile?._id,
type: USERS_UNBLOCK_TYPE,
customLabeledCard: <UserLabeledCard user={profile} />,
customLabeledCardHeight: "90px",
})
);
};
const handleEditProfile = () => {
if (!profile?._blocked) {
dispatch(
toggleEditProfileModal({
profile: profile,
isAdmin: props.isAdmin,
reFetchProfile: reFetchProfile,
})
);
}
};


return ( return (
<> <>
<BlockedProfile hideIcon redText aboveTitle isAdmin /> <BlockedProfile hideIcon redText aboveTitle isAdmin />
</BlockedProfileContainer> </BlockedProfileContainer>
)} )}
<ButtonsContainer>
{profile?._blocked && !isMobile && <BlockedProfile />}
{props.isAdmin && (
<>
{profile?._blocked ? (
<Tooltip title={t("admin.unblockUser.tooltip")}>
<UnblockButton onClick={unblockUser}>
<UnblockIcon />
</UnblockButton>
</Tooltip>
) : (
<Tooltip title={t("admin.blockUser.tooltip")}>
<BlockButton onClick={blockUser}>
<BlockIcon />
</BlockButton>
</Tooltip>
)}
<Tooltip title={t("admin.deleteUser.tooltip")}>
<RemoveButton onClick={removeUser}>
<RemoveIcon />
</RemoveButton>
</Tooltip>
</>
)}
{(isMyProfile || props.isAdmin) && (
<Tooltip title={t("editProfile.tooltip")}>
<EditButton
onClick={handleEditProfile}
isAdmin={props.isAdmin}
disabled={!props.isAdmin && profile?._blocked}
>
<EditIcon />
</EditButton>
</Tooltip>
)}
</ButtonsContainer>
{/* Profile Control (edit, remove, block, unblock) */}
<ProfileControl
profile={profile}
isMobile={isMobile}
isAdmin={props.isAdmin}
isMyProfile={isMyProfile}
reFetchProfile={reFetchProfile}
/>
<ProfileInfoContainer> <ProfileInfoContainer>
<ProfileInfoAndContactContainer <ProfileInfoAndContactContainer
isAdmin={props.isAdmin} isAdmin={props.isAdmin}

+ 1
- 289
src/components/Cards/ProfileCard/ProfileCard.styled.js Datei anzeigen

import styled, { css } from "styled-components";
import styled from "styled-components";
import { Card, Typography, Grid, Box } from "@mui/material"; import { Card, Typography, Grid, Box } from "@mui/material";
import selectedTheme from "../../../themes"; import selectedTheme from "../../../themes";
import { ReactComponent as Edit } from "../../../assets/images/svg/edit.svg";
import { ReactComponent as Block } from "../../../assets/images/svg/block.svg";
import { ReactComponent as Unblock } from "../../../assets/images/svg/unblock.svg";
import { ReactComponent as Remove } from "../../../assets/images/svg/trash.svg";
import { ReactComponent as Mail } from "../../../assets/images/svg/mail.svg";


export const ProfileCardContainer = styled(Box)` export const ProfileCardContainer = styled(Box)`
width: 100%; width: 100%;
padding: 0 ${(props) => (props.isAdmin ? "18px" : "0")}; padding: 0 ${(props) => (props.isAdmin ? "18px" : "0")};
} }
`; `;
export const EditIcon = styled(Edit)`
position: relative;
top: 3px;
left: 2px;
width: 18px;
height: 18px;
@media (max-width: 600px) {
top: 0;
left: -2px;
}
& path {
stroke: ${selectedTheme.colors.primaryPurple};
}
`;
export const EditButton = styled(Box)`
width: 40px;
height: 40px;
font-weight: 900;
background: ${(props) =>
props.disabled ? "white" : selectedTheme.colors.primaryIconBackgroundColor};
border-radius: 360px;
padding: 0.45rem 0.45rem 0.27rem 0.57rem;
cursor: ${(props) => !props.disabled && `pointer`};
${(props) =>
props.disabled &&
css`
& path {
stroke: ${selectedTheme.colors.iconStrokePurpleDisabledColor};
}
`}
@media (max-width: 600px) {
width: 32px;
height: 32px;
}
`;
export const RemoveIcon = styled(Remove)`
position: relative;
top: 3px;
left: 2px;
width: 18px;
height: 18px;
@media (max-width: 600px) {
top: 0;
left: -2px;
}
& path {
stroke: ${selectedTheme.colors.primaryPurple};
}
`;
export const RemoveButton = styled(Box)`
width: 40px;
height: 40px;
font-weight: 900;
background: ${selectedTheme.colors.primaryIconBackgroundColor};
border-radius: 360px;
padding: 0.45rem 0.45rem 0.27rem 0.57rem;
cursor: pointer;
@media (max-width: 600px) {
width: 32px;
height: 32px;
}
`;

export const BlockLabelIcon = styled(Block)`
width: 18px;
height: 18px;
position: relative;
top: 10px;
left: 11px;
& path {
stroke: ${selectedTheme.colors.iconYellowColor};
}
`;

export const BlockButton = styled(Box)`
width: 40px;
height: 40px;
font-weight: 900;
background: ${selectedTheme.colors.primaryIconBackgroundColor};
border-radius: 360px;
padding: 0.45rem 0.45rem 0.27rem 0.57rem;
cursor: pointer;
@media (max-width: 600px) {
width: 32px;
height: 32px;
}
`;
export const BlockIcon = styled(Block)`
position: relative;
top: 3px;
left: 2px;
width: 18px;
height: 18px;
@media (max-width: 600px) {
top: 0;
left: -2px;
}
& path {
stroke: ${selectedTheme.colors.primaryPurple};
}
`;
export const UnblockButton = styled(Box)`
width: 40px;
height: 40px;
font-weight: 900;
background: ${selectedTheme.colors.primaryIconBackgroundColor};
border-radius: 360px;
padding: 0.45rem 0.45rem 0.27rem 0.57rem;
cursor: pointer;
@media (max-width: 600px) {
width: 32px;
height: 32px;
}
`;
export const UnblockIcon = styled(Unblock)`
position: relative;
top: 3px;
left: 2px;
width: 18px;
height: 18px;
@media (max-width: 600px) {
top: 0;
left: -2px;
}
`;
export const MessageButton = styled(EditButton)`
background: ${selectedTheme.colors.primaryPurple};
width: 40px;
height: 40px;
@media (max-width: 600px) {
width: 32px;
height: 32px;
}
`;
export const ButtonsContainer = styled(Box)`
position: absolute;
top: 18px;
right: 18px;
gap: 16px;
display: flex;
justify-content: flex-end;
flex-direction: row;
@media (max-width: 600px) {
gap: 12px;
}
`;


export const ProfileCardWrapper = styled(Card)` export const ProfileCardWrapper = styled(Card)`
border: 1px solid ${selectedTheme.colors.borderNormal}; border: 1px solid ${selectedTheme.colors.borderNormal};
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
`; `;


// export const ProfileName = styled(Typography)`
// color: ${(props) =>
// props.isMyProfile
// ? selectedTheme.colors.primaryYellow
// : selectedTheme.colors.primaryPurple};
// font-weight: 700;
// font-size: 24px;
// font-family: ${selectedTheme.fonts.textFont};
// margin-bottom: 5px;
// @media (max-width: 600px) {
// font-size: 18px;
// }
// `;

// export const ProfilePIB = styled(Typography)`
// color: ${(props) =>
// props.isMyProfile ? "white" : selectedTheme.colors.primaryDarkText};
// margin-top: 0.18rem;
// font-family: ${selectedTheme.fonts.textFont};
// font-size: 16px;
// padding-top: 1px;
// @media (max-width: 600px) {
// font-size: 14px;
// }
// `;
// export const ProfilePIBContainer = styled(Grid)`
// display: flex;
// justify-content: center;
// align-items: center;
// position: relative;
// left: 5px;
// `;

// export const ProfileMainInfo = styled(Grid)`
// display: flex;
// justify-content: start;
// align-items: start;
// `;

// export const AvatarImageContainer = styled(Grid)`
// display: flex;
// justify-content: start;
// align-items: center;
// `;

// export const ProfileMainInfoGrid = styled(Grid)`
// display: flex;
// flex-direction: column;
// align-items: start;
// margin-left: 16px;
// `;

// export const ProfileContact = styled(Grid)`
// padding-top: 2rem;
// padding-bottom: 2rem;
// @media (max-width: 600px) {
// padding-bottom: 1rem;
// }
// `;

// export const ContactItem = styled(Typography)`
// margin-right: 2rem;
// margin-left: 0.4rem;
// color: ${(props) =>
// props.isMyProfile ? "white" : selectedTheme.colors.primaryDarkText};
// display: unset;
// font-family: ${selectedTheme.fonts.textFont};
// letter-spacing: 0.02em;
// font-size: 16px;
// position: relative;
// bottom: 1px;
// @media (max-width: 600px) {
// font-size: 14px;
// bottom: 4px;
// }
// `;

// export const StatsItem = styled(Typography)`
// margin-right: 2rem;
// display: unset;
// margin-left: 1rem;
// font-family: ${selectedTheme.fonts.textFont};
// font-size: 16px;
// margin-bottom: 2px;
// @media (max-width: 600px) {
// font-size: 12px;
// }
// `;

// export const ProfileStats = styled(Grid)`
// display: flex;
// justify-content: start;
// align-items: center;
// background: ${selectedTheme.colors.primaryDarkTextSecond};
// width: calc(100% + 2rem);
// padding-top: 1.3rem;
// padding-bottom: 1.3rem;
// margin-bottom: -1rem;
// margin-left: -1rem;
// border-radius: 0 0 4px 4px;
// `;
// export const AvatarImage = styled.img`
// min-height: 144px;
// min-width: 144px;
// width: 144px;
// height: 144px;
// border-radius: 100%;
// @media (max-width: 600px) {
// min-height: 90px;
// min-width: 90px;
// width: 90px;
// height: 90px;
// }
// `;

export const ProfileCardHeader = styled(Grid)` export const ProfileCardHeader = styled(Grid)`
display: flex; display: flex;
justify-content: start; justify-content: start;
font-size: 12px; font-size: 12px;
} }
`; `;
export const MessageIcon = styled(Mail)`
width: 19.5px;
height: 19.5px;
position: relative;
left: 1px;
top: 3px;
& path {
stroke: ${selectedTheme.colors.primaryYellow};
}
@media (max-width: 600px) {
width: 16px;
height: 16px;
left: -1px;
top: 1px;
}
`;


export const ProfileInfoContainer = styled(Grid)` export const ProfileInfoContainer = styled(Grid)`
display: flex; display: flex;
} }
`; `;


// export const ProfileStatsGrid = styled(Grid)`
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: start;
// `;
export const BlockedProfileContainer = styled(Box)` export const BlockedProfileContainer = styled(Box)`
@media (max-width: 600px) { @media (max-width: 600px) {
position: absolute; position: absolute;

+ 104
- 0
src/components/Cards/ProfileCard/ProfileControl/ProfileControl.js Datei anzeigen

import React from "react";
import PropTypes from "prop-types";
import {
ButtonsContainer,
BlockLabelIcon,
UnblockLabelIcon,
} from "./ProfileControl.styled";
import UserLabeledCard from "../../LabeledCard/User/UserLabeledCard";
import BlockedProfile from "../BlockedProfile/BlockedProfile";
import {
toggleDeleteCategoryModal,
toggleEditProfileModal,
} from "../../../../store/actions/modal/modalActions";
import { useDispatch } from "react-redux";
import {
USERS_BLOCK_TYPE,
USERS_DELETE_TYPE,
USERS_UNBLOCK_TYPE,
} from "../../../../constants/adminTypeConstants";
import ProfileControlButton from "./ProfileControlButton/ProfileControlButton";

const ProfileControl = (props) => {
const dispatch = useDispatch();
const removeUser = () => {
dispatch(
toggleDeleteCategoryModal({
customId: props.profile?._id,
type: USERS_DELETE_TYPE,
customLabeledCard: <UserLabeledCard user={props.profile} />,
customLabeledCardHeight: "90px",
})
);
};
const blockUser = () => {
dispatch(
toggleDeleteCategoryModal({
customId: props.profile?._id,
type: USERS_BLOCK_TYPE,
customLabeledCard: <UserLabeledCard user={props.profile} />,
customLabeledCardHeight: "90px",
customLabeledCardIcon: <BlockLabelIcon />,
})
);
};
const unblockUser = () => {
dispatch(
toggleDeleteCategoryModal({
customId: props.profile?._id,
type: USERS_UNBLOCK_TYPE,
customLabeledCard: <UserLabeledCard user={props.profile} />,
customLabeledCardHeight: "90px",
customLabeledCardIcon: <UnblockLabelIcon />,
})
);
};
const handleEditProfile = () => {
if (!props.profile?._blocked) {
dispatch(
toggleEditProfileModal({
userId: props.profile._id,
profile: props.profile,
isAdmin: props.isAdmin,
reFetchProfile: props.bigProfileCard
? () => {}
: props.reFetchProfile,
})
);
}
};
return (
<ButtonsContainer>
{props.profile?._blocked && !props.isMobile && <BlockedProfile />}
{props.isAdmin && (
<>
{props.profile?._blocked ? (
<ProfileControlButton title="unblockUser" onClick={unblockUser} />
) : (
<ProfileControlButton title="blockUser" onClick={blockUser} />
)}
<ProfileControlButton title="deleteUser" onClick={removeUser} />
</>
)}
{(props.isMyProfile || props.isAdmin) && (
<ProfileControlButton
title="editProfile"
onClick={handleEditProfile}
isAdmin={props.isAdmin}
disabled={!props.isAdmin && props.profile?._blocked}
/>
)}
</ButtonsContainer>
);
};

ProfileControl.propTypes = {
profile: PropTypes.any,
isAdmin: PropTypes.bool,
isMyProfile: PropTypes.bool,
isMobile: PropTypes.bool,
reFetchProfile: PropTypes.func,
bigProfileCard: PropTypes.bool,
};

export default ProfileControl;

+ 37
- 0
src/components/Cards/ProfileCard/ProfileControl/ProfileControl.styled.js Datei anzeigen

import styled from "styled-components";
import { Box } from "@mui/material";
import { ReactComponent as Block } from "../../../../assets/images/svg/block.svg";
import { ReactComponent as UnblockGold } from "../../../../assets/images/svg/unblock-gold.svg";
import selectedTheme from "../../../../themes";

export const ButtonsContainer = styled(Box)`
position: absolute;
top: 18px;
right: 18px;
gap: 16px;
display: flex;
justify-content: flex-end;
flex-direction: row;
@media (max-width: 600px) {
gap: 12px;
}
`;

export const BlockLabelIcon = styled(Block)`
width: 18px;
height: 18px;
position: relative;
top: 10px;
left: 11px;
& path {
stroke: ${selectedTheme.colors.iconYellowColor};
}
`;

export const UnblockLabelIcon = styled(UnblockGold)`
width: 18px;
height: 18px;
position: relative;
top: 10px;
left: 11px;
`;

+ 51
- 0
src/components/Cards/ProfileCard/ProfileControl/ProfileControlButton/ProfileControlButton.js Datei anzeigen

import React from "react";
import PropTypes from "prop-types";
import {
BlockIcon,
ButtonContainer,
EditIcon,
RemoveIcon,
UnblockIcon,
} from "./ProfileControlButton.styled";
import { Tooltip } from "@mui/material";
import { useTranslation } from "react-i18next";

const ProfileControlButton = (props) => {
const { t } = useTranslation();
return (
<Tooltip
title={
props.title !== "editProfile"
? t(`admin.${props.title}.tooltip`)
: t(`${props.title}.tooltip`)
}
>
<ButtonContainer
onClick={props.onClick}
isAdmin={props.isAdmin}
disabled={props.disabled}
>
{props.title === "unblockUser" ? (
<UnblockIcon />
) : props.title === "blockUser" ? (
<BlockIcon />
) : props.title === "deleteUser" ? (
<RemoveIcon />
) : props.title === "editProfile" ? (
<EditIcon />
) : (
<></>
)}
</ButtonContainer>
</Tooltip>
);
};

ProfileControlButton.propTypes = {
title: PropTypes.string,
onClick: PropTypes.func,
isAdmin: PropTypes.bool,
disabled: PropTypes.bool,
};

export default ProfileControlButton;

+ 83
- 0
src/components/Cards/ProfileCard/ProfileControl/ProfileControlButton/ProfileControlButton.styled.js Datei anzeigen

import styled, { css } from "styled-components";
import { Box } from "@mui/material";
import selectedTheme from "../../../../../themes";
import { ReactComponent as Edit } from "../../../../../assets/images/svg/edit.svg";
import { ReactComponent as Block } from "../../../../../assets/images/svg/block.svg";
import { ReactComponent as Unblock } from "../../../../../assets/images/svg/unblock.svg";
import { ReactComponent as Remove } from "../../../../../assets/images/svg/trash.svg";

export const ButtonContainer = styled(Box)`
width: 40px;
height: 40px;
font-weight: 900;
background: ${(props) =>
props.disabled ? "white" : selectedTheme.colors.primaryIconBackgroundColor};
border-radius: 360px;
padding: 0.45rem 0.45rem 0.27rem 0.57rem;
cursor: ${(props) => !props.disabled && `pointer`};
${(props) =>
props.disabled &&
css`
& path {
stroke: ${selectedTheme.colors.iconStrokePurpleDisabledColor};
}
`}
@media (max-width: 600px) {
width: 32px;
height: 32px;
}
`;

export const UnblockIcon = styled(Unblock)`
position: relative;
top: 3px;
left: 2px;
width: 18px;
height: 18px;
@media (max-width: 600px) {
top: 0;
left: -2px;
}
`;
export const BlockIcon = styled(Block)`
position: relative;
top: 3px;
left: 2px;
width: 18px;
height: 18px;
@media (max-width: 600px) {
top: 0;
left: -2px;
}
& path {
stroke: ${selectedTheme.colors.primaryPurple};
}
`;
export const RemoveIcon = styled(Remove)`
position: relative;
top: 3px;
left: 2px;
width: 18px;
height: 18px;
@media (max-width: 600px) {
top: 0;
left: -2px;
}
& path {
stroke: ${selectedTheme.colors.primaryPurple};
}
`;
export const EditIcon = styled(Edit)`
position: relative;
top: 3px;
left: 2px;
width: 18px;
height: 18px;
@media (max-width: 600px) {
top: 0;
left: -2px;
}
& path {
stroke: ${selectedTheme.colors.primaryPurple};
}
`;

+ 2
- 2
src/components/Paging/Paging.styled.js Datei anzeigen

flex: 1; flex: 1;
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
/* margin-top: 5px;
margin-bottom: 10px; */
margin-top: 5px;
margin-bottom: 10px;
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
padding-left: 0; padding-left: 0;

+ 0
- 1
src/components/ProfileMini/ProfileMini.js Datei anzeigen

import { selectOffer } from "../../store/selectors/offersSelectors"; import { selectOffer } from "../../store/selectors/offersSelectors";
import { selectUserId } from "../../store/selectors/loginSelectors"; import { selectUserId } from "../../store/selectors/loginSelectors";
import { ReactComponent as ProfileIcon } from "../../assets/images/svg/user-gray.svg"; import { ReactComponent as ProfileIcon } from "../../assets/images/svg/user-gray.svg";
// import ItemDetailsHeaderCard from "../ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors"; import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
import SkeletonProfileMini from "./SkeletonProfileMini/SkeletonProfileMini"; import SkeletonProfileMini from "./SkeletonProfileMini/SkeletonProfileMini";

Verfassen Vorschau
Laden…
Abbrechen
Speichern