Skip to content

feat/forward-search-params #676

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
anyulled merged 4 commits into from
Mar 20, 2025
Merged

feat/forward-search-params #676

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d590a1e
refactor: abstract functionality in a hook
anyulled Mar 20, 2025
fb70409
feat: include search params in tickets url link
anyulled Mar 20, 2025
eafdfa8
test: include tests
anyulled Mar 20, 2025
19bbab5
test: include tests
anyulled Mar 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 24 additions & 31 deletions src/2023/Home/components/ActionButtons/ActionButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Button from "../../../../components/UI/Button";
import styled from "styled-components";
import { BIG_BREAKPOINT } from "../../../../constants/BreakPoints";
import { gaEventTracker } from "../../../../components/analytics/Analytics";
import { useDateInterval } from "../../../../hooks/useDateInterval";

const StyledActionDiv = styled.div`
display: flex;
Expand All @@ -16,16 +17,8 @@ const StyledActionDiv = styled.div`
`;

const ActionButtons: FC<React.PropsWithChildren<unknown>> = () => {
const ticketStartDay = new Date(data.tickets.startDay);
const ticketEndDay = new Date(data.tickets.endDay);
const CFPStartDay = new Date(data.cfp.startDay);
const CFPEndDay = new Date(data.cfp.endDay);
const sponsorshipStartDay = new Date(data.tickets.startDay);
const sponsorshipEndDay = new Date(data.tickets.endDay);
const today = new Date();

const isBetween = (startDay: Date, endDay: Date): boolean =>
startDay < new Date() && endDay > today;
const { isTicketsDisabled, isSponsorDisabled, isCfpDisabled } =
useDateInterval(new Date(), data);

const trackSponsorshipInfo = useCallback(() => {
gaEventTracker("sponsorship", "sponsorship");
Expand All @@ -41,27 +34,27 @@ const ActionButtons: FC<React.PropsWithChildren<unknown>> = () => {

return (
<StyledActionDiv>
{isBetween(ticketStartDay, ticketEndDay) && (
<Button
onClick={trackTickets}
text="🎟️ Buy Tickets"
link="https://tickets.devbcn.com/event/devbcn-2023"
/>
)}
{isBetween(CFPStartDay, CFPEndDay) && (
<Button
onClick={trackCFP}
text="📢 Call For Papers"
link={data.cfp.link}
/>
)}
{isBetween(sponsorshipStartDay, sponsorshipEndDay) && (
<Button
onClick={trackSponsorshipInfo}
text="🤝 Sponsorship"
link="mailto:[email protected]?subject=devBcn sponsorship"
/>
)}
<Button
onClick={trackTickets}
text="🎟️ Buy Tickets"
link={
"https://tickets.devbcn.com/event/devbcn-2023" +
window.location.search
}
disabled={isTicketsDisabled}
/>
<Button
onClick={trackCFP}
text="📢 Call For Papers"
link={data.cfp.link}
disabled={isCfpDisabled}
/>
<Button
onClick={trackSponsorshipInfo}
text="🤝 Sponsorship"
link="mailto:[email protected]?subject=devBcn sponsorship"
disabled={isSponsorDisabled}
/>
</StyledActionDiv>
);
};
Expand Down
106 changes: 50 additions & 56 deletions src/2024/Home/components/ActionButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,61 @@
import {FC, useCallback} from "react";
import { FC, useCallback } from "react";
import data from "../../../data/2024.json";
import styled from "styled-components";
import {BIG_BREAKPOINT} from "../../../constants/BreakPoints";
import {gaEventTracker} from "../../../components/analytics/Analytics";
import { BIG_BREAKPOINT } from "../../../constants/BreakPoints";
import { gaEventTracker } from "../../../components/analytics/Analytics";
import Button from "../../../components/UI/Button";
import { useDateInterval } from "../../../hooks/useDateInterval";

const StyledActionDiv = styled.div`
display: flex;
text-align: center;
display: flex;
text-align: center;
@media (max-width: ${BIG_BREAKPOINT}px) {
flex-direction: column;
width: 75%;
}
@media (max-width: ${BIG_BREAKPOINT}px) {
flex-direction: column;
width: 75%;
}
`;

const ActionButtons: FC<React.PropsWithChildren<unknown>> = () => {
const ticketStartDay = new Date(data.tickets.startDay);
const ticketEndDay = new Date(data.tickets.endDay);
const CFPStartDay = new Date(data.cfp.startDay);
const CFPEndDay = new Date(data.cfp.endDay);
const sponsorshipStartDay = new Date(data.sponsors.startDate);
const sponsorshipEndDay = new Date(data.sponsors.endDate);
const today = new Date();

const isBetween = (startDay: Date, endDay: Date): boolean =>
startDay < new Date() && endDay > today;

const trackSponsorshipInfo = useCallback(() => {
gaEventTracker("sponsorship", "sponsorship");
}, []);

const trackTickets = useCallback(() => {
gaEventTracker("ticket", "tickets");
}, []);

const trackCFP = useCallback(() => {
gaEventTracker("CFP", "CFP");
}, []);

return (
<StyledActionDiv>
<Button
onClick={trackTickets}
text="🎟️ Buy Tickets"
link="https://tickets.devbcn.com/event/devbcn-2024"
disabled={!isBetween(ticketStartDay, ticketEndDay)}
/>
{isBetween(CFPStartDay, CFPEndDay) && (
<Button
onClick={trackCFP}
text="📢 Call For Papers"
link={data.cfp.link}
/>
)}
{isBetween(sponsorshipStartDay, sponsorshipEndDay) && (
<Button
onClick={trackSponsorshipInfo}
text="🤝 Sponsorship"
link="https://www.devbcn.com/sponsorship"
/>
)}
</StyledActionDiv>
);
const { isSponsorDisabled, isCfpDisabled, isTicketsDisabled } =
useDateInterval(new Date(), data);

const trackSponsorshipInfo = useCallback(() => {
gaEventTracker("sponsorship", "sponsorship");
}, []);

const trackTickets = useCallback(() => {
gaEventTracker("ticket", "tickets");
}, []);

const trackCFP = useCallback(() => {
gaEventTracker("CFP", "CFP");
}, []);

return (
<StyledActionDiv>
<Button
onClick={trackTickets}
text="🎟️ Buy Tickets"
link={
"https://tickets.devbcn.com/event/devbcn-2024" +
window.location.search
}
disabled={isTicketsDisabled}
/>
<Button
onClick={trackCFP}
text="📢 Call For Papers"
link={data.cfp.link}
disabled={isCfpDisabled}
/>
<Button
onClick={trackSponsorshipInfo}
text="🤝 Sponsorship"
link="https://www.devbcn.com/sponsorship"
disabled={isSponsorDisabled}
/>
</StyledActionDiv>
);
};
export default ActionButtons;
40 changes: 40 additions & 0 deletions src/hooks/useDateInterval.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { isWithinInterval } from "date-fns";

type DateInterval = {
tickets:{
startDay: string,
endDay: string,
},
cfp:{
startDay: string,
endDay: string,
},
sponsors:{
startDate: string,
endDate: string,
}
}

export const useDateInterval = (today: Date, edition: DateInterval) => {
const ticketStartDay = new Date(edition.tickets.startDay);
const ticketEndDay = new Date(edition.tickets.endDay);
const CFPStartDay = new Date(edition.cfp.startDay);
const CFPEndDay = new Date(edition.cfp.endDay);
const sponsorStartDay = new Date(edition.sponsors.startDate);
const sponsorEndDay = new Date(edition.sponsors.endDate);

return {
isTicketsDisabled: !isWithinInterval(today, {
start: ticketStartDay,
end: ticketEndDay,
}),
isCfpDisabled: !isWithinInterval(today, {
start: CFPStartDay,
end: CFPEndDay,
}),
isSponsorDisabled: !isWithinInterval(today, {
start: sponsorStartDay,
end: sponsorEndDay,
}),
};
};
57 changes: 25 additions & 32 deletions src/views/Home/components/ActionButtons/ActionButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import {FC, useCallback} from "react";
import { FC, useCallback } from "react";
import data from "../../../../data/2025.json";
import Button from "../../../../components/UI/Button";
import styled from "styled-components";
import {isWithinInterval} from "date-fns";
import {BIG_BREAKPOINT} from "../../../../constants/BreakPoints";
import {gaEventTracker} from "../../../../components/analytics/Analytics";
import { BIG_BREAKPOINT } from "../../../../constants/BreakPoints";
import { gaEventTracker } from "../../../../components/analytics/Analytics";
import { useDateInterval } from "../../../../hooks/useDateInterval";

const StyledActionDiv = styled.div`
display: flex;
Expand All @@ -17,17 +17,8 @@ const StyledActionDiv = styled.div`
`;

