feat: event share #608

created event share component ui and functionality

component/admin/EventInfo.jsx

@@ -1,7 +1,7 @@
 import { useRef, useState } from "react";
 
 
-export default function EventInfo ({ eventDetails, setEventDetails }) {
+export default function EventInfo ({ eventDetails, setEventDetails , eventDetailsError , setEventDetailsError }) {
   const [fileName, setFileName] = useState("");
   const ref = useRef();
   console.log(eventDetails?.eventImage);
@@ -12,6 +12,52 @@ export default function EventInfo ({ eventDetails, setEventDetails }) {
         setEventDetails((prev) => ({ ...prev, eventImage: imageFile }));
   };
 
+  const eventNameValidation  = (e) => {
+      if(e.target.value === "") {
+        setEventDetailsError(prev => ({...prev , eventNameError : "Enter Event Name"}))
+      } else {
+        setEventDetailsError(prev => ({...prev , eventNameError : ""}))
+      }
+  }
+
+  const eventLocationValidation = (e) => {
+    if(e.target.value === "") {
+      setEventDetailsError(prev => ({...prev , eventLocationError : "Enter Event Details"}))
+    } else {
+      setEventDetailsError(prev => ({...prev , eventLocationError : ""}))
+    }
+  }
+
+  const eventDescriptionValidation = (e) => {
+    if(e.target.value === "") {
+      setEventDetailsError(prev => ({...prev , eventDescriptionError : "Enter Event Description"}))
+    } else {
+      setEventDetailsError(prev => ({...prev , eventDescriptionError : ""}))
+    }
+  }
+
+  const eventLinkValidation = (e) => {
+    if(e.target.value === "") {
+      setEventDetailsError(prev => ({...prev , eventLinkError : "Enter Event Link"}))
+    } else {
+      setEventDetailsError(prev => ({...prev , eventLinkError : ""}))
+    }
+  }
+
+  const eventDateValidation = (e) => {
+    if(e.target.value === "") {
+      setEventDetailsError(prev => ({...prev , eventDateError : "Enter Event Date"}))
+    } else {
+      setEventDetailsError(prev => ({...prev , eventDateError : ""}))
+    }
+  }
+  const eventTimeValidation = (e) => {
+    if(e.target.value === "") {
+      setEventDetailsError(prev => ({...prev , eventTimeError : "Enter Event Time"}))
+    } else {
+      setEventDetailsError(prev => ({...prev , eventTimeError : ""}))
+    }
+  }
   return (
     <div className="mx-10 mb-8">
       <div className="flex mb-6 items-center justify-center">
@@ -38,7 +84,11 @@ export default function EventInfo ({ eventDetails, setEventDetails }) {
                 eventName: e.target.value
               }))
             }
+            onBlur = {(e) => eventNameValidation(e)}
           />
+          {<span className="flex items-center font-bold tracking-wide text-red-danger text-xs mt-1 ml-0">
+                          {eventDetailsError.eventNameError}
+                        </span>}
         </div>
         <div className="flex flex-col w-full ml-3">
           <label
@@ -53,13 +103,17 @@ export default function EventInfo ({ eventDetails, setEventDetails }) {
             name="event location"
             placeholder="Paste location here"
             value={eventDetails.eventLocation}
+            onBlur = {(e) => eventLocationValidation(e)}
             onChange={(e) =>
               setEventDetails((prev) => ({
                 ...prev,
                 eventLocation: e.target.value
               }))
             }
           />
+          {<span className="flex items-center font-bold tracking-wide text-red-danger text-xs mt-1 ml-0">
+                          {eventDetailsError.eventLocationError}
+                        </span>}
         </div>
       </div>
       <div className="flex flex-col w-full mb-4">
@@ -73,13 +127,17 @@ export default function EventInfo ({ eventDetails, setEventDetails }) {
           placeholder = "Add description here"
           rows="4"
           value={eventDetails.eventDescription}
+          onBlur = {(e) => eventDescriptionValidation(e)}
           onChange={(e) =>
             setEventDetails((prev) => ({
               ...prev,
               eventDescription: e.target.value
             }))
           }
         />
+        {<span className="flex items-center font-bold tracking-wide text-red-danger text-xs mt-1 ml-0">
+                          {eventDetailsError.eventDescriptionError}
+                        </span>}
       </div>
       <div className="flex flex-col w-full mb-4">
         <label className="mb-2 text-sm font-semibold" htmlFor="event link">
@@ -91,10 +149,14 @@ export default function EventInfo ({ eventDetails, setEventDetails }) {
           name="event link"
           placeholder="Link Here"
           value={eventDetails.eventLink}
+          onBlur = {(e) => eventLinkValidation(e)}
           onChange={(e) =>
             setEventDetails((prev) => ({ ...prev, eventLink: e.target.value }))
           }
         />
+        {<span className="flex items-center font-bold tracking-wide text-red-danger text-xs mt-1 ml-0">
+                          {eventDetailsError.eventLinkError}
+                        </span>}
       </div>
       <div className="flex justify-center item-center mb-5">
         <div className="flex flex-col w-full mr-3">
@@ -108,13 +170,17 @@ export default function EventInfo ({ eventDetails, setEventDetails }) {
             name="event date"
             placeholder="choose"
             value={eventDetails.eventDate}
+            onBlur = {(e) => eventDateValidation(e)}
             onChange={(e) =>
               setEventDetails((prev) => ({
                 ...prev,
                 eventDate: e.target.value
               }))
             }
           />
+          {<span className="flex items-center font-bold tracking-wide text-red-danger text-xs mt-1 ml-0">
+                          {eventDetailsError.eventDateError}
+                        </span>}
         </div>
         <div className="flex flex-col w-full ml-3">
           <label className="mb-2 text-sm font-semibold" htmlFor="event time">
@@ -126,21 +192,25 @@ export default function EventInfo ({ eventDetails, setEventDetails }) {
             name="event time"
             placeholder="choose"
             value={eventDetails.eventTime}
+            onBlur = {(e) => eventTimeValidation(e)}
             onChange={(e) =>
               setEventDetails((prev) => ({
                 ...prev,
                 eventTime: e.target.value
               }))
             }
           />
+          {<span className="flex items-center font-bold tracking-wide text-red-danger text-xs mt-1 ml-0">
+                          {eventDetailsError.eventTimeError}
+                        </span>}
         </div>
       </div>
       <div
         className="border-dashed border-2 border-grayBorder p-10 rounded text-center flex flex-col"
         onClick={() => ref.current.click()}
       >
         <label htmlFor="inputFiles" className="font-bold relative">
-          {fileName === "" ? "Upload Image" : fileName}
+          {eventDetails?.eventImage === "" ? "Upload Image" : eventDetails?.eventImage.name}
           <input
             type="file"
             className="hidden absolute top-0 left-0 w-full flex-grow"

component/admin/OrganizerInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 import PostService from "../../services/PostService";
-const OrganizerInfo = ({ eventDetails, setEventDetails }) => {
+const OrganizerInfo = ({ eventDetails, setEventDetails ,  eventDetailsError , setEventDetailsError }) => {
   const [image ,  setImage] = useState("")
   const ref = useRef();
   const imageUploadHandler = async (e) => {
@@ -9,6 +9,22 @@ const OrganizerInfo = ({ eventDetails, setEventDetails }) => {
     setEventDetails((prev) => ({ ...prev, organizerImage: imageFile }))
     setImage(URL.createObjectURL(imageFile))
   };
+
+  const organizerNameValidation = (e) => {
+    if(e.target.value === "") {
+      setEventDetailsError(prev => ({...prev , organizerNameError : "Enter Organizer's Name"}))
+    } else {
+      setEventDetailsError(prev => ({...prev , organizerNameError : ""}))
+    }
+  }
+
+  const organizerDesignationValidation = (e) => {
+    if(e.target.value === "") {
+      setEventDetailsError(prev => ({...prev , tagLineError : "Enter Organizer's Tag"}))
+    } else {
+      setEventDetailsError(prev => ({...prev , tagLineError : ""}))
+    }
+  }
   return (
     <div className="mx-10 mb-8">
       <div className="flex mb-6 items-center justify-center">
@@ -60,13 +76,17 @@ const OrganizerInfo = ({ eventDetails, setEventDetails }) => {
               name="organizer name"
               placeholder="Organizer Name"
               value={eventDetails.organizerName}
+              onBlur = {(e) => organizerNameValidation(e)}
               onChange={(e) =>
                 setEventDetails((prev) => ({
                   ...prev,
                   organizerName: e.target.value
                 }))
               }
             />
+            {<span className="flex items-center font-bold tracking-wide text-red-danger text-xs mt-1 ml-0">
+                          {eventDetailsError.organizerNameError}
+                        </span>}
           </div>
           <div className="flex flex-col">
             <label className="mb-2 text-sm font-semibold" htmlFor="Tag Line">
@@ -78,13 +98,17 @@ const OrganizerInfo = ({ eventDetails, setEventDetails }) => {
               name="Tag Line"
               placeholder="Tag here"
               value={eventDetails.tagLine}
+              onBlur = {(e) => organizerDesignationValidation(e)}
               onChange={(e) =>
                 setEventDetails((prev) => ({
                   ...prev,
                   tagLine: e.target.value
                 }))
               }
             />
+            {<span className="flex items-center font-bold tracking-wide text-red-danger text-xs mt-1 ml-0">
+                          {eventDetailsError.tagLineError}
+                        </span>}
           </div>
         </div>
       </div>

component/myblogs/WriteNav.jsx

@@ -387,13 +387,13 @@ export default function WriteNav({
                       className={`h-24 min-h-24 border border-dashed border-gray-400 rounded overflow-hidden relative ${!currentPost.bannerImage && "cursor-pointer"
                         }`}
                     >
-                      {currentPost.bannerImage ? (
+                      {currentPost.banner_image ? (
                         <div className="w-full h-full flex justify-center items-center overflow-hidden relative hoverPreview">
                           {loading ? (
                             <div>Loading...</div>
                           ) : (
                             <img
-                              src={currentPost.bannerImage}
+                              src={currentPost.banner_image}
                               alt="banner"
                               width="100%"
                             />

courses/javascript/function.md

@@ -43,11 +43,11 @@ testCase:
   ]
 ---
 
-A function(a.k.a method) is basically a set of instructions that performs a certain task. It can receive inputs and can also return values to where the function has been called.
+A `function`(a.k.a method) is basically a set of instructions that performs a certain task. It can receive inputs and can also return values to where the function has been called.
 
 ## Functions in JavaScript
 
-In Javascript, a function is declared using the **“function“** keyword. For example:
+In Javascript, a function is declared using the `function` keyword. For example:
 
 ```javascript
 function printText(text1, text2) {
@@ -59,19 +59,19 @@ let str2 = "world!";
 printText(str1, str2); //   Hello world!
 ```
 
-From the above code snippet a function consist of:
+From the above code snippet a function consist of :
 
 - The name of the function **_printText_**.
 
-- The variables enclosed in parentheses are the parameters of that function.
+- The variables enclosed in parentheses are the `parameters` of that function.
 
 - The function body enclosed in curly brackets, which contains the JavaScript statements that describes the function
 
-- Finally we invoke the function call by the statement **_printText(str1,str2);_**. The values of _str1_ and _str2_ are copied to _text1_ and _text2_ respectively.
+- Finally we invoke the function call by the statement `printText(str1,str2);`. The values of `str1` and `str2` are copied to `text1` and `text2` respectively.
 
 ## A function can return values as well
 
-The **_return_** keyword is used to return a value from a function. Let's see an example:
+The `return` keyword is used to return a value from a function. Let's see an example:
 
 ```javascript
 function multiplyTen(num) {
@@ -83,10 +83,10 @@ console.log(num); // 50
 
 ## Complete the task below
 
-- create a function named **_addTwoNumbers_** with parameters **num1** and **num2**.
+- create a function named `addTwoNumbers` with parameters `num1` and `num2`.
 
-- Inside the function store **num1 + num2** to a const datatype **sum**.
+- Inside the function store `num1 + num2` to a const datatype `sum`.
 
-- The function should should return the **sum**
+- The function should return the `sum`
 
 - Then print the return from the function. Pass 5 and 6 as the function arguments.

courses/javascript/prototypes.md

@@ -81,7 +81,7 @@ console.log(obj1.b); // 2
 console.log(obj2.b); // undefined
 ```
 
-Here, `obj1` and `obj2` are of the same type, i.e., Object. `obj2` doesn't have the property `b`. Consider the case you want a property to have the same value accross all objects. In this case, let's say from now on, every object I create should have the property b with the value `2`. How will you solve the riddle? The answer is **`prototype`**.
+Here, `obj1` and `obj2` are of the same type, i.e., Object. `obj2` doesn't have the property `b`. Consider the case you want a property to have the same value across all objects. In this case, let's say from now on, every object I create should have the property `b` with the value `2`. How will you solve the riddle? The answer is **`prototype`**.
 
 ```js
 Object.prototype.b = 2;
@@ -115,9 +115,9 @@ console.log(human2.fullName()); // Daisy Johnson
 
 See? That's the magic of prototypes!. Now let's see what are `object prototypes`.
 
-## Javascript provided prototypes
+## JavaScript provided prototypes
 
-Well, to make life more easier, Javascript have provided us many life saver prototypes which helps us to achieve one-line codes. You see, Javascript is a heavily Object Oriented Programming Language. Everything in Javascript revolves around object. `Array`, `Date`, and even Functions are variants of Objects, with added prototypes and properties. Let's take a look at some of the useful ones
+Well, to make life more easier, JavaScript has provided us many life saver prototypes which helps us to achieve one-line codes. You see, JavaScript is a heavily Object Oriented Programming Language. Everything in JavaScript revolves around object. `Array`, `Date`, and even Functions are variants of Objects, with added prototypes and properties. Let's take a look at some of the useful ones
 
 - **`Array.prototype.push()`** - Takes 1 or more arguments, which will be pushed to the end of the array.
 
@@ -137,8 +137,8 @@ console.log(a); // [ 3, 2, 1 ]
 - **`Array.prototype.slice()`** - Takes two optional arguments start and end. Default value of start and end will be 0 and length of the array. Returns a new array with items along the start to end of original array. The original array is **kept intact**.
 
 ```js
-console.log(a.slice()); // [ 3, 2, 1 ]
-console.log(a.slice(0, 2)); // [ 3, 2 ]
+console.log(a.slice()); // [ 1, 2, 3 ]
+console.log(a.slice(0, 2)); // [ 1, 2 ]
 ```
 
 - **`Array.prototype.forEach()`** - Loops through the elements of the array, execute the callback function, which is provided as the argument, for the entire items of the array, one by one.
@@ -149,9 +149,9 @@ a.forEach((item) => {
 });
 /*
 Output- 
-3
-2
 1
+2
+3
 */
 ```
 
@@ -162,8 +162,8 @@ console.log(
     a.map(item => {
         return item * 10;
     })
-); // [ 30, 20, 10 ]
-console.log(a); // [ 3, 2, 1 ]
+); // [ 10, 20, 30 ]
+console.log(a); // [ 1, 2, 3 ]
 */
 ```
 
@@ -175,7 +175,7 @@ console.log(
         return item % 2 === 0; // filters even values
     })
 ); // [ 2 ]
-console.log(a); // [ 3, 2, 1 ]
+console.log(a); // [ 1, 2, 3 ]
 */
 ```
 
@@ -190,7 +190,7 @@ console.log(
                              third element of array as second argument*/
     })
 ); // 6
-console.log(a); // [ 3, 2, 1 ]
+console.log(a); // [ 1, 2, 3 ]
 */
 ```
 
@@ -200,8 +200,8 @@ So I hope you enjoyed this little section here. Take a break if you need warrior
 
 ## Complete the tasks below:
 
-- Create a new constructor function Student, which accepts name and departments as params and assign to the object
+- Create a new `constructor` function `Student`, which accepts `name` and `departments` as params and assign to the object
 
-- Declare a variable student of type Student, where name is Elon and 'department' is 'ME'
+- Declare a variable `student` of type `Student`, where `name` is Elon and `department` is 'ME'
 
-- Define a new prototype isCSEstudent for Student, which is a function returning a boolean value, which will be true if the student is from department 'CSE'
+- Define a new prototype `isCSEstudent` for `Student`, which is a `function` returning a boolean value, which will be `true` if the student is from department 'CSE'