better event workflow

backend/controllers/events.js

@@ -3,6 +3,8 @@ var db = require('../db');
 var mongoose = require("mongoose");
 var Event = require("../models/event");
 var { callModel: Call, callSchema } = require("../models/call");
+var frontend_server = process.env['REACT_APP_FRONTEND_SERVER'] != null ? process.env['REACT_APP_FRONTEND_SERVER'] : 'https://openmhz.com';
+
 
 exports.getEvent = async function (req, res, next) {
 
@@ -78,17 +80,16 @@ exports.addNewEvent = async function (req, res, next) {
             });
             event.calls = calls;
             event.numCalls = calls.length;
-            console.log(await event.save());
+            await event.save();
+            
+            const url =  "/events/" + event._id;
             res.contentType('json');
-            res.send(JSON.stringify({
-              success: false,
-              error: "Upload failed"
-            }));
+            res.send(JSON.stringify({url:url}));
         }
         catch (err) {
             console.error(err);
             res.status(500);
-            res.send("Error parsing sourcelist " + err);
+            res.send("Error creating event" + err);
         }
 
 

frontend/src/Call/components/PlaylistBuilder.js

@@ -1,5 +1,5 @@
 import { useSelector, useDispatch } from 'react-redux'
-import { useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import React, { useState } from "react";
 import {
   Header,
@@ -28,6 +28,10 @@ function PlaylistBuilder(props) {
   const [addNewEvent, { isLoading }] = useAddNewEventMutation()
   const { loading: callsLoading, data: callsData } = useSelector((state) => state.calls);
   const [open, setOpen] = React.useState(false);
+  const [successModalOpen, setSuccessModalOpen] = useState(false);
+  const [eventUrl, setEventUrl] = useState("");
+  const [eventPath, setEventPath] = useState("");
+  const [submitMessage, setSubmitMessage] = useState(false);
   const [title, setTitle] = useState("")
   const [description, setDescription] = useState("")
   const handleTitleChange = (e, { name, value }) => setTitle(value);
@@ -84,22 +88,37 @@ function PlaylistBuilder(props) {
   })
 
   const submitPlaylist = () => {
+    setSubmitMessage(false);
     setOpen(true)
   }
 
-  const handleSubmit = () => {
-    setOpen(false)
+  const handleSubmit = async () => {
+    if ((title.length < 3) || (description.length < 3)) {
+      setSubmitMessage("Please fill out the title and description with something useful");
+    } else {
+    setOpen(false);
     const callIds = playlist.map((call) => call._id)
     const event = {
       title,
       description,
       callIds
     }
-    addNewEvent(event);
+    try {
+      const returned = await addNewEvent(event).unwrap();
+      console.log(returned);
+      setEventUrl(new URL(returned.url, document.baseURI).href)
+      setEventPath(returned.url);
+      setSuccessModalOpen(true);
+   } catch (error) {
+      console.error(error)
+     // you can handle errors here if you want to
+   }
+    
     setTitle("");
     setDescription("");
     dispatch(setPlaylist([]));
   }
+  }
 
   let content = (<Header as="h3" icon textAlign='center' style={{ paddingTop: "3em" }}><Icon name='target' />Drag Calls Here</Header>)
   if (playlist.length > 0) {
@@ -112,10 +131,28 @@ function PlaylistBuilder(props) {
 
   return (
     <>
+      <Modal open={successModalOpen}
+        onClose={() => setSuccessModalOpen(false)}
+        size='tiny'
+        >
+      <Modal.Header>Event Successfully Created</Modal.Header>
+      <Modal.Content>Your Event is here: <p><Link to={eventPath}>{eventUrl}</Link></p></Modal.Content>
+      <Modal.Actions>
+
+        <Button
+          content="Done"
+          labelPosition='right'
+          icon='checkmark'
+          onClick={() => setSuccessModalOpen(false)}
+          positive
+        />
+      </Modal.Actions>
+        </Modal>
       <Modal
         onClose={() => setOpen(false)}
         onOpen={() => setOpen(true)}
         open={open}
+        
       >
         <Modal.Header>Submit an Event</Modal.Header>
         <Modal.Content>
@@ -142,6 +179,7 @@ function PlaylistBuilder(props) {
                 onChange={handleDescriptionChange}
               />
             </Form>
+            {submitMessage&& <Message error>{submitMessage}</Message>}
           </Modal.Description>
         </Modal.Content>
         <Modal.Actions>