chore: refactoring events, auth bugs, validations

ngoworldcommunity · Mar 11, 2024 · b04f6cb · b04f6cb
1 parent 2c532f2
commit b04f6cb
Show file tree

Hide file tree

Showing 22 changed files with 345 additions and 361 deletions.
diff --git a/src/components/private/cards/club/ClubCard.jsx b/src/components/private/cards/club/ClubCard.jsx
@@ -22,7 +22,7 @@ const DetailedClub = ({ club }) => {
           </Button>
           <Button
             variant="outline"
-            to={`/club/${club?.username}`}
+            to={`/club/${club?.userName}`}
             className="detailedclub_ctabutton"
           >
             Read More

diff --git a/src/components/private/events/card/EventsCard.jsx b/src/components/private/events/card/EventsCard.jsx
@@ -1,72 +1,105 @@
 /* eslint-disable no-unused-vars */
 import { CiCalendar, CiClock2, CiLocationOn } from "react-icons/ci";
 import { IoShareSocialOutline } from "react-icons/io5";
+import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { showErrorToast } from "../../../../utils/Toasts";
+import getFormattedDate from "../../../../utils/getFormattedDate";
 import { Button } from "../../../shared";
 import "./EventsCard.scss";
 
 const EventsCard = ({ event }) => {
-  return (
-    <div className="eventcard_container">
-      <div className="eventcard_parent">
-        <img
-          src="https://earth5r.org/wp-content/uploads/2020/07/World-Environment-Day-Mumbai-India-Environmental-NGO-CSR-Earth5R-1230x767.jpg"
-          alt=""
-        />
+  console.log("🚀 ~ EventsCard ~ event:", event?.startTime);
+  const userType = useSelector((state) => state.user.userType);
+  const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
+  const navigate = useNavigate();
 
-        <div className="eventcard_body">
-          <p>Heritage & Haunted places - whole night city tour</p>
+  const eventStartTime = new Date(event?.startTime);
+  const formattedStartTime = eventStartTime.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  });
 
-          <div className="eventcard_datetime">
-            <span>
-              <CiLocationOn
-                style={{
-                  opacity: "1",
-                }}
-              />{" "}
-              Kolkata Police Head Quarter Lalbazar
-            </span>
-            <span>
-              <CiCalendar /> 12th Feb
-            </span>
-            <span>
-              <CiClock2 /> 07:45 PM
-            </span>
-          </div>
+  const formatttedStartDate = getFormattedDate(event?.startDate);
 
-          <div className="eventcard_datetime_mobile">
-            <div>
+  const attendHandler = () => {
+    if (isLoggedIn) {
+      navigate("/events/attend");
+    } else {
+      showErrorToast("Please login to attend the event");
+      setTimeout(() => {
+        navigate("/auth/login");
+      }, 1600);
+    }
+  };
+
+  return (
+    <>
+      <div className="eventcard_container">
+        <div className="eventcard_parent">
+          <img
+            src="https://earth5r.org/wp-content/uploads/2020/07/World-Environment-Day-Mumbai-India-Environmental-NGO-CSR-Earth5R-1230x767.jpg"
+            alt=""
+          />
+
+          <div className="eventcard_body">
+            <p>{event?.name}</p>
+
+            <div className="eventcard_datetime">
               <span>
                 <CiLocationOn
                   style={{
                     opacity: "1",
                   }}
                 />{" "}
-                Kolkata Police Head Quarter Lalbazar
+                {event?.address}
+              </span>
+              <span>
+                <CiCalendar /> {formatttedStartDate}
+              </span>
+              <span>
+                <CiClock2 /> {formattedStartTime}
               </span>
             </div>
 
-            <div>
-              <CiCalendar />
-              <span>Tues, 12th Feb at 07:45 PM</span>
+            <div className="eventcard_datetime_mobile">
+              <div>
+                <span>
+                  <CiLocationOn
+                    style={{
+                      opacity: "1",
+                    }}
+                  />{" "}
+                  Kolkata Police Head Quarter Lalbazar
+                </span>
+              </div>
+
+              <div>
+                <CiCalendar />
+                <span>
+                  {formatttedStartDate} at {formattedStartTime}
+                </span>
+              </div>
             </div>
-          </div>
 
-          <div className="eventcard_ctadiv">
-            <Button>Attend</Button>
-            <div className="eventcard_sharebutton">
-              <IoShareSocialOutline />
+            <div className="eventcard_ctadiv">
+              <Button onClickfunction={attendHandler}>Attend</Button>
+              <div className="eventcard_sharebutton">
+                <IoShareSocialOutline />
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <div className="eventcard_ctadiv_mobile">
-        <Button>Attend</Button>
-        <div className="eventcard_sharebutton">
-          <IoShareSocialOutline />
+        <div className="eventcard_ctadiv_mobile">
+          <Button onClickfunction={attendHandler}>Attend</Button>
+          <div className="eventcard_sharebutton">
+            <IoShareSocialOutline />
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

diff --git a/src/components/private/events/card/EventsCard.scss b/src/components/private/events/card/EventsCard.scss
@@ -89,6 +89,7 @@
     display: flex;
     align-items: center;
     gap: 5px;
+    word-break: break-all;
 
     &:nth-of-type(1) {
       display: -webkit-box;
@@ -131,6 +132,9 @@
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
+  position: absolute;
+  bottom: 10px;
+  width: 93%;
 
   button {
     width: 100%;
@@ -151,6 +155,9 @@
 
   @media screen and (max-width: 430px) {
     display: none;
+    position: relative;
+    bottom: auto;
+    width: auto;
   }
 }
 

diff --git a/src/components/private/events/create/CreateEvents.jsx b/src/components/private/events/create/CreateEvents.jsx
@@ -74,6 +74,7 @@ const CreateEvents = ({ setshowCreateModal }) => {
   };
 
   const handleSubmit = () => {
+    console.log(event);
     seterrors(validateEvent());
     submitCallback(event, setshowCreateModal);
   };

diff --git a/src/components/shared/cards/club/ClubCard.jsx b/src/components/shared/cards/club/ClubCard.jsx
@@ -36,13 +36,13 @@ const ClubCard = ({ club }) => {
         {window.innerWidth > 500 ? (
           <Button
             variant="solid"
-            to={`/club/${club?.username}`}
+            to={`/club/${club?.userName}`}
             className="clubcard_readmore"
           >
             Read More
           </Button>
         ) : (
-          <Link to={`/club/${club?.username}`}>
+          <Link to={`/club/${club?.userName}`}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="21"

diff --git a/src/components/shared/footer/Footer.jsx b/src/components/shared/footer/Footer.jsx
@@ -66,8 +66,8 @@ const Footer = () => {
       return;
     }
     const success = await ReportProblem({
-      firstname: reportFirstName,
-      lastname: reportLastName,
+      firstName: reportFirstName,
+      lastName: reportLastName,
       email: reportEmail,
       reportmessage: reportIssue,
     });

diff --git a/src/components/shared/navbar/Navbar.jsx b/src/components/shared/navbar/Navbar.jsx
@@ -36,8 +36,8 @@ const Navbar = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const isLoggedIn = useSelector((state) => state.user.isLoggedIn);
-  const usertype = useSelector((state) => state.user.usertype);
-  const username = useSelector((state) => state.user.username);
+  const userType = useSelector((state) => state.user.userType);
+  const userName = useSelector((state) => state.user.userName);
 
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const [isNavbarOpen, setIsNavbarOpen] = useState(false);
@@ -67,6 +67,7 @@ const Navbar = () => {
         navigate("/");
         dispatch(resetUserData());
         Cookies.remove("skipProfileCompletion");
+        localStorage.clear();
       }, 1500);
     } else {
       showErrorToast(data?.message);
@@ -189,10 +190,10 @@ const Navbar = () => {
                 to={`${
                   Cookies.get("isLoggedIn")
                     ? `/${
-                        Cookies.get("usertype") === "individual"
+                        Cookies.get("userType") === "individual"
                           ? "user"
                           : "club"
-                      }/${Cookies.get("username")}`
+                      }/${Cookies.get("userName")}`
                     : "/auth/signup"
                 }`}
                 className="navbar_mobile_cta"
@@ -208,19 +209,19 @@ const Navbar = () => {
 
         <div className="nav_dropdown">
           <div className="myaccount">
-            <span>Hello @{username}</span>
+            <span>Hello @{userName}</span>
             <div
               role="separator"
               aria-orientation="horizontal"
               className="myaccount_separator"
             ></div>
             <Link
-              to={`/${usertype === "individual" ? "user" : "club"}/${username}`}
+              to={`/${userType === "individual" ? "user" : "club"}/${userName}`}
             >
               Your Profile
               <span>⇧⌘P</span>
             </Link>
-            {usertype === "club" ? (
+            {userType === "club" ? (
               <Link to={"/event/create"}>
                 Your Events <span>⌘E</span>
               </Link>

diff --git a/src/constants/AuthSchema.js b/src/constants/AuthSchema.js
@@ -14,7 +14,7 @@ const AuthSchema = {
     name: z.string().min(2, {
       message: "Name must be at least 2 characters long.",
     }),
-    usertype: z.string().min(2, {
+    userType: z.string().min(2, {
       message: "Please select a user type.",
     }),
     email: z.string().email({
@@ -26,7 +26,7 @@ const AuthSchema = {
   }),
 
   individualSignUpSchema: z.object({
-    usertype: z.string().min(2, {
+    userType: z.string().min(2, {
       message: "Please select a user type.",
     }),
     email: z.string().email({
@@ -35,10 +35,10 @@ const AuthSchema = {
     password: z.string().min(8, {
       message: "Password must be at least 8 characters long.",
     }),
-    firstname: z.string().min(2, {
+    firstName: z.string().min(2, {
       message: "First name must be at least 2 characters long.",
     }),
-    lastname: z.string().min(2, {
+    lastName: z.string().min(2, {
       message: "Last name must be at least 2 characters long.",
     }),
   }),

diff --git a/src/constants/ProfileElements.js b/src/constants/ProfileElements.js
@@ -8,15 +8,15 @@ const ProfileElements = [
     type: "text",
   },
   {
-    id: "firstname",
+    id: "firstName",
     label: "First Name",
     placeholder: "Your first name",
     minimumLength: 5,
     errorMessage: "First Name must be at least 5 characters long",
     type: "text",
   },
   {
-    id: "lastname",
+    id: "lastName",
     label: "Last Name",
     placeholder: "Your last name",
     minimumLength: 5,

diff --git a/src/hooks/useFormLogic.js b/src/hooks/useFormLogic.js
@@ -75,7 +75,7 @@ export function useFormLogic(
 }
 
 export const individualInitialFormState = {
-  usertype: "individual",
+  userType: "individual",
   slug: "",
   email: "",
   password: "",
@@ -85,12 +85,12 @@ export const individualInitialFormState = {
   address: "",
   country: "",
   pincode: "",
-  firstname: "",
-  lastname: "",
+  firstName: "",
+  lastName: "",
 };
 
 export const clubInitialFormState = {
-  usertype: "club",
+  userType: "club",
   slug: "",
   email: "",
   password: "",