[New] : Event Organizer Details on Event Create Form #89

app/components/conferences/admin/EditEvent.js

@@ -21,11 +21,13 @@ export const EditEvent = ({ event, handleToast }) => {
     "starts-at": event.data.attributes["starts-at"].slice(0, 16),
     "ends-at": event.data.attributes["ends-at"].slice(0, 16),
     "original-image-url": event.data.attributes["original-image-url"],
-    "logo-url" : event.data.attributes["logo-url"],
+    "logo-url": event.data.attributes["logo-url"],
     timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
     online: true,
     "is-sessions-speakers-enabled": true,
-    privacy: event.data.attributes.privacy
+    privacy: event.data.attributes.privacy,
+    "owner-name": event.data.attributes["owner-name"],
+    "owner-description": event.data.attributes["owner-description"],
   });
 
   const [publish, setPublish] = useState("published");
@@ -86,13 +88,13 @@ export const EditEvent = ({ event, handleToast }) => {
   const handleFormSubmit = async (e) => {
     e.preventDefault();
 
-    if(formState['logo-url'] === ""){
+    if (formState['logo-url'] === "") {
       delete formState['logo-url'];
     }
 
     const data = {
       data: {
-        attributes: { ...formState, state: publish, privacy: isPublic ? "public" : "private"  },
+        attributes: { ...formState, state: publish, privacy: isPublic ? "public" : "private" },
         id: event.data.id,
         type: "event",
       },

app/components/conferences/create/EventBasicDetails.js

@@ -29,6 +29,8 @@ export const EventBasicCreate = ({ setDraft, handleToast }) => {
     timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
     online: true,
     "is-sessions-speakers-enabled": true,
+    "owner-name": "",
+    "owner-description": "",
   });
 
   const [publish, setPublish] = useState("draft");
@@ -138,13 +140,13 @@ export const EventBasicCreate = ({ setDraft, handleToast }) => {
     CustomToast({ type: "success" });
     name === "switch"
       ? setTicket((prev) => ({
-          ...prev,
-          state: !ticket.state,
-        }))
+        ...prev,
+        state: !ticket.state,
+      }))
       : setTicket((prev) => ({
-          ...prev,
-          [name]: value,
-        }));
+        ...prev,
+        [name]: value,
+      }));
   };
 
   const handlePublicSwitch = (e) => {

app/components/conferences/eventForm.js

@@ -1,11 +1,11 @@
 import {
   Form,
   InputGroup,
-  Toast,
 } from "react-bootstrap";
+import { useState, Fragment, useEffect } from "react";
+
+export const EventForm = ({ handleChange, intialValues, ticket, handleSwitch, handlePublicSwitch, isPublic }) => {
 
-export const EventForm = ({ handleChange, intialValues, ticket , handleSwitch, handlePublicSwitch, isPublic }) => {
-
   return (
     <>
       <Form.Group className="mb-3">
@@ -50,6 +50,9 @@ export const EventForm = ({ handleChange, intialValues, ticket , handleSwitch, h
           onChange={handleChange}
         />
       </Form.Group>
+
+      <OrganizerForm handleChange={handleChange} intialValues={intialValues} ></OrganizerForm>
+
       <Form.Group className="mb-3">
         <Form.Label>Start Date*</Form.Label>
         <Form.Control
@@ -92,7 +95,7 @@ export const EventForm = ({ handleChange, intialValues, ticket , handleSwitch, h
           name="name"
           type="text"
           onChange={handleSwitch}
-          value = {ticket.name}
+          value={ticket.name}
           placeholder={
             ticket.state ? "Free Ticket Name" : "Free Registration Name"
           }
@@ -101,7 +104,7 @@ export const EventForm = ({ handleChange, intialValues, ticket , handleSwitch, h
           required
           name="quantity"
           type="number"
-          value = {ticket.quantity}
+          value={ticket.quantity}
           min={1}
           onChange={handleSwitch}
           placeholder="Quantity"
@@ -115,3 +118,60 @@ export const EventForm = ({ handleChange, intialValues, ticket , handleSwitch, h
   );
 };
 
+const OrganizerForm = ({ handleChange, intialValues }) => {
+
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    console.log(intialValues);
+    if (intialValues["owner-name"] || intialValues["owner-description"]) {
+      setShow(true);
+    }
+  }, [intialValues])
+
+
+  return (
+    <Fragment>
+      {!(intialValues["owner-name"] || intialValues["owner-description"]) ? <InputGroup className="mb-3">
+        <InputGroup.Text>Add Organizer Or Group Information</InputGroup.Text>
+        <InputGroup.Text aria-label="Switch-group">
+          <Form.Check
+            aria-label="Switch"
+            name="switch"
+            onChange={() => setShow(!show)}
+            type="switch"
+            value={"on"}
+            defaultChecked={show}
+          />
+        </InputGroup.Text>
+      </InputGroup> : null
+      }
+      {show && (
+        <><Form.Group className="mb-3">
+          <Form.Label>Organizer or Group Name</Form.Label>
+          <Form.Control
+            required
+            name="owner-name"
+            type="text"
+            placeholder=""
+            value={intialValues["owner-name"]}
+            onChange={handleChange} />
+        </Form.Group>
+          {/* About the organization or Group */}
+          <Form.Group className="mb-3">
+            <Form.Label>About the Organizer or Group </Form.Label>
+            <Form.Control
+              as="textarea"
+              rows={5}
+              name="owner-description"
+              type="text"
+              placeholder=""
+              value={intialValues["owner-description"]}
+              onChange={handleChange} />
+          </Form.Group>
+        </>
+      )}
+    </Fragment>
+  );
+}
+