diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index abec827..0e25ced 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -1,41 +1,48 @@ import { Link } from "react-router-dom"; -import './navbar.scss' +import "./navbar.scss"; import { useContext, useEffect, useRef } from "react"; import { SessionContext, supabase } from "../supabase"; export default function NavBar() { - const session = useContext(SessionContext); + const session = useContext(SessionContext); - const nref = useRef(null); - useEffect(() => { - document - .querySelector(":root")! - .style.setProperty( - "--nav-height", - nref.current!.offsetHeight.toString() + "px" - ) - }) + const nref = useRef(null); + useEffect(() => { + document + .querySelector(":root")! + .style.setProperty( + "--nav-height", + nref.current!.offsetHeight.toString() + "px", + ); + }); + + return ( + + ); +} - return ( - - ) -} \ No newline at end of file diff --git a/src/pages/apply.tsx b/src/pages/apply.tsx index 7ba5939..a5c312e 100644 --- a/src/pages/apply.tsx +++ b/src/pages/apply.tsx @@ -1,339 +1,356 @@ - - -import { ErrorMessage, Field, FieldArray, Form, Formik } from 'formik'; -import './mainbg.scss'; -import './apply.scss' -import { createContext, Fragment, useContext, useEffect, useState } from 'react'; -import { SessionContext, supabase } from '../supabase'; -import { useNavigate } from 'react-router-dom'; +import { ErrorMessage, Field, FieldArray, Form, Formik } from "formik"; +import "./mainbg.scss"; +import "./apply.scss"; +import { + createContext, + Fragment, + useContext, + useEffect, + useState, +} from "react"; +import { SessionContext, supabase } from "../supabase"; +import { useNavigate } from "react-router-dom"; // import { useEffect, useRef } from 'react'; const departments = { - management: "Management", - mms: "Marketing and Sponsorhips", - cont: "Content", - tech_dev: "Technical - Development", - tech_linux: "Technical - Linux", - tech_cyber: "Technical - Cybersecurity", - meda_social: "Media - Social Media Management", - media_des: "Media - Designing and Editing", - media_photo: "Media - Event Photography" -} + management: "Management", + mms: "Marketing and Sponsorhips", + cont: "Content", + tech_dev: "Technical - Development", + tech_linux: "Technical - Linux", + tech_cyber: "Technical - Cybersecurity", + meda_social: "Media - Social Media Management", + media_des: "Media - Designing and Editing", + media_photo: "Media - Event Photography", +}; -const questions: {[key: string]: (string | any)[] | undefined} = { - tech_dev: [ - "What is your field of expertise in development?", - "What development frameworks or technologies do you use? (eg: React, Python. NoSQL etc.)", - "Links to your github or any hosted projects", - "Did you notice any issues in this platform or possible ways to make it better? Describe with as technical detail as possible", - "Any bugfix you did in the past, that demonstrates your problem solving ability.", - ], - tech_linux: [ - "What is a swap?", - "Under what user does /usr/bin/passwd run?", - "Interpret the permission given by chmod 4776", - 'What is "top -i"?', - "What is secure boot?", - ], - tech_cyber: [ - "What is the name of the family of vulnerabilities arising from invalid escape sequences", - "Which attack consists of making a malicious request to another website?", - "A web vulnerability arising from improper sanitisation of user content and use of .innerHtml?", - "What is a buffer overflow, what capabilities can you gain from this vulnerability?", - "A process has a secret hash, it takes an input and performs a simple equality check against the hash. What vulnerability can be employed to guess the secret if memory acess is not possible?" - ], +const questions: { [key: string]: (string | any)[] | undefined } = { + tech_dev: [ + "What is your field of expertise in development?", + "What development frameworks or technologies do you use? (eg: React, Python. NoSQL etc.)", + "Links to your github or any hosted projects", + "Did you notice any issues in this platform or possible ways to make it better? Describe with as technical detail as possible", + "Any bugfix you did in the past, that demonstrates your problem solving ability.", + ], + tech_linux: [ + "What is a swap?", + "Under what user does /usr/bin/passwd run?", + "Interpret the permission given by chmod 4776", + 'What is "top -i"?', + "What is secure boot?", + ], + tech_cyber: [ + "What is the name of the family of vulnerabilities arising from invalid escape sequences", + "Which attack consists of making a malicious request to another website?", + "A web vulnerability arising from improper sanitisation of user content and use of .innerHtml?", + "What is a buffer overflow, what capabilities can you gain from this vulnerability?", + "A process has a secret hash, it takes an input and performs a simple equality check against the hash. What vulnerability can be employed to guess the secret if memory acess is not possible?", + ], - meda_social: [ - "Share any social media accounts you’ve managed before, if any, can also be a personal account.", - "How do you plan on managing social media activities along with your academics and other activities?", - "Propose an idea to increase engagement and followers for the Linux Club’s Instagram.", - "Any additional information or comments you would like to share?" - ], - media_des: [ - "Link to Portfolio and, if available, resume.", - "What software do you primarily use for designing and editing", - "Describe a design or editing project you’ve worked on that you are particularly proud of. What was your role, and what were the results? Also, share any links to it. (Fill with NIL if not applicable)", - "Are you comfortable working under tight deadlines for media projects?", - "Any additional information or comments you would like to share?", - ], - media_photo: [ - "Do you have experience in photographing events?", - "How long are you willing to spend at an event hosted by the Linux Club to film and photograph?", - "Can you put together engaging, fast-paced reels with lots of personality?", - "How would you approach capturing good-quality photographs in challenging lighting conditions (say, MG auditorium)?", - "Any additional information or comments you would like to share?" - ], + meda_social: [ + "Share any social media accounts you’ve managed before, if any, can also be a personal account.", + "How do you plan on managing social media activities along with your academics and other activities?", + "Propose an idea to increase engagement and followers for the Linux Club’s Instagram.", + "Any additional information or comments you would like to share?", + ], + media_des: [ + "Link to Portfolio and, if available, resume.", + "What software do you primarily use for designing and editing", + "Describe a design or editing project you’ve worked on that you are particularly proud of. What was your role, and what were the results? Also, share any links to it. (Fill with NIL if not applicable)", + "Are you comfortable working under tight deadlines for media projects?", + "Any additional information or comments you would like to share?", + ], + media_photo: [ + "Do you have experience in photographing events?", + "How long are you willing to spend at an event hosted by the Linux Club to film and photograph?", + "Can you put together engaging, fast-paced reels with lots of personality?", + "How would you approach capturing good-quality photographs in challenging lighting conditions (say, MG auditorium)?", + "Any additional information or comments you would like to share?", + ], - management: [ - "How would you approach the SWC to request permission to conduct an event? List out all the steps", - "You missed a chance to connect with your club mates, and now the team has grown closer while you feel like a stranger. Who will you approach to break the ice and fulfil your responsibilities?", - ], - mms: [ - "Do you have prior experience in getting sponsors for events?", - "How would you approach a cybersecurity firm to sponsor a club CTF event?", - "Do you have prior experience in marketing or managing a marketing team? If so specify what you have worked upon", - "How would you market an umbrella in summer season?", - ], - cont: [ - "How familiar are you with different content formats such as articles, social media posts. Do you have a preference or specialty?", - "Which type of content attracts the user's eyes in your opinion and why?", - "Do you have prior experience in writing content for events, blogs and social media handles? If so, specify where you worked." - ], -} + management: [ + "How would you approach the SWC to request permission to conduct an event? List out all the steps", + "You missed a chance to connect with your club mates, and now the team has grown closer while you feel like a stranger. Who will you approach to break the ice and fulfil your responsibilities?", + ], + mms: [ + "Do you have prior experience in getting sponsors for events?", + "How would you approach a cybersecurity firm to sponsor a club CTF event?", + "Do you have prior experience in marketing or managing a marketing team? If so specify what you have worked upon", + "How would you market an umbrella in summer season?", + ], + cont: [ + "How familiar are you with different content formats such as articles, social media posts. Do you have a preference or specialty?", + "Which type of content attracts the user's eyes in your opinion and why?", + "Do you have prior experience in writing content for events, blogs and social media handles? If so, specify where you worked.", + ], +}; const common_questions = [ - "Why do you want to join the Linux Club?", - "Have you ever used any Linux distro? Whats your favourite distro?" + "Why do you want to join the Linux Club?", + "Have you ever used any Linux distro? Whats your favourite distro?", ]; const pref = [ - "Which department interests you the most in the Club?", - "Which other department interests you in the Club? (Optional)" -] + "Which department interests you the most in the Club?", + "Which other department interests you in the Club? (Optional)", +]; -function CommonQuestions({ name }: {name: string}) { - return ( - <> - {common_questions.map( - (question, index) => { - return ( - - - - - ) - } - )} - - ) +function CommonQuestions({ name }: { name: string }) { + return ( + <> + {common_questions.map((question, index) => { + return ( + + + + + ); + })} + + ); } -function Questions({ dep, name }: {[key: string]: string}) { - return ( - <> - { - questions[dep] !== undefined ? questions[dep]!.map( - (question, index) => { - return ( - - - - - ) - } - ) : "" - } - - ) +function Questions({ dep, name }: { [key: string]: string }) { + return ( + <> + {questions[dep] !== undefined + ? questions[dep]!.map((question, index) => { + return ( + + + + + ); + }) + : ""} + + ); } function Preference({ req, ...props }: any) { - // console.log(onChange) - return ( - - - { - Object.entries(departments).map( - ([key, label]) => ( - - ) - ) - } - - ) + // console.log(onChange) + return ( + + + {Object.entries(departments).map(([key, label]) => ( + + ))} + + ); } - const CountContext = createContext(0); -function Application({ values, isSubmitting, isValidating}: any) { - const session = useContext(SessionContext); - const count = useContext(CountContext); +function Application({ values, isSubmitting, isValidating }: any) { + const session = useContext(SessionContext); + const count = useContext(CountContext); - return ( -
-
- Applying with email {session!.user.email} -
- - - - - - - + return ( + +
Applying with email {session!.user.email}
+ + + + + + + -
+
- - { - arrayHelpers => ( -
- { - values.apps && values.apps.length > 0 ? ( - values.apps.map( - (app: any, index: number) => ( -
- - - - { index !== 1 ?
: "" } -
- ) - ) - ) : ( - "" - ) - } + + {(arrayHelpers) => ( +
+ {values.apps && values.apps.length > 0 + ? values.apps.map((app: any, index: number) => ( +
+ + + + {index !== 1 ?
: ""} +
+ )) + : ""} - { - values.apps.length + count < 2 && ( - <> - - { arrayHelpers.push({dep: sel.target.value, questions: []});}} req={values.apps.length !== 1} /> - - ) - } - { - count === 1 ? ( -
You have successfully submitted one preference till now.
- ) : null - } -
- ) - } - -
- -
- - - ) + {values.apps.length + count < 2 && ( + <> + + { + arrayHelpers.push({ dep: sel.target.value, questions: [] }); + }} + req={values.apps.length !== 1} + /> + + )} + {count === 1 ? ( +
+ You have successfully submitted one preference till now. +
+ ) : null} +
+ )} + +
+ +
+ + + ); } function validateForm(values: any) { - const errors: any = {}; - if (values.apps.length === 0) errors.apps = "Please fill atleast one department preference"; - else if (values.apps.length === 2 && values.apps[0].dep === values.apps[1].dep) errors.apps = "Second preference cannot be same as first preference." - return errors; + const errors: any = {}; + if (values.apps.length === 0) + errors.apps = "Please fill atleast one department preference"; + else if ( + values.apps.length === 2 && + values.apps[0].dep === values.apps[1].dep + ) + errors.apps = "Second preference cannot be same as first preference."; + return errors; } -function onSumbitFactory(sig: number, setSig: (arg0: number) => any, session: any) { - async function onSubmit(values: any, formikBag: any) { - console.log("onSubmit <-", ...arguments); - // formikBag.setSubmitting(true); +function onSumbitFactory( + sig: number, + setSig: (arg0: number) => any, + session: any, +) { + async function onSubmit(values: any, formikBag: any) { + console.log("onSubmit <-", ...arguments); + // formikBag.setSubmitting(true); - const common: any = {}; - common.email = session.user.email - common.contact = values.contact - common.name = values.name - common.regno = values.regno.trim().toLowerCase() + const common: any = {}; + common.email = session.user.email; + common.contact = values.contact; + common.name = values.name; + common.regno = values.regno.trim().toLowerCase(); - // const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); - // await sleep(2000); + // const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); + // await sleep(2000); - const rows = values.apps.filter( - (app: any) => app.dep !== "none" && app.dep !== undefined && app.dep !== null - ).map( - (app: any) => ( - { - ...common, - dep: app.dep, - formdata: { - questions: Object.fromEntries(questions[app.dep]!.map((q, i) => [q, app.questions[i]])), - common_questions: Object.fromEntries(common_questions.map((q, i) => [q, values.common_questions[i]])) - } - } - ) - ) + const rows = values.apps + .filter( + (app: any) => + app.dep !== "none" && app.dep !== undefined && app.dep !== null, + ) + .map((app: any) => ({ + ...common, + dep: app.dep, + formdata: { + questions: Object.fromEntries( + questions[app.dep]!.map((q, i) => [q, app.questions[i]]), + ), + common_questions: Object.fromEntries( + common_questions.map((q, i) => [q, values.common_questions[i]]), + ), + }, + })); - const resp = await supabase - .from("applicants") - .insert(rows) - .select() + const resp = await supabase.from("applicants").insert(rows).select(); - if (resp.error !== null) { - alert("Something went wrong while submitting your application!"); - console.log(resp, rows, values, session); - } - else { - setSig(sig + 1); - values.apps = []; - formikBag.resetForm({values: values}); - if (sig > 2) { - console.log("End of the world") - } - } + if (resp.error !== null) { + alert("Something went wrong while submitting your application!"); + console.log(resp, rows, values, session); + } else { + setSig(sig + 1); + values.apps = []; + formikBag.resetForm({ values: values }); + if (sig > 2) { + console.log("End of the world"); + } } + } - return onSubmit; + return onSubmit; } - export default function Apply() { - const session = useContext(SessionContext); - const navigate = useNavigate(); - const [count, setCount] = useState(undefined) + const session = useContext(SessionContext); + const navigate = useNavigate(); + const [count, setCount] = useState(undefined); - const [sig, setSig] = useState(0); + const [sig, setSig] = useState(0); - useEffect(() => { - if (session === null) { - navigate("/auth"); return; - } - supabase - .from('applicants') - .select('email').eq("email", session!.user!.email!).then((records) => {setCount(records.data?.length)}) - }, [session?.user?.email, sig]) + useEffect(() => { + if (session === null) { + navigate("/auth"); + return; + } + supabase + .from("applicants") + .select("email") + .eq("email", session!.user!.email!) + .then((records) => { + setCount(records.data?.length); + }); + }, [session?.user?.email, sig]); + + return ( +
+
+ + {session !== null ? ( +
+ {(count || 0) < 2 ? ( + + {Application} + + ) : ( +
+ You have completed your application! +
+ )} +
+ ) : ( +
+ Not logged in +
+ )} + +
+
+ ); +} - return ( -
-
- - { - session !== null ? ( -
- { - (count || 0) < 2 ? ( - - { Application } - - ) : ( -
- You have already completed your application! -
- ) - } -
- ) : - ( -
Not logged in
- ) - } - -
-
- ) -} \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b3bfba2..b8fa56f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,122 +2,159 @@ import { Link } from "react-router-dom"; import Background from "../components/background"; import Card from "../components/Card"; -import './index.scss' +import "./index.scss"; export default function Root() { - // const txtsh = "0px 0px 2px rgb(250 204 21)"; - // style={{textShadow: `${txtsh}` }} + // const txtsh = "0px 0px 2px rgb(250 204 21)"; + // style={{textShadow: `${txtsh}` }} - return ( - <> -
-
-
-
- We
Are
- Hiring -
- Apply Now -
-
-
-
-
-
-
+ return ( + <> +
+
+
+
+ Join +
The +
+ + Elite + +
+ + Apply + +
+
+
+
+
+
+ +
+
+ +
+
+
+

+ Be a
part of the
+ + Best + +

+

+ Linux User's Group VITC is a place where people passionate about + tech come together, to make something greater. +

+
+
+
+
+

+ Our
+ + Departments + +

+
+ +

Technical

+

+ Empower the club with technology, build solutions, automate + tasks, ensure cybersecurity and develop applications. +

+ + +

Management

+

+ Streamline club activities, manage paperwork, secure event + resources, and ensure flawless event planning and execution. +

+ + +

Media

+

+ Design compelling branding for our events and club, managing + social media handles and creating an impactful visual identity. +

+ + +

Marketing and Sponsorhips

+

+ Attract industry sponsors and captivate public interest, drive + event visibilty and bolster the brand image. +

+ + +

Content

+

+ Craft compelling written content that embodies our club's image. +

+ +
+
+
+
+
+

+ Empower
+ + FOSS + +

+

+ The Linux club empowers FOSS among the student body by fostering + innovation and collaboration through workshops and events. +

+
+
+
+
+
+
+

+ Be
+ + Valued + +

+

+ At the Linux Club, we deeply value each member and their + contributions, fostering a collaborative environment where every + voice is heard and every idea matters. +

+
+
+
+
+
+
+

+ What are
+ you waiting
+ for?
+ + Join us now. + +

+ + Apply + +
+
+
+ Copyright 2024, LUGVITC. Made with <3 +
+
+
+ + ); +} -
-
-
-

Be a
part of the
Best

-

- Linux User's Group VITC is a place where people passionate about tech come together, to make something greater. -

-
-
-
-
-

Our
Departments

-
- -

Technical

-

- Empower the club with technology, build solutions, automate tasks, - ensure cybersecurity and develop applications. -

- - -

Management

-

- Streamline club activities, manage paperwork, secure event resources, and ensure flawless event planning and execution. -

- - -

Media

-

- Design compelling branding for our events and club, managing social media handles and creating an impactful visual identity. -

- - -

Marketing and Sponsorhips

-

- Attract industry sponsors and captivate public interest, drive event visibilty and bolster the brand image. -

- - -

Content

-

- Craft compelling written content that embodies our club's image. -

- -
-
-
-
-
-

- Empower
- FOSS -

-

- The Linux club empowers FOSS among the student body by fostering innovation and collaboration through workshops and events. -

-
-
-
-
-
-
-

- Be
- Valued -

-

- At the Linux Club, we deeply value each member and their contributions, fostering a collaborative environment where every voice is heard and every idea matters. -

-
-
-
-
-
-
-

- What are
- you waiting
- for?
- - Join - us now. - -

- Apply Now -
-
- -
-
- - ) -} \ No newline at end of file