ソースを参照

Finished feaure 660

feature/660
jovan.cirkovic 3年前
コミット
8066a6619f

+ 6
- 0
src/assets/images/svg/calendar.svg ファイルの表示

<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 2H2.5C1.94772 2 1.5 2.44772 1.5 3V10C1.5 10.5523 1.94772 11 2.5 11H9.5C10.0523 11 10.5 10.5523 10.5 10V3C10.5 2.44772 10.0523 2 9.5 2Z" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 1V3" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 1V3" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.5 5H10.5" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

+ 28
- 13
src/components/Cards/CreateOfferCard/CreateOffer.js ファイルの表示

import ThirdPartCreateOffer from "./ThirdPart/ThirdPartCreateOffer"; import ThirdPartCreateOffer from "./ThirdPart/ThirdPartCreateOffer";
import { import {
addOffer, addOffer,
fetchOffers,
fetchOneOffer,
// fetchOffers,
// fetchOneOffer,
fetchProfileOffers, fetchProfileOffers,
} from "../../../store/actions/offers/offersActions"; } from "../../../store/actions/offers/offersActions";
import { selectUserId } from "../../../store/selectors/loginSelectors"; import { selectUserId } from "../../../store/selectors/loginSelectors";
import BackButton from "./BackButton/BackButton"; import BackButton from "./BackButton/BackButton";
import selectedTheme from "../../../themes"; import selectedTheme from "../../../themes";
import { useMemo } from "react"; import { useMemo } from "react";
import { useLocation } from "react-router-dom";
import { BASE_PAGE, HOME_PAGE } from "../../../constants/pages";
import { routeMatches } from "../../../util/helpers/routeHelpers";
// import { useLocation } from "react-router-dom";
import { useHistory } from "react-router-dom";
import { PROFILE_PAGE } from "../../../constants/pages";
import { replaceInRoute } from "../../../util/helpers/routeHelpers";
// import { routeMatches } from "../../../util/helpers/routeHelpers";


