Skip to content

Commit 2fa52ca

Browse files
pstringspstrings
committed
added email registration for events
1 parent f328c7f commit 2fa52ca

4 files changed

Lines changed: 160 additions & 187 deletions

File tree

‎data/events.json‎

Lines changed: 1 addition & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1 @@
1-
{
2-
"events_categories": [
3-
{
4-
"id": "london",
5-
"title": "Events in London",
6-
"description": "Check out all the events taking place in London. Whether it's the family time you're looking for or want to have some fun with your friends, all sorts of fun events can be found here.",
7-
"image": "https://images.pexels.com/photos/1796715/pexels-photo-1796715.jpeg"
8-
},
9-
{
10-
"id": "san-francisco",
11-
"title": "Events in San Francisco",
12-
"description": "Check out all the events taking place in San Francisco. Whether it's the family time you're looking for or want to have some fun with your friends, all sorts of fun events can be found here.",
13-
"image": "https://images.pexels.com/photos/3688579/pexels-photo-3688579.jpeg"
14-
},
15-
{
16-
"id": "barcelona",
17-
"title": "Events in Barcelona",
18-
"description": "Check out all the events taking place in Barcelona. Whether it's the family time you're looking for or want to have some fun with your friends, all sorts of fun events can be found here.",
19-
"image": "https://images.pexels.com/photos/1386444/pexels-photo-1386444.jpeg"
20-
}
21-
],
22-
"allEvents": [
23-
{
24-
"id": "london-comic-con-winter",
25-
"title": "London Comic Con Winter",
26-
"city": "london",
27-
"description": "London Comic Con Winter is coming to Olympia over the weekend of 18-19 November 2023. We will be bringing you the Stars of Film & TV for you to meet, get their autographs & have your photo taken with them! All this will be taking place at the historic Olympia London.",
28-
"image": "https://londoncomicconwinter.com/wp-content/uploads/2022/04/LFCC-July-19-2371-Cosplay-560x420.jpg",
29-
"emails_registered": []
30-
},
31-
{
32-
"id": "new-years-eve-in-london-2023",
33-
"title": "New Years Eve in London 2023",
34-
"city": "london",
35-
"description": "Celebrate New Years Eve in the heart of London!",
36-
"image": "https://images.unsplash.com/photo-1521478413868-1bbd982fa4a5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
37-
"emails_registered": []
38-
},
39-
{
40-
"id": "'edtech-world-summit-2023",
41-
"title": "EdTech World Summit 2023",
42-
"city": "london",
43-
"description": "We are delighted to announce 2023 keynotes and speakers including Google, British Council, PanOpen, SOAS, Bournemouth University and more!",
44-
"image": "https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
45-
"emails_registered": ["rachel@gmail.com", "monica@gmail.com"]
46-
},
47-
{
48-
"id": "kiss-haunted-house-party-2022",
49-
"title": "KISS Haunted House Party 2022",
50-
"city": "london",
51-
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
52-
"image": "https://wembleypark.com/media/images/KISS-HHP-42-1440x810-Logos-Date-de.2e16d0ba.fill-496x279.jpg",
53-
"emails_registered": []
54-
},
55-
{
56-
"id": "sf-blockchain-week",
57-
"title": "SF Blockchain Week",
58-
"city": "san-francisco",
59-
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
60-
"image": "https://images.unsplash.com/photo-1516245834210-c4c142787335?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80",
61-
"emails_registered": [
62-
"",
63-
"",
64-
"",
65-
"laura@gmail.com",
66-
"laura@gmail.com",
67-
"laura@gmail.com"
68-
]
69-
},
70-
{
71-
"id": "innovation-summit-san-francisco",
72-
"title": "Innovation Summit San Francisco",
73-
"city": "san-francisco",
74-
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
75-
"image": "https://images.unsplash.com/photo-1521464302861-ce943915d1c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80",
76-
"emails_registered": []
77-
},
78-
{
79-
"id": "fan-expo-san-francisco",
80-
"title": "FAN EXPO San Francisco",
81-
"city": "san-francisco",
82-
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
83-
"image": "https://images.unsplash.com/photo-1608889825103-eb5ed706fc64?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80",
84-
"emails_registered": []
85-
},
86-
{
87-
"id": "san-francisco-opera---san-francisco-tickets",
88-
"title": "San Francisco Opera - San Francisco Tickets",
89-
"city": "san-francisco",
90-
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
91-
"image": "https://images.unsplash.com/photo-1580809361436-42a7ec204889?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80",
92-
"emails_registered": []
93-
},
94-
{
95-
"id": "concert-christian-löffler-+-detect-ensemble",
96-
"title": "Concert Christian Löffler + Detect Ensemble",
97-
"city": "barcelona",
98-
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
99-
"image": "https://images.unsplash.com/photo-1478147427282-58a87a120781?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
100-
"emails_registered": ["alicia@gmail.com", "monica@gmail.com"]
101-
},
102-
{
103-
"id": "the-halloween-house-party",
104-
"title": "The Halloween House Party",
105-
"city": "barcelona",
106-
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
107-
"image": "https://images.unsplash.com/photo-1587407627257-27b7127c868c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
108-
"emails_registered": [
109-
"alicia@gmail.com",
110-
"monica@gmail.com",
111-
"david@yahoo.com",
112-
"claire@ss.com"
113-
]
114-
},
115-
{
116-
"id": "international-conference-on-industrial-design",
117-
"title": "International Conference on Industrial Design",
118-
"city": "barcelona",
119-
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
120-
"image": "https://images.unsplash.com/photo-1475721027785-f74eccf877e2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
121-
"emails_registered": ["alicia@gmail.com", "monica@gmail.com"]
122-
},
123-
{
124-
"id": "world-congress-2022---barcelona",
125-
"title": "World Congress 2022 - Barcelona",
126-
"city": "barcelona",
127-
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
128-
"image": "https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
129-
"emails_registered": ["alicia@gmail.com", "monica@gmail.com"]
130-
},
131-
{
132-
"id": "riskminds-international",
133-
"title": "RiskMinds International",
134-
"city": "barcelona",
135-
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.",
136-
"image": "https://images.unsplash.com/photo-1591115765373-5207764f72e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
137-
"emails_registered": ["alicia@gmail.com", "monica@gmail.com"]
138-
}
139-
]
140-
}
1+
{"events_categories":[{"id":"london","title":"Events in London","description":"Check out all the events taking place in London. Whether it's the family time you're looking for or want to have some fun with your friends, all sorts of fun events can be found here.","image":"https://images.pexels.com/photos/1796715/pexels-photo-1796715.jpeg"},{"id":"san-francisco","title":"Events in San Francisco","description":"Check out all the events taking place in San Francisco. Whether it's the family time you're looking for or want to have some fun with your friends, all sorts of fun events can be found here.","image":"https://images.pexels.com/photos/3688579/pexels-photo-3688579.jpeg"},{"id":"barcelona","title":"Events in Barcelona","description":"Check out all the events taking place in Barcelona. Whether it's the family time you're looking for or want to have some fun with your friends, all sorts of fun events can be found here.","image":"https://images.pexels.com/photos/1386444/pexels-photo-1386444.jpeg"}],"allEvents":[{"id":"london-comic-con-winter","title":"London Comic Con Winter","city":"london","description":"London Comic Con Winter is coming to Olympia over the weekend of 18-19 November 2023. We will be bringing you the Stars of Film & TV for you to meet, get their autographs & have your photo taken with them! All this will be taking place at the historic Olympia London.","image":"https://londoncomicconwinter.com/wp-content/uploads/2022/04/LFCC-July-19-2371-Cosplay-560x420.jpg","emails_registered":[]},{"id":"new-years-eve-in-london-2023","title":"New Years Eve in London 2023","city":"london","description":"Celebrate New Years Eve in the heart of London!","image":"https://images.unsplash.com/photo-1521478413868-1bbd982fa4a5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80","emails_registered":[]},{"id":"'edtech-world-summit-2023","title":"EdTech World Summit 2023","city":"london","description":"We are delighted to announce 2023 keynotes and speakers including Google, British Council, PanOpen, SOAS, Bournemouth University and more!","image":"https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80","emails_registered":["rachel@gmail.com","monica@gmail.com"]},{"id":"kiss-haunted-house-party-2022","title":"KISS Haunted House Party 2022","city":"london","description":"Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.","image":"https://wembleypark.com/media/images/KISS-HHP-42-1440x810-Logos-Date-de.2e16d0ba.fill-496x279.jpg","emails_registered":[]},{"id":"sf-blockchain-week","title":"SF Blockchain Week","city":"san-francisco","description":"Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.","image":"https://images.unsplash.com/photo-1516245834210-c4c142787335?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80","emails_registered":["","","","laura@gmail.com","laura@gmail.com","laura@gmail.com"]},{"id":"innovation-summit-san-francisco","title":"Innovation Summit San Francisco","city":"san-francisco","description":"Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.","image":"https://images.unsplash.com/photo-1521464302861-ce943915d1c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80","emails_registered":["masuya444@gmail.com","asdaf","asdaf@","alicia@gmail.com","","rome@gmail.com"]},{"id":"fan-expo-san-francisco","title":"FAN EXPO San Francisco","city":"san-francisco","description":"Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.","image":"https://images.unsplash.com/photo-1608889825103-eb5ed706fc64?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80","emails_registered":[]},{"id":"san-francisco-opera---san-francisco-tickets","title":"San Francisco Opera - San Francisco Tickets","city":"san-francisco","description":"Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.","image":"https://images.unsplash.com/photo-1580809361436-42a7ec204889?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80","emails_registered":[]},{"id":"concert-christian-löffler-+-detect-ensemble","title":"Concert Christian Löffler + Detect Ensemble","city":"barcelona","description":"Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.","image":"https://images.unsplash.com/photo-1478147427282-58a87a120781?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80","emails_registered":["alicia@gmail.com","monica@gmail.com"]},{"id":"the-halloween-house-party","title":"The Halloween House Party","city":"barcelona","description":"Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.","image":"https://images.unsplash.com/photo-1587407627257-27b7127c868c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80","emails_registered":["alicia@gmail.com","monica@gmail.com","david@yahoo.com","claire@ss.com"]},{"id":"international-conference-on-industrial-design","title":"International Conference on Industrial Design","city":"barcelona","description":"Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.","image":"https://images.unsplash.com/photo-1475721027785-f74eccf877e2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80","emails_registered":["alicia@gmail.com","monica@gmail.com"]},{"id":"world-congress-2022---barcelona","title":"World Congress 2022 - Barcelona","city":"barcelona","description":"Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.","image":"https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80","emails_registered":["alicia@gmail.com","monica@gmail.com"]},{"id":"riskminds-international","title":"RiskMinds International","city":"barcelona","description":"Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscisfa.","image":"https://images.unsplash.com/photo-1591115765373-5207764f72e7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80","emails_registered":["alicia@gmail.com","monica@gmail.com"]}]}

‎pages/api/email-registration.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import path from "path";
2+
import fs from "fs";
3+
4+
// Build path to our data to access it
5+
const buildPath = () => path.join(process.cwd(), "data", "events.json");
6+
7+
const handler = (req, res) => {
8+
const { method } = req;
9+
const filePath = buildPath();
10+
11+
// Access our data
12+
const extractData = (filePath) => {
13+
const jsonData = fs.readFileSync(filePath);
14+
return JSON.parse(jsonData);
15+
};
16+
17+
// Extract AllEvents from our data
18+
const { events_categories, allEvents } = extractData(filePath);
19+
20+
// 404 response if there are no AllEvents
21+
if (!allEvents) {
22+
return res.status(404).json({
23+
message: "Event Data Not Found",
24+
});
25+
}
26+
27+
if (method === "POST") {
28+
const { email, eventID } = req.body;
29+
30+
// check format of email is correct
31+
if (!email | !email.includes("@") | !email.includes(".com")) {
32+
res.status(422).json({
33+
message: "Invalid email address",
34+
});
35+
}
36+
37+
// Loop through AllEvents and identify the eventID
38+
const newAllEvents = allEvents.map((event) => {
39+
if (event.id === eventID) {
40+
if (event.emails_registered.includes(email)) {
41+
res.status(409).json({
42+
message: "This email has already been registered.",
43+
});
44+
return event;
45+
}
46+
return {
47+
...event,
48+
emails_registered: [...event.emails_registered, email],
49+
};
50+
}
51+
return event;
52+
});
53+
54+
// add email to emails_registered (write on data) only if email doesn't exist
55+
fs.writeFileSync(
56+
filePath,
57+
JSON.stringify({ events_categories, allEvents: newAllEvents })
58+
);
59+
60+
res.status(201).json({
61+
message: `You are successfully registered with the email: ${email} for the event`,
62+
});
63+
}
64+
};
65+
66+
export default handler;

‎pages/events/[category]/[id].js‎

Lines changed: 87 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,101 @@
11
import Image from "next/image";
2-
import React from "react";
2+
import { useRouter } from "next/router";
3+
import { useRef, useState } from "react";
34

45
export const getStaticPaths = async () => {
5-
const { allEvents } = await import("../../../data/events.json");
6-
7-
const allPaths = allEvents.map((e) => {
8-
return {
9-
params: {
10-
// This is for the [id] folder
11-
category: e.city,
12-
// This is for the [id].js
13-
id: e.id
14-
}
15-
};
16-
});
17-
18-
return {
19-
paths: allPaths,
20-
fallback: false
21-
};
6+
const { allEvents } = await import("../../../data/events.json");
7+
8+
const allPaths = allEvents.map((e) => {
9+
return {
10+
params: {
11+
// This is for the [id] folder
12+
category: e.city,
13+
// This is for the [id].js
14+
id: e.id,
15+
},
16+
};
17+
});
18+
19+
return {
20+
paths: allPaths,
21+
fallback: false,
22+
};
2223
};
2324

2425
export const getStaticProps = async (context) => {
25-
const id = context.params.id;
26+
const id = context.params.id;
2627

27-
const { allEvents } = await import("../../../data/events.json");
28-
const data = allEvents.find((e) => e.id === id);
28+
const { allEvents } = await import("../../../data/events.json");
29+
const data = allEvents.find((e) => e.id === id);
2930

30-
return {
31-
props: { data }
32-
};
31+
return {
32+
props: { data },
33+
};
3334
};
3435

36+
// Event JSX function
3537
const Event = ({ data }) => {
36-
const submitFunction = () => {};
37-
return (
38-
<>
39-
<div className="event">
40-
<h1>{data.title}</h1>
41-
<Image src={data.image} alt={data.id} width={600} height={200} />
42-
<p>{data.description}</p>
43-
<br />
44-
<br />
45-
<form onSubmit={submitFunction} className="email_registration">
46-
<label htmlFor="email">Get registered for the event:</label>
47-
<input type="email" id="email" placeholder="Enter Email ID" />
48-
<button type="button">Submit</button>
49-
</form>
50-
</div>
51-
</>
52-
);
38+
const inputEmail = useRef();
39+
const router = useRouter();
40+
const [message, setMessage] = useState("");
41+
42+
const submitFunction = async (e) => {
43+
e.preventDefault();
44+
const emailValue = inputEmail.current.value;
45+
const eventID = router?.query.id;
46+
47+
const validEmail =
48+
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
49+
50+
if (!emailValue.match(validEmail)) {
51+
setMessage("Please add correct email address");
52+
}
53+
54+
try {
55+
// POST fetch request
56+
const response = await fetch("/api/email-registration", {
57+
method: "POST",
58+
body: JSON.stringify({ email: emailValue, eventID }),
59+
headers: {
60+
"Content-Type": "application/json",
61+
},
62+
// getting data from response
63+
});
64+
65+
if (!response.ok) {
66+
throw new Error(`Error: ${response.status} - ${response.statusText}`);
67+
}
68+
69+
const data = await response.json();
70+
71+
setMessage(data.message);
72+
inputEmail.current.value = "";
73+
} catch (error) {
74+
console.log(error);
75+
}
76+
};
77+
return (
78+
<>
79+
<div className="event">
80+
<h1>{data.title}</h1>
81+
<Image src={data.image} alt={data.id} width={600} height={200} />
82+
<p>{data.description}</p>
83+
<br />
84+
<br />
85+
<form onSubmit={submitFunction} className="email_registration">
86+
<label htmlFor="email">Get registered for the event:</label>
87+
<input
88+
ref={inputEmail}
89+
type="email"
90+
id="email"
91+
placeholder="Enter Email ID"
92+
/>
93+
<button type="submit">Submit</button>
94+
</form>
95+
{message.toUpperCase()}
96+
</div>
97+
</>
98+
);
5399
};
54100

55101
export default Event;

‎pages/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import HomePage from "../src/components/home/HomePage";
22

33
// Should be used for data that is fetched at request time only.
44
export const getServerSideProps = async () => {
5-
const { events_categories } = await import("../data/events.json");
5+
const { events_categories } = await import("../data/events.json");
66

7-
return {
8-
props: {
9-
data: events_categories
10-
}
11-
};
7+
return {
8+
props: {
9+
data: events_categories,
10+
},
11+
};
1212
};
1313

1414
const Home = ({ data }) => <HomePage data={data} />;

0 commit comments

Comments
 (0)