From 387946818ab49181047c0956cdedcd856503d477 Mon Sep 17 00:00:00 2001 From: Angel Ruiz-Bates Date: Tue, 24 Nov 2020 00:12:39 -0700 Subject: [PATCH 01/14] started contact us page --- pages/contact_us.js | 180 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 180 insertions(+) create mode 100644 pages/contact_us.js diff --git a/pages/contact_us.js b/pages/contact_us.js new file mode 100644 index 0000000..ee60f77 --- /dev/null +++ b/pages/contact_us.js @@ -0,0 +1,180 @@ +import { useState } from 'react'; +import { + Container, + Typography, + Button, + Grid, + makeStyles, + Paper, +} from '@material-ui/core'; +import MailIcon from '@material-ui/icons/Mail'; + +import { Formik, Form, Field } from 'formik'; +import { TextField } from 'formik-material-ui'; +import emailValidator from '../utils/emailValidator'; + +const useStyles = makeStyles((theme) => ({ + aside: { + backgroundColor: theme.palette.primary.main, + height: '100%', + }, + root: { + marginTop: theme.spacing(10), + }, + mailIcon: { + color: theme.palette.secondary.main, + fontSize: '12rem', + }, + message: { + height: '10rem', + alignItems: 'baseline', + }, + paper: { + flex: '40em', + flexGrow: 0, + }, + form: { + width: '100%', + marginTop: theme.spacing(3), + }, + submit: { + margin: theme.spacing(3, 0, 2), + }, + title: { + marginTop: theme.spacing(2), + color: theme.palette.secondary.main, + fontWeight: 'bold', + }, + login: { + margin: theme.spacing(3, 0, 3), + }, +})); + +function ContactUs() { + const classes = useStyles(); + const [formMessage, setFormMessage] = useState(''); + + const initialValues = { + full_name: '', + email: '', + message: '', + }; + + const handleValidate = (values) => { + const errors = {}; + if (!values.full_name) { + errors.full_name = 'Required'; + } + + if (!values.email) { + errors.email = 'Required'; + } else if (emailValidator(values.email)) { + errors.email = 'Invalid Email Address'; + } + + if (!values.message) { + errors.message = 'Required'; + } + return errors; + }; + + const handleSubmit = async (values) => { + setFormMessage(''); + console.log(values); + }; + + return ( + + + + + If you’re having any issues with our service feel free to contact us and we’ll get back to you as soon as possible + + + + + + + + Contact Us@@ + + + handleValidate(values)} + onSubmit={(values, { setSubmitting }) => handleSubmit(values, setSubmitting)} + > + {({ + submitForm, isSubmitting, values, + }) => ( +
+ + + + + + + + + +
+ )} + + + {formMessage + && ( + + {formMessage} + + )} + + + + + + ); +} + +export default ContactUs; From 2f7beb3f62de2a130abadac26a524e8b55068d15 Mon Sep 17 00:00:00 2001 From: William Jackson Date: Tue, 24 Nov 2020 14:54:13 -0600 Subject: [PATCH 02/14] first commit --- pages/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/index.js b/pages/index.js index 62b031d..c0dd38f 100644 --- a/pages/index.js +++ b/pages/index.js @@ -75,7 +75,7 @@ export default function Home() { - Maybe a 2 x 2 grid with some icons and light text on the right side + Maybe a 2 x 2 grid with some icons and light text on the right side. dont ask me what to do for this box. I am out of ideas. From 68c7a3792958807e5c8af091c90d4ad616e2a4b9 Mon Sep 17 00:00:00 2001 From: William Jackson Date: Tue, 24 Nov 2020 16:42:13 -0600 Subject: [PATCH 03/14] added features and small text ideas --- pages/index.js | 44 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 35 insertions(+), 9 deletions(-) diff --git a/pages/index.js b/pages/index.js index c0dd38f..1aaf443 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,5 +1,5 @@ import { - Grid, Button, Container, Typography, Link, makeStyles, + Card, Grid, Button, Container, Typography, Link, makeStyles, } from '@material-ui/core'; import Navbar from '../components/shared/landing/Navbar'; @@ -18,6 +18,7 @@ const useStyles = makeStyles((theme) => ({ }, 'mt-6': { marginTop: theme.spacing(6), + fontWeight: 'bold', }, 'm-4': { margin: theme.spacing(4), @@ -40,7 +41,7 @@ export default function Home() { - Bridge Incompatible API's + Bridge incompatible API's @@ -48,7 +49,7 @@ export default function Home() { BridgeAPI is a serverless integration platform that - empowers users to connect apps through event-driven workflows + lets you connect your apps through event-driven workflows + + )} + + + + + + + + + + ); +} + +Contact.propTypes = { + open: PropTypes.bool.isRequired, + setOpen: PropTypes.func.isRequired, +}; diff --git a/components/shared/Footer/index.js b/components/shared/Footer/index.js index a281def..a6d2a5b 100644 --- a/components/shared/Footer/index.js +++ b/components/shared/Footer/index.js @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types'; import { Grid, makeStyles, Container, Typography, Divider, } from '@material-ui/core'; @@ -20,7 +21,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -function Footer() { +function Footer({ handleOpen }) { const classes = useStyles(); return ( @@ -65,10 +66,12 @@ function Footer() { - - - Contact Us - + handleOpen()} + // style={{ ':hover': 'cursor:pointer' }} + > + Contact Us @@ -87,3 +90,7 @@ function Footer() { } export default Footer; + +Footer.propTypes = { + handleOpen: PropTypes.func.isRequired, +}; diff --git a/pages/about.js b/pages/about.js deleted file mode 100644 index ea597ce..0000000 --- a/pages/about.js +++ /dev/null @@ -1,91 +0,0 @@ -import { - Grid, Button, Container, Typography, Link, makeStyles, -} from '@material-ui/core'; - -import Navbar from '../components/shared/landing/Navbar'; -import Footer from '../components/shared/Footer'; - -const useStyles = makeStyles((theme) => ({ - root: { - flexGrow: 1, - }, - 'mt-2': { - marginTop: theme.spacing(2), - }, - 'mt-4': { - marginTop: theme.spacing(4), - }, - 'mt-6': { - marginTop: theme.spacing(6), - }, -})); - -export default function Home() { - const classes = useStyles(); - - return ( -
- - - - - - Bridge Incompatible API's - - - - - BridgeAPI is a serverless integration platform that - - - empowers users to connect apps through event-driven workflows - - - - - - Join the developers that are integrating API's around the world. - - - - - - - - Bridge Incompatible API's - - - - - BridgeAPI is a serverless integration platform that - - - empowers users to connect apps through event-driven workflows - - - - - - Join the developers that are integrating API's around the world. - - - - - -
- -
- ); -} diff --git a/pages/contact_us.js b/pages/contact_us.js deleted file mode 100644 index 01caf3b..0000000 --- a/pages/contact_us.js +++ /dev/null @@ -1,182 +0,0 @@ -import { useState } from 'react'; -import { - Container, - Typography, - Button, - Grid, - makeStyles, - Paper, -} from '@material-ui/core'; -import MailIcon from '@material-ui/icons/Mail'; - -import { Formik, Form, Field } from 'formik'; -import { TextField } from 'formik-material-ui'; -import emailValidator from '../utils/emailValidator'; -import api from '../utils/api'; - -const useStyles = makeStyles((theme) => ({ - aside: { - backgroundColor: theme.palette.primary.main, - height: '100%', - }, - root: { - marginTop: theme.spacing(10), - }, - mailIcon: { - color: theme.palette.secondary.main, - fontSize: '12rem', - }, - message: { - height: '10rem', - alignItems: 'baseline', - }, - paper: { - flex: '40em', - flexGrow: 0, - }, - form: { - width: '100%', - marginTop: theme.spacing(3), - }, - submit: { - margin: theme.spacing(3, 0, 2), - }, - title: { - marginTop: theme.spacing(2), - color: theme.palette.secondary.main, - fontWeight: 'bold', - }, - login: { - margin: theme.spacing(3, 0, 3), - }, -})); - -function ContactUs() { - const classes = useStyles(); - const [formMessage, setFormMessage] = useState(''); - - const initialValues = { - full_name: '', - email: '', - message: '', - }; - - const handleValidate = (values) => { - const errors = {}; - if (!values.full_name) { - errors.full_name = 'Required'; - } - - if (!values.email) { - errors.email = 'Required'; - } else if (emailValidator(values.email)) { - errors.email = 'Invalid Email Address'; - } - - if (!values.message) { - errors.message = 'Required'; - } - return errors; - }; - - const handleSubmit = async (values) => { - api.post('/contact_us', values).then(() => { - setFormMessage('Success! We\'ll be in contact with you shortly'); - }); - }; - - return ( - - - - - If you’re having any issues with our service feel free to contact us and we’ll get back to you as soon as possible - - - - - - - - Contact Us - - - handleValidate(values)} - onSubmit={(values, { setSubmitting }) => handleSubmit(values, setSubmitting)} - > - {({ - submitForm, isSubmitting, values, - }) => ( -
- - - - - - - - - -
- )} - - - {formMessage - && ( - - {formMessage} - - )} - - - - - - ); -} - -export default ContactUs; diff --git a/pages/index.js b/pages/index.js index 1aaf443..8d59263 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,9 +1,11 @@ +import React, { useState } from 'react'; import { Card, Grid, Button, Container, Typography, Link, makeStyles, } from '@material-ui/core'; import Navbar from '../components/shared/landing/Navbar'; import Footer from '../components/shared/Footer'; +import ContactForm from '../components/ContactModal'; const useStyles = makeStyles((theme) => ({ root: { @@ -33,10 +35,17 @@ const useStyles = makeStyles((theme) => ({ export default function Home() { const classes = useStyles(); + const [open, setOpen] = useState(false); + + const handleOpen = () => { + setOpen(true); + }; return (
+ + @@ -44,13 +53,16 @@ export default function Home() { Bridge incompatible API's + BridgeAPI is a serverless integration platform that + lets you connect your apps through event-driven workflows +
); } From aa8e932a7f2e1f8655282e24194d37eb0e0d4d8f Mon Sep 17 00:00:00 2001 From: Andrew Date: Sat, 5 Dec 2020 12:57:40 -0600 Subject: [PATCH 09/14] seo title --- pages/_app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/_app.js b/pages/_app.js index 25086dc..63a25af 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -30,7 +30,7 @@ export default function MyApp(props) { return ( <> - My page + BridgeAPI Date: Sat, 5 Dec 2020 15:59:28 -0400 Subject: [PATCH 10/14] small changes --- components/ContactModal/index.js | 10 +++++++--- package.json | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/components/ContactModal/index.js b/components/ContactModal/index.js index 01900f9..327c897 100644 --- a/components/ContactModal/index.js +++ b/components/ContactModal/index.js @@ -114,10 +114,14 @@ export default function Contact({ open, setOpen }) { spacing={0} className={classes.modal} > - + - + If you’re having any issues with our service feel free to contact us and we’ll get back to you as soon as possible @@ -138,7 +142,7 @@ export default function Contact({ open, setOpen }) { {({ submitForm, isSubmitting, values, }) => ( -
+ Date: Sun, 6 Dec 2020 11:48:43 -0500 Subject: [PATCH 11/14] Bridge slug update & fix event status state not updating --- components/Dashboard/Card.js | 4 +- components/Editor/ActionsDialog/index.js | 12 ++--- components/Editor/index.js | 14 ++--- components/Event/EventStatus.js | 67 +++++++++++++++--------- components/Sidebar/index.js | 6 +-- pages/bridge/[id].js | 2 +- pages/events/[slug].js | 24 +++++---- 7 files changed, 77 insertions(+), 52 deletions(-) diff --git a/components/Dashboard/Card.js b/components/Dashboard/Card.js index f14bdc0..660a374 100644 --- a/components/Dashboard/Card.js +++ b/components/Dashboard/Card.js @@ -45,7 +45,7 @@ function Card({ bridge, index }) { style={{ fontWeight: 600 }} id={`card-title-${index}`} > - + {bridge.title} @@ -118,7 +118,7 @@ export default Card; Card.propTypes = { bridge: PropTypes.shape({ - id: PropTypes.number.isRequired, + slug: PropTypes.string.isRequired, title: PropTypes.string.isRequired, updatedAt: PropTypes.string.isRequired, eventCount: PropTypes.number.isRequired, diff --git a/components/Editor/ActionsDialog/index.js b/components/Editor/ActionsDialog/index.js index 83a981c..678a007 100644 --- a/components/Editor/ActionsDialog/index.js +++ b/components/Editor/ActionsDialog/index.js @@ -26,7 +26,7 @@ const useStyles = makeStyles({ }); function ActionsDialog({ - active, open, onClose, bridgeId, + active, open, onClose, bridgeSlug, }) { const [errorOpen, setErrorOpen] = useState(false); const [successOpen, setSuccessOpen] = useState(false); @@ -35,7 +35,7 @@ function ActionsDialog({ const handleAbort = () => { api.patch('/events/abort', { - bridge_id: bridgeId, + bridge_slug: bridgeSlug, }) .then((res) => { if (res.status === 200) { @@ -51,8 +51,8 @@ function ActionsDialog({ }; const handleActivate = async () => { - await api.patch(`/bridges/${bridgeId}/${active ? 'deactivate' : 'activate'}`).then(() => { - router.push(`/bridge/${bridgeId}`); + await api.patch(`/bridges/${bridgeSlug}/${active ? 'deactivate' : 'activate'}`).then(() => { + router.push(`/bridge/${bridgeSlug}`); setSuccessOpen(true); setTimeout(() => { setSuccessOpen(false); @@ -66,7 +66,7 @@ function ActionsDialog({ }; const handleDelete = () => { - api.delete(`/bridges/${bridgeId}`).then(() => { + api.delete(`/bridges/${bridgeSlug}`).then(() => { router.push('/dashboard'); }).catch(() => { setErrorOpen(true); @@ -136,7 +136,7 @@ ActionsDialog.propTypes = { active: PropTypes.bool.isRequired, onClose: PropTypes.func.isRequired, open: PropTypes.bool.isRequired, - bridgeId: PropTypes.number.isRequired, + bridgeSlug: PropTypes.string.isRequired, }; export default ActionsDialog; diff --git a/components/Editor/index.js b/components/Editor/index.js index 69719f4..1d6080d 100644 --- a/components/Editor/index.js +++ b/components/Editor/index.js @@ -49,7 +49,7 @@ function Editor({ bridge, isEditView }) { const { active, - id, + slug, outboundUrl, httpMethod, headers, @@ -140,9 +140,9 @@ function Editor({ bridge, isEditView }) { const handleSubmit = async (values, setSubmitting) => { if (validatePayloads(values.payloadCode, values.testPayloadCode)) { // POST if new bridge, otherwise PATCH - if (id) { + if (slug) { await api - .patch(`/bridges/${id}`, generatePayload(values)) + .patch(`/bridges/${slug}`, generatePayload(values)) .then(() => setOpen(true)) .catch(() => setErrorOpen(true)); } else { @@ -153,7 +153,7 @@ function Editor({ bridge, isEditView }) { // TODO: Should timeout so user gets a chance to read the snack // but is 200ms the time we want? setTimeout(() => { - router.push(`/bridge/${res.data.id}`); + router.push(`/bridge/${res.data.slug}`); }, 200); }) .catch(() => setErrorOpen(true)); @@ -175,7 +175,7 @@ function Editor({ bridge, isEditView }) { return ( <> - + @@ -209,7 +209,7 @@ function Editor({ bridge, isEditView }) { active={active} open={actionsDialogOpen} onClose={() => setActionsDialogOpen(false)} - bridgeId={id} + bridgeSlug={slug} />