const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => { const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const location = useLocation();
// const location = useLocation();
const history = useHistory();
const [informations, setInformations] = useState({}); const [informations, setInformations] = useState({});
const [currentStep, setCurrentStep] = useState(1); const [currentStep, setCurrentStep] = useState(1);
const { t } = useTranslation(); const { t } = useTranslation();
const userId = useSelector(selectUserId); const userId = useSelector(selectUserId);


const handleApiResponseSuccess = () => { const handleApiResponseSuccess = () => {
if (routeMatches(BASE_PAGE) || routeMatches(HOME_PAGE))
dispatch(fetchOffers({ queryString: "" }));
if (location.pathname.includes("profile"))
dispatch(fetchProfileOffers(userId));
if (location.pathname.includes("proizvodi"))
dispatch(fetchOneOffer(offer._id));
// if (routeMatches(BASE_PAGE) || routeMatches(HOME_PAGE))
// dispatch(fetchOffers({ queryString: "" }));
// if (location.pathname.includes("profile"))
// dispatch(fetchProfileOffers(userId));
// if (location.pathname.includes("proizvodi"))
// dispatch(fetchOneOffer(offer._id));
dispatch(fetchProfileOffers(userId));
history.push(
replaceInRoute(PROFILE_PAGE, {
idProfile: userId,
})
);
}; };


// Go to next step and save typed values // Go to next step and save typed values
// Create (or edit) offer // Create (or edit) offer
const handleSubmitOffer = () => { const handleSubmitOffer = () => {
if (editOffer) { if (editOffer) {
dispatch(editOneOffer({offerId: offer._id, offerData, handleApiResponseSuccess}));
dispatch(
editOneOffer({
offerId: offer._id,
offerData,
handleApiResponseSuccess,
})
);
} else { } else {
dispatch(addOffer({ offerData, handleApiResponseSuccess })); dispatch(addOffer({ offerData, handleApiResponseSuccess }));
} }

+ 11
- 0
src/components/Cards/OfferCard/OfferCard.js ファイルの表示

OfferTitle, OfferTitle,
OfferTitleAboveImage, OfferTitleAboveImage,
OfferViews, OfferViews,
OfferDate,
PinIcon, PinIcon,
RemoveIcon, RemoveIcon,
RemoveIconContainer, RemoveIconContainer,
LikeIcon, LikeIcon,
LikeIconContainer, LikeIconContainer,
CategoryIcon, CategoryIcon,
CalendarIcon,
PinIconContainer, PinIconContainer,
PinOutlinedIcon, PinOutlinedIcon,
} from "./OfferCard.styled"; } from "./OfferCard.styled";
import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter"; import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
import OfferDescription from "./OfferDescription/OfferDescription"; import OfferDescription from "./OfferDescription/OfferDescription";
import CheckButton from "./CheckButton/CheckButton"; import CheckButton from "./CheckButton/CheckButton";
import { formatDateLocale } from "../../../util/helpers/dateHelpers";


const OfferCard = (props) => { const OfferCard = (props) => {
const [deleteOfferModal, setDeleteOfferModal] = useState(false); const [deleteOfferModal, setDeleteOfferModal] = useState(false);
const history = useHistory(); const history = useHistory();
const userId = useSelector(selectUserId); const userId = useSelector(selectUserId);
const { isMobile } = useIsMobile(); const { isMobile } = useIsMobile();
const date = formatDateLocale(new Date(props.offer?._created));


const pinOffer = (event) => { const pinOffer = (event) => {
event.stopPropagation(); event.stopPropagation();
</DetailIcon> </DetailIcon>
<DetailText>{props?.offer?.category?.name}</DetailText> <DetailText>{props?.offer?.category?.name}</DetailText>
</OfferCategory> </OfferCategory>

{props.dontShowViews ? ( {props.dontShowViews ? (
<></> <></>
) : ( ) : (
<DetailText>{props?.offer?.views?.count}</DetailText> <DetailText>{props?.offer?.views?.count}</DetailText>
</OfferViews> </OfferViews>
)} )}
<OfferDate vertical={props.vertical}>
<DetailIcon component="span" size="16px">
<CalendarIcon />
</DetailIcon>
<DetailText>{date}</DetailText>
</OfferDate>
</OfferDetails> </OfferDetails>
</OfferInfo> </OfferInfo>
{!props.halfwidth ? ( {!props.halfwidth ? (

+ 19
- 1
src/components/Cards/OfferCard/OfferCard.styled.js ファイルの表示

import { ReactComponent as Pin } from "../../../assets/images/svg/pin.svg"; import { ReactComponent as Pin } from "../../../assets/images/svg/pin.svg";
import { ReactComponent as PinOutlined } from "../../../assets/images/svg/pin-outlined.svg"; import { ReactComponent as PinOutlined } from "../../../assets/images/svg/pin-outlined.svg";
import { ReactComponent as Category } from "../../../assets/images/svg/category.svg"; import { ReactComponent as Category } from "../../../assets/images/svg/category.svg";
import { ReactComponent as Calendar } from "../../../assets/images/svg/calendar.svg";


export const OfferCardContainer = styled(Container)` export const OfferCardContainer = styled(Container)`
display: ${(props) => (props.skeleton ? "none" : "flex")}; display: ${(props) => (props.skeleton ? "none" : "flex")};


`} `}
} }
@media (max-width: 760px) {
margin-bottom: 16px;
}
`; `;
export const OfferAuthor = styled(Box)` export const OfferAuthor = styled(Box)`
display: flex; display: flex;
flex-wrap: ${(props) => (!props.halfwidth ? "no-wrap" : "wrap")}; flex-wrap: ${(props) => (!props.halfwidth ? "no-wrap" : "wrap")};
justify-content: start; justify-content: start;
gap: 1rem; gap: 1rem;
@media (max-width: 650px) {
@media (max-width: 760px) {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 0; gap: 0;
display: none; display: none;
`} `}
`; `;
export const OfferDate = styled(Box)`
font-family: ${selectedTheme.fonts.textFont};
color: ${selectedTheme.colors.primaryText};
line-height: 16px;
font-size: 12px;
margin-top: 1px;
`;


export const Line = styled(Box)` export const Line = styled(Box)`
border-left: 1px solid rgba(0, 0, 0, 0.15); border-left: 1px solid rgba(0, 0, 0, 0.15);
stroke-width: 1; stroke-width: 1;
} }
`; `;

export const CalendarIcon = styled(Calendar)`
width: 14px;
& path {
stroke-width: 1;
}
`;

+ 1
- 7
src/components/Cards/ProfileCard/ProfileCard.js ファイルの表示

ProfileCardHeader, ProfileCardHeader,
HeaderTitle, HeaderTitle,
EditIcon, EditIcon,
MessageIcon,
MessageButton,
ProfileInfoContainer, ProfileInfoContainer,
} from "./ProfileCard.styled"; } from "./ProfileCard.styled";
import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
<HeaderTitle>{t("profile.myProfile")}</HeaderTitle> <HeaderTitle>{t("profile.myProfile")}</HeaderTitle>
</ProfileCardHeader> </ProfileCardHeader>
<ProfileCardWrapper variant="outlined" isMyProfile={isMyProfile}> <ProfileCardWrapper variant="outlined" isMyProfile={isMyProfile}>
{isMyProfile ? (
{isMyProfile && (
<EditButton onClick={() => setEditProfileModal(true)}> <EditButton onClick={() => setEditProfileModal(true)}>
<EditIcon /> <EditIcon />
</EditButton> </EditButton>
) : (
<MessageButton>
<MessageIcon />
</MessageButton>
)} )}
<ProfileInfoContainer> <ProfileInfoContainer>
{/* Profile Main Info */} {/* Profile Main Info */}

+ 1
- 1
src/components/Popovers/MyProfile/MyProfile.js ファイルの表示

buttonOnClick={() => seeMyProfile()} buttonOnClick={() => seeMyProfile()}
> >
<GrayButtonsContainer> <GrayButtonsContainer>
<AboutButton closePopover={props.closePopover} />
<PricesButton closePopover={props.closePopover} /> <PricesButton closePopover={props.closePopover} />
<AboutButton closePopover={props.closePopover} />
<PrivacyPolicyButton closePopover={props.closePopover} /> <PrivacyPolicyButton closePopover={props.closePopover} />
</GrayButtonsContainer> </GrayButtonsContainer>
<LogoutButton /> <LogoutButton />

+ 1
- 1
src/util/helpers/dateHelpers.js ファイルの表示

const monthCreated = const monthCreated =
date.getMonth() < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; date.getMonth() < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
const yearCreated = date.getFullYear(); const yearCreated = date.getFullYear();
return `${dayCreated}.${monthCreated}.${yearCreated}`;
return `${dayCreated}.${monthCreated}.${yearCreated}.`;
} }
export function convertUTCDateToLocalDate(date) { export function convertUTCDateToLocalDate(date) {
var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000); var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);

読み込み中…
キャンセル
保存