Skip to content

Commit

Permalink
Merge pull request #69 from satmm/invalid-ClippyID-notification
Browse files Browse the repository at this point in the history 
Added react-toastify for invalid ClippyID notification
  • Loading branch information
@subinoybiswas
subinoybiswas authored Jun 18, 2024
2 parents 648c9a2 + 7c0e5b0 commit a226074
Show file tree
Hide file tree
Showing 5 changed files with 211 additions and 58 deletions.
22 changes: 19 additions & 3 deletions app/api/createClippy/route.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import { NextResponse } from "next/server";
import { MongoClient } from "mongodb";
import dotenv from 'dotenv';

dotenv.config();

export async function POST(req: Request) {
const request = await req.json();
console.log("Got Request for", request);

function generateRandomString() {
const randomNumber =
Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000;
Expand All @@ -19,6 +22,19 @@ export async function POST(req: Request) {
const uri = process.env.MONGO_URI as string;
const dbname = process.env.MONGO_DB_NAME as string;
const dbcollection = process.env.MONGO_COLLECTION_NAME as string;

console.log('MONGO_URI:', uri);
console.log('MONGO_DB_NAME:', dbname);
console.log('MONGO_COLLECTION_NAME:', dbcollection);

if (!uri || !dbname || !dbcollection) {
console.error("MongoDB environment variables are not defined");
return NextResponse.json(
{ error: "Internal Server Error" },
{ status: 500 }
);
}

const client = new MongoClient(uri);
try {
await client.connect();
Expand All @@ -34,14 +50,14 @@ export async function POST(req: Request) {
};
await collection.insertOne(entry);

await client.close();

return NextResponse.json({ id: id });
} catch (error) {
console.error(error);
console.error("Error creating Clippy:", error);
return NextResponse.json(
{ error: "Internal Server Error" },
{ status: 500 }
);
} finally {
await client.close();
}
}
41 changes: 31 additions & 10 deletions app/api/getPage/route.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,39 @@
import { MongoClient } from "mongodb";
import { NextResponse } from "next/server";
import dotenv from 'dotenv';

export async function POST(req: Request) {
const request = await req.json();
console.log("Got Request for", request);
const uri = process.env.MONGO_URI as string;
const dbname = process.env.MONGO_DB_NAME as string;
const dbcollection = process.env.MONGO_COLLECTION_NAME as string;
const client = new MongoClient(uri);
dotenv.config();

export async function POST(req: Request) {
try {
const request = await req.json();
console.log("Got Request for", request);

const uri = process.env.MONGO_URI;
const dbname = process.env.MONGO_DB_NAME;
const dbcollection = process.env.MONGO_COLLECTION_NAME;

if (!uri || !dbname || !dbcollection) {
console.error("MongoDB environment variables are not defined");
return NextResponse.json(
{ error: "Internal Server Error" },
{ status: 500 }
);
}

console.log('MONGO_URI:', uri);
console.log('MONGO_DB_NAME:', dbname);
console.log('MONGO_COLLECTION_NAME:', dbcollection);

const client = new MongoClient(uri);

await client.connect();
const database = client.db(dbname);
const collection = database.collection(dbcollection);

const result = await collection.findOne({ id: request.clippyId });
await client.close();

if (result) {
console.log("Result", result);
return NextResponse.json({ content: result });
Expand All @@ -23,8 +42,10 @@ export async function POST(req: Request) {
return NextResponse.json({ content: null }, { status: 404 });
}
} catch (error) {
console.error(error);
} finally {
await client.close();
console.error("Error fetching Clippy:", error);
return NextResponse.json(
{ error: "Internal Server Error" },
{ status: 500 }
);
}
}
122 changes: 77 additions & 45 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { NextUIProvider } from "@nextui-org/react";
import { Divider } from "@nextui-org/react";
import { useRouter } from "next/navigation";
import { GrPowerReset } from "react-icons/gr";
import { useEffect, useRef, useState } from "react";
import { useEffect, useState } from "react";
import { UploadDropzone } from "@/app/utils/uploadthing";
import {
Modal,
Expand All @@ -15,10 +15,12 @@ import {
useDisclosure,
} from "@nextui-org/react";
import emailjs from '@emailjs/browser';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

import Instruction from "./components/Instruction";
import Footer from "./components/Footer";
import { FaEnvelope } from "react-icons/fa"; // Changed icon to envelope for email
import { FaEnvelope } from "react-icons/fa";

export default function Home() {
const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure();
Expand All @@ -33,43 +35,77 @@ export default function Home() {
const [isEmpty, setIsEmpty] = useState(false);
const [review, setReview] = useState(false);
const [message, setMessage] = useState(""); // New state for message
const [email, setemail] = useState("");
const [email, setEmail] = useState("");
const [name, setName] = useState("");

const createClippy = async ({ text, url }: { text: string; url: string }) => {
setLoading(true);
if (text.length == 0 && !url) {
if (text.length === 0 && !url) {
setIsEmpty(true);
setLoading(false);
return;
}
setSubmitted(true);
const data = await fetch("/api/createClippy", {
method: "POST",
body: JSON.stringify({ text: text, url: url }),
});
const response = await data.json();
setCode(response.id);
setLoading(false);
try {
const response = await fetch("/api/createClippy", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ text, url }),
});
const data = await response.json();
setCode(data.id);
} catch (error) {
console.error("Error creating Clippy:", error);
} finally {
setLoading(false);
}
};


const sendEmail = (e:any) => {
const sendEmail = (e: any) => {
e.preventDefault();
var templateParams = {
name: name,
user_email:email,
message:message
user_email: email,
message: message,
};
emailjs.send(process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID!,process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID!, templateParams,{
publicKey:process.env.NEXT_PUBLIC_EMAILJS_API_KEY,
})
emailjs.send(
process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID!,
process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID!,
templateParams,
{
publicKey: process.env.NEXT_PUBLIC_EMAILJS_API_KEY,
}
).then((response) => {
console.log('SUCCESS!', response.status, response.text);
}).catch((error) => {
console.error('FAILED...', error);
});
};

const getPage = async (clippyId: string) => {
try {
const response = await fetch("/api/getPage", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ clippyId }),
});
const data = await response.json();

const getPage = (clippyId: string) => {
router.push(`/${clippyId}`);
if (response.status === 404) {
toast.error("This ClippyID does not exist!");
} else {
router.push(`/${clippyId}`);
}
} catch (error) {
console.error("Error fetching Clippy:", error);
toast.error("An error occurred while fetching the Clippy data.");
}
};

const handleClippyIdChange = (e: any) => {
const input = e.target.value;
const numericInput = input.replace(/[^\d]/g, "");
Expand All @@ -83,11 +119,13 @@ export default function Home() {
const isBackspace = e.nativeEvent.inputType === "deleteContentBackward";
setClippyId(isBackspace ? numericInput : formattedInput);
};

useEffect(() => {
if (text.length > 0 || url.length > 0) {
setIsEmpty(false);
}
}, [text, url]);

const toggleInstruction = () => {
setShowInstruction((prev) => !prev);
};
Expand All @@ -98,15 +136,14 @@ export default function Home() {

return (
<NextUIProvider>

<ToastContainer />
<main className="flex min-h-screen flex-col items-center align-middle justify-between p-24 background content-center w-full">
<div className="flex flex-col relative gap-2 items-center w-[95vw] md:w-3/4 lg:w-1/2 bg-slate-200/50 p-5 rounded-3xl ">

{/* Instruction activate button */}
<div
onClick={() => setReview(true)}
className="invisible sm:visible fixed right-10 z-20 bottom-24 bg-white bg-opacity-80 rounded-full py-2 px-4 text-black text-xl hover:bg-opacity-100 cursor-pointer font-bold"
style={{padding: "14px 14px"}}
style={{ padding: "14px 14px" }}
>
<FaEnvelope size={18} />
</div>
Expand Down Expand Up @@ -144,9 +181,7 @@ export default function Home() {
/>
{isEmpty && (
<div className="inline-flex items-center justify-between h-fit gap-2 px-3 py-1.5 text-small rounded-medium bg-default/40 text-default-foreground">

<pre className="text-red-700 font-medium text-lg bg-transparent text-inherit font-mono inline-block whitespace-nowrap">

<span className="select-none"></span>
Please Enter Clippy or Upload Any File
</pre>
Expand Down Expand Up @@ -224,22 +259,22 @@ export default function Home() {
Review
</ModalHeader>
<ModalBody className="p-4">
<Input
type="text"
label="Enter Your Name"
value={name}
onChange={(e) => {
setName(e.target.value);
}}
/>
<Input
type="email"
label="Enter Email"
value={email}
onChange={(e) => {
setemail(e.target.value);
}}
/>
<Input
type="text"
label="Enter Your Name"
value={name}
onChange={(e) => {
setName(e.target.value);
}}
/>
<Input
type="email"
label="Enter Email"
value={email}
onChange={(e) => {
setEmail(e.target.value);
}}
/>
<Textarea
label="Your Review"
value={message}
Expand All @@ -250,10 +285,7 @@ export default function Home() {
/>
</ModalBody>
<ModalFooter>
<Button
color="primary"
onClick={sendEmail}
>
<Button color="primary" onClick={sendEmail}>
Send Email
</Button>
</ModalFooter>
Expand Down
Loading

0 comments on commit a226074

Please sign in to comment.