Skip to content

Commit 39b984a

Browse files
Knighton910Knighton910
authored
Merge pull request #68 from cleanbot-io/subscribe
Subscribe
2 parents de84585 + 34387cb commit 39b984a

File tree

5 files changed

+761
-29
lines changed

5 files changed

+761
-29
lines changed

‎app/layout.js‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
1-
import './globals.css'
2-
import { Inter } from 'next/font/google'
1+
import "./globals.css";
2+
import { Inter } from "next/font/google";
3+
import "react-toastify/dist/ReactToastify.css";
4+
import { ToastContainer } from "react-toastify";
35

4-
const inter = Inter({ subsets: ['latin'] })
6+
const inter = Inter({ subsets: ["latin"] });
57

68
export const metadata = {
7-
title: 'Cleabot',
8-
description: 'A house-keeping subscription service',
9-
}
9+
title: "Cleabot",
10+
description: "A house-keeping subscription service",
11+
};
1012

1113
export default function RootLayout({ children }) {
1214
return (
1315
<html lang="en">
14-
<body className={inter.className}>{children}</body>
16+
<body className={inter.className}>
17+
<ToastContainer />
18+
{children}
19+
</body>
1520
</html>
16-
)
17-
}
21+
);
22+
}

‎components/Subscribe.jsx‎

Lines changed: 63 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,70 @@
1-
import React from 'react';
1+
"use client";
2+
3+
import React, { useState } from "react";
4+
import { collection, addDoc, query, where, getDocs } from "firebase/firestore";
5+
import { db } from "../firebase/firebase";
6+
import { toast } from "react-toastify";
7+
8+
function Subscribe() {
9+
const [email, setEmail] = useState("");
10+
const [loading, setLoading] = useState(false);
11+
12+
const handleSubscribe = async () => {
13+
if (!email) {
14+
toast.error("Please enter a valid email");
15+
return;
16+
}
17+
18+
setLoading(true);
19+
20+
try {
21+
// Query Firestore to check if the email already exists
22+
const q = query(collection(db, "users"), where("email", "==", email));
23+
const querySnapshot = await getDocs(q);
24+
25+
if (!querySnapshot.empty) {
26+
toast.error("This email is already subscribed!");
27+
} else {
28+
// Add the email to the Firestore collection if it's not already there
29+
await addDoc(collection(db, "users"), { email });
30+
toast.success("Subscribed successfully!");
31+
setEmail(""); // Clear input after success
32+
}
33+
} catch (error) {
34+
console.error("Error subscribing:", error);
35+
toast.error("Failed to subscribe. Try again!");
36+
} finally {
37+
setLoading(false);
38+
}
39+
};
240

3-
function Subscribe()
4-
{
541
return (
642
<div className="relative bg-custom-blue flex flex-col items-baseline justify-center p-40 gap-4 rounded-md">
7-
<h2 className="text-2xl text-white font-bold">Subscribe for Updates</h2>
8-
<div className="relative">
9-
<div className="relative flex">
10-
<input
11-
type="email"
12-
placeholder="Enter your email"
13-
className="p-3 pl-4 pr-32 border border-white rounded-full"
14-
/>
15-
<button className="absolute right-1 top-1 bg-black text-white text-custom-blue p-2 pl-6 pr-6 rounded-full">
16-
Subscribe
17-
</button>
18-
</div>
43+
<h2 className="text-2xl text-white font-bold">Subscribe for Updates</h2>
44+
<div className="relative">
45+
<div className="relative flex">
46+
<input
47+
type="email"
48+
value={email}
49+
onChange={(e) => setEmail(e.target.value)}
50+
placeholder="Enter your email"
51+
className="p-3 pl-4 pr-32 border border-white rounded-full"
52+
disabled={loading}
53+
/>
54+
<button
55+
className="absolute right-1 top-1 bg-black text-white text-custom-blue p-2 pl-6 pr-6 rounded-full"
56+
onClick={handleSubscribe}
57+
disabled={loading}
58+
>
59+
{loading ? "Subscribing..." : "Subscribe"}
60+
</button>
1961
</div>
20-
<p className="text-white">Be the first to hear about our newest product updates!</p>
62+
</div>
63+
<p className="text-white">
64+
Be the first to hear about our newest product updates!
65+
</p>
2166
</div>
2267
);
23-
};
68+
}
2469

25-
export default Subscribe;
70+
export default Subscribe;

‎firebase/firebase.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { initializeApp } from "firebase/app";
2+
import { getFirestore } from "firebase/firestore";
3+
4+
const firebaseConfig = {
5+
apiKey: "AIzaSyAckXNF3yhKHVtyZrMoK-HMqQfbfjEJCxU",
6+
authDomain: "cb-landingpage.firebaseapp.com",
7+
projectId: "cb-landingpage",
8+
storageBucket: "cb-landingpage.appspot.com",
9+
messagingSenderId: "526284433056",
10+
appId: "1:526284433056:web:16cf76b19e7d19cfbecbc5",
11+
measurementId: "G-HHS1YYY0K1"
12+
};
13+
14+
// Initialize Firebase
15+
const app = initializeApp(firebaseConfig);
16+
17+
// Initialize Firestore
18+
const db = getFirestore(app);
19+
20+
export { db };

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"autoprefixer": "10.4.16",
1616
"eslint": "8.49.0",
1717
"eslint-config-next": "13.5.2",
18+
"firebase": "^10.14.0",
1819
"next": "^14.0.1",
1920
"postcss": "8.4.30",
2021
"react": "18.2.0",
@@ -23,6 +24,7 @@
2324
"react-social-icons": "^6.10.0",
2425
"react-swipeable-views": "^0.14.0",
2526
"react-three-fiber": "^6.0.13",
27+
"react-toastify": "^10.0.5",
2628
"tailwindcss": "3.3.3",
2729
"three": "^0.157.0"
2830
},

0 commit comments

Comments
 (0)