fix: admin event page #547

ui updates
Planet-NULLCAST · Nov 30, 2021 · e9199b8 · e9199b8
1 parent f4f9732
commit e9199b8
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 46 deletions.
diff --git a/component/admin/AdminBlogsList.jsx b/component/admin/AdminBlogsList.jsx
@@ -127,7 +127,6 @@ export default function AdminBlogsList({ posts, updated }) {
                       </>
                     </div>
                   </Link>
-
                   {item.status == "published" ? (
                     <div
                       className={`flex items-center w-28 justify-center rounded-full h-8 mr-3  ${MyBlogStyles.publishedBg} `}

diff --git a/component/admin/AdminEventList.jsx b/component/admin/AdminEventList.jsx
@@ -1,20 +1,30 @@
-import React from "react";
+import React, { useEffect } from "react";
 import moment from "moment";
 import notify from "../../lib/notify";
 import EventService from '../../services/EventService'
 import MyBlogStyles from "../../styles/MyBlogs.module.css";
+import { useRouter } from "next/router";
 import Link from "next/link";
-function AdminEventList(props) {
-  const events = props.events;
+function AdminEventList({events, refresh}) {
+  const router = useRouter()
   async function deletevents(eventid){
     try{
       const  data = await EventService.deleteEvent(eventid)
-      return data
+      notify(data.message);
+      refresh()
     }
     catch(err){
       notify(err?.response?.data?.message ?? err?.message, "error");
     }
   } 
+  const editevent = (id) => {
+    router.push({
+      pathname:'events/create-event',
+      query:{
+        "id":id
+      }
+    })
+  }
   return (
     <div>
       <div className="w-full mt-4 bg-white py-5 rounded border shadow-sm overflow-y-auto height_list">
@@ -24,33 +34,18 @@ function AdminEventList(props) {
               <div key={index} className="flex justify-between items-center bg-white py-2 px-4">
                 <div>
                   <div className="text-gray-900 text-xl hover:text-purple-600 font-semibold ">
+                  <Link
+                    href={
+                `/events/${obj.id}`
+                    }
+                  >
                     {obj.title}
+                    </Link>
                   </div>
                   <div>{moment(obj.event_time).format("LL")}</div>
                 </div>
                 <div className="flex ">
-                <Link
-                    href={
-                `/events/${obj.id}`
-                    }
-                  >
-                    <div
-                      className={`flex items-center w-28 justify-center rounded-full h-8 mr-3 cursor-pointer  ${MyBlogStyles.draftedBg}`}
-                    >
-                      <>
-                        <div
-                          className={`w-2 h-2 mr-2 rounded-full  ${MyBlogStyles.draftedDot}`}
-                        ></div>
-
-                        <span
-                          className={`capitalize  ${MyBlogStyles.draftedText} `}
-                        >
-                        Preview
-                        </span>
-                      </>
-                    </div>
-                  </Link>
-                  {obj.status === "published" && (
+                  {/* {obj.status === "published" && (
                     <div
                       className={`flex items-center w-28 justify-center rounded-full h-8 mr-3  ${MyBlogStyles.publishedBg} `}
                     >
@@ -60,7 +55,7 @@ function AdminEventList(props) {
                         Published
                       </span>
                     </div>
-                  )}
+                  )} */}
                   <div onClick={()=> deletevents(obj.id)}
                     className={`flex items-center w-28 justify-center hover:opacity-50 duration-500 cursor-pointer rounded-full h-8 mr-3 
                  ${MyBlogStyles.dangerBg}`}
@@ -69,7 +64,7 @@ function AdminEventList(props) {
                       Delete
                     </span>
                   </div>
-                  <div
+                  <div onClick={()=>editevent(obj.id)}
                     className={`flex items-center px-4 justify-center rounded-full h-8 cursor-pointer hover:opacity-50 duration-500 ${MyBlogStyles.linkBg}`}
                   >
                     <div className="mr-1 mt-1 rounded-full"></div>

diff --git a/component/admin/AdminNavbar.jsx b/component/admin/AdminNavbar.jsx
@@ -80,16 +80,17 @@ export default function AdminNavbar({ changeTag, changeStatus, event }) {
             // closeMenuOnSelect={false}
           />
         }
+          {event ? "" :
           <Select
-            options={statusOptions}
-            isMulti={false}
-            onChange={(e) => selectStatus(e)}
-            className={`basic-single postFilter md:block hidden m-0 outline-none focus:outline-none text-sm bg-gray-200 border rounded px-0 cursor-pointer  ${styles.min_w_10}`}
-            classNamePrefix="Blog Status"
-            clearValue={() => undefined}
-            placeholder="Select Status"
-            // closeMenuOnSelect={false}
-          />
+          options={statusOptions}
+          isMulti={false}
+          onChange={(e) => selectStatus(e)}
+          className={`basic-single postFilter md:block hidden m-0 outline-none focus:outline-none text-sm bg-gray-200 border rounded px-0 cursor-pointer  ${styles.min_w_10}`}
+          classNamePrefix="Blog Status"
+          clearValue={() => undefined}
+          placeholder="Select Status"
+          // closeMenuOnSelect={false}
+        />}
            <div class="bg-black h-8 ml-4 hover:bg-white border border-black text-white hover:text-black hidden md:flex items-center text-sm font-semibold px-4 py-2 md:mr-3 rounded-sm cursor-pointer duration-700 blogs_h_40px__3sE3c">
               <a href="/admin/events/create-event">Create Event</a>
             </div>

diff --git a/pages/admin/events/create-event.js b/pages/admin/events/create-event.js
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import EventInfo from "../../../component/admin/EventInfo";
 import OrganizerInfo from "../../../component/admin/OrganizerInfo";
 import UserService from "../../../services/UserService";
@@ -8,6 +8,7 @@ import moment from "moment";
 import Cookies from "universal-cookie";
 import { getCookieValue } from "../../../lib/cookie";
 import notify from "../../../lib/notify";
+import { useRouter } from "next/router";
 
 export async function getServerSideProps(context) {
   try {
@@ -73,6 +74,34 @@ export async function getServerSideProps(context) {
 }
 
 const CreateEvent = () => {
+  const router = useRouter()
+  const [eventID, setEventID] = useState(router.query.id);
+  useEffect(() => {
+    setTimeout(() => {
+      eventID && getevents(eventID);
+    }, 100);
+  }, []);
+  async function getevents(reqData) {
+    try {
+      const data = await EventService.getEventById(reqData);
+      const finaldata = data.data;
+      console.log(finaldata);
+      setEventDetails({
+        organizerImage: finaldata.guest_image,
+        organizerName: finaldata.guest_name,
+        tagLine: finaldata.guest_bio,
+        eventName:finaldata.title,
+        eventLocation:finaldata.location,
+        eventDescription: finaldata.description,
+        eventLink: finaldata.registration_link,
+        eventDate: '2020-10-15',
+        eventTime: "10.30",
+        eventImage: finaldata.banner_image
+      });
+    } catch (err) {
+      notify(err?.response?.data?.message ?? err?.message, "error");
+    }
+  }
   const cookies = new Cookies();
   const userCookie = cookies.get("userNullcast");
   console.log("cookies", userCookie);
@@ -105,12 +134,38 @@ const CreateEvent = () => {
       title: eventDetails.eventName,
       registration_link: eventDetails.eventLink,
       banner_image: eventDetails.eventImage,
-      description: eventDetails.description,
+      description: eventDetails.eventDescription,
       event_time: formatTime()
     };
     try {
       const data = await EventService.createNewEvent(userCookie, eventData);
       notify(data.data.message);
+      router.push('/admin/events')
+    } catch (error) {
+      console.log(error);
+    }
+    formatTime();
+  };
+
+  const createUpdateHandler = async (e) => {
+    const eventData = {
+      guest_name: eventDetails.organizerName,
+      guest_designation: eventDetails.tagLine,
+      guest_image: eventDetails.organizerImage,
+      title: eventDetails.eventName,
+      registration_link: eventDetails.eventLink,
+      banner_image: eventDetails.eventImage,
+      description: eventDetails.eventDescription,
+      event_time: formatTime()
+    };
+    try {
+      const data = await EventService.updateEvent(
+        userCookie,
+        eventData,
+        eventID
+      );
+      notify(data.data.message);
+      router.push('/admin/events')
     } catch (error) {
       console.log(error);
     }
@@ -146,10 +201,12 @@ const CreateEvent = () => {
           </button>
           <button
             className="border-2 border-black bg-black px-8 py-2 rounded text-white"
-            onClick={(e) => createEventHandler(e)}
+            onClick={(e) =>
+              eventID ? createUpdateHandler(e) : createEventHandler(e)
+            }
             type="button"
           >
-            Donate
+            {eventID ? "Update" : "Create"}
           </button>
         </div>
       </div>

diff --git a/pages/admin/events/index.js b/pages/admin/events/index.js
@@ -110,12 +110,11 @@ const Admin = () => {
    * @author athulraj2002
    */
   async function getevents(reqData) {
-    console.log(reqData)
     try {
       const data = await EventService.getLatestEvents(reqData);
-      console.log(data)
       const { events, count } = data;
       setEventdata({ events, count });
+      console.log(eventdata)
     } catch (err) {
       notify(err?.response?.data?.message ?? err?.message, "error");
     }
@@ -196,7 +195,9 @@ const Admin = () => {
 
           {eventdata.events?.length ? (
             <div>
-              <AdminEventList events={eventdata.events} />
+              <AdminEventList events={eventdata.events} refresh={()=>{
+                getevents()
+              }} />
 
               <div
                 className={`fixed bottom-0 left-0 z-10 w-full flex justify-center items-center px-6 ${MyBlogsstyles.navigation}`}

diff --git a/services/EventService.js b/services/EventService.js
@@ -49,6 +49,16 @@ async function createNewEvent(userCookie, eventData) {
     throw err;
   }
 }
+async function updateEvent(userCookie, eventData, eventid) {
+  try {
+    const response = await axios.put(`${baseUrl}/api/v1/admin/event/${eventid}` , eventData)
+    console.log(response);
+    return response
+  } catch (err) {
+    console.log(err);
+    throw err;
+  }
+}
 async function deleteEvent(eventId){
   try{
     const {data} = await axios.delete(`${baseUrl}/api/v1/admin/event/${eventId}`)
@@ -78,7 +88,8 @@ const EventService = {
   createNewEvent,
   getallevents,
   deleteEvent,
-  getEventbyStatus
+  getEventbyStatus,
+  updateEvent
 };
 
 module.exports = EventService;
-Original file line number
+Diff line change
@@ Expand Up @@
                           </>
                         </div>
                       </Link>
                       {item.status == "published" ? (
                         <div
                           className={`flex items-center w-28 justify-center rounded-full h-8 mr-3  ${MyBlogStyles.publishedBg} `}
@@ Expand Down @@