Merge pull request #504 from kunwar-11/500-adding-banner-image-and-pr…

…ofile-picture-in-create-event-page fix: added banner image and profile picture in event page
Planet-NULLCAST · Nov 22, 2021 · 7ea477b · 7ea477b
2 parents 7a2b1aa + da20bfb
commit 7ea477b
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 40 deletions.
diff --git a/component/admin/EventInfo.jsx b/component/admin/EventInfo.jsx
@@ -1,32 +1,32 @@
 import { useRef, useState } from "react";
-import PostService from '../../services/PostService'
+import PostService from "../../services/PostService";
 const EventInfo = ({ eventDetails, setEventDetails }) => {
-  const [fileName , setFileName] = useState("")
+  const [fileName, setFileName] = useState("");
   const ref = useRef();
   console.log(eventDetails?.eventImage);
 
   const imageUploadHandler = async (e) => {
-
     const imageFile = e.target.files[0];
 
     const imageData = {
       stage: "dev",
       fileName: imageFile.name,
       category: "events",
       ContentType: imageFile.type
-    }
+    };
 
     try {
       const s3ImageUrl = await PostService.uploadImage(imageFile, imageData);
 
-        if(s3ImageUrl){
-          console.log(s3ImageUrl)
-        }
+      if (s3ImageUrl) {
+        setFileName(imageFile.name);
+        console.log(s3ImageUrl);
+        setEventDetails((prev) => ({ ...prev, eventImage: s3ImageUrl }));
+      }
     } catch (error) {
-      console.log(error)
+      console.log(error);
     }
-    setFileName(imageFile.name)
-  }
+  };
 
   return (
     <div className="mx-10 mb-8">
@@ -154,12 +154,10 @@ const EventInfo = ({ eventDetails, setEventDetails }) => {
         onClick={() => ref.current.click()}
       >
         <label htmlFor="inputFiles" className="font-bold relative">
-          {fileName === ""
-            ? "Upload Image"
-            : fileName}
+          {fileName === "" ? "Upload Image" : fileName}
           <input
             type="file"
-            className="opacity-0 absolute top-0 left-0 w-full flex-grow"
+            className="hidden absolute top-0 left-0 w-full flex-grow"
             placeholder="uplaod image"
             id="inputFile"
             ref={ref}

diff --git a/component/admin/OrganizerInfo.jsx b/component/admin/OrganizerInfo.jsx
@@ -1,6 +1,28 @@
-import Image from "next/image";
-
+import { useRef } from "react";
+import PostService from "../../services/PostService";
 const OrganizerInfo = ({ eventDetails, setEventDetails }) => {
+  const ref = useRef();
+  const imageUploadHandler = async (e) => {
+    const imageFile = e.target.files[0];
+
+    const imageData = {
+      stage: "dev",
+      fileName: imageFile.name,
+      category: "events",
+      ContentType: imageFile.type
+    };
+
+    try {
+      const s3ImageUrl = await PostService.uploadImage(imageFile, imageData);
+
+      if (s3ImageUrl) {
+        console.log(s3ImageUrl);
+        setEventDetails((prev) => ({ ...prev, organizerImage: s3ImageUrl }));
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
   return (
     <div className="mx-10 mb-8">
       <div className="flex mb-6 items-center justify-center">
@@ -11,13 +33,33 @@ const OrganizerInfo = ({ eventDetails, setEventDetails }) => {
         ></div>
       </div>
       <div className="flex items-center">
-        <Image
-          src="/images/svgs/avatar.svg"
-          alt="profile image"
-          height={180}
-          width={180}
-          className="cursor-pointer"
-        />
+        <div className="relative">
+          <img
+            src={`${
+              eventDetails.organizerImage
+                ? eventDetails.organizerImage
+                : "/images/svgs/avatar.svg"
+            }`}
+            alt="profile image"
+            height={180}
+            width={180}
+            className="cursor-pointer rounded-full"
+          />
+          <div onClick={() => ref.current.click()}>
+            <label htmlFor="inputFiles" className="font-bold relative pl-8">
+              Change Photo
+              <input
+                type="file"
+                className="hidden absolute top-0 left-0 w-full flex-grow"
+                placeholder="uplaod image"
+                id="inputFile"
+                ref={ref}
+                accept="image/*"
+                onChange={imageUploadHandler}
+              />
+            </label>
+          </div>
+        </div>
         <div className="flex flex-col flex-grow ml-12">
           <div className="flex flex-col mb-3">
             <label

diff --git a/config/config.js b/config/config.js
@@ -12,6 +12,7 @@ const postsUrl = `${apiVerUrl}/posts`;
 const allPostsUrl = "api/posts";
 const postUser = `${apiVerUrl}/posts-by-user`;
 const eventsUrl = `${apiVerUrl}/events`;
+const createEventUrl = `${apiVerUrl}/admin/event`;
 const eventIdUrl = `${apiVerUrl}/event`;
 const changeStatusUrl = "api/user/post";
 const subscribeUrl = "api/subscribe";
@@ -53,6 +54,7 @@ const configVars = {
   postsUrl,
   allPostsUrl,
   eventsUrl,
+  createEventUrl,
   eventIdUrl,
   changeStatusUrl,
   subscribeUrl,
@@ -70,7 +72,7 @@ const configVars = {
   skillUrl,
   publishedPostsUrl,
   // publishedPostsCountUrl,
-  logoutUrl,
+  logoutUrl
 };
 
 module.exports = configVars;
diff --git a/pages/admin/create-event.js b/pages/admin/create-event.js
@@ -10,7 +10,7 @@ import notify from "../../lib/notify";
 const CreateEvent = () => {
   const cookies = new Cookies();
   const userCookie = cookies.get("userNullcast");
-  console.log('cookies' , userCookie)
+  console.log("cookies", userCookie);
   const [eventDetails, setEventDetails] = useState({
     organizerImage: "",
     organizerName: "",
@@ -33,20 +33,18 @@ const CreateEvent = () => {
   };
 
   const createEventHandler = async (e) => {
-    const eventData = 
-    {
-      guest_name: eventDetails.organizerName,         
+    const eventData = {
+      guest_name: eventDetails.organizerName,
       guest_designation: eventDetails.tagLine,
-      guest_image: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Nextjs-logo.svg/1200px-Nextjs-logo.svg.png",
+      guest_image: eventDetails.organizerImage,
       title: eventDetails.eventName,
       registration_link: eventDetails.eventLink,
-      banner_image:
-        "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Nextjs-logo.svg/1200px-Nextjs-logo.svg.png",
+      banner_image: eventDetails.eventImage,
       description: eventDetails.description,
       event_time: formatTime()
     };
     try {
-      const data = await EventService.createNewEvent(userCookie ,eventData);
+      const data = await EventService.createNewEvent(userCookie, eventData);
       notify(data.data.message);
     } catch (error) {
       console.log(error);
@@ -94,5 +92,4 @@ const CreateEvent = () => {
   );
 };
 
-
 export default CreateEvent;
diff --git a/services/EventService.js b/services/EventService.js
@@ -3,7 +3,7 @@ import {
   baseUrl,
   eventsUrl,
   eventIdUrl,
-  eventUrl
+  createEventUrl
 } from "../config/config";
 import { getUrl } from "../lib/getUrl";
 
@@ -30,13 +30,16 @@ async function getEventById(eventId) {
   }
 }
 
-async function createNewEvent(userCookie ,eventData) {
+async function createNewEvent(userCookie, eventData) {
   try {
-    const response = await axios.post(`${baseUrl}/${eventUrl}` , eventData)
-    return response
+    const response = await axios.post(
+      `${baseUrl}/${createEventUrl}`,
+      eventData
+    );
+    return response;
   } catch (err) {
-      console.log(err);
-      throw err;
+    console.log(err);
+    throw err;
   }
 }
 
@@ -46,4 +49,4 @@ const EventService = {
   createNewEvent
 };
 
-module.exports = EventService;
+module.exports = EventService;