event registration

Author: timmyichen

client/Header.tsx

@@ -14,7 +14,7 @@ const anonRoutes = {
 
 const authedRoutes = {
   left: [
-    { href: '/event', label: 'Event' },
+    { href: '/event', label: 'My Event' },
     { href: '/create', label: 'Create' },
   ],
   right: [

client/account/DeleteAccountModal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import ModalWrapper from 'client/components/ModalWrapper';
-import { Modal, Button } from 'react-bootstrap';
+import { Modal, Button, Alert } from 'react-bootstrap';
 import { post } from 'client/lib/requests';
 
 interface Props {
@@ -10,6 +10,7 @@ interface Props {
 
 function DeleteAccountModal({ isShowing, hideModal }: Props) {
   const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState('');
 
   const onDeleteAccount = async () => {
     setLoading(true);
@@ -18,7 +19,9 @@ function DeleteAccountModal({ isShowing, hideModal }: Props) {
       await post('/api/delete_account');
     } catch (e) {
       setLoading(false);
-      throw e; //TODO messaging
+      setError(e.message);
+
+      return;
     }
 
     setLoading(false);
@@ -29,6 +32,7 @@ function DeleteAccountModal({ isShowing, hideModal }: Props) {
   const onHide = () => {
     if (loading) {
       return;
+      '';
     }
 
     hideModal();
@@ -38,11 +42,14 @@ function DeleteAccountModal({ isShowing, hideModal }: Props) {
     <ModalWrapper isShowing={isShowing} onHide={onHide}>
       <Modal.Header>Delete Account</Modal.Header>
       <Modal.Body>
-        You sure you want to do this? No take backsies.
-        <br />
-        <br />
-        Also, your account will automatically be deleted a week after your event
-        ends.
+        <p>
+          You sure you want to do this? No take backsies.
+          <br />
+          <br />
+          Also, your account will automatically be deleted a week after your
+          event ends.
+        </p>
+        {error && <Alert variant="danger">{error}</Alert>}
       </Modal.Body>
       <Modal.Footer>
         <Button variant="secondary" onClick={hideModal}>

client/eventPage/JoinEventModal.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import ModalWrapper from 'client/components/ModalWrapper';
+import { Modal, Button, Alert } from 'react-bootstrap';
+import { post } from 'client/lib/requests';
+import { Event, Role } from 'client/types';
+
+interface Props {
+  isShowing: boolean;
+  hideModal(): void;
+  event: Event;
+  role: Role;
+}
+
+function JoinEventModal({ isShowing, hideModal, event, role }: Props) {
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState('');
+
+  const onRegister = async () => {
+    setLoading(true);
+
+    try {
+      await post('/api/events/register', { eventId: event._id, role });
+    } catch (e) {
+      setLoading(false);
+      setError(e.message);
+
+      return;
+    }
+
+    setLoading(false);
+  };
+
+  const onHide = () => {
+    if (loading) {
+      return;
+      '';
+    }
+
+    hideModal();
+  };
+
+  const location = [event.city, event.state].filter(s => !!s).join(', ');
+
+  return (
+    <ModalWrapper isShowing={isShowing} onHide={onHide}>
+      <Modal.Header>Join Event: {event.name}</Modal.Header>
+      <Modal.Body>
+        Do you want to join the event <strong>{event.name}</strong>
+        {location && (
+          <span>
+            located in <em>{location}</em>
+          </span>
+        )}{' '}
+        as a(n) {role}?{error && <Alert variant="danger">{error}</Alert>}
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={hideModal}>
+          Cancel
+        </Button>
+        <Button variant="primary" onClick={onRegister}>
+          Join
+        </Button>
+      </Modal.Footer>
+    </ModalWrapper>
+  );
+}
+
+export default JoinEventModal;

client/eventPage/JoinForm.tsx

@@ -1,12 +1,16 @@
 import * as React from 'react';
-import { Form, Button } from 'react-bootstrap';
-import { Role, InputEvent } from 'client/types';
+import { Form, Button, Alert } from 'react-bootstrap';
+import { Role, InputEvent, Event } from 'client/types';
 import { get } from 'client/lib/requests';
+import JoinEventModal from './JoinEventModal';
 
 export default () => {
   const [role, setRole] = React.useState<Role | ''>('');
   const [code, setCode] = React.useState('');
   const [loading, setLoading] = React.useState(false);
+  const [event, setEvent] = React.useState<Event>('');
+  const [showEventModal, setShowEventModal] = React.useState(false);
+  const [error, setError] = React.useState('');
 
   const capitalizedRole = role.slice(0, 1).toUpperCase() + role.slice(1);
 
@@ -16,18 +20,46 @@ export default () => {
     } else if (role === 'mentor') {
       setRole('attendee');
     }
+    setCode('');
   };
 
   const findEvent = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
-    const res = await get(`/api/events/find?code=${code}`);
-    console.log(res);
+
+    let foundEvent;
+
+    try {
+      const res = await get(`/api/events/find?code=${code}&role=${role}`);
+      const body = await res.json();
+
+      if (!res.ok) {
+        throw new Error(body.message);
+      }
+
+      foundEvent = body;
+    } catch (e) {
+      setLoading(false);
+      setError(e.message);
+
+      return;
+    }
+
     setLoading(false);
+    setEvent(foundEvent);
+    setShowEventModal(true);
   };
 
   return (
     <div className="join-form">
+      {showEventModal && (
+        <JoinEventModal
+          isShowing={showEventModal}
+          hideModal={() => setShowEventModal(false)}
+          event={event}
+          role={role}
+        />
+      )}
       {role ? (
         <Form>
           <Form.Group>
@@ -39,7 +71,10 @@ export default () => {
               required
               type="text"
               placeholder={`Enter ${capitalizedRole} Code`}
-              onChange={(e: InputEvent) => setCode(e.currentTarget.value)}
+              onChange={(e: InputEvent) => {
+                setError('');
+                setCode(e.currentTarget.value);
+              }}
             />
             <a onClick={toggleRole} className="text-primary">
               Just kidding, I'm actually{' '}
@@ -54,6 +89,7 @@ export default () => {
           >
             Find Event
           </Button>
+          {error && <Alert variant="danger">{error}</Alert>}
         </Form>
       ) : (
         <div className="role-selector">
@@ -100,6 +136,9 @@ export default () => {
         a:hover {
           text-decoration: underline;
         }
+        .join-form :global(.alert-danger) {
+          margin-top: 10px;
+        }
       `}</style>
     </div>
   );

client/types.ts

@@ -13,8 +13,8 @@ export interface Event {
   name: string;
   city: string;
   state: string;
-  attendeePassword: string;
-  mentorPassword: string;
+  attendeePassword?: string;
+  mentorPassword?: string;
 }
 
 export type Role = 'attendee' | 'mentor';

package.json

@@ -34,6 +34,7 @@
     "dotenv": "^7.0.0",
     "express": "^4.16.4",
     "express-async-handler": "^1.1.4",
+    "express-response-errors": "^1.0.4",
     "express-session": "^1.16.2",
     "fork-ts-checker-webpack-plugin": "^1.3.7",
     "hijackresponse": "^4.0.0",

pages/create.tsx

@@ -50,8 +50,6 @@ export default () => {
         throw new Error(json.message);
       }
 
-      console.log(json);
-
       event = json;
     } catch (e) {
       setLoading(false);
@@ -62,7 +60,6 @@ export default () => {
     }
 
     setLoading(false);
-    console.log(event);
   };
 
   const clearErrors = (keys: Array<keyof typeof defaultErrors>) => {
@@ -135,6 +132,9 @@ export default () => {
           max-width: 400px;
           margin: 50px auto;
         }
+        .create-event-page :global(.alert-danger) {
+          margin-top: 10px;
+        }
       `}</style>
     </div>
   );

server/index.ts

@@ -12,6 +12,7 @@ import UsersRouter from 'server/routers/users';
 import EventsRouter from 'server/routers/events';
 import initDB from './lib/db';
 import checkCollectionExistence from './lib/checkCollectionExistence';
+import { responseErrorHandler } from 'express-response-errors/lib/middleware';
 
 const MongoStore = require('connect-mongo')(session);
 dotenv.config();
@@ -69,6 +70,7 @@ nextjs.nextApp.prepare().then(async () => {
   app.use(PagesRouter);
   app.use(UsersRouter);
   app.use(EventsRouter);
+  app.use(responseErrorHandler);
 
   app.get('*', (req, res) => {
     nextjs.handle(req, res);

server/middleware/auth.ts

@@ -1,4 +1,5 @@
 import * as express from 'express';
+import { UnauthorizedError } from 'express-response-errors';
 
 export const requiresAuth = ({ error }: { error?: boolean } = {}) => (
   req: express.Request,
@@ -7,7 +8,7 @@ export const requiresAuth = ({ error }: { error?: boolean } = {}) => (
 ) => {
   if (!req.user) {
     if (error) {
-      return res.status(401).send({ message: 'Unauthorized, please log in' });
+      throw new UnauthorizedError('Unauthorized, please log in');
     }
 
     return res.redirect('/login');

server/models/schemas/User.ts

@@ -8,8 +8,14 @@ const UserSchema: Schema = new Schema(
     password: String,
     events: [
       {
-        type: Schema.Types.ObjectId,
-        ref: 'Event',
+        eventId: {
+          type: Schema.Types.ObjectId,
+          ref: 'Event',
+        },
+        role: {
+          type: String,
+          enum: ['attendee', 'mentor', 'owner'],
+        },
       },
     ],
   },