const ActionButtons: FC<React.PropsWithChildren<unknown>> = () => {
const ticketStartDay = new Date(data.tickets.startDay);
const ticketEndDay = new Date(data.tickets.endDay);
const CFPStartDay = new Date(data.cfp.startDay);
const CFPEndDay = new Date(data.cfp.endDay);
const sponsorshipStartDay = new Date(data.sponsors.startDate);
const sponsorshipEndDay = new Date(data.sponsors.endDate);
const today = new Date();


const isBetween = (startDay: Date, endDay: Date): boolean =>
isWithinInterval(today, {start: startDay, end:endDay});
const { isTicketsDisabled, isSponsorDisabled, isCfpDisabled } =
useDateInterval(new Date(), data);

const trackSponsorshipInfo = useCallback(() => {
gaEventTracker("sponsorship", "sponsorship");
Expand All @@ -41,30 +32,32 @@ const ActionButtons: FC<React.PropsWithChildren<unknown>> = () => {
gaEventTracker("CFP", "CFP");
}, []);


return (
<StyledActionDiv>
<Button
onClick={trackTickets}
text="🎟️ Buy Tickets"
subtext="February 1st, 2025"
link="https://tickets.devbcn.com/event/devbcn-2025"
disabled={!isBetween(ticketStartDay, ticketEndDay)}
link={
"https://tickets.devbcn.com/event/devbcn-2025" +
window.location.search
}
disabled={isTicketsDisabled}
/>
<Button
onClick={trackCFP}
text="📢 Call For Papers"
subtext="January 1st, 2025"
link={data.cfp.link}
disabled={isCfpDisabled}
/>
<Button
onClick={trackSponsorshipInfo}
text="🤝 Sponsorship"
target="_self"
link="/sponsorship"
disabled={isSponsorDisabled}
/>
<Button
onClick={trackCFP}
text="📢 Call For Papers"
subtext="January 1st, 2025"
link={data.cfp.link}
disabled={!isBetween(CFPStartDay, CFPEndDay)}
/>
<Button
onClick={trackSponsorshipInfo}
text="🤝 Sponsorship"
target="_self"
link="/sponsorship"
disabled={!isBetween(sponsorshipStartDay, sponsorshipEndDay)}
/>
</StyledActionDiv>
);
};
Expand Down
Loading