diff --git a/apps/dotcom/src/app/App.tsx b/apps/dotcom/src/app/App.tsx
index 9d4a2a2e..b002b4cd 100644
--- a/apps/dotcom/src/app/App.tsx
+++ b/apps/dotcom/src/app/App.tsx
@@ -16,6 +16,7 @@ import NotFound from './pages/notfound/NotFound';
import People from './pages/people/People';
import Projects from './pages/projects/Projects';
import theme from './theme';
+import Contact from './pages/contact/Contact';
const App: React.FC = () => {
return (
@@ -47,6 +48,7 @@ const App: React.FC = () => {
/>
+
+ Contact
+
+
{/* Mobile only */}
@@ -151,6 +156,9 @@ const NavBar: React.FC = () => {
People
+
+ Contact
+
diff --git a/apps/dotcom/src/app/pages/contact/Contact.tsx b/apps/dotcom/src/app/pages/contact/Contact.tsx
new file mode 100644
index 00000000..a3a16c68
--- /dev/null
+++ b/apps/dotcom/src/app/pages/contact/Contact.tsx
@@ -0,0 +1,145 @@
+import { Container, Grid, Box, TextField, RadioGroup, FormControlLabel, Radio, FormLabel, Divider, withStyles, createStyles, Theme, styled, Button, Snackbar } from '@material-ui/core';
+import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
+import Hero from '../../components/Hero';
+import { ReactComponent as ContactSvg } from './contact.svg';
+import Alert from '@material-ui/lab/Alert';
+import { submitFormData } from './functions';
+
+const StyledDivider = styled(Divider)({
+ margin: '20px'
+});
+
+const StyledButton = styled(Button)({
+ float: 'right',
+ borderRadius: '10px',
+ color: 'white',
+ padding: '10px 20px',
+ background: "linear-gradient(127deg, rgba(12,0,213,1) 0%, rgba(248,0,255,1) 100%)"
+});
+
+const Contact: React.FC = () => {
+
+ interface ContactData {
+ firstName: string;
+ lastName: string;
+ email: string;
+ year: string;
+ major: string;
+ // TODO: ask if we still want to do user-submitted questions
+ questions: any[];
+ role: string;
+ }
+
+ const [data, setData] = useState({ firstName: '', lastName: '', email: '', year: '', major: '', questions: [], role: '' } as ContactData);
+ const [showAlert, setShowAlert] = useState(false)
+
+ return (
+
+
+
+ Projects
+
+
+
+
+
+ setData({...data, firstName: event.target.value})}
+ />
+ setData({...data, lastName: event.target.value})}
+ />
+ setData({...data, email: event.target.value})}
+ />
+ setData({...data, year: event.target.value})}
+ />
+ setData({...data, major: event.target.value})}
+ />
+
+ Which positions are you interested in?
+
+
+ {
+ console.log('submitting form', data);
+
+ if (data.email.indexOf('@') === -1) {
+ setShowAlert(true);
+ return;
+ }
+
+ if (data.email.indexOf('.') === -1) {
+ setShowAlert(true);
+ return;
+ }
+
+ const gradYear = parseInt(data.year);
+ if (isNaN(gradYear)) {
+ setShowAlert(true);
+ return;
+ }
+ const submitData = {...data, gradYear};
+
+ submitFormData({
+ url: 'https://',
+ data: submitData,
+ accessToken: 'some API token',
+ secretToken: 'some secret API token',
+ }).then((data: any) => {
+ const { success, errorMessage } = data;
+
+ if (success) {
+ console.info("API submit successful")
+ } else {
+ console.info(`warning: ${errorMessage}`);
+ setShowAlert(true);
+ setData({ firstName: '', lastName: '', email: '', year: '', major: '', questions: [], role: '' })
+ }
+ }).catch((error) => {
+ setShowAlert(true);
+ })
+ }}>
+ Submit
+
+
+
+
setShowAlert(false)} anchorOrigin={{vertical: 'top', horizontal: 'center'}}>
+ Error submiting data
+
+