Merge branch 'master' into 'main'

added login credentials error alert and create event form component

See merge request !12

Backend/models/eventModel.js

@@ -23,7 +23,7 @@ export const EventSchema = new Schema({
         required: true,
         trim: true
     },
-    eventType: {
+    eventGenre: {
         type: String,
         required: true
     },
@@ -43,7 +43,11 @@ export const EventSchema = new Schema({
         type: String, 
         required: true
     }, 
-    eventImage: {
+    ticketPrice: {
+        type: String, 
+        // required: true
+    },
+    ticketQty: {
         type: String, 
         // required: true
     },

frontend/src/Components/CreateEventForm.js

+import React, { useState } from "react";
+import errorAlert from "../Helpers/errorAlert";
+import isEmpty from 'validator/lib/isEmpty';
+
+const CreateEventForm = () => {
+
+    const [errorMsg, setErrorMsg] = useState('')
+
+  const [eventData, setEventData] = useState({
+    eventTitle: "",
+    organiser: "",
+    venueName: "",
+    venueAddress: "",
+    eventGenre: "",
+    startDate: "",
+    endDate: "",
+    startTime: "",
+    endTime: "",
+    ticketPrice: "",
+    ticketQty: "",
+    eventImage: null,
+    eventDescription: "",
+  });
+
+  // Destructuring form data
+  const {
+    eventTitle,
+    organiser,
+    venueName,
+    venueAddress,
+    eventGenre,
+    startDate,
+    endDate,
+    startTime,
+    endTime,
+    ticketPrice,
+    ticketQty,
+    eventImage,
+    eventDescription,
+  } = eventData;
+
+  const handleEventImage = (event) => {
+      console.log(event.target.files[0])
+      setEventData({
+          ...eventData,
+          [event.target.name]: event.target.files[0],
+      })
+  }
+
+  const handleEventChange = (event) => {
+      setEventData({
+          ...eventData,
+          [event.target.name]: event.target.value
+      })
+  }
+
+  const handleEventSubmit = (event) => {
+      event.preventDefault()
+
+      if (eventImage === null) {
+          setErrorMsg("Image is required")
+      }
+
+  }
+
+  return (
+    <form onSubmit={handleEventSubmit}>
+        {JSON.stringify(eventData)}
+        {JSON.stringify(errorMsg)}
+      <div className="mt-16 mx-20">
+        <div className="px-2">
+          <div className="flex -mx-2">
+            <div className="w-1/2 px-4 ">
+              <div className="space-y-6">
+                <h1 className=" text-black font-montserrat font-extrabold text-3xl">
+                  Create event
+                </h1>
+                {errorMsg && errorAlert(errorMsg)}
+                <input
+                  className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg"
+                  name="eventTitle"
+                  value={eventTitle}
+                  type="text"
+                  placeholder="Event title"
+                  onChange={handleEventChange}
+                ></input>
+                <input
+                  className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg"
+                  name="organiser"
+                  value={organiser}
+                  type="text"
+                  placeholder="organiser"
+                  onChange={handleEventChange}
+                ></input>
+                <input
+                  className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg"
+                  name="venueName"
+                  value={venueName}
+                  type="text"
+                  placeholder="Venue name"
+                  onChange={handleEventChange}
+                ></input>
+                <input
+                  className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg"
+                  name="venueAddress"
+                  value={venueAddress}
+                  type="text"
+                  placeholder="Venue address"
+                  onChange={handleEventChange}
+                ></input>
+                <select
+                  className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg"
+                  name="eventGenre"
+                  type="text"
+                  placeholder="Event Genre"
+                  onChange={handleEventChange}
+                >
+                  <option value="" disabled="disabled">
+                    Pick a genre
+                  </option>
+                  <option value="Hip-hop">Hip-hop</option>
+                  <option value="Rap">Rap</option>
+                  <option value="Rock">Rock</option>
+                  <option value="Grime">Grime</option>
+                  <option value="Pop">Pop</option>
+                  <option value="Electronic">Electronic</option>
+                  <option value="House">House</option>
+                  <option value="Reggae">Reggae</option>
+                  <option value="Indie">Indie</option>
+                  <option value="Dance<">Dance</option>
+                </select>
+                <div className="flex space-x-2">
+                  <input
+                    className="font-montserrat font-medium rounded-full w-1/2 py-4 px-7 shadow-lg"
+                    name="startDate"
+                    value={startDate}
+                    type="text"
+                    placeholder="Start date"
+                    onChange={handleEventChange}
+                  ></input>
+                  <input
+                    className="font-montserrat font-medium rounded-full w-1/2 py-4 px-7 shadow-lg"
+                    name="endDate"
+                    value={endDate}
+                    type="text"
+                    placeholder="End date"
+                    onChange={handleEventChange}
+                  ></input>
+                </div>
+                <div className="flex space-x-2">
+                  <input
+                    className="font-montserrat font-medium rounded-full w-1/2 py-4 px-7 shadow-lg"
+                    name="startTime"
+                    value={startTime}
+                    type="text"
+                    placeholder="Start time"
+                    onChange={handleEventChange}
+                  ></input>
+                  <input
+                    className="font-montserrat font-medium rounded-full w-1/2 py-4 px-7 shadow-lg"
+                    name="endTime"
+                    value={endTime}
+                    type="text"
+                    placeholder="End time"
+                    onChange={handleEventChange}
+                  ></input>
+                </div>
+                <input
+                  className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg"
+                  name="ticketPrice"
+                  value={ticketPrice}
+                  type="text"
+                  placeholder="Ticket price"
+                  onChange={handleEventChange}
+                ></input>
+                <input
+                  className="font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg"
+                  name="ticketQty"
+                  value={ticketQty}
+                  type="number"
+                  min="1"
+                  placeholder="Quantity of tickets"
+                  onChange={handleEventChange}
+                ></input>
+              </div>
+            </div>
+            <div className="w-1/2 px-4">
+              <div>
+                <div className="flex justify-center mt-16 ">
+                  <div className="w-full rounded-lg shadow-xl bg-gray-50 ">
+                    <div className="m-6 ">
+                      <div className="flex items-center justify-center w-full ">
+                        <label className="flex flex-col w-full h-32 border-4 border-blue-200 border-dashed hover:bg-gray-100 hover:border-gray-300">
+                          <div className="flex flex-col items-center justify-center pt-7">
+                            <p className="pt-1 font-montserrat font-medium text-sm tracking-wider text-gray-400 group-hover:text-gray-600">
+                              Attach a file
+                            </p>
+                          </div>
+                          <input
+                            type="file"
+                            name="eventImage"
+                            className="custom-file-input opacity-0"
+                            onChange={handleEventImage}
+                          />
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-center p-2">
+                      <button className="w-full px-4 py-3 font-montserrat font-medium text-white bg-purple-500 rounded shadow-xl">
+                        Upload event image
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="py-6">
+                <textarea
+                  name="eventDescription"
+                  value={eventDescription}
+                  placeholder="Event description"
+                  onChange={handleEventChange}
+                  className="w-full h-48 px-3 py-4 font-montserrat font-medium text-base border rounded-lg focus:shadow-outline"
+                ></textarea>
+              </div>
+              <button
+                className="p-5 px-24 w-full bg-purple-500 hover:bg-purple-400 text-white rounded font-montserrat font-bold"
+                type="submit"
+              >
+                Create event
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default CreateEventForm;

frontend/src/Components/LoginForm.js

@@ -54,6 +54,10 @@ const LoginForm = () => {
                 })
                 .catch(err => {
                     console.log("Login error", err)
+                    setFormData({
+                        ...formData, 
+                        errorMsg: err.response.data.errorMessage
+                    })
                 })
                    
         }

frontend/src/Components/SignUpForm.js

-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import isEmail from 'validator/lib/isEmail';
 import isEmpty from 'validator/lib/isEmpty';

frontend/src/Pages/CreateEvent.js

 import React from 'react';
+import CreateEventForm from '../Components/CreateEventForm';
 
 const CreateEvent = () => {
     return (
-        <div>
-            create event page
-        </div>
+        <>
+        <CreateEventForm />
+        </>
     );
 };