Skip to content

Commit 46fe20f

Browse files
solygambassolygambas
committed
add finished react meetups
1 parent 360fc1d commit 46fe20f

33 files changed

+2514
-94
lines changed

‎04-reactmeetups/.gitignore

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel
35+
36+
# vscode
37+
.vscode

‎04-reactmeetups/README.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# React Events
2+
3+
...
4+
5+
[See Demo deployed on Vercel](#)
6+
7+
<p align="center">
8+
<img src="screenshot.png">
9+
</p>
10+
11+
## Features
12+
13+
- ...
14+
15+
Based on [NextJS & React - The Complete Guide](https://www.udemy.com/course/nextjs-react-the-complete-guide/) by Maximilian Schwarzmüller (2021).

‎components/layout/layout.js renamed to ‎04-reactmeetups/components/layout/Layout.js

File renamed without changes.

‎components/layout/Layout.module.css renamed to ‎04-reactmeetups/components/layout/Layout.module.css

File renamed without changes.

‎components/layout/MainNavigation.js renamed to ‎04-reactmeetups/components/layout/MainNavigation.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function MainNavigation() {
66
return (
77
<header className={classes.header}>
88
<div className={classes.logo}>
9-
<Link href="/">Meetups</Link>
9+
<Link href="/">React Meetups</Link>
1010
</div>
1111
<nav>
1212
<ul>

‎components/layout/MainNavigation.module.css renamed to ‎04-reactmeetups/components/layout/MainNavigation.module.css

File renamed without changes.

‎components/meetups/MeetupDetail.js renamed to ‎04-reactmeetups/components/meetups/MeetupDetail.js

File renamed without changes.

‎components/meetups/MeetupDetail.module.css renamed to ‎04-reactmeetups/components/meetups/MeetupDetail.module.css

File renamed without changes.

‎components/meetups/MeetupItem.js renamed to ‎04-reactmeetups/components/meetups/MeetupItem.js

File renamed without changes.

‎components/meetups/MeetupItem.module.css renamed to ‎04-reactmeetups/components/meetups/MeetupItem.module.css

File renamed without changes.

‎components/meetups/MeetupList.js renamed to ‎04-reactmeetups/components/meetups/MeetupList.js

File renamed without changes.

‎components/meetups/MeetupList.module.css renamed to ‎04-reactmeetups/components/meetups/MeetupList.module.css

File renamed without changes.

‎components/meetups/NewMeetupForm.js renamed to ‎04-reactmeetups/components/meetups/NewMeetupForm.js

File renamed without changes.

‎components/meetups/NewMeetupForm.module.css renamed to ‎04-reactmeetups/components/meetups/NewMeetupForm.module.css

File renamed without changes.

‎components/ui/Card.js renamed to ‎04-reactmeetups/components/ui/Card.js

File renamed without changes.

‎components/ui/Card.module.css renamed to ‎04-reactmeetups/components/ui/Card.module.css

File renamed without changes.

‎package.json renamed to ‎04-reactmeetups/package.json

File renamed without changes.

‎04-reactmeetups/pages/[meetupId]/index.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { MongoClient, ObjectId } from "mongodb";
2+
3+
import { Fragment } from "react";
4+
import Head from "next/head";
5+
6+
import MeetupDetail from "../../components/meetups/MeetupDetail";
7+
8+
function MeetupDetailsPage(props) {
9+
return (
10+
<Fragment>
11+
<Head>
12+
<title>{props.meetupData.title} | React Meetups</title>
13+
<meta name="description" content={props.meetupData.description} />
14+
</Head>
15+
<MeetupDetail
16+
title={props.meetupData.title}
17+
address={props.meetupData.address}
18+
description={props.meetupData.description}
19+
image={props.meetupData.image}
20+
/>
21+
</Fragment>
22+
);
23+
}
24+
25+
export async function getStaticProps(context) {
26+
const meetupId = context.params.meetupId;
27+
const connectionString =
28+
process.env.MONGODB_ATLAS + "meetups?retryWrites=true&w=majority";
29+
const client = await MongoClient.connect(connectionString);
30+
const db = client.db();
31+
const meetupsCollection = db.collection("meetups");
32+
const selectedMeetup = await meetupsCollection.findOne({
33+
_id: ObjectId(meetupId),
34+
});
35+
client.close();
36+
return {
37+
props: {
38+
meetupData: {
39+
id: selectedMeetup._id.toString(),
40+
title: selectedMeetup.title,
41+
address: selectedMeetup.address,
42+
image: selectedMeetup.image,
43+
description: selectedMeetup.description,
44+
},
45+
},
46+
revalidate: 3600,
47+
};
48+
}
49+
50+
export async function getStaticPaths() {
51+
const connectionString =
52+
process.env.MONGODB_ATLAS + "meetups?retryWrites=true&w=majority";
53+
const client = await MongoClient.connect(connectionString);
54+
const db = client.db();
55+
const meetupsCollection = db.collection("meetups");
56+
const meetups = await meetupsCollection.find({}, { _id: 1 }).toArray(); // only fetching ids
57+
client.close();
58+
return {
59+
paths: meetups.map((meetup) => ({
60+
params: { meetupId: meetup._id.toString() },
61+
})),
62+
fallback: "blocking",
63+
};
64+
}
65+
66+
export default MeetupDetailsPage;

‎pages/_app.js renamed to ‎04-reactmeetups/pages/_app.js

File renamed without changes.

‎04-reactmeetups/pages/api/new-meetup.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { MongoClient } from "mongodb";
2+
3+
const connectionString =
4+
process.env.MONGODB_ATLAS + "meetups?retryWrites=true&w=majority";
5+
6+
async function handler(req, res) {
7+
if (req.method === "POST") {
8+
const data = req.body;
9+
10+
const client = await MongoClient.connect(connectionString);
11+
const db = client.db();
12+
13+
const meetupsCollection = db.collection("meetups");
14+
const result = await meetupsCollection.insertOne(data);
15+
res.status(201).json({ message: "Meetup inserted!" });
16+
client.close();
17+
}
18+
}
19+
20+
export default handler;

‎04-reactmeetups/pages/index.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { MongoClient } from "mongodb";
2+
3+
import { Fragment } from "react";
4+
import Head from "next/head";
5+
6+
import MeetupList from "../components/meetups/MeetupList";
7+
8+
// const DUMMY_MEETUPS = [
9+
// {
10+
// id: "m1",
11+
// title: "A First Meetup",
12+
// image: "/images/m1.jpg",
13+
// address: "85 S. Edgemont Street, Crawfordsville, IN 47933",
14+
// description: "This is a first meetup!",
15+
// },
16+
// {
17+
// id: "m2",
18+
// title: "A Second Meetup",
19+
// image: "/images/m2.jpg",
20+
// address: "7718 Ann Court, Greensburg, PA 15601",
21+
// description: "This is a second meetup!",
22+
// },
23+
// ];
24+
25+
function HomePage(props) {
26+
return (
27+
<Fragment>
28+
<Head>
29+
<title>React Meetups</title>
30+
<meta
31+
name="description"
32+
content="Browse a huge list of highly active React meetups!"
33+
/>
34+
</Head>
35+
<MeetupList meetups={props.meetups} />
36+
</Fragment>
37+
);
38+
}
39+
40+
// On every request
41+
// export async function getServerSideProps(context) {
42+
// const req = context.req;
43+
// const res = context.res;
44+
// return {
45+
// props: {
46+
// meetups: DUMMY_MEETUPS,
47+
// },
48+
// };
49+
// }
50+
51+
// During build process
52+
export async function getStaticProps() {
53+
const connectionString =
54+
process.env.MONGODB_ATLAS + "meetups?retryWrites=true&w=majority";
55+
const client = await MongoClient.connect(connectionString);
56+
const db = client.db();
57+
const meetupsCollection = db.collection("meetups");
58+
const meetups = await meetupsCollection.find().toArray();
59+
client.close();
60+
return {
61+
props: {
62+
meetups: meetups.map((meetup) => ({
63+
id: meetup._id.toString(),
64+
title: meetup.title,
65+
address: meetup.address,
66+
image: meetup.image,
67+
})),
68+
// meetups: DUMMY_MEETUPS,
69+
},
70+
revalidate: 60,
71+
};
72+
}
73+
74+
export default HomePage;

‎04-reactmeetups/pages/new-meetup/index.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { useRouter } from "next/router";
2+
import { Fragment } from "react";
3+
import Head from "next/head";
4+
5+
import NewMeetupForm from "../../components/meetups/NewMeetupForm";
6+
7+
function NewMeetupPage() {
8+
const router = useRouter();
9+
async function addMeetupHandler(enteredMeetupData) {
10+
const response = await fetch("/api/new-meetup", {
11+
method: "POST",
12+
body: JSON.stringify(enteredMeetupData),
13+
headers: { "Content-Type": "application/json" },
14+
});
15+
const data = await response.json();
16+
router.push("/");
17+
}
18+
return (
19+
<Fragment>
20+
<Head>
21+
<title>Add New Meetup | React Meetups</title>
22+
<meta
23+
name="description"
24+
content="Add your own meetups and create amazing networking opportunities."
25+
/>
26+
</Head>
27+
<NewMeetupForm onAddMeetup={addMeetupHandler} />
28+
</Fragment>
29+
);
30+
}
31+
32+
export default NewMeetupPage;

‎public/favicon.ico renamed to ‎04-reactmeetups/public/favicon.ico

File renamed without changes.

‎public/images/m1.jpg renamed to ‎04-reactmeetups/public/images/m1.jpg

File renamed without changes.

‎public/images/m2.jpg renamed to ‎04-reactmeetups/public/images/m2.jpg

File renamed without changes.

‎public/vercel.svg renamed to ‎04-reactmeetups/public/vercel.svg

File renamed without changes.

‎04-reactmeetups/screenshot.png

205 KB
Loading

‎styles/globals.css renamed to ‎04-reactmeetups/styles/globals.css

File renamed without changes.

0 commit comments

Comments
 (0)