Skip to content

Commit

Permalink
Merge pull request #47 from Data-Science-Community-SRM/hb/feat/succes…
Browse files Browse the repository at this point in the history 
…s-message

Success message for submissions
  • Loading branch information
@LordHarsh
LordHarsh authored Sep 22, 2024
2 parents 5d1869b + f3800f1 commit 945157a
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 130 deletions.
8 changes: 7 additions & 1 deletion client/src/components/domains/form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,13 @@ import { register } from "@/lib/submitAction";
import { useToast } from "@/hooks/use-toast";

export default function Form({
setShowForm,
setDomainDescription,
subdomains,
domain: domainProp,
}: {
setShowForm: (showForm: boolean) => void;
setDomainDescription: (description: string) => void;
subdomains: string[];
description: string;
domain?: string;
Expand Down Expand Up @@ -44,7 +48,7 @@ export default function Form({
!phoneNumber ||
!department ||
!year ||
(domainProp == 'Technical' || domainProp == 'Research') ||
((domainProp == 'Technical' || domainProp == 'Research') && !github) ||
!subDomain
) {
setError("Please fill all the fields.");
Expand Down Expand Up @@ -81,6 +85,8 @@ export default function Form({
setYear("");
setGithub("");
setSubDomain(subdomains[0]);
setDomainDescription("Thank you for registering! You will receive an email shortly.");
setShowForm(false);
} else {
throw new Error(
`Registration failed: ${
Expand Down
259 changes: 131 additions & 128 deletions client/src/components/domains/lightbox.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,149 +1,152 @@
"use client";
import React, { memo, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import Image from 'next/image';
import { AiOutlineClose } from 'react-icons/ai';
import Form from '@/components/domains/form';
import React, { memo, useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import Image from "next/image";
import { AiOutlineClose } from "react-icons/ai";
import Form from "@/components/domains/form";

type Domain = {
title: string;
description: string;
image: string;
gradient: string;
subdomains: string[];
title: string;
description: string;
image: string;
gradient: string;
subdomains: string[];
};

type LightboxProps = {
domain: Domain | null;
onClose: () => void;
showForm: boolean;
setShowForm: (showForm: boolean) => void;
domain: Domain | null;
onClose: () => void;
showForm: boolean;
setShowForm: (showForm: boolean) => void;
};

const Lightbox: React.FC<LightboxProps> = ({
domain,
onClose,
showForm,
setShowForm,
}) => {
domain,
onClose,
showForm,
setShowForm,
}) => {
const [domainDescription, setDomainDescription] = useState<string>("");
useEffect(() => {
if (domain) {
const currentPath = window.location.pathname.toLowerCase();
const domainTitle = domain.title.toLowerCase();
setDomainDescription(domain.description);

useEffect(() => {
if (domain) {
const currentPath = window.location.pathname.toLowerCase();
const domainTitle = domain.title.toLowerCase();
if (currentPath.includes(domainTitle)) {
setShowForm(true);
}
}
}, [domain, setShowForm]);
if (!domain) return null;

if (currentPath.includes(domainTitle)) {
setShowForm(true);
}
}
}, [domain, setShowForm]);
const containerVariants = {
initial: { opacity: 0, scale: 0.85 },
animate: { opacity: 1, scale: 1 },
exit: { opacity: 0, scale: 0.85 },
};

if (!domain) return null;
const contentVariants = {
initial: { opacity: 0, y: 25 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: -25 },
};

const containerVariants = {
initial: { opacity: 0, scale: 0.85 },
animate: { opacity: 1, scale: 1 },
exit: { opacity: 0, scale: 0.85 },
};
return (
<motion.div
className="fixed inset-0 z-[1001] flex items-center justify-center bg-black bg-opacity-70"
variants={containerVariants}
initial="initial"
animate="animate"
exit="exit"
transition={{ duration: 0.4, ease: "easeInOut" }}
>
<motion.div
className={`relative bg-gradient-to-br from-purple-950 to-purple-900 rounded-lg shadow-lg w-[90vw] max-w-lg ${
showForm ? "max-h-[80vh] overflow-y-auto" : "max-h-[40vh]"
} text-center overflow-hidden`}
initial="initial"
animate="animate"
exit="exit"
layout
transition={{ layout: { duration: 0.6, ease: "easeInOut" } }}
>
<AiOutlineClose
className="absolute top-4 right-4 text-white cursor-pointer text-2xl"
onClick={onClose}
/>

const contentVariants = {
initial: { opacity: 0, y: 25 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: -25 },
};
<Image
src={domain.image}
alt={domain.title}
width={80}
height={80}
className="mx-auto mb-4"
/>
<h2 className="text-white text-xl font-semibold mb-2">
{domain.title}
</h2>
<p className="text-purple-300 text-sm mb-4 px-6">
{domainDescription}
</p>

return (
<motion.div
className="fixed inset-0 z-[1001] flex items-center justify-center bg-black bg-opacity-70"
variants={containerVariants}
initial="initial"
animate="animate"
exit="exit"
transition={{duration: 0.4, ease: 'easeInOut'}}
>
<motion.div
className={`relative bg-gradient-to-br from-purple-950 to-purple-900 rounded-lg shadow-lg w-[90vw] max-w-lg ${
showForm ? 'max-h-[80vh] overflow-y-auto' : 'max-h-[40vh]'
} text-center overflow-hidden`}
<div className="flex justify-center items-center gap-4 p-4">
<AnimatePresence mode="wait">
{!showForm ? (
<motion.div
key="buttons"
initial="initial"
animate="animate"
exit="exit"
layout
transition={{layout: {duration: 0.6, ease: 'easeInOut'}}}
>
<AiOutlineClose
className="absolute top-4 right-4 text-white cursor-pointer text-2xl"
onClick={onClose}
/>

<Image
src={domain.image}
alt={domain.title}
width={80}
height={80}
className="mx-auto mb-4"
variants={contentVariants}
transition={{ duration: 0.4, ease: "easeOut" }}
className="flex space-x-4"
style={{ minHeight: "35px" }}
>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="bg-purple-900 text-white py-1 px-3 rounded-md text-sm"
onClick={() => setShowForm(true)}
>
APPLY
</motion.button>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="bg-purple-800 text-white py-1 px-3 rounded-md text-sm"
onClick={() =>
(window.location.href = `/${domain.title.toLowerCase()}`)
}
>
LEARN MORE
</motion.button>
</motion.div>
) : (
<motion.div
key="form"
initial="initial"
animate="animate"
exit="exit"
variants={contentVariants}
transition={{ duration: 0.4, ease: "easeOut" }}
className="w-full"
style={{ minHeight: "50vh" }}
>
<Form
setShowForm={setShowForm}
setDomainDescription={setDomainDescription}
domain={domain.title}
subdomains={domain.subdomains}
description={domain.description}
/>
<h2 className="text-white text-xl font-semibold mb-2">
{domain.title}
</h2>
<p className="text-purple-300 text-sm mb-4 px-6">{domain.description}</p>

<div className="flex justify-center items-center gap-4 p-4">
<AnimatePresence mode="wait">
{!showForm ? (
<motion.div
key="buttons"
initial="initial"
animate="animate"
exit="exit"
variants={contentVariants}
transition={{duration: 0.4, ease: 'easeOut'}}
className="flex space-x-4"
style={{minHeight: "35px"}}
>
<motion.button
whileHover={{scale: 1.05}}
whileTap={{scale: 0.95}}
className="bg-purple-900 text-white py-1 px-3 rounded-md text-sm"
onClick={() => setShowForm(true)}
>
APPLY
</motion.button>
<motion.button
whileHover={{scale: 1.05}}
whileTap={{scale: 0.95}}
className="bg-purple-800 text-white py-1 px-3 rounded-md text-sm"
onClick={() =>
(window.location.href = `/${domain.title.toLowerCase()}`)
}
>
LEARN MORE
</motion.button>
</motion.div>
) : (
<motion.div
key="form"
initial="initial"
animate="animate"
exit="exit"
variants={contentVariants}
transition={{duration: 0.4, ease: 'easeOut'}}
className="w-full"
style={{minHeight: "50vh"}}
>
<Form
domain={domain.title}
subdomains={domain.subdomains}
description={domain.description}
/>
</motion.div>
)}
</AnimatePresence>
</div>
</motion.div>
</motion.div>

);
</motion.div>
)}
</AnimatePresence>
</div>
</motion.div>
</motion.div>
);
};

export default memo(Lightbox);
export default memo(Lightbox);
2 changes: 1 addition & 1 deletion server/src/api/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default (): Router => {
app.use('/test', testRouter());
app.use('/technical', technicalRouter());
app.use('/corporate', corporateRouter());
app.use("/creative", creativeRouter());
app.use("/creatives", creativeRouter());
app.use("/research", researchRouter());
return app;
};
Expand Down

0 comments on commit 945157a

Please sign in to comment.