Use portal for modals. Prisma disconnect after query.

This commit is contained in:
Mike Cao 2020-08-18 23:35:26 -07:00
parent 774a7dfdbc
commit d4ca02f110
5 changed files with 14 additions and 12 deletions

View File

@ -1,16 +1,18 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom';
import { useSpring, animated } from 'react-spring'; import { useSpring, animated } from 'react-spring';
import styles from './Modal.module.css'; import styles from './Modal.module.css';
export default function Modal({ title, children }) { export default function Modal({ title, children }) {
const props = useSpring({ opacity: 1, from: { opacity: 0 } }); const props = useSpring({ opacity: 1, from: { opacity: 0 } });
return ( return ReactDOM.createPortal(
<animated.div className={styles.modal} style={props}> <animated.div className={styles.modal} style={props}>
<div className={styles.content}> <div className={styles.content}>
{title && <div className={styles.header}>{title}</div>} {title && <div className={styles.header}>{title}</div>}
<div className={styles.body}>{children}</div> <div className={styles.body}>{children}</div>
</div> </div>
</animated.div> </animated.div>,
document.getElementById('__modals'),
); );
} }

View File

@ -16,6 +16,7 @@ export default function Layout({ title, children, header = true, footer = true }
</Head> </Head>
{header && <Header />} {header && <Header />}
<main className="container">{children}</main> <main className="container">{children}</main>
<div id="__modals" />
{footer && <Footer />} {footer && <Footer />}
</> </>
); );

View File

@ -1,20 +1,15 @@
.container { .container {
display: flex; display: flex;
flex: 1; flex: 1;
position: relative;
height: 100%; height: 100%;
} }
.container .menu { .container .menu {
display: flex;
flex-direction: column;
padding: 30px 0; padding: 30px 0;
border: 0; border: 0;
} }
.container .content { .container .content {
display: flex;
flex-direction: column;
border-left: 1px solid var(--gray300); border-left: 1px solid var(--gray300);
padding-left: 30px; padding-left: 30px;
} }

View File

@ -33,8 +33,11 @@ if (process.env.NODE_ENV === 'production') {
export default prisma; export default prisma;
export async function runQuery(query) { export async function runQuery(query) {
return query.catch(e => { return query
.catch(e => {
console.error(e); console.error(e);
throw e; })
.finally(() => {
prisma.$disconnect();
}); });
} }

View File

@ -10,12 +10,13 @@ export async function verifySession(req) {
} }
const { website: website_uuid, hostname, screen, language, session } = payload; const { website: website_uuid, hostname, screen, language, session } = payload;
const token = await parseToken(session);
if (!isValidId(website_uuid)) { if (!isValidId(website_uuid)) {
throw new Error(`Invalid website: ${website_uuid}`); throw new Error(`Invalid website: ${website_uuid}`);
} }
const token = await parseToken(session);
if (!token || token.website_uuid !== website_uuid) { if (!token || token.website_uuid !== website_uuid) {
const { userAgent, browser, os, ip, country, device } = await getClientInfo(req, payload); const { userAgent, browser, os, ip, country, device } = await getClientInfo(req, payload);