Skip to content

Design Updates#47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AndiLavera merged 17 commits into from
Dec 7, 2020
Merged

Design Updates #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
3879468
started contact us page
angeljruiz Nov 24, 2020
2f7beb3
first commit
williampj Nov 24, 2020
68c7a37
added features and small text ideas
williampj Nov 24, 2020
f5116a6
.
angeljruiz Dec 1, 2020
687ae10
Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…
angeljruiz Dec 1, 2020
f7ba104
sends values to backend which then sends an email
angeljruiz Dec 2, 2020
0f06da6
Merge branch 'master' of github.com:williampj/bridgeapi.js into landi…
AndiLavera Dec 4, 2020
0c3c5fe
Replace material ui link with nextjs link
AndiLavera Dec 5, 2020
1347281
About us in footer
AndiLavera Dec 5, 2020
04712cf
Merge branch 'contact-us' of github.com:williampj/bridgeapi.js into l…
AndiLavera Dec 5, 2020
8785fa7
contact us modal
AndiLavera Dec 5, 2020
aa8e932
seo title
AndiLavera Dec 5, 2020
e3e7bd3
small changes
angeljruiz Dec 5, 2020
48abf2e
Bridge slug update & fix event status state not updating
AndiLavera Dec 6, 2020
c782c58
Update broken specs
AndiLavera Dec 6, 2020
39b01b6
footer text
williampj Dec 6, 2020
903aaa3
Fix lint
AndiLavera Dec 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 207 additions & 0 deletions components/ContactModal/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {
Container,
Typography,
Button,
Grid,
makeStyles,
Dialog,
} from '@material-ui/core';
import MailIcon from '@material-ui/icons/Mail';

import { Formik, Form, Field } from 'formik';
import { TextField } from 'formik-material-ui';

import SnackAlert from '../shared/SnackAlert';
import emailValidator from '../../utils/emailValidator';
import api from '../../utils/api';

const useStyles = makeStyles((theme) => ({
paper: {
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
borderRadius: '10px',
},
mailIcon: {
color: theme.palette.secondary.main,
fontSize: '4rem',
justifyContent: 'center',
},
aside: {
backgroundColor: theme.palette.primary.main,
height: '100%',
},
title: {
marginBottom: theme.spacing(2),
},
}));

export default function Contact({ open, setOpen }) {
const classes = useStyles();
const [successOpen, setSuccessOpen] = useState(false);
const [errorOpen, setErrorOpen] = useState(false);

const handleClose = () => {
setOpen(false);
};

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', values)
.then(() => setSuccessOpen(true))
.catch(() => setErrorOpen(true));
};

const handleSnackClose = (_, reason) => {
if (reason === 'clickaway') {
return;
}

setSuccessOpen(false);
setErrorOpen(false);
};

return (
<div>
<SnackAlert
open={successOpen}
onClose={handleSnackClose}
severity="success"
message="Success! We'll be in contact with you shortly"
id="success-message"
/>
<SnackAlert
open={errorOpen}
onClose={handleSnackClose}
severity="error"
message="Some error has occurred. Please try again."
id="error-message"
/>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
<div className={classes.paper}>
<Grid
container
spacing={0}
className={classes.modal}
>
<Grid
item
sm={4}
style={{ textAlign: 'center', paddingTop: '3rem' }}
>
<MailIcon className={classes.mailIcon} />

<Typography variant="body1">
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
</Typography>
</Grid>

<Grid container item sm={8}>
<Container component="main" maxWidth="md">
<Grid container justify="center" item>
<Typography variant="h4" className={classes.title}>
Contact Us
</Typography>
</Grid>
<Formik
initialValues={initialValues}
validate={(values) => handleValidate(values)}
onSubmit={(values, { setSubmitting }) => handleSubmit(values, setSubmitting)}
>
{({
submitForm, isSubmitting, values,
}) => (
<Form style={{ textAlign: 'center' }}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Field
component={TextField}
variant="outlined"
name="full_name"
label="Full Name"
value={values.full_name}
style={{ marginBottom: '10px', width: '100%' }}
required
/>
<Field
component={TextField}
variant="outlined"
type="email"
label="Email"
name="email"
value={values.email}
style={{ marginBottom: '10px', width: '100%' }}
required
/>
<Field
component={TextField}
variant="outlined"
label="Message"
name="message"
multiline
InputProps={{ classes: { root: classes.message } }}
style={{ marginBottom: '10px', width: '100%' }}
value={values.message}
required
/>
</Grid>
</Grid>

<Button
variant="contained"
color="secondary"
className={classes.submit}
onClick={submitForm}
disabled={isSubmitting}
>
Send
</Button>
</Form>
)}
</Formik>

</Container>

</Grid>
</Grid>
</div>
</Dialog>
</div>
);
}

Contact.propTypes = {
open: PropTypes.bool.isRequired,
setOpen: PropTypes.func.isRequired,
};
41 changes: 24 additions & 17 deletions components/Dashboard/Card.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,9 @@ import {
makeStyles,
Divider,
Typography,
Link,
// Link,
} from '@material-ui/core';
import Link from 'next/link';

const useStyles = makeStyles((theme) => ({
title: {
Expand DownExpand Up@@ -37,17 +38,18 @@ function Card({ bridge, index }) {
return (
<Grid item xs={12} sm={6} md={4} key={`main-grid-${bridge.title}`}>
<Paper className={classes.paper} id={`card-${index}`}>
<Link href={`/bridge/${bridge.id}`}>
<Typography
variant="h5"
color="primary"
className={classes.title}
style={{ fontWeight: 600 }}
id={`card-title-${index}`}
>
<Typography
variant="h5"
color="primary"
className={classes.title}
style={{ fontWeight: 600 }}
id={`card-title-${index}`}
>
<Link href={`/bridge/${bridge.slug}`}>
{bridge.title}
</Typography>
</Link>
</Link>
</Typography>

<Divider light className={classes.paddedDivider} />

<Grid container spacing={2}>
Expand DownExpand Up@@ -92,13 +94,18 @@ function Card({ bridge, index }) {
<Grid item xs container spacing={2}>
<Grid item xs>
{bridge.eventId ? (
<Link href={`/events/${bridge.eventId}`}>
<Typography variant="subtitle1" color="secondary">

<Typography
variant="subtitle1"
color="secondary"
id={`card-events-${index}`}
>
<Link href={`/events/${bridge.eventId}`}>
View Events
</Typography>
</Link>
</Link>
</Typography>
) : (
<Typography variant="subtitle1">
<Typography variant="subtitle1" id={`card-events-${index}`}>
View Events
</Typography>
)}
Expand All@@ -115,7 +122,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,
Expand Down
12 changes: 6 additions & 6 deletions components/Editor/ActionsDialog/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand All@@ -35,7 +35,7 @@ function ActionsDialog({

const handleAbort = () => {
api.patch('/events/abort', {
bridge_id: bridgeId,
bridge_slug: bridgeSlug,
})
.then((res) => {
if (res.status === 200) {
Expand All@@ -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);
Expand All@@ -66,7 +66,7 @@ function ActionsDialog({
};

const handleDelete = () => {
api.delete(`/bridges/${bridgeId}`).then(() => {
api.delete(`/bridges/${bridgeSlug}`).then(() => {
router.push('/dashboard');
}).catch(() => {
setErrorOpen(true);
Expand DownExpand Up@@ -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;
14 changes: 7 additions & 7 deletions components/Editor/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ function Editor({ bridge, isEditView }) {

const {
active,
id,
slug,
outboundUrl,
httpMethod,
headers,
Expand DownExpand Up@@ -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 {
Expand All@@ -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));
Expand All@@ -175,7 +175,7 @@ function Editor({ bridge, isEditView }) {
return (
<>
<Navbar />
<Sidebar events={bridge.events} bridgeId={bridge.id} title={title} />
<Sidebar events={bridge.events} bridgeSlug={bridge.slug} title={title} />

<Grid container item spacing={5} className={classes.root} sm={9} md={10}>
<Grid item container wrap="nowrap">
Expand DownExpand Up@@ -209,7 +209,7 @@ function Editor({ bridge, isEditView }) {
active={active}
open={actionsDialogOpen}
onClose={() => setActionsDialogOpen(false)}
bridgeId={id}
bridgeSlug={slug}
/>
<Button
onClick={() => setActionsDialogOpen(true)}
Expand DownExpand Up@@ -275,7 +275,7 @@ Editor.propTypes = {
isEditView: PropTypes.bool,
bridge: PropTypes.shape({
active: PropTypes.bool,
id: PropTypes.number,
slug: PropTypes.string,
title: PropTypes.string,
outboundUrl: PropTypes.string,
httpMethod: PropTypes.string,
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Design Updates by williampj · Pull Request #47 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Design Updates#47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

AndiLavera
merged 17 commits into

from

Dec 7, 2020
 Merged


Design Updates
#47
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
3879468

started contact us page


angeljruiz Nov 24, 2020
2f7beb3

first commit


williampj Nov 24, 2020
68c7a37

added features and small text ideas


williampj Nov 24, 2020
f5116a6

.


angeljruiz Dec 1, 2020
687ae10

Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…


angeljruiz Dec 1, 2020
f7ba104

sends values to backend which then sends an email


angeljruiz Dec 2, 2020
0f06da6

Merge branch 'master' of github.com:williampj/bridgeapi.js into landi…


AndiLavera Dec 4, 2020
0c3c5fe

Replace material ui link with nextjs link


AndiLavera Dec 5, 2020
1347281

About us in footer


AndiLavera Dec 5, 2020
04712cf

Merge branch 'contact-us' of github.com:williampj/bridgeapi.js into l…


AndiLavera Dec 5, 2020
8785fa7

contact us modal


AndiLavera Dec 5, 2020
aa8e932

seo title


AndiLavera Dec 5, 2020
e3e7bd3

small changes


angeljruiz Dec 5, 2020
48abf2e

Bridge slug update & fix event status state not updating


AndiLavera Dec 6, 2020
c782c58

Update broken specs


AndiLavera Dec 6, 2020
39b01b6

footer text


williampj Dec 6, 2020
903aaa3

Fix lint


AndiLavera Dec 7, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


207 changes: 207 additions & 0 deletions
components/ContactModal/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {
 Container,
 Typography,
 Button,
 Grid,
 makeStyles,
 Dialog,
} from '@material-ui/core';
import MailIcon from '@material-ui/icons/Mail';

import { Formik, Form, Field } from 'formik';
import { TextField } from 'formik-material-ui';

import SnackAlert from '../shared/SnackAlert';
import emailValidator from '../../utils/emailValidator';
import api from '../../utils/api';

const useStyles = makeStyles((theme) => ({
 paper: {
 backgroundColor: theme.palette.background.paper,
 boxShadow: theme.shadows[5],
 padding: theme.spacing(2, 4, 3),
 borderRadius: '10px',
 },
 mailIcon: {
 color: theme.palette.secondary.main,
 fontSize: '4rem',
 justifyContent: 'center',
 },
 aside: {
 backgroundColor: theme.palette.primary.main,
 height: '100%',
 },
 title: {
 marginBottom: theme.spacing(2),
 },
}));

export default function Contact({ open, setOpen }) {
 const classes = useStyles();
 const [successOpen, setSuccessOpen] = useState(false);
 const [errorOpen, setErrorOpen] = useState(false);

 const handleClose = () => {
 setOpen(false);
 };

 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', values)
 .then(() => setSuccessOpen(true))
 .catch(() => setErrorOpen(true));
 };

 const handleSnackClose = (_, reason) => {
 if (reason === 'clickaway') {
 return;
 }

 setSuccessOpen(false);
 setErrorOpen(false);
 };

 return (
 <div>
 <SnackAlert
 open={successOpen}
 onClose={handleSnackClose}
 severity="success"
 message="Success! We'll be in contact with you shortly"
 id="success-message"
 />
 <SnackAlert
 open={errorOpen}
 onClose={handleSnackClose}
 severity="error"
 message="Some error has occurred. Please try again."
 id="error-message"
 />
 <Dialog
 open={open}
 onClose={handleClose}
 aria-labelledby="simple-modal-title"
 aria-describedby="simple-modal-description"
 >
 <div className={classes.paper}>
 <Grid
 container
 spacing={0}
 className={classes.modal}
 >
 <Grid
 item
 sm={4}
 style={{ textAlign: 'center', paddingTop: '3rem' }}
 >
 <MailIcon className={classes.mailIcon} />

 <Typography variant="body1">
 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
 </Typography>
 </Grid>

 <Grid container item sm={8}>
 <Container component="main" maxWidth="md">
 <Grid container justify="center" item>
 <Typography variant="h4" className={classes.title}>
 Contact Us
 </Typography>
 </Grid>
 <Formik
 initialValues={initialValues}
 validate={(values) => handleValidate(values)}
 onSubmit={(values, { setSubmitting }) => handleSubmit(values, setSubmitting)}
 >
 {({
 submitForm, isSubmitting, values,
 }) => (
 <Form style={{ textAlign: 'center' }}>
 <Grid container spacing={2}>
 <Grid item xs={12}>
 <Field
 component={TextField}
 variant="outlined"
 name="full_name"
 label="Full Name"
 value={values.full_name}
 style={{ marginBottom: '10px', width: '100%' }}
 required
 />
 <Field
 component={TextField}
 variant="outlined"
 type="email"
 label="Email"
 name="email"
 value={values.email}
 style={{ marginBottom: '10px', width: '100%' }}
 required
 />
 <Field
 component={TextField}
 variant="outlined"
 label="Message"
 name="message"
 multiline
 InputProps={{ classes: { root: classes.message } }}
 style={{ marginBottom: '10px', width: '100%' }}
 value={values.message}
 required
 />
 </Grid>
 </Grid>

 <Button
 variant="contained"
 color="secondary"
 className={classes.submit}
 onClick={submitForm}
 disabled={isSubmitting}
 >
 Send
 </Button>
 </Form>
 )}
 </Formik>

 </Container>

 </Grid>
 </Grid>
 </div>
 </Dialog>
 </div>
 );
}

Contact.propTypes = {
 open: PropTypes.bool.isRequired,
 setOpen: PropTypes.func.isRequired,
};

41 changes: 24 additions & 17 deletions
components/Dashboard/Card.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,9 @@ import {
 makeStyles,
 Divider,
 Typography,
 Link,
// Link,
} from '@material-ui/core';
import Link from 'next/link';

const useStyles = makeStyles((theme) => ({
 title: {
Expand DownExpand Up@@ -37,17 +38,18 @@ function Card({ bridge, index }) {
 return (
 <Grid item xs={12} sm={6} md={4} key={`main-grid-${bridge.title}`}>
 <Paper className={classes.paper} id={`card-${index}`}>
 <Link href={`/bridge/${bridge.id}`}>
<Typography
 variant="h5"
 color="primary"
 className={classes.title}
 style={{ fontWeight: 600 }}
 id={`card-title-${index}`}
 >
 <Typography
variant="h5"
color="primary"
className={classes.title}
style={{ fontWeight: 600 }}
id={`card-title-${index}`}
>
<Link href={`/bridge/${bridge.slug}`}>
 {bridge.title}
 </Typography>
 </Link>
 </Link>
 </Typography>

 <Divider light className={classes.paddedDivider} />

 <Grid container spacing={2}>
Expand DownExpand Up@@ -92,13 +94,18 @@ function Card({ bridge, index }) {
 <Grid item xs container spacing={2}>
 <Grid item xs>
 {bridge.eventId ? (
 <Link href={`/events/${bridge.eventId}`}>
 <Typography variant="subtitle1" color="secondary">

 <Typography
 variant="subtitle1"
 color="secondary"
 id={`card-events-${index}`}
 >
 <Link href={`/events/${bridge.eventId}`}>
 View Events
 </Typography>
 </Link>
 </Link>
 </Typography>
 ) : (
 <Typography variant="subtitle1">
 <Typography variant="subtitle1" id={`card-events-${index}`}>
 View Events
 </Typography>
 )}
Expand All@@ -115,7 +122,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,
Expand Down

12 changes: 6 additions & 6 deletions
components/Editor/ActionsDialog/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand All@@ -35,7 +35,7 @@ function ActionsDialog({

 const handleAbort = () => {
 api.patch('/events/abort', {
bridge_id: bridgeId,
bridge_slug: bridgeSlug,
 })
 .then((res) => {
 if (res.status === 200) {
Expand All@@ -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);
Expand All@@ -66,7 +66,7 @@ function ActionsDialog({
 };

 const handleDelete = () => {
 api.delete(`/bridges/${bridgeId}`).then(() => {
 api.delete(`/bridges/${bridgeSlug}`).then(() => {
 router.push('/dashboard');
 }).catch(() => {
 setErrorOpen(true);
Expand DownExpand Up@@ -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;

14 changes: 7 additions & 7 deletions
components/Editor/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ function Editor({ bridge, isEditView }) {

 const {
 active,
id,
slug,
 outboundUrl,
 httpMethod,
 headers,
Expand DownExpand Up@@ -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 {
Expand All@@ -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));
Expand All@@ -175,7 +175,7 @@ function Editor({ bridge, isEditView }) {
 return (
 <>
 <Navbar />
 <Sidebar events={bridge.events} bridgeId={bridge.id} title={title} />
 <Sidebar events={bridge.events} bridgeSlug={bridge.slug} title={title} />

 <Grid container item spacing={5} className={classes.root} sm={9} md={10}>
 <Grid item container wrap="nowrap">
Expand DownExpand Up@@ -209,7 +209,7 @@ function Editor({ bridge, isEditView }) {
 active={active}
 open={actionsDialogOpen}
 onClose={() => setActionsDialogOpen(false)}
bridgeId={id}
bridgeSlug={slug}
 />
 <Button
 onClick={() => setActionsDialogOpen(true)}
Expand DownExpand Up@@ -275,7 +275,7 @@ Editor.propTypes = {
 isEditView: PropTypes.bool,
 bridge: PropTypes.shape({
 active: PropTypes.bool,
id: PropTypes.number,
slug: PropTypes.string,
 title: PropTypes.string,
 outboundUrl: PropTypes.string,
 httpMethod: PropTypes.string,
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Design Updates by williampj · Pull Request #47 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Design Updates#47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

AndiLavera
merged 17 commits into

from

Dec 7, 2020
 Merged


Design Updates
#47
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
3879468

started contact us page


angeljruiz Nov 24, 2020
2f7beb3

first commit


williampj Nov 24, 2020
68c7a37

added features and small text ideas


williampj Nov 24, 2020
f5116a6

.


angeljruiz Dec 1, 2020
687ae10

Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…


angeljruiz Dec 1, 2020
f7ba104

sends values to backend which then sends an email


angeljruiz Dec 2, 2020
0f06da6

Merge branch 'master' of github.com:williampj/bridgeapi.js into landi…


AndiLavera Dec 4, 2020
0c3c5fe

Replace material ui link with nextjs link


AndiLavera Dec 5, 2020
1347281

About us in footer


AndiLavera Dec 5, 2020
04712cf

Merge branch 'contact-us' of github.com:williampj/bridgeapi.js into l…


AndiLavera Dec 5, 2020
8785fa7

contact us modal


AndiLavera Dec 5, 2020
aa8e932

seo title


AndiLavera Dec 5, 2020
e3e7bd3

small changes


angeljruiz Dec 5, 2020
48abf2e

Bridge slug update & fix event status state not updating


AndiLavera Dec 6, 2020
c782c58

Update broken specs


AndiLavera Dec 6, 2020
39b01b6

footer text


williampj Dec 6, 2020
903aaa3

Fix lint


AndiLavera Dec 7, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


207 changes: 207 additions & 0 deletions
components/ContactModal/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {
 Container,
 Typography,
 Button,
 Grid,
 makeStyles,
 Dialog,
} from '@material-ui/core';
import MailIcon from '@material-ui/icons/Mail';

import { Formik, Form, Field } from 'formik';
import { TextField } from 'formik-material-ui';

import SnackAlert from '../shared/SnackAlert';
import emailValidator from '../../utils/emailValidator';
import api from '../../utils/api';

const useStyles = makeStyles((theme) => ({
 paper: {
 backgroundColor: theme.palette.background.paper,
 boxShadow: theme.shadows[5],
 padding: theme.spacing(2, 4, 3),
 borderRadius: '10px',
 },
 mailIcon: {
 color: theme.palette.secondary.main,
 fontSize: '4rem',
 justifyContent: 'center',
 },
 aside: {
 backgroundColor: theme.palette.primary.main,
 height: '100%',
 },
 title: {
 marginBottom: theme.spacing(2),
 },
}));

export default function Contact({ open, setOpen }) {
 const classes = useStyles();
 const [successOpen, setSuccessOpen] = useState(false);
 const [errorOpen, setErrorOpen] = useState(false);

 const handleClose = () => {
 setOpen(false);
 };

 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', values)
 .then(() => setSuccessOpen(true))
 .catch(() => setErrorOpen(true));
 };

 const handleSnackClose = (_, reason) => {
 if (reason === 'clickaway') {
 return;
 }

 setSuccessOpen(false);
 setErrorOpen(false);
 };

 return (
 <div>
 <SnackAlert
 open={successOpen}
 onClose={handleSnackClose}
 severity="success"
 message="Success! We'll be in contact with you shortly"
 id="success-message"
 />
 <SnackAlert
 open={errorOpen}
 onClose={handleSnackClose}
 severity="error"
 message="Some error has occurred. Please try again."
 id="error-message"
 />
 <Dialog
 open={open}
 onClose={handleClose}
 aria-labelledby="simple-modal-title"
 aria-describedby="simple-modal-description"
 >
 <div className={classes.paper}>
 <Grid
 container
 spacing={0}
 className={classes.modal}
 >
 <Grid
 item
 sm={4}
 style={{ textAlign: 'center', paddingTop: '3rem' }}
 >
 <MailIcon className={classes.mailIcon} />

 <Typography variant="body1">
 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
 </Typography>
 </Grid>

 <Grid container item sm={8}>
 <Container component="main" maxWidth="md">
 <Grid container justify="center" item>
 <Typography variant="h4" className={classes.title}>
 Contact Us
 </Typography>
 </Grid>
 <Formik
 initialValues={initialValues}
 validate={(values) => handleValidate(values)}
 onSubmit={(values, { setSubmitting }) => handleSubmit(values, setSubmitting)}
 >
 {({
 submitForm, isSubmitting, values,
 }) => (
 <Form style={{ textAlign: 'center' }}>
 <Grid container spacing={2}>
 <Grid item xs={12}>
 <Field
 component={TextField}
 variant="outlined"
 name="full_name"
 label="Full Name"
 value={values.full_name}
 style={{ marginBottom: '10px', width: '100%' }}
 required
 />
 <Field
 component={TextField}
 variant="outlined"
 type="email"
 label="Email"
 name="email"
 value={values.email}
 style={{ marginBottom: '10px', width: '100%' }}
 required
 />
 <Field
 component={TextField}
 variant="outlined"
 label="Message"
 name="message"
 multiline
 InputProps={{ classes: { root: classes.message } }}
 style={{ marginBottom: '10px', width: '100%' }}
 value={values.message}
 required
 />
 </Grid>
 </Grid>

 <Button
 variant="contained"
 color="secondary"
 className={classes.submit}
 onClick={submitForm}
 disabled={isSubmitting}
 >
 Send
 </Button>
 </Form>
 )}
 </Formik>

 </Container>

 </Grid>
 </Grid>
 </div>
 </Dialog>
 </div>
 );
}

Contact.propTypes = {
 open: PropTypes.bool.isRequired,
 setOpen: PropTypes.func.isRequired,
};

41 changes: 24 additions & 17 deletions
components/Dashboard/Card.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,9 @@ import {
 makeStyles,
 Divider,
 Typography,
 Link,
// Link,
} from '@material-ui/core';
import Link from 'next/link';

const useStyles = makeStyles((theme) => ({
 title: {
Expand DownExpand Up@@ -37,17 +38,18 @@ function Card({ bridge, index }) {
 return (
 <Grid item xs={12} sm={6} md={4} key={`main-grid-${bridge.title}`}>
 <Paper className={classes.paper} id={`card-${index}`}>
 <Link href={`/bridge/${bridge.id}`}>
<Typography
 variant="h5"
 color="primary"
 className={classes.title}
 style={{ fontWeight: 600 }}
 id={`card-title-${index}`}
 >
 <Typography
variant="h5"
color="primary"
className={classes.title}
style={{ fontWeight: 600 }}
id={`card-title-${index}`}
>
<Link href={`/bridge/${bridge.slug}`}>
 {bridge.title}
 </Typography>
 </Link>
 </Link>
 </Typography>

 <Divider light className={classes.paddedDivider} />

 <Grid container spacing={2}>
Expand DownExpand Up@@ -92,13 +94,18 @@ function Card({ bridge, index }) {
 <Grid item xs container spacing={2}>
 <Grid item xs>
 {bridge.eventId ? (
 <Link href={`/events/${bridge.eventId}`}>
 <Typography variant="subtitle1" color="secondary">

 <Typography
 variant="subtitle1"
 color="secondary"
 id={`card-events-${index}`}
 >
 <Link href={`/events/${bridge.eventId}`}>
 View Events
 </Typography>
 </Link>
 </Link>
 </Typography>
 ) : (
 <Typography variant="subtitle1">
 <Typography variant="subtitle1" id={`card-events-${index}`}>
 View Events
 </Typography>
 )}
Expand All@@ -115,7 +122,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,
Expand Down

12 changes: 6 additions & 6 deletions
components/Editor/ActionsDialog/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand All@@ -35,7 +35,7 @@ function ActionsDialog({

 const handleAbort = () => {
 api.patch('/events/abort', {
bridge_id: bridgeId,
bridge_slug: bridgeSlug,
 })
 .then((res) => {
 if (res.status === 200) {
Expand All@@ -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);
Expand All@@ -66,7 +66,7 @@ function ActionsDialog({
 };

 const handleDelete = () => {
 api.delete(`/bridges/${bridgeId}`).then(() => {
 api.delete(`/bridges/${bridgeSlug}`).then(() => {
 router.push('/dashboard');
 }).catch(() => {
 setErrorOpen(true);
Expand DownExpand Up@@ -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;

14 changes: 7 additions & 7 deletions
components/Editor/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ function Editor({ bridge, isEditView }) {

 const {
 active,
id,
slug,
 outboundUrl,
 httpMethod,
 headers,
Expand DownExpand Up@@ -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 {
Expand All@@ -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));
Expand All@@ -175,7 +175,7 @@ function Editor({ bridge, isEditView }) {
 return (
 <>
 <Navbar />
 <Sidebar events={bridge.events} bridgeId={bridge.id} title={title} />
 <Sidebar events={bridge.events} bridgeSlug={bridge.slug} title={title} />

 <Grid container item spacing={5} className={classes.root} sm={9} md={10}>
 <Grid item container wrap="nowrap">
Expand DownExpand Up@@ -209,7 +209,7 @@ function Editor({ bridge, isEditView }) {
 active={active}
 open={actionsDialogOpen}
 onClose={() => setActionsDialogOpen(false)}
bridgeId={id}
bridgeSlug={slug}
 />
 <Button
 onClick={() => setActionsDialogOpen(true)}
Expand DownExpand Up@@ -275,7 +275,7 @@ Editor.propTypes = {
 isEditView: PropTypes.bool,
 bridge: PropTypes.shape({
 active: PropTypes.bool,
id: PropTypes.number,
slug: PropTypes.string,
 title: PropTypes.string,
 outboundUrl: PropTypes.string,
 httpMethod: PropTypes.string,
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Design Updates by williampj · Pull Request #47 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Design Updates#47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

AndiLavera
merged 17 commits into

from

Dec 7, 2020
 Merged


Design Updates
#47
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
3879468

started contact us page


angeljruiz Nov 24, 2020
2f7beb3

first commit


williampj Nov 24, 2020
68c7a37

added features and small text ideas


williampj Nov 24, 2020
f5116a6

.


angeljruiz Dec 1, 2020
687ae10

Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…


angeljruiz Dec 1, 2020
f7ba104

sends values to backend which then sends an email


angeljruiz Dec 2, 2020
0f06da6

Merge branch 'master' of github.com:williampj/bridgeapi.js into landi…


AndiLavera Dec 4, 2020
0c3c5fe

Replace material ui link with nextjs link


AndiLavera Dec 5, 2020
1347281

About us in footer


AndiLavera Dec 5, 2020
04712cf

Merge branch 'contact-us' of github.com:williampj/bridgeapi.js into l…


AndiLavera Dec 5, 2020
8785fa7

contact us modal


AndiLavera Dec 5, 2020
aa8e932

seo title


AndiLavera Dec 5, 2020
e3e7bd3

small changes


angeljruiz Dec 5, 2020
48abf2e

Bridge slug update & fix event status state not updating


AndiLavera Dec 6, 2020
c782c58

Update broken specs


AndiLavera Dec 6, 2020
39b01b6

footer text


williampj Dec 6, 2020
903aaa3

Fix lint


AndiLavera Dec 7, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


207 changes: 207 additions & 0 deletions
components/ContactModal/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {
 Container,
 Typography,
 Button,
 Grid,
 makeStyles,
 Dialog,
} from '@material-ui/core';
import MailIcon from '@material-ui/icons/Mail';

import { Formik, Form, Field } from 'formik';
import { TextField } from 'formik-material-ui';

import SnackAlert from '../shared/SnackAlert';
import emailValidator from '../../utils/emailValidator';
import api from '../../utils/api';

const useStyles = makeStyles((theme) => ({
 paper: {
 backgroundColor: theme.palette.background.paper,
 boxShadow: theme.shadows[5],
 padding: theme.spacing(2, 4, 3),
 borderRadius: '10px',
 },
 mailIcon: {
 color: theme.palette.secondary.main,
 fontSize: '4rem',
 justifyContent: 'center',
 },
 aside: {
 backgroundColor: theme.palette.primary.main,
 height: '100%',
 },
 title: {
 marginBottom: theme.spacing(2),
 },
}));

export default function Contact({ open, setOpen }) {
 const classes = useStyles();
 const [successOpen, setSuccessOpen] = useState(false);
 const [errorOpen, setErrorOpen] = useState(false);

 const handleClose = () => {
 setOpen(false);
 };

 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', values)
 .then(() => setSuccessOpen(true))
 .catch(() => setErrorOpen(true));
 };

 const handleSnackClose = (_, reason) => {
 if (reason === 'clickaway') {
 return;
 }

 setSuccessOpen(false);
 setErrorOpen(false);
 };

 return (
 <div>
 <SnackAlert
 open={successOpen}
 onClose={handleSnackClose}
 severity="success"
 message="Success! We'll be in contact with you shortly"
 id="success-message"
 />
 <SnackAlert
 open={errorOpen}
 onClose={handleSnackClose}
 severity="error"
 message="Some error has occurred. Please try again."
 id="error-message"
 />
 <Dialog
 open={open}
 onClose={handleClose}
 aria-labelledby="simple-modal-title"
 aria-describedby="simple-modal-description"
 >
 <div className={classes.paper}>
 <Grid
 container
 spacing={0}
 className={classes.modal}
 >
 <Grid
 item
 sm={4}
 style={{ textAlign: 'center', paddingTop: '3rem' }}
 >
 <MailIcon className={classes.mailIcon} />

 <Typography variant="body1">
 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
 </Typography>
 </Grid>

 <Grid container item sm={8}>
 <Container component="main" maxWidth="md">
 <Grid container justify="center" item>
 <Typography variant="h4" className={classes.title}>
 Contact Us
 </Typography>
 </Grid>
 <Formik
 initialValues={initialValues}
 validate={(values) => handleValidate(values)}
 onSubmit={(values, { setSubmitting }) => handleSubmit(values, setSubmitting)}
 >
 {({
 submitForm, isSubmitting, values,
 }) => (
 <Form style={{ textAlign: 'center' }}>
 <Grid container spacing={2}>
 <Grid item xs={12}>
 <Field
 component={TextField}
 variant="outlined"
 name="full_name"
 label="Full Name"
 value={values.full_name}
 style={{ marginBottom: '10px', width: '100%' }}
 required
 />
 <Field
 component={TextField}
 variant="outlined"
 type="email"
 label="Email"
 name="email"
 value={values.email}
 style={{ marginBottom: '10px', width: '100%' }}
 required
 />
 <Field
 component={TextField}
 variant="outlined"
 label="Message"
 name="message"
 multiline
 InputProps={{ classes: { root: classes.message } }}
 style={{ marginBottom: '10px', width: '100%' }}
 value={values.message}
 required
 />
 </Grid>
 </Grid>

 <Button
 variant="contained"
 color="secondary"
 className={classes.submit}
 onClick={submitForm}
 disabled={isSubmitting}
 >
 Send
 </Button>
 </Form>
 )}
 </Formik>

 </Container>

 </Grid>
 </Grid>
 </div>
 </Dialog>
 </div>
 );
}

Contact.propTypes = {
 open: PropTypes.bool.isRequired,
 setOpen: PropTypes.func.isRequired,
};

41 changes: 24 additions & 17 deletions
components/Dashboard/Card.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,9 @@ import {
 makeStyles,
 Divider,
 Typography,
 Link,
// Link,
} from '@material-ui/core';
import Link from 'next/link';

const useStyles = makeStyles((theme) => ({
 title: {
Expand DownExpand Up@@ -37,17 +38,18 @@ function Card({ bridge, index }) {
 return (
 <Grid item xs={12} sm={6} md={4} key={`main-grid-${bridge.title}`}>
 <Paper className={classes.paper} id={`card-${index}`}>
 <Link href={`/bridge/${bridge.id}`}>
<Typography
 variant="h5"
 color="primary"
 className={classes.title}
 style={{ fontWeight: 600 }}
 id={`card-title-${index}`}
 >
 <Typography
variant="h5"
color="primary"
className={classes.title}
style={{ fontWeight: 600 }}
id={`card-title-${index}`}
>
<Link href={`/bridge/${bridge.slug}`}>
 {bridge.title}
 </Typography>
 </Link>
 </Link>
 </Typography>

 <Divider light className={classes.paddedDivider} />

 <Grid container spacing={2}>
Expand DownExpand Up@@ -92,13 +94,18 @@ function Card({ bridge, index }) {
 <Grid item xs container spacing={2}>
 <Grid item xs>
 {bridge.eventId ? (
 <Link href={`/events/${bridge.eventId}`}>
 <Typography variant="subtitle1" color="secondary">

 <Typography
 variant="subtitle1"
 color="secondary"
 id={`card-events-${index}`}
 >
 <Link href={`/events/${bridge.eventId}`}>
 View Events
 </Typography>
 </Link>
 </Link>
 </Typography>
 ) : (
 <Typography variant="subtitle1">
 <Typography variant="subtitle1" id={`card-events-${index}`}>
 View Events
 </Typography>
 )}
Expand All@@ -115,7 +122,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,
Expand Down

12 changes: 6 additions & 6 deletions
components/Editor/ActionsDialog/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand All@@ -35,7 +35,7 @@ function ActionsDialog({

 const handleAbort = () => {
 api.patch('/events/abort', {
bridge_id: bridgeId,
bridge_slug: bridgeSlug,
 })
 .then((res) => {
 if (res.status === 200) {
Expand All@@ -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);
Expand All@@ -66,7 +66,7 @@ function ActionsDialog({
 };

 const handleDelete = () => {
 api.delete(`/bridges/${bridgeId}`).then(() => {
 api.delete(`/bridges/${bridgeSlug}`).then(() => {
 router.push('/dashboard');
 }).catch(() => {
 setErrorOpen(true);
Expand DownExpand Up@@ -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;

14 changes: 7 additions & 7 deletions
components/Editor/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ function Editor({ bridge, isEditView }) {

 const {
 active,
id,
slug,
 outboundUrl,
 httpMethod,
 headers,
Expand DownExpand Up@@ -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 {
Expand All@@ -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));
Expand All@@ -175,7 +175,7 @@ function Editor({ bridge, isEditView }) {
 return (
 <>
 <Navbar />
 <Sidebar events={bridge.events} bridgeId={bridge.id} title={title} />
 <Sidebar events={bridge.events} bridgeSlug={bridge.slug} title={title} />

 <Grid container item spacing={5} className={classes.root} sm={9} md={10}>
 <Grid item container wrap="nowrap">
Expand DownExpand Up@@ -209,7 +209,7 @@ function Editor({ bridge, isEditView }) {
 active={active}
 open={actionsDialogOpen}
 onClose={() => setActionsDialogOpen(false)}
bridgeId={id}
bridgeSlug={slug}
 />
 <Button
 onClick={() => setActionsDialogOpen(true)}
Expand DownExpand Up@@ -275,7 +275,7 @@ Editor.propTypes = {
 isEditView: PropTypes.bool,
 bridge: PropTypes.shape({
 active: PropTypes.bool,
id: PropTypes.number,
slug: PropTypes.string,
 title: PropTypes.string,
 outboundUrl: PropTypes.string,
 httpMethod: PropTypes.string,
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Design Updates by williampj · Pull Request #47 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Design Updates#47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

AndiLavera
merged 17 commits into

from

Dec 7, 2020
 Merged


Design Updates
#47
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
3879468

started contact us page


angeljruiz Nov 24, 2020
2f7beb3

first commit


williampj Nov 24, 2020
68c7a37

added features and small text ideas


williampj Nov 24, 2020
f5116a6

.


angeljruiz Dec 1, 2020
687ae10

Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…


angeljruiz Dec 1, 2020
f7ba104

sends values to backend which then sends an email


angeljruiz Dec 2, 2020
0f06da6

Merge branch 'master' of github.com:williampj/bridgeapi.js into landi…


AndiLavera Dec 4, 2020
0c3c5fe

Replace material ui link with nextjs link


AndiLavera Dec 5, 2020
1347281

About us in footer


AndiLavera Dec 5, 2020
04712cf

Merge branch 'contact-us' of github.com:williampj/bridgeapi.js into l…


AndiLavera Dec 5, 2020
8785fa7

contact us modal


AndiLavera Dec 5, 2020
aa8e932

seo title


AndiLavera Dec 5, 2020
e3e7bd3

small changes


angeljruiz Dec 5, 2020
48abf2e

Bridge slug update & fix event status state not updating


AndiLavera Dec 6, 2020
c782c58

Update broken specs


AndiLavera Dec 6, 2020
39b01b6

footer text


williampj Dec 6, 2020
903aaa3

Fix lint


AndiLavera Dec 7, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


207 changes: 207 additions & 0 deletions
components/ContactModal/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {
 Container,
 Typography,
 Button,
 Grid,
 makeStyles,
 Dialog,
} from '@material-ui/core';
import MailIcon from '@material-ui/icons/Mail';

import { Formik, Form, Field } from 'formik';
import { TextField } from 'formik-material-ui';

import SnackAlert from '../shared/SnackAlert';
import emailValidator from '../../utils/emailValidator';
import api from '../../utils/api';

const useStyles = makeStyles((theme) => ({
 paper: {
 backgroundColor: theme.palette.background.paper,
 boxShadow: theme.shadows[5],
 padding: theme.spacing(2, 4, 3),
 borderRadius: '10px',
 },
 mailIcon: {
 color: theme.palette.secondary.main,
 fontSize: '4rem',
 justifyContent: 'center',
 },
 aside: {
 backgroundColor: theme.palette.primary.main,
 height: '100%',
 },
 title: {
 marginBottom: theme.spacing(2),
 },
}));

export default function Contact({ open, setOpen }) {
 const classes = useStyles();
 const [successOpen, setSuccessOpen] = useState(false);
 const [errorOpen, setErrorOpen] = useState(false);

 const handleClose = () => {
 setOpen(false);
 };

 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', values)
 .then(() => setSuccessOpen(true))
 .catch(() => setErrorOpen(true));
 };

 const handleSnackClose = (_, reason) => {
 if (reason === 'clickaway') {
 return;
 }

 setSuccessOpen(false);
 setErrorOpen(false);
 };

 return (
 <div>
 <SnackAlert
 open={successOpen}
 onClose={handleSnackClose}
 severity="success"
 message="Success! We'll be in contact with you shortly"
 id="success-message"
 />
 <SnackAlert
 open={errorOpen}
 onClose={handleSnackClose}
 severity="error"
 message="Some error has occurred. Please try again."
 id="error-message"
 />
 <Dialog
 open={open}
 onClose={handleClose}
 aria-labelledby="simple-modal-title"
 aria-describedby="simple-modal-description"
 >
 <div className={classes.paper}>
 <Grid
 container
 spacing={0}
 className={classes.modal}
 >
 <Grid
 item
 sm={4}
 style={{ textAlign: 'center', paddingTop: '3rem' }}
 >
 <MailIcon className={classes.mailIcon} />

 <Typography variant="body1">
 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
 </Typography>
 </Grid>

 <Grid container item sm={8}>
 <Container component="main" maxWidth="md">
 <Grid container justify="center" item>
 <Typography variant="h4" className={classes.title}>
 Contact Us
 </Typography>
 </Grid>
 <Formik
 initialValues={initialValues}
 validate={(values) => handleValidate(values)}
 onSubmit={(values, { setSubmitting }) => handleSubmit(values, setSubmitting)}
 >
 {({
 submitForm, isSubmitting, values,
 }) => (
 <Form style={{ textAlign: 'center' }}>
 <Grid container spacing={2}>
 <Grid item xs={12}>
 <Field
 component={TextField}
 variant="outlined"
 name="full_name"
 label="Full Name"
 value={values.full_name}
 style={{ marginBottom: '10px', width: '100%' }}
 required
 />
 <Field
 component={TextField}
 variant="outlined"
 type="email"
 label="Email"
 name="email"
 value={values.email}
 style={{ marginBottom: '10px', width: '100%' }}
 required
 />
 <Field
 component={TextField}
 variant="outlined"
 label="Message"
 name="message"
 multiline
 InputProps={{ classes: { root: classes.message } }}
 style={{ marginBottom: '10px', width: '100%' }}
 value={values.message}
 required
 />
 </Grid>
 </Grid>

 <Button
 variant="contained"
 color="secondary"
 className={classes.submit}
 onClick={submitForm}
 disabled={isSubmitting}
 >
 Send
 </Button>
 </Form>
 )}
 </Formik>

 </Container>

 </Grid>
 </Grid>
 </div>
 </Dialog>
 </div>
 );
}

Contact.propTypes = {
 open: PropTypes.bool.isRequired,
 setOpen: PropTypes.func.isRequired,
};

41 changes: 24 additions & 17 deletions
components/Dashboard/Card.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,9 @@ import {
 makeStyles,
 Divider,
 Typography,
 Link,
// Link,
} from '@material-ui/core';
import Link from 'next/link';

const useStyles = makeStyles((theme) => ({
 title: {
Expand DownExpand Up@@ -37,17 +38,18 @@ function Card({ bridge, index }) {
 return (
 <Grid item xs={12} sm={6} md={4} key={`main-grid-${bridge.title}`}>
 <Paper className={classes.paper} id={`card-${index}`}>
 <Link href={`/bridge/${bridge.id}`}>
<Typography
 variant="h5"
 color="primary"
 className={classes.title}
 style={{ fontWeight: 600 }}
 id={`card-title-${index}`}
 >
 <Typography
variant="h5"
color="primary"
className={classes.title}
style={{ fontWeight: 600 }}
id={`card-title-${index}`}
>
<Link href={`/bridge/${bridge.slug}`}>
 {bridge.title}
 </Typography>
 </Link>
 </Link>
 </Typography>

 <Divider light className={classes.paddedDivider} />

 <Grid container spacing={2}>
Expand DownExpand Up@@ -92,13 +94,18 @@ function Card({ bridge, index }) {
 <Grid item xs container spacing={2}>
 <Grid item xs>
 {bridge.eventId ? (
 <Link href={`/events/${bridge.eventId}`}>
 <Typography variant="subtitle1" color="secondary">

 <Typography
 variant="subtitle1"
 color="secondary"
 id={`card-events-${index}`}
 >
 <Link href={`/events/${bridge.eventId}`}>
 View Events
 </Typography>
 </Link>
 </Link>
 </Typography>
 ) : (
 <Typography variant="subtitle1">
 <Typography variant="subtitle1" id={`card-events-${index}`}>
 View Events
 </Typography>
 )}
Expand All@@ -115,7 +122,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,
Expand Down

12 changes: 6 additions & 6 deletions
components/Editor/ActionsDialog/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand All@@ -35,7 +35,7 @@ function ActionsDialog({

 const handleAbort = () => {
 api.patch('/events/abort', {
bridge_id: bridgeId,
bridge_slug: bridgeSlug,
 })
 .then((res) => {
 if (res.status === 200) {
Expand All@@ -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);
Expand All@@ -66,7 +66,7 @@ function ActionsDialog({
 };

 const handleDelete = () => {
 api.delete(`/bridges/${bridgeId}`).then(() => {
 api.delete(`/bridges/${bridgeSlug}`).then(() => {
 router.push('/dashboard');
 }).catch(() => {
 setErrorOpen(true);
Expand DownExpand Up@@ -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;

14 changes: 7 additions & 7 deletions
components/Editor/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ function Editor({ bridge, isEditView }) {

 const {
 active,
id,
slug,
 outboundUrl,
 httpMethod,
 headers,
Expand DownExpand Up@@ -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 {
Expand All@@ -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));
Expand All@@ -175,7 +175,7 @@ function Editor({ bridge, isEditView }) {
 return (
 <>
 <Navbar />
 <Sidebar events={bridge.events} bridgeId={bridge.id} title={title} />
 <Sidebar events={bridge.events} bridgeSlug={bridge.slug} title={title} />

 <Grid container item spacing={5} className={classes.root} sm={9} md={10}>
 <Grid item container wrap="nowrap">
Expand DownExpand Up@@ -209,7 +209,7 @@ function Editor({ bridge, isEditView }) {
 active={active}
 open={actionsDialogOpen}
 onClose={() => setActionsDialogOpen(false)}
bridgeId={id}
bridgeSlug={slug}
 />
 <Button
 onClick={() => setActionsDialogOpen(true)}
Expand DownExpand Up@@ -275,7 +275,7 @@ Editor.propTypes = {
 isEditView: PropTypes.bool,
 bridge: PropTypes.shape({
 active: PropTypes.bool,
id: PropTypes.number,
slug: PropTypes.string,
 title: PropTypes.string,
 outboundUrl: PropTypes.string,
 httpMethod: PropTypes.string,
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Design Updates by williampj · Pull Request #47 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Design Updates#47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

AndiLavera
merged 17 commits into

from

Dec 7, 2020
 Merged


Design Updates
#47
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
3879468

started contact us page


angeljruiz Nov 24, 2020
2f7beb3

first commit


williampj Nov 24, 2020
68c7a37

added features and small text ideas


williampj Nov 24, 2020
f5116a6

.


angeljruiz Dec 1, 2020
687ae10

Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…


angeljruiz Dec 1, 2020
f7ba104

sends values to backend which then sends an email


angeljruiz Dec 2, 2020
0f06da6

Merge branch 'master' of github.com:williampj/bridgeapi.js into landi…


AndiLavera Dec 4, 2020
0c3c5fe

Replace material ui link with nextjs link


AndiLavera Dec 5, 2020
1347281

About us in footer


AndiLavera Dec 5, 2020
04712cf

Merge branch 'contact-us' of github.com:williampj/bridgeapi.js into l…


AndiLavera Dec 5, 2020
8785fa7

contact us modal


AndiLavera Dec 5, 2020
aa8e932

seo title


AndiLavera Dec 5, 2020
e3e7bd3

small changes


angeljruiz Dec 5, 2020
48abf2e

Bridge slug update & fix event status state not updating


AndiLavera Dec 6, 2020
c782c58

Update broken specs


AndiLavera Dec 6, 2020
39b01b6

footer text


williampj Dec 6, 2020
903aaa3

Fix lint


AndiLavera Dec 7, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


207 changes: 207 additions & 0 deletions
components/ContactModal/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {
 Container,
 Typography,
 Button,
 Grid,
 makeStyles,
 Dialog,
} from '@material-ui/core';
import MailIcon from '@material-ui/icons/Mail';

import { Formik, Form, Field } from 'formik';
import { TextField } from 'formik-material-ui';

import SnackAlert from '../shared/SnackAlert';
import emailValidator from '../../utils/emailValidator';
import api from '../../utils/api';

const useStyles = makeStyles((theme) => ({
 paper: {
 backgroundColor: theme.palette.background.paper,
 boxShadow: theme.shadows[5],
 padding: theme.spacing(2, 4, 3),
 borderRadius: '10px',
 },
 mailIcon: {
 color: theme.palette.secondary.main,
 fontSize: '4rem',
 justifyContent: 'center',
 },
 aside: {
 backgroundColor: theme.palette.primary.main,
 height: '100%',
 },
 title: {
 marginBottom: theme.spacing(2),
 },
}));

export default function Contact({ open, setOpen }) {
 const classes = useStyles();
 const [successOpen, setSuccessOpen] = useState(false);
 const [errorOpen, setErrorOpen] = useState(false);

 const handleClose = () => {
 setOpen(false);
 };

 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', values)
 .then(() => setSuccessOpen(true))
 .catch(() => setErrorOpen(true));
 };

 const handleSnackClose = (_, reason) => {
 if (reason === 'clickaway') {
 return;
 }

 setSuccessOpen(false);
 setErrorOpen(false);
 };

 return (
 <div>
 <SnackAlert
 open={successOpen}
 onClose={handleSnackClose}
 severity="success"
 message="Success! We'll be in contact with you shortly"
 id="success-message"
 />
 <SnackAlert
 open={errorOpen}
 onClose={handleSnackClose}
 severity="error"
 message="Some error has occurred. Please try again."
 id="error-message"
 />
 <Dialog
 open={open}
 onClose={handleClose}
 aria-labelledby="simple-modal-title"
 aria-describedby="simple-modal-description"
 >
 <div className={classes.paper}>
 <Grid
 container
 spacing={0}
 className={classes.modal}
 >
 <Grid
 item
 sm={4}
 style={{ textAlign: 'center', paddingTop: '3rem' }}
 >
 <MailIcon className={classes.mailIcon} />

 <Typography variant="body1">
 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
 </Typography>
 </Grid>

 <Grid container item sm={8}>
 <Container component="main" maxWidth="md">
 <Grid container justify="center" item>
 <Typography variant="h4" className={classes.title}>
 Contact Us
 </Typography>
 </Grid>
 <Formik
 initialValues={initialValues}
 validate={(values) => handleValidate(values)}
 onSubmit={(values, { setSubmitting }) => handleSubmit(values, setSubmitting)}
 >
 {({
 submitForm, isSubmitting, values,
 }) => (
 <Form style={{ textAlign: 'center' }}>
 <Grid container spacing={2}>
 <Grid item xs={12}>
 <Field
 component={TextField}
 variant="outlined"
 name="full_name"
 label="Full Name"
 value={values.full_name}
 style={{ marginBottom: '10px', width: '100%' }}
 required
 />
 <Field
 component={TextField}
 variant="outlined"
 type="email"
 label="Email"
 name="email"
 value={values.email}
 style={{ marginBottom: '10px', width: '100%' }}
 required
 />
 <Field
 component={TextField}
 variant="outlined"
 label="Message"
 name="message"
 multiline
 InputProps={{ classes: { root: classes.message } }}
 style={{ marginBottom: '10px', width: '100%' }}
 value={values.message}
 required
 />
 </Grid>
 </Grid>

 <Button
 variant="contained"
 color="secondary"
 className={classes.submit}
 onClick={submitForm}
 disabled={isSubmitting}
 >
 Send
 </Button>
 </Form>
 )}
 </Formik>

 </Container>

 </Grid>
 </Grid>
 </div>
 </Dialog>
 </div>
 );
}

Contact.propTypes = {
 open: PropTypes.bool.isRequired,
 setOpen: PropTypes.func.isRequired,
};

41 changes: 24 additions & 17 deletions
components/Dashboard/Card.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,9 @@ import {
 makeStyles,
 Divider,
 Typography,
 Link,
// Link,
} from '@material-ui/core';
import Link from 'next/link';

const useStyles = makeStyles((theme) => ({
 title: {
Expand DownExpand Up@@ -37,17 +38,18 @@ function Card({ bridge, index }) {
 return (
 <Grid item xs={12} sm={6} md={4} key={`main-grid-${bridge.title}`}>
 <Paper className={classes.paper} id={`card-${index}`}>
 <Link href={`/bridge/${bridge.id}`}>
<Typography
 variant="h5"
 color="primary"
 className={classes.title}
 style={{ fontWeight: 600 }}
 id={`card-title-${index}`}
 >
 <Typography
variant="h5"
color="primary"
className={classes.title}
style={{ fontWeight: 600 }}
id={`card-title-${index}`}
>
<Link href={`/bridge/${bridge.slug}`}>
 {bridge.title}
 </Typography>
 </Link>
 </Link>
 </Typography>

 <Divider light className={classes.paddedDivider} />

 <Grid container spacing={2}>
Expand DownExpand Up@@ -92,13 +94,18 @@ function Card({ bridge, index }) {
 <Grid item xs container spacing={2}>
 <Grid item xs>
 {bridge.eventId ? (
 <Link href={`/events/${bridge.eventId}`}>
 <Typography variant="subtitle1" color="secondary">

 <Typography
 variant="subtitle1"
 color="secondary"
 id={`card-events-${index}`}
 >
 <Link href={`/events/${bridge.eventId}`}>
 View Events
 </Typography>
 </Link>
 </Link>
 </Typography>
 ) : (
 <Typography variant="subtitle1">
 <Typography variant="subtitle1" id={`card-events-${index}`}>
 View Events
 </Typography>
 )}
Expand All@@ -115,7 +122,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,
Expand Down

12 changes: 6 additions & 6 deletions
components/Editor/ActionsDialog/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand All@@ -35,7 +35,7 @@ function ActionsDialog({

 const handleAbort = () => {
 api.patch('/events/abort', {
bridge_id: bridgeId,
bridge_slug: bridgeSlug,
 })
 .then((res) => {
 if (res.status === 200) {
Expand All@@ -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);
Expand All@@ -66,7 +66,7 @@ function ActionsDialog({
 };

 const handleDelete = () => {
 api.delete(`/bridges/${bridgeId}`).then(() => {
 api.delete(`/bridges/${bridgeSlug}`).then(() => {
 router.push('/dashboard');
 }).catch(() => {
 setErrorOpen(true);
Expand DownExpand Up@@ -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;

14 changes: 7 additions & 7 deletions
components/Editor/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ function Editor({ bridge, isEditView }) {

 const {
 active,
id,
slug,
 outboundUrl,
 httpMethod,
 headers,
Expand DownExpand Up@@ -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 {
Expand All@@ -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));
Expand All@@ -175,7 +175,7 @@ function Editor({ bridge, isEditView }) {
 return (
 <>
 <Navbar />
 <Sidebar events={bridge.events} bridgeId={bridge.id} title={title} />
 <Sidebar events={bridge.events} bridgeSlug={bridge.slug} title={title} />

 <Grid container item spacing={5} className={classes.root} sm={9} md={10}>
 <Grid item container wrap="nowrap">
Expand DownExpand Up@@ -209,7 +209,7 @@ function Editor({ bridge, isEditView }) {
 active={active}
 open={actionsDialogOpen}
 onClose={() => setActionsDialogOpen(false)}
bridgeId={id}
bridgeSlug={slug}
 />
 <Button
 onClick={() => setActionsDialogOpen(true)}
Expand DownExpand Up@@ -275,7 +275,7 @@ Editor.propTypes = {
 isEditView: PropTypes.bool,
 bridge: PropTypes.shape({
 active: PropTypes.bool,
id: PropTypes.number,
slug: PropTypes.string,
 title: PropTypes.string,
 outboundUrl: PropTypes.string,
 httpMethod: PropTypes.string,
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Design Updates by williampj · Pull Request #47 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Design Updates#47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

AndiLavera
merged 17 commits into

from

Dec 7, 2020
 Merged


Design Updates
#47
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
3879468

started contact us page


angeljruiz Nov 24, 2020
2f7beb3

first commit


williampj Nov 24, 2020
68c7a37

added features and small text ideas


williampj Nov 24, 2020
f5116a6

.


angeljruiz Dec 1, 2020
687ae10

Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…


angeljruiz Dec 1, 2020
f7ba104

sends values to backend which then sends an email


angeljruiz Dec 2, 2020
0f06da6

Merge branch 'master' of github.com:williampj/bridgeapi.js into landi…


AndiLavera Dec 4, 2020
0c3c5fe

Replace material ui link with nextjs link


AndiLavera Dec 5, 2020
1347281

About us in footer


AndiLavera Dec 5, 2020
04712cf

Merge branch 'contact-us' of github.com:williampj/bridgeapi.js into l…


AndiLavera Dec 5, 2020
8785fa7

contact us modal


AndiLavera Dec 5, 2020
aa8e932

seo title


AndiLavera Dec 5, 2020
e3e7bd3

small changes


angeljruiz Dec 5, 2020
48abf2e

Bridge slug update & fix event status state not updating


AndiLavera Dec 6, 2020
c782c58

Update broken specs


AndiLavera Dec 6, 2020
39b01b6

footer text


williampj Dec 6, 2020
903aaa3

Fix lint


AndiLavera Dec 7, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


207 changes: 207 additions & 0 deletions
components/ContactModal/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {
 Container,
 Typography,
 Button,
 Grid,
 makeStyles,
 Dialog,
} from '@material-ui/core';
import MailIcon from '@material-ui/icons/Mail';

import { Formik, Form, Field } from 'formik';
import { TextField } from 'formik-material-ui';

import SnackAlert from '../shared/SnackAlert';
import emailValidator from '../../utils/emailValidator';
import api from '../../utils/api';

const useStyles = makeStyles((theme) => ({
 paper: {
 backgroundColor: theme.palette.background.paper,
 boxShadow: theme.shadows[5],
 padding: theme.spacing(2, 4, 3),
 borderRadius: '10px',
 },
 mailIcon: {
 color: theme.palette.secondary.main,
 fontSize: '4rem',
 justifyContent: 'center',
 },
 aside: {
 backgroundColor: theme.palette.primary.main,
 height: '100%',
 },
 title: {
 marginBottom: theme.spacing(2),
 },
}));

export default function Contact({ open, setOpen }) {
 const classes = useStyles();
 const [successOpen, setSuccessOpen] = useState(false);
 const [errorOpen, setErrorOpen] = useState(false);

 const handleClose = () => {
 setOpen(false);
 };

 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', values)
 .then(() => setSuccessOpen(true))
 .catch(() => setErrorOpen(true));
 };

 const handleSnackClose = (_, reason) => {
 if (reason === 'clickaway') {
 return;
 }

 setSuccessOpen(false);
 setErrorOpen(false);
 };

 return (
 <div>
 <SnackAlert
 open={successOpen}
 onClose={handleSnackClose}
 severity="success"
 message="Success! We'll be in contact with you shortly"
 id="success-message"
 />
 <SnackAlert
 open={errorOpen}
 onClose={handleSnackClose}
 severity="error"
 message="Some error has occurred. Please try again."
 id="error-message"
 />
 <Dialog
 open={open}
 onClose={handleClose}
 aria-labelledby="simple-modal-title"
 aria-describedby="simple-modal-description"
 >
 <div className={classes.paper}>
 <Grid
 container
 spacing={0}
 className={classes.modal}
 >
 <Grid
 item
 sm={4}
 style={{ textAlign: 'center', paddingTop: '3rem' }}
 >
 <MailIcon className={classes.mailIcon} />

 <Typography variant="body1">
 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
 </Typography>
 </Grid>

 <Grid container item sm={8}>
 <Container component="main" maxWidth="md">
 <Grid container justify="center" item>
 <Typography variant="h4" className={classes.title}>
 Contact Us
 </Typography>
 </Grid>
 <Formik
 initialValues={initialValues}
 validate={(values) => handleValidate(values)}
 onSubmit={(values, { setSubmitting }) => handleSubmit(values, setSubmitting)}
 >
 {({
 submitForm, isSubmitting, values,
 }) => (
 <Form style={{ textAlign: 'center' }}>
 <Grid container spacing={2}>
 <Grid item xs={12}>
 <Field
 component={TextField}
 variant="outlined"
 name="full_name"
 label="Full Name"
 value={values.full_name}
 style={{ marginBottom: '10px', width: '100%' }}
 required
 />
 <Field
 component={TextField}
 variant="outlined"
 type="email"
 label="Email"
 name="email"
 value={values.email}
 style={{ marginBottom: '10px', width: '100%' }}
 required
 />
 <Field
 component={TextField}
 variant="outlined"
 label="Message"
 name="message"
 multiline
 InputProps={{ classes: { root: classes.message } }}
 style={{ marginBottom: '10px', width: '100%' }}
 value={values.message}
 required
 />
 </Grid>
 </Grid>

 <Button
 variant="contained"
 color="secondary"
 className={classes.submit}
 onClick={submitForm}
 disabled={isSubmitting}
 >
 Send
 </Button>
 </Form>
 )}
 </Formik>

 </Container>

 </Grid>
 </Grid>
 </div>
 </Dialog>
 </div>
 );
}

Contact.propTypes = {
 open: PropTypes.bool.isRequired,
 setOpen: PropTypes.func.isRequired,
};

41 changes: 24 additions & 17 deletions
components/Dashboard/Card.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,9 @@ import {
 makeStyles,
 Divider,
 Typography,
 Link,
// Link,
} from '@material-ui/core';
import Link from 'next/link';

const useStyles = makeStyles((theme) => ({
 title: {
Expand DownExpand Up@@ -37,17 +38,18 @@ function Card({ bridge, index }) {
 return (
 <Grid item xs={12} sm={6} md={4} key={`main-grid-${bridge.title}`}>
 <Paper className={classes.paper} id={`card-${index}`}>
 <Link href={`/bridge/${bridge.id}`}>
<Typography
 variant="h5"
 color="primary"
 className={classes.title}
 style={{ fontWeight: 600 }}
 id={`card-title-${index}`}
 >
 <Typography
variant="h5"
color="primary"
className={classes.title}
style={{ fontWeight: 600 }}
id={`card-title-${index}`}
>
<Link href={`/bridge/${bridge.slug}`}>
 {bridge.title}
 </Typography>
 </Link>
 </Link>
 </Typography>

 <Divider light className={classes.paddedDivider} />

 <Grid container spacing={2}>
Expand DownExpand Up@@ -92,13 +94,18 @@ function Card({ bridge, index }) {
 <Grid item xs container spacing={2}>
 <Grid item xs>
 {bridge.eventId ? (
 <Link href={`/events/${bridge.eventId}`}>
 <Typography variant="subtitle1" color="secondary">

 <Typography
 variant="subtitle1"
 color="secondary"
 id={`card-events-${index}`}
 >
 <Link href={`/events/${bridge.eventId}`}>
 View Events
 </Typography>
 </Link>
 </Link>
 </Typography>
 ) : (
 <Typography variant="subtitle1">
 <Typography variant="subtitle1" id={`card-events-${index}`}>
 View Events
 </Typography>
 )}
Expand All@@ -115,7 +122,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,
Expand Down

12 changes: 6 additions & 6 deletions
components/Editor/ActionsDialog/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand All@@ -35,7 +35,7 @@ function ActionsDialog({

 const handleAbort = () => {
 api.patch('/events/abort', {
bridge_id: bridgeId,
bridge_slug: bridgeSlug,
 })
 .then((res) => {
 if (res.status === 200) {
Expand All@@ -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);
Expand All@@ -66,7 +66,7 @@ function ActionsDialog({
 };

 const handleDelete = () => {
 api.delete(`/bridges/${bridgeId}`).then(() => {
 api.delete(`/bridges/${bridgeSlug}`).then(() => {
 router.push('/dashboard');
 }).catch(() => {
 setErrorOpen(true);
Expand DownExpand Up@@ -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;

14 changes: 7 additions & 7 deletions
components/Editor/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ function Editor({ bridge, isEditView }) {

 const {
 active,
id,
slug,
 outboundUrl,
 httpMethod,
 headers,
Expand DownExpand Up@@ -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 {
Expand All@@ -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));
Expand All@@ -175,7 +175,7 @@ function Editor({ bridge, isEditView }) {
 return (
 <>
 <Navbar />
 <Sidebar events={bridge.events} bridgeId={bridge.id} title={title} />
 <Sidebar events={bridge.events} bridgeSlug={bridge.slug} title={title} />

 <Grid container item spacing={5} className={classes.root} sm={9} md={10}>
 <Grid item container wrap="nowrap">
Expand DownExpand Up@@ -209,7 +209,7 @@ function Editor({ bridge, isEditView }) {
 active={active}
 open={actionsDialogOpen}
 onClose={() => setActionsDialogOpen(false)}
bridgeId={id}
bridgeSlug={slug}
 />
 <Button
 onClick={() => setActionsDialogOpen(true)}
Expand DownExpand Up@@ -275,7 +275,7 @@ Editor.propTypes = {
 isEditView: PropTypes.bool,
 bridge: PropTypes.shape({
 active: PropTypes.bool,
id: PropTypes.number,
slug: PropTypes.string,
 title: PropTypes.string,
 outboundUrl: PropTypes.string,
 httpMethod: PropTypes.string,
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Design Updates by williampj · Pull Request #47 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Design Updates#47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

AndiLavera
merged 17 commits into

from

Dec 7, 2020
 Merged


Design Updates
#47
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
3879468

started contact us page


angeljruiz Nov 24, 2020
2f7beb3

first commit


williampj Nov 24, 2020
68c7a37

added features and small text ideas


williampj Nov 24, 2020
f5116a6

.


angeljruiz Dec 1, 2020
687ae10

Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…


angeljruiz Dec 1, 2020
f7ba104

sends values to backend which then sends an email


angeljruiz Dec 2, 2020
0f06da6

Merge branch 'master' of github.com:williampj/bridgeapi.js into landi…


AndiLavera Dec 4, 2020
0c3c5fe

Replace material ui link with nextjs link


AndiLavera Dec 5, 2020
1347281

About us in footer


AndiLavera Dec 5, 2020
04712cf

Merge branch 'contact-us' of github.com:williampj/bridgeapi.js into l…


AndiLavera Dec 5, 2020
8785fa7

contact us modal


AndiLavera Dec 5, 2020
aa8e932

seo title


AndiLavera Dec 5, 2020
e3e7bd3

small changes


angeljruiz Dec 5, 2020
48abf2e

Bridge slug update & fix event status state not updating


AndiLavera Dec 6, 2020
c782c58

Update broken specs


AndiLavera Dec 6, 2020
39b01b6

footer text


williampj Dec 6, 2020
903aaa3

Fix lint


AndiLavera Dec 7, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


207 changes: 207 additions & 0 deletions
components/ContactModal/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {
 Container,
 Typography,
 Button,
 Grid,
 makeStyles,
 Dialog,
} from '@material-ui/core';
import MailIcon from '@material-ui/icons/Mail';

import { Formik, Form, Field } from 'formik';
import { TextField } from 'formik-material-ui';

import SnackAlert from '../shared/SnackAlert';
import emailValidator from '../../utils/emailValidator';
import api from '../../utils/api';

const useStyles = makeStyles((theme) => ({
 paper: {
 backgroundColor: theme.palette.background.paper,
 boxShadow: theme.shadows[5],
 padding: theme.spacing(2, 4, 3),
 borderRadius: '10px',
 },
 mailIcon: {
 color: theme.palette.secondary.main,
 fontSize: '4rem',
 justifyContent: 'center',
 },
 aside: {
 backgroundColor: theme.palette.primary.main,
 height: '100%',
 },
 title: {
 marginBottom: theme.spacing(2),
 },
}));

export default function Contact({ open, setOpen }) {
 const classes = useStyles();
 const [successOpen, setSuccessOpen] = useState(false);
 const [errorOpen, setErrorOpen] = useState(false);

 const handleClose = () => {
 setOpen(false);
 };

 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', values)
 .then(() => setSuccessOpen(true))
 .catch(() => setErrorOpen(true));
 };

 const handleSnackClose = (_, reason) => {
 if (reason === 'clickaway') {
 return;
 }

 setSuccessOpen(false);
 setErrorOpen(false);
 };

 return (
 <div>
 <SnackAlert
 open={successOpen}
 onClose={handleSnackClose}
 severity="success"
 message="Success! We'll be in contact with you shortly"
 id="success-message"
 />
 <SnackAlert
 open={errorOpen}
 onClose={handleSnackClose}
 severity="error"
 message="Some error has occurred. Please try again."
 id="error-message"
 />
 <Dialog
 open={open}
 onClose={handleClose}
 aria-labelledby="simple-modal-title"
 aria-describedby="simple-modal-description"
 >
 <div className={classes.paper}>
 <Grid
 container
 spacing={0}
 className={classes.modal}
 >
 <Grid
 item
 sm={4}
 style={{ textAlign: 'center', paddingTop: '3rem' }}
 >
 <MailIcon className={classes.mailIcon} />

 <Typography variant="body1">
 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
 </Typography>
 </Grid>

 <Grid container item sm={8}>
 <Container component="main" maxWidth="md">
 <Grid container justify="center" item>
 <Typography variant="h4" className={classes.title}>
 Contact Us
 </Typography>
 </Grid>
 <Formik
 initialValues={initialValues}
 validate={(values) => handleValidate(values)}
 onSubmit={(values, { setSubmitting }) => handleSubmit(values, setSubmitting)}
 >
 {({
 submitForm, isSubmitting, values,
 }) => (
 <Form style={{ textAlign: 'center' }}>
 <Grid container spacing={2}>
 <Grid item xs={12}>
 <Field
 component={TextField}
 variant="outlined"
 name="full_name"
 label="Full Name"
 value={values.full_name}
 style={{ marginBottom: '10px', width: '100%' }}
 required
 />
 <Field
 component={TextField}
 variant="outlined"
 type="email"
 label="Email"
 name="email"
 value={values.email}
 style={{ marginBottom: '10px', width: '100%' }}
 required
 />
 <Field
 component={TextField}
 variant="outlined"
 label="Message"
 name="message"
 multiline
 InputProps={{ classes: { root: classes.message } }}
 style={{ marginBottom: '10px', width: '100%' }}
 value={values.message}
 required
 />
 </Grid>
 </Grid>

 <Button
 variant="contained"
 color="secondary"
 className={classes.submit}
 onClick={submitForm}
 disabled={isSubmitting}
 >
 Send
 </Button>
 </Form>
 )}
 </Formik>

 </Container>

 </Grid>
 </Grid>
 </div>
 </Dialog>
 </div>
 );
}

Contact.propTypes = {
 open: PropTypes.bool.isRequired,
 setOpen: PropTypes.func.isRequired,
};

41 changes: 24 additions & 17 deletions
components/Dashboard/Card.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,9 @@ import {
 makeStyles,
 Divider,
 Typography,
 Link,
// Link,
} from '@material-ui/core';
import Link from 'next/link';

const useStyles = makeStyles((theme) => ({
 title: {
Expand DownExpand Up@@ -37,17 +38,18 @@ function Card({ bridge, index }) {
 return (
 <Grid item xs={12} sm={6} md={4} key={`main-grid-${bridge.title}`}>
 <Paper className={classes.paper} id={`card-${index}`}>
 <Link href={`/bridge/${bridge.id}`}>
<Typography
 variant="h5"
 color="primary"
 className={classes.title}
 style={{ fontWeight: 600 }}
 id={`card-title-${index}`}
 >
 <Typography
variant="h5"
color="primary"
className={classes.title}
style={{ fontWeight: 600 }}
id={`card-title-${index}`}
>
<Link href={`/bridge/${bridge.slug}`}>
 {bridge.title}
 </Typography>
 </Link>
 </Link>
 </Typography>

 <Divider light className={classes.paddedDivider} />

 <Grid container spacing={2}>
Expand DownExpand Up@@ -92,13 +94,18 @@ function Card({ bridge, index }) {
 <Grid item xs container spacing={2}>
 <Grid item xs>
 {bridge.eventId ? (
 <Link href={`/events/${bridge.eventId}`}>
 <Typography variant="subtitle1" color="secondary">

 <Typography
 variant="subtitle1"
 color="secondary"
 id={`card-events-${index}`}
 >
 <Link href={`/events/${bridge.eventId}`}>
 View Events
 </Typography>
 </Link>
 </Link>
 </Typography>
 ) : (
 <Typography variant="subtitle1">
 <Typography variant="subtitle1" id={`card-events-${index}`}>
 View Events
 </Typography>
 )}
Expand All@@ -115,7 +122,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,
Expand Down

12 changes: 6 additions & 6 deletions
components/Editor/ActionsDialog/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand All@@ -35,7 +35,7 @@ function ActionsDialog({

 const handleAbort = () => {
 api.patch('/events/abort', {
bridge_id: bridgeId,
bridge_slug: bridgeSlug,
 })
 .then((res) => {
 if (res.status === 200) {
Expand All@@ -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);
Expand All@@ -66,7 +66,7 @@ function ActionsDialog({
 };

 const handleDelete = () => {
 api.delete(`/bridges/${bridgeId}`).then(() => {
 api.delete(`/bridges/${bridgeSlug}`).then(() => {
 router.push('/dashboard');
 }).catch(() => {
 setErrorOpen(true);
Expand DownExpand Up@@ -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;

14 changes: 7 additions & 7 deletions
components/Editor/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -49,7 +49,7 @@ function Editor({ bridge, isEditView }) {

 const {
 active,
id,
slug,
 outboundUrl,
 httpMethod,
 headers,
Expand DownExpand Up@@ -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 {
Expand All@@ -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));
Expand All@@ -175,7 +175,7 @@ function Editor({ bridge, isEditView }) {
 return (
 <>
 <Navbar />
 <Sidebar events={bridge.events} bridgeId={bridge.id} title={title} />
 <Sidebar events={bridge.events} bridgeSlug={bridge.slug} title={title} />

 <Grid container item spacing={5} className={classes.root} sm={9} md={10}>
 <Grid item container wrap="nowrap">
Expand DownExpand Up@@ -209,7 +209,7 @@ function Editor({ bridge, isEditView }) {
 active={active}
 open={actionsDialogOpen}
 onClose={() => setActionsDialogOpen(false)}
bridgeId={id}
bridgeSlug={slug}
 />
 <Button
 onClick={() => setActionsDialogOpen(true)}
Expand DownExpand Up@@ -275,7 +275,7 @@ Editor.propTypes = {
 isEditView: PropTypes.bool,
 bridge: PropTypes.shape({
 active: PropTypes.bool,
id: PropTypes.number,
slug: PropTypes.string,
 title: PropTypes.string,
 outboundUrl: PropTypes.string,
 httpMethod: PropTypes.string,
Expand Down
Loading