Update to Node.js 24, migrate to TypeScript, and fix NextJS dependencies

app/.eslintrc.json

@@ -0,0 +1,13 @@
+{
+  "extends": ["next/core-web-vitals"],
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "extends": ["next/core-web-vitals"],
+      "rules": {
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-explicit-any": "off"
+      }
+    }
+  ]
+}

app/.nvmrc

@@ -1 +1 @@
-v16.4.0
+v24.7.0

app/public/svg/issue.js → app/components/SvgIcons/Issue.tsx

@@ -10,12 +10,12 @@ export default function issue() {
       <title />
       <g data-name="Layer 57" id="Layer_57">
         <path
-          class="cls-1"
+          className="cls-1"
           d="M16,31A15,15,0,1,1,31,16,15,15,0,0,1,16,31ZM16,3A13,13,0,1,0,29,16,13,13,0,0,0,16,3Z"
         />
-        <path class="cls-1" d="M16,24a2,2,0,1,1,2-2A2,2,0,0,1,16,24Zm0-2Z" />
+        <path className="cls-1" d="M16,24a2,2,0,1,1,2-2A2,2,0,0,1,16,24Zm0-2Z" />
         <path
-          class="cls-1"
+          className="cls-1"
           d="M16,18a1,1,0,0,1-1-1V8a1,1,0,0,1,2,0v9A1,1,0,0,1,16,18Z"
         />
       </g>

app/components/SvgIcons/Star.js → app/components/SvgIcons/Star.tsx

@@ -30,7 +30,7 @@ export default function star() {
             strokeLinecap="butt"
             strokeLinejoin="miter"
             strokeMiterlimit={10}
-            strokeDasharray
+            strokeDasharray="none"
             strokeDashoffset={0}
             fontFamily="none"
             fontWeight="none"

app/components/animation.js → app/components/animation.tsx

@@ -6,11 +6,11 @@ function getRandomInt(max) {
 }
 
 const Animation = React.memo(() => {
-  console.log('animation rerendered');
   return (
     <span className={styles.track}>
-      {Array.apply(null, { length: 4 }).map(() => (
+      {Array.apply(null, { length: 4 }).map((_, index) => (
         <p
+          key={`heart-${index}`}
           className={styles.emojiAnimationContainer}
           style={{
             color: 'red',
@@ -22,8 +22,9 @@ const Animation = React.memo(() => {
           ❤
         </p>
       ))}
-      {Array.apply(null, { length: 4 }).map(() => (
+      {Array.apply(null, { length: 4 }).map((_, index) => (
         <p
+          key={`thumbs-${index}`}
           className={styles.emojiAnimationContainer}
           style={{
             overflow: 'hidden',
@@ -38,4 +39,6 @@ const Animation = React.memo(() => {
   );
 });
 
+Animation.displayName = 'Animation';
+
 export default Animation;

app/components/clientForms/show.js → app/components/clientForms/show.tsx

@@ -1,17 +1,17 @@
 import Error from 'next/error';
 import { Button, Card, Form, Spinner } from 'react-bootstrap';
-import { getFormData } from '../../lib/formAPI';
+import { useFormData } from '../../lib/formAPI';
 import styles from '../../styles/form.module.css';
 
 function RCform({ formId, fw }) {
-  const { form, isLoading, isError } = getFormData(formId);
+  const { form, isLoading, isError } = useFormData(formId);
 
   if (isLoading) return <Spinner />;
-  if (isError) return <Error />;
+  if (isError) return <Error statusCode={500} />;
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    console.log('form submitted', e);
+    // TODO: Implement form submission logic
   };
 
   return (
@@ -48,7 +48,7 @@ function RCform({ formId, fw }) {
               {ele.type == 'number'}
             </Form.Group>
           ))}
-          <Button variant="primary" o type="submit">
+          <Button variant="primary" type="submit">
             Submit
           </Button>
         </Form>

app/components/clientsideonly/countup.js → app/components/clientsideonly/countup.tsx

@@ -5,15 +5,17 @@ export default  function Countup(props) {
   const [count, setCount] = useState(0);
   const [value, setValue] = useState("");
   const speed = 1000 / props.end;
-  // eslint-disable-next-line
+
   useEffect(() => {
     if (count < props.end && count < 1000) {
-      setTimeout(() => {
+      const timeout = setTimeout(() => {
         setCount((prevCount) => prevCount + 1);
       }, speed);
+      return () => clearTimeout(timeout);
     } else {
       setValue(props.end.toString());
     }
-  });
+  }, [count, props.end, speed]);
+
   return <> <span className={props.className}>{value || count }</span> </>;
 }

app/components/conferences/EventAdmin.js → app/components/conferences/EventAdmin.tsx

@@ -2,29 +2,32 @@ import { useEffect, useState } from 'react';
 import NewMenubar from '../menubar/newMenuBar';
 import _ from 'lodash';
 import Cookies from 'js-cookie';
-import { verifyAdmin } from './auth/AuthSuperProfileHelper';
+import { useVerifyAdmin } from './auth/AuthSuperProfileHelper';
 import { unsignCook } from '../../lib/conferences/eventCall';
 
-export const VerifyUserRole = ({ menuprops }) => {
-  if (!menuprops.menu?.topNavItems) {
-    return <NewMenubar menu={menuprops.menu.topNavItems} />;
-  }
-  const [getCurrentUser, { data, error, loading }] = verifyAdmin();
+export const VerifyUserRole = ({ menuprops }: { menuprops: any }) => {
+  const hookResult = useVerifyAdmin();
+  const [getCurrentUser, apolloResult] = Array.isArray(hookResult) ? hookResult : [hookResult, {}];
+  const { data, error, loading } = (apolloResult as any) || {};
   const [verified, setVerified] = useState(false);
   const hashmail = Cookies.get('hashmail');
+
   useEffect(() => {
     const decipherEmail = async () => {
       try {
         if (hashmail) {
           const res = await unsignCook({ hash: hashmail });
-          getCurrentUser({ email: res.mail });
+          if (typeof getCurrentUser === 'function') {
+            getCurrentUser({ email: res.mail });
+          }
         }
       } catch {
         console.error('Error while deciphering');
       }
     };
     decipherEmail();
-  }, []);
+  }, [getCurrentUser, hashmail]);
+
   let menuCache = null;
 
   if (!menuprops.menu?.topNavItems) {

app/components/conferences/EventHome.js → app/components/conferences/EventHome.tsx

@@ -7,13 +7,18 @@ import { autoLogin, setCookie } from "./auth/AuthHelper";
 const EventHome = ({ passcode }) => {
   const router = useRouter();
   const [load, setLoad] = useState(false);
+  const [parsedSession, setParsedSession] = useState<any>(null);
   let session = Cookies.get("event_auth");
   let umail = process.env.NEXT_PUBLIC_EVENT_ADMIN_MAIL;
   useEffect(() => {
     if (session) {
-      session = JSON.parse(session);
+      try {
+        setParsedSession(JSON.parse(session));
+      } catch {
+        setParsedSession(null);
+      }
     }
-  });
+  }, [session]);
 
   const handleAutoAuth = async () => {
     setLoad(true);
@@ -26,7 +31,7 @@ const EventHome = ({ passcode }) => {
   };
 
   const handleClick = () => {
-    if (session?.access_token) {
+    if (parsedSession?.access_token) {
       router.push("/conferences/create/basic-detail");
     } else {
       passcode && umail

app/components/conferences/admin/EditEvent.js → app/components/conferences/admin/EditEvent.tsx

@@ -164,6 +164,15 @@ export const EditEvent = ({ event, handleToast }) => {
     setIsPublic(checked);
   };
 
+  const handleImageChange = (e) => {
+    // Handle image change logic here
+    const file = e.target.files?.[0];
+    if (file) {
+      // Add your image handling logic
+      console.log('Image selected:', file);
+    }
+  };
+
   return (
     <>
       <Toaster position="top-right" reverseOrder={false} />
@@ -174,6 +183,7 @@ export const EditEvent = ({ event, handleToast }) => {
               isPublic={isPublic}
               intialValues={formState}
               handleChange={handleChange}
+              handleImageChange={handleImageChange}
               ticket={ticket}
               handleSwitch={handleSwitch}
               handlePublicSwitch={handlePublicSwitch}

app/components/conferences/admin/IndivEvent.js → app/components/conferences/admin/IndivEvent.tsx

@@ -31,14 +31,29 @@ export const IndivEventDash = ({ eid, event }) => {
   const [modalShow, setModalShow] = useState(false);
   const [editSpeaker, setEditSpeaker] = useState({});
   const [load, setLoad] = useState(false);
+  const [authCookie, setAuthCookie] = useState<any>(null);
 
-  let authCookie = Cookies.get('event_auth');
-  if (authCookie) {
-    authCookie = JSON.parse(authCookie);
-  }
+  useEffect(() => {
+    const cookie = Cookies.get('event_auth');
+    if (cookie) {
+      try {
+        setAuthCookie(JSON.parse(cookie));
+      } catch {
+        setAuthCookie(null);
+      }
+    }
+  }, []);
+
+  const handleToast = (message: string, type: 'success' | 'error' = 'success') => {
+    if (type === 'success') {
+      toast.success(message);
+    } else {
+      toast.error(message);
+    }
+  };
 
   const fetchSpeaker = async () => {
-    const res = await getEventSpeakers(eid, authCookie?.access_token);
+    const res = await getEventSpeakers(eid);
     return res;
   };
 
@@ -140,7 +155,7 @@ export const IndivEventDash = ({ eid, event }) => {
             >
               <Tab eventKey="edit_event" title="Edit Event Details">
                 <div className="m-3">
-                  <EditEvent event={event} />
+                  <EditEvent event={event} handleToast={handleToast} />
                 </div>
               </Tab>
               <Tab eventKey="speaker" title="Speaker">
@@ -210,6 +225,7 @@ const SpeakerList = ({
                         height={'50em'}
                         roundedCircle
                         src={spk['photo_url']}
+                        alt={spk.name || 'Speaker photo'}
                       />
                     </Col>
                     <Col>

app/components/conferences/admin/dashboard.js → app/components/conferences/admin/dashboard.tsx

@@ -12,10 +12,18 @@ import toast, { Toaster } from 'react-hot-toast';
 
 export const EventDashBoard = () => {
   const [eventData, setEventData] = useState(null);
-  let authCookie = Cookies.get('event_auth');
-  if (authCookie) {
-    authCookie = JSON.parse(authCookie);
-  }
+  const [authCookie, setAuthCookie] = useState<any>(null);
+
+  useEffect(() => {
+    const cookie = Cookies.get('event_auth');
+    if (cookie) {
+      try {
+        setAuthCookie(JSON.parse(cookie));
+      } catch {
+        setAuthCookie(null);
+      }
+    }
+  }, []);
   useEffect(() => {
     const fetchEventDeatils = async () => {
       try {

app/components/conferences/auth/AuthSuperProfileHelper.js → app/components/conferences/auth/AuthSuperProfileHelper.tsx

@@ -19,7 +19,7 @@ export const FIND_USER_BY_MAIL = gql`
   }
 `;
 
-export const verifyAdmin = () => {
+export const useVerifyAdmin = () => {
   const [getCurrentUser, { data, error, loading }] =
     useLazyQuery(FIND_USER_BY_MAIL);