Front end touch up

handlers/events.go

@@ -32,6 +32,10 @@ func CreateEvent(c *gin.Context) {
 
 func GetEvent(c *gin.Context) {
 	var events []models.GetEvent
+	c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
+    c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
+    c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, accept, origin, Cache-Control, X-Requested-With")
+    c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS, GET, PUT")
 
 	seeRow := c.Param("eventID")
 	eventrow, err := dbmap.Query(
@@ -52,6 +56,18 @@ func GetEvent(c *gin.Context) {
 	c.JSON(201, events) //success
 }
 
+func HandleCors(c *gin.Context) {
+	c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
+    c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
+    c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, accept, origin, Cache-Control, X-Requested-With")
+    c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS, GET, PUT")
+
+
+    c.AbortWithStatus(204)
+    return
+
+}
+
 // creates a new event
 func UpdateEvent(c *gin.Context) {
 	var updateEvent models.UpdateEvent
@@ -130,6 +146,7 @@ func UpdateEvent(c *gin.Context) {
 	}
 	c.JSON(200, updateEvent) //success
 }
+
 func CreateRSVP(c *gin.Context) {
 	var rsvp models.CreateRSVP
 
@@ -205,3 +222,4 @@ func DeleteEvent(c *gin.Context) {
 	}
 	c.JSON(204, nil) //success
 }
+

main.go

@@ -33,6 +33,7 @@ func main() {
 	api.POST("/events", handlers.CreateEvent)
 
 	api.GET("/event/:eventID", handlers.GetEvent)
+	api.OPTIONS("/event/:eventID", handlers.HandleCors)
 
 
 	// This endpoint will update info for an event

views/js/evently/src/AboutUs.css

@@ -0,0 +1,6 @@
+.AboutUs {
+    background-color: white;
+    text-align: center;
+    height: 100%;
+    width: 100%;
+}

views/js/evently/src/AboutUs.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import './AboutUs.css'
+
+function AboutUs() {
+    return (
+        <div className="AboutUs">
+            <h1>The team:</h1>
+            <div>
+                <ul>
+                    <li>Laurent Benjamin</li>
+                    <li>Noshin Ahmed</li>
+                    <li>Sharron Qian</li>
+                    <li>Tiffany Zhu</li>
+                    <li>Umida Ravshanova</li>
+                </ul>
+            </div>
+            <h1>Special thanks to:</h1>
+            <div>
+                <ul>
+                    <li>Diana Bishop</li>
+                    <li>Ange Louis</li>
+                    <li>Grace McGrath</li>
+                    <li>Makayla Clausen</li>
+                </ul>
+            </div>
+            <h1>and everyone at Bitly who guided us on his project!</h1>
+        </div>
+    )
+};
+
+export default AboutUs;

views/js/evently/src/App.css

@@ -2,32 +2,6 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
 ul{
   list-style-type: none;
   margin: 0;

views/js/evently/src/App.js

@@ -6,10 +6,10 @@ import {
 } from "react-router-dom";
 import HomePage from './HomePage.jsx'; 
 import CreateEvent from './CreateEvent.jsx'; 
-// import RSVP from './RSVP.jsx'; 
-//import ViewEvent from './ViewEvent.jsx'; 
-//Add About Us page
-//Add a community page
+import CommunityPage from './CommunityPage.jsx';
+import AboutUs from './AboutUs.jsx';
+import Header from './header.js';
+import ViewEvent from './ViewEvent.jsx'; 
 
 function App() {
   return (
@@ -23,22 +23,20 @@ function App() {
           <Link to="/create-event">Create</Link>
         </li>
         <li>
-          <p>RSVP</p>
-          {/* <Link to="/RSVP.jsx">RSVP</Link> */}
+          <Link to="/community-page">Community</Link>
         </li>
         <li>
-          <p>Community</p>
-          {/* <Link to="/Community.jsx">Community</Link> */}
-        </li>
-        <li>
-          <p>About Us</p>
-          {/* <Link to="/AboutUs.jsx">About Us</Link> */}
+          <Link to="/about-us">About Us</Link>
         </li>
       </ul>
     </nav>
+    <Header/>
     <Routes>
+      <Route path="/about-us" element={<AboutUs />} />
+      <Route path="/community-page" element={<CommunityPage />} />
       <Route path="/create-event" element={<CreateEvent />} />
       <Route path="/" element={<HomePage />} />
+      <Route path="/view-event/:event_id" element={<ViewEvent />} />
     </Routes>
   </div>
   );

views/js/evently/src/CommunityPage.css

@@ -0,0 +1,6 @@
+.Community {
+    background-color: white;
+    text-align: center;
+    height: 100%;
+    width: 100%;
+}

views/js/evently/src/CommunityPage.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import './CommunityPage.css'
+
+function CommunityPage() {
+    return (
+        <div className="Community">
+            <h1>Work in progress!</h1>
+        </div>
+    )
+};
+
+export default CommunityPage;

views/js/evently/src/CreateEvent.css

@@ -19,6 +19,10 @@ fieldset {
   padding-bottom: 30px;
 }
 
+.wrapper{
+  background-color: white;
+}
+
 .container {
   background-color: white;
   font-size: 30px;
@@ -27,6 +31,7 @@ fieldset {
 }
 
 .form-container {
+  background-color: white;
   padding-left: 50px;
   padding-top: 20px;
   padding-right:450px;

views/js/evently/src/CreateEvent.jsx

@@ -1,6 +1,5 @@
 import React, {useState} from 'react';
 import './CreateEvent.css';
-import Header from './header.js';
 
 function CreateEvent() {
   const [file, setFile] = useState();
@@ -37,7 +36,6 @@ console.log(res)
 console.log("EventTitle", EventTitle)
     return(
       <div className="wrapper"> 
-        <Header/>
         <div className = "container">
           <div className = "form-container">
             <h2> Enter the details of your event:</h2>
@@ -86,6 +84,7 @@ console.log("EventTitle", EventTitle)
             <fieldset className = "pub-priv-box-fieldset">
                 <h4>Public/Private</h4>
                 <select value={PublicPrivate} onChange={(e) => setPublicPrivate(e.target.value)}>
+                 <option></option>
                  <option name="public" value="public" > public</option>
                  <option name="private" value="private" >private</option>
                 </select>
@@ -103,7 +102,7 @@ console.log("EventTitle", EventTitle)
                 <h4>Contact info</h4>
                 <input value={ContactForm} className = "input-boxes" onChange={(e) => setContactForm(e.target.value)}/>
             </fieldset> <br></br><br></br>
-            <button type="submit">Publish</button>
+            <button type="submit" className="save-button">Publish</button>
             </form>
           </div>
 
@@ -117,13 +116,6 @@ console.log("EventTitle", EventTitle)
               <img src = {file} />
             </fieldset>
             <br></br><br></br> 
-              <div>
-                {/* Button to publish draft */}
-
-
-                {/* Button to save draft (if have time) */}
-                <button type="save draft" className = "save-button">Save draft</button>
-              </div>
           </div>
         </div>
       </div>

views/js/evently/src/HomePage.css

@@ -1,21 +1,15 @@
 html {
     background-color: #EE6123;
-}
-
-#MainText {
-    /* background of page */
-    background-color: #EE6123;
-    margin: 0;
     width: auto;
     height: auto;
     overflow: auto;
+}
 
-    /* page text */
+#MainText {
+    background-color: #EE6123;
     font-size: 30px;
     font-family: 'Inter';
     text-align: center;
-
-    padding-top: 125px;
 }
 
 .buttons{
@@ -34,27 +28,6 @@ html {
     border-radius: 8px;
 }
 
-#HomeLogo{
-    background-color: white;
-    border-radius: 50%;
-    padding: 7px;
-
-    height: 100px;
-    width: 100px;
-
-    top: 150px;
-    left: 10px;
-    position: absolute;
-    overflow: hidden;
-}
-
-.Title{
-    position: absolute;
-    top: 135px;
-    left: 150px;
-    color: rgb(255, 255, 255, 0.8);
-}
-
 .Text{
     font-size: 80px;
     color: white;

views/js/evently/src/HomePage.jsx

@@ -1,25 +1,21 @@
 import React from "react";
 import {
-  Routes,
-  Route,
   Link
 } from "react-router-dom";
 import './App.css'
 import './HomePage.css'
-import CreateEvent from './CreateEvent.jsx'; 
-import logo from './bitly-logo.png';
+import CreateEvent from './CreateEvent.jsx'
+import CommunityPage from './CommunityPage.jsx'
 
 const HomePage: React.FC = () => {
     return (
-        <div class = "HomePage">
-            <img src={logo} alt="Bitly Logo" id="HomeLogo"></img>
+        <div className = "HomePage">
             <div className = "col-xs-8 col-xs-offset-2 jumbotron text-center" id="MainText">
-                <h1 class = "Title">Event.ly</h1>
-                <h2 class = "Text">Host your events here!</h2>
+                <h2 className = "Text">Host your events here!</h2>
                 <Link to="/create-event" class="buttons">Get Started</Link>
                 <b></b>
-                <h2 class = "Text">Find an event!</h2>
-                <button>RSVP</button>
+                <h2 className = "Text">Find an event!</h2>
+                <Link to="/community-page" class="buttons">Browse</Link>
             </div>
         </div>
     );

views/js/evently/src/ViewEvent.css

@@ -0,0 +1,39 @@
+.image {
+    height: 600px;
+    width: 600px;
+    float: right;
+    padding-right: 100px;
+    padding-top: 100px;
+}
+
+.rsvp-button {
+    padding: 30px 40px 30px 40px;
+    color: white;
+    background: rgba(46, 0, 150);
+}
+
+.title {
+    text-align:center;
+    padding: 30px 150px 30px 150px;
+    display:flexbox;
+    background: aliceblue;
+}
+
+.container {
+    display:flex;
+    max-width: 800px;
+    background: rgba(238, 97, 35);
+}
+
+.image-container {
+    position:absolute;
+    left:60%;
+}
+
+.info-container {
+    position:absolute;
+    left:15%;
+    max-width: 40%;
+    word-wrap:break-word;
+}
+