diff --git a/.gitignore b/.gitignore index ab1bf6d..32f6ffe 100755 --- a/.gitignore +++ b/.gitignore @@ -10,4 +10,4 @@ generated .DS_Store docker-build -.vscode \ No newline at end of file +.env \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index eb71da4..2d9729b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@emotion/styled": "11.3.0", "css-loader": "^6.8.1", "d3": "7.6.1", + "dotenv": "^16.3.1", "framer-motion": "4.1.17", "prop-types": "15.7.2", "react": "18.2.0", @@ -38,6 +39,7 @@ "@types/styled-components": "5.1.9", "@typescript-eslint/eslint-plugin": "4.22.0", "@typescript-eslint/parser": "4.22.0", + "dotenv-webpack": "^8.0.1", "eslint": "7.25.0", "eslint-config-react-app": "6.0.0", "eslint-plugin-import": "2.22.1", @@ -4448,6 +4450,50 @@ "node": ">=6.0.0" } }, + "node_modules/dotenv": { + "version": "16.3.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz", + "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/motdotla/dotenv?sponsor=1" + } + }, + "node_modules/dotenv-defaults": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz", + "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==", + "dev": true, + "dependencies": { + "dotenv": "^8.2.0" + } + }, + "node_modules/dotenv-defaults/node_modules/dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "dev": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/dotenv-webpack": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz", + "integrity": "sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w==", + "dev": true, + "dependencies": { + "dotenv-defaults": "^2.0.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "webpack": "^4 || ^5" + } + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -14296,6 +14342,37 @@ "esutils": "^2.0.2" } }, + "dotenv": { + "version": "16.3.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz", + "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==" + }, + "dotenv-defaults": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz", + "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==", + "dev": true, + "requires": { + "dotenv": "^8.2.0" + }, + "dependencies": { + "dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "dev": true + } + } + }, + "dotenv-webpack": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz", + "integrity": "sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w==", + "dev": true, + "requires": { + "dotenv-defaults": "^2.0.2" + } + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", diff --git a/package.json b/package.json index 74d68a6..3aaa767 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@emotion/styled": "11.3.0", "css-loader": "^6.8.1", "d3": "7.6.1", + "dotenv": "^16.3.1", "framer-motion": "4.1.17", "prop-types": "15.7.2", "react": "18.2.0", @@ -41,6 +42,7 @@ "@types/styled-components": "5.1.9", "@typescript-eslint/eslint-plugin": "4.22.0", "@typescript-eslint/parser": "4.22.0", + "dotenv-webpack": "^8.0.1", "eslint": "7.25.0", "eslint-config-react-app": "6.0.0", "eslint-plugin-import": "2.22.1", diff --git a/src/archived/Presentations.tsx b/src/archived/Presentations.tsx index 3740118..243a5a8 100644 --- a/src/archived/Presentations.tsx +++ b/src/archived/Presentations.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { PRESENTATIONS_LIST } from '../utils/data/researchInformation'; +import { PRESENTATIONS_LIST } from './researchInformation'; import { PublicationsGrid } from './PublicationsGrid'; export const Presentations: React.FC = () => ( diff --git a/src/archived/Publications.tsx b/src/archived/Publications.tsx index 6de1fd6..6a12cdd 100644 --- a/src/archived/Publications.tsx +++ b/src/archived/Publications.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { PublicationsGrid } from './PublicationsGrid'; -import { PUBLICATIONS_LIST } from '../utils/data/researchInformation'; +import { PUBLICATIONS_LIST } from './researchInformation'; -export const Publications: React.VFC = () => ( +export const Publications: React.FC = () => ( ); diff --git a/src/archived/Research.tsx b/src/archived/Research.tsx index 874c739..32960d8 100644 --- a/src/archived/Research.tsx +++ b/src/archived/Research.tsx @@ -1,8 +1,5 @@ import * as React from 'react'; -import { - ONGOINGRESEARCH_LIST, - PASTRESEARCH_LIST, -} from '../utils/data/researchInformation'; +import { ONGOINGRESEARCH_LIST, PASTRESEARCH_LIST } from './researchInformation'; import { ResearchGrid } from './ResearchGrid'; export const Research = () => { diff --git a/src/utils/data/alumni.tsx b/src/archived/alumni.tsx similarity index 99% rename from src/utils/data/alumni.tsx rename to src/archived/alumni.tsx index d5d1fcd..539d468 100644 --- a/src/utils/data/alumni.tsx +++ b/src/archived/alumni.tsx @@ -1,4 +1,4 @@ -import { AlumniInformation } from '../../types/types'; +import { AlumniInformation } from '../types/types'; export const ALUMNI: Array = [ { diff --git a/src/utils/data/peopleInformation.tsx b/src/archived/peopleInformation.tsx similarity index 98% rename from src/utils/data/peopleInformation.tsx rename to src/archived/peopleInformation.tsx index 20671fa..838ca4e 100644 --- a/src/utils/data/peopleInformation.tsx +++ b/src/archived/peopleInformation.tsx @@ -1,4 +1,4 @@ -import { InternTestimonial, PersonInformation } from '../../types/types'; +import { InternTestimonial, PersonInformation } from '../types/types'; export const CURRENTMEMBERS_LIST: Array = [ { diff --git a/src/utils/data/projectInformation.tsx b/src/archived/projectInformation.tsx similarity index 99% rename from src/utils/data/projectInformation.tsx rename to src/archived/projectInformation.tsx index a7c1dbd..f3a32f5 100644 --- a/src/utils/data/projectInformation.tsx +++ b/src/archived/projectInformation.tsx @@ -1,6 +1,6 @@ import { Link, Text } from '@chakra-ui/react'; import * as React from 'react'; -import { ProjectInfo, ProjectInformation } from '../../types/types'; +import { ProjectInfo, ProjectInformation } from '../types/types'; export const PROJECTS_LIST: Array = [ { diff --git a/src/utils/data/researchInformation.tsx b/src/archived/researchInformation.tsx similarity index 99% rename from src/utils/data/researchInformation.tsx rename to src/archived/researchInformation.tsx index 402a9a5..b12af43 100644 --- a/src/utils/data/researchInformation.tsx +++ b/src/archived/researchInformation.tsx @@ -1,6 +1,6 @@ import { Box, Link, Text } from '@chakra-ui/react'; import * as React from 'react'; -import { ResearchInformation, PublicationInformation } from '../../types/types'; +import { ResearchInformation, PublicationInformation } from '../types/types'; export const ONGOINGRESEARCH_LIST: Array = [ { diff --git a/src/components/ContactForm/ContactForm.css b/src/components/ContactForm/ContactForm.css index ee5964c..32c57a8 100644 --- a/src/components/ContactForm/ContactForm.css +++ b/src/components/ContactForm/ContactForm.css @@ -43,3 +43,20 @@ blockquote { font-weight: 400; margin-left: 15px; } + +#boxApplicationType { + font-size: 15px; + font-weight: 600; + margin-bottom: 15px; + font-family: + Segoe UI, + Helvetica Neue, + sans-serif; +} + +#submitButton { + font-size: 1em; + font-weight: 600; + font-family: Graphik, Helvetica, Arial, sans-serif !important; + text-transform: uppercase; +} diff --git a/src/components/ContactForm/ContactForm.tsx b/src/components/ContactForm/ContactForm.tsx index 6d1dfe2..cadb604 100644 --- a/src/components/ContactForm/ContactForm.tsx +++ b/src/components/ContactForm/ContactForm.tsx @@ -1,59 +1,315 @@ -import { Button, FormControl, FormLabel, Input } from '@chakra-ui/react'; +import { + Box, + Button, + FormControl, + FormHelperText, + FormLabel, + Input, + RadioGroup, + VStack, + Select, + Textarea, + Radio, + InputLeftAddon, + InputGroup, +} from '@chakra-ui/react'; import * as React from 'react'; -import { useForm } from 'react-hook-form'; +import { Controller, SubmitHandler, useForm } from 'react-hook-form'; import { useRef } from 'react'; +import './ContactForm.css'; +import data from '../../utils/data/data.json'; -export const ContactForm = () => { - const { - register, - formState: { errors }, - } = useForm(); - const form = useRef(); +type Input = { + name: string; + title: string; + college: string; + email: string; + phone: string; + projectTitle: string; + projectDescription: string; + applicationType: string; + fundingSource: string; + fundingAmount: string; + deliveryDate: Date; + referral: string; +}; + +type CreateResponse = { + name: string; + description: string; + id: string; + createdAt: string; +}; + +const onSubmit: SubmitHandler = async (data) => { + const apiKey = 'pk_48193489_A5GVMEA22YKXE7PJ8Z98KT1CNZ8GR86H'; + const collaboratorsId = '901100186724'; + const projectsId = '901100186744'; + const collaborator = await fetch( + `https://api.clickup.com/api/v2/list/${collaboratorsId}/task`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: apiKey, + }, + body: JSON.stringify({ + name: data.projectTitle, + description: data.projectDescription, + custom_fields: [ + { + id: '3fc4c175-b322-4863-a0f8-f398c79a062f', + value: [data.college], + }, + { + id: '8db8f1f3-1f3d-4cc8-8fe9-eb644d1025bc', + value: data.title, + }, + { + id: '5d4542ff-84e4-49ac-9e03-1c96fdf9b99a', + value: data.referral, + }, + ], + }), + }, + ); + + const response = await fetch( + `https://api.clickup.com/api/v2/list/${projectsId}/task`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: apiKey, + }, + body: JSON.stringify({ + name: data.projectTitle, + description: data.projectDescription, + custom_fields: [ + { + id: '3fc4c175-b322-4863-a0f8-f398c79a062f', + value: [data.college], + }, + { id: '5aefb3dc-97ea-4587-948d-302ba8b62fa2', value: data.phone }, + { + id: '5d4542ff-84e4-49ac-9e03-1c96fdf9b99a', + value: data.referral, + }, + { id: '616425f7-8385-4c54-8288-fd1074c02a35', value: data.email }, + ], + }), + }, + ); + + if (!response.ok) { + throw new Error(`Error! status: ${response.status}`); + } + if (!collaborator.ok) { + throw new Error(`Error! status: ${collaborator.status}`); + } - const sendEmail = (e: any) => { - e.preventDefault(); - console.log(e); - }; + const result1 = (await response.json()) as CreateResponse; + console.log('result is: ', JSON.stringify(result1, null, 4)); + const result2 = (await collaborator.json()) as CreateResponse; + console.log('result is: ', JSON.stringify(result2, null, 4)); + + return result2; +}; + +export const ContactForm: React.FC = () => { + const { control, register, handleSubmit } = useForm(); + const form = useRef(); + const departments = data['departments']; return ( -
+ - Your Name + Name + + Title + + + + College / Department + + - Your Email + Email - - Subject - + Phone Number + + + + + + + Project Title + + + + Project Description +