Code optimization and manual testing

Author: Syed-Bilal-Haider-Engineer

client/app/(auth)/login/login.tsx

@@ -101,15 +101,15 @@ export default function LoginPage() {
                     disabled={false}
                   />
                 </div>
-            <div>
+                <div>
                   <button
                   type="submit"
                   disabled={isPending}
                   className="w-full bg-green-600 mt-2 hover:bg-green-700 hover:cursor-pointer text-white py-2 px-4 rounded-lg transition"
                 >
                   {isPending ? "Logging in..." : "Login"}
                 </button>
-            </div>
+               </div>
               </form>
             </div>
           </div>

client/app/(auth)/signup/signUp.tsx

@@ -46,31 +46,46 @@ export default function SignupForm() {
 
   const { getCurrentLocation, fetchLocationName, isLoading,getLocationNameFromLatLng } = useLocation();
 
+    function setLatLng(data?: { lat?: any; lng?: any }) {
+    if (!data) return;
+
+    const latNum = Number(data.lat);
+    const lngNum = Number(data.lng);
+
+    if (!isNaN(latNum)) setValue("lat", latNum);
+    if (!isNaN(lngNum)) setValue("lng", lngNum);
+  }
+
   const handleGetLocation = async () => {
     try {
-      const { lat, lng } = await getCurrentLocation();
+      const data= await getCurrentLocation();
       const location = await fetchLocationName(lat, lng);
-      console.log(" lat, lng ", lat, lng )
-      setValue("lat", lat);
-      setValue("lng", lng);
+      setLatLng(data);
       setValue("location", location || "Location found but could not get name");
     } catch (err: any) {
       setValue("location", err.message || "Failed to get location");
     }
   };
 
   const {location,lat,lng} = watch();
-
+  const handleLocationChange = (location: string) => {
+  if (location.length > 3 && !lng) { 
+    try {
+      setTimeout( async () => {
+        const data = await getLocationNameFromLatLng(location);
+        setLatLng(data);
+      },500)
+    } catch (error) {
+      console.error("Geocoding failed:", error);
+    }
+  }
+};
   useEffect(() => {
-   async function getAddress() {
-      if(location && !lat && !lng) {
-      const data = await getLocationNameFromLatLng(location)
-      setValue("lat", data?.lat);
-      setValue("lng", data?.lng);
+    if(location){
+      console.log("locations")
+       handleLocationChange(location);
     }
-   }
-   setTimeout(() => getAddress(),1000);
-  }, [location])
+  },[location]);
 
   const { mutate, isPending, isSuccess, isError } = useMutation({
     mutationFn: signupUser,
@@ -86,10 +101,14 @@ export default function SignupForm() {
     },
   });
 
-  const onSubmit = (data: SignUpFormData) => {
-    console.log(data,"data signup")
-      mutate(data);
-  };
+const onSubmit = async (data: SignUpFormData) => {
+  try {
+    mutate(data);
+  } catch (error:any) {
+    console.error("Form submission error:", error);
+    setErrorMsg(error.message || "Failed to submit form");
+  }
+};
 
   return (
     <>

client/app/_lib/context/contextAPI.tsx

@@ -1,20 +1,6 @@
 'use client';
+import { SidebarContextType } from '@/app/type/type';
 import { createContext, useContext, useEffect, useState } from 'react';
-
-interface SidebarContextType {
-  isCollapsed: boolean;
-  toggleSidebar: () => void;
-  isLogin: boolean;
-  setIsLogin: React.Dispatch<React.SetStateAction<boolean>>;
-  isSignUp: boolean;
-  setIsSignUp: React.Dispatch<React.SetStateAction<boolean>>;
-  isProfile: boolean;
-  setIsProfile: React.Dispatch<React.SetStateAction<boolean>>;
-  token: string;
-  setTokenState: React.Dispatch<React.SetStateAction<string>>;
-  logout: () => void;
-}
-
 const contextAPI = createContext<SidebarContextType>({
   isCollapsed: false,
   toggleSidebar: () => {},

client/app/_lib/review/review.tsx

@@ -9,28 +9,7 @@ import { getUserProfile } from '../services/userService';
 import { useQuery } from '@tanstack/react-query';
 import Loader from '@/app/components/specialized/Loader';
 import ErrorMessage from '@/app/components/specialized/ErrorMessage';
-
-interface Review {
-  id: string;
-  rating: number;
-  comment: string;
-  createdAt: string;
- user:{
-    email:string;
-    name: string;
- }
-}
-
-interface ReviewSectionProps {
-  reviews: Review[];
-  averageRating: number;
-  featureId: string;
-  token:string;
-  onReviewSubmit: (rating: number, comment: string) => Promise<void>;
-  onReviewRemove:(id:string) => Promise<void>,
-  onReviewUpdate:(rating: number,editingReviewId:string, reviewText: string) => Promise<void>;
-}
-
+import { ReviewSectionProps } from '@/app/type/type';
 export default function ReviewSection({
   reviews,
   averageRating,

client/app/_lib/services/reviewService.tsx

@@ -26,7 +26,7 @@ token
 };
 
 export const removeReview =async ({reviewId,token}:{reviewId:string, token:string}) => {
-  const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE}/api/deleteReviews`, {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE}/deleteReviews`, {
     method: "DELETE",
     headers: {
       "Content-Type": "application/json",

client/app/components/Feature/Filter.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Shapes, ChevronDown } from 'lucide-react'
 
 export default function CategorySelect({
@@ -10,17 +10,30 @@ export default function CategorySelect({
   const [open, setOpen] = useState(false)
   const [selected, setSelected] = useState<string | null>(null)
 
-  const categories = ['museum', 'restaurant', 'theatre', 'artwork']
+  const categories = useMemo(() => ['museum', 'restaurant', 'theatre', 'artwork'], []);
+
+useEffect(() => {
+  const handleClickOutside = (e: MouseEvent) => {
+    if (!(e.target as HTMLElement).closest('#category-dropdown')) {
+      setOpen(false);
+    }
+  };
+  document.addEventListener('mousedown', handleClickOutside);
+  return () => document.removeEventListener('mousedown', handleClickOutside);
+}, []);
 
   const handleCategorySelect = (category: string) => {
     setSelected(() => category)
-    setOpen(() => false)
+    setOpen(() => false);
     if (onSelect) onSelect(category)
   }
 
   return (
-    <div className='relative'>
+    <div className='relative'  id="category-dropdown" role="listbox">
       <button
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label="Select category"
         onClick={() => setOpen(!open)}
         className='flex items-center gap-1 bg-white px-3 py-1.5 rounded-lg shadow hover:bg-gray-100 transition'
       >

client/app/components/Feature/SearchBar.tsx

@@ -1,14 +1,9 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { CornerUpRight, Search, MapPin, X } from 'lucide-react'
+import { Search, MapPin, X } from 'lucide-react'
 import type { Feature } from 'geojson'
-
-interface SearchBarProps {
-  geoData: any
-  searchHanlde?: (key: string) => void
-  handleRefresh?: () => void
-}
+import { SearchBarProps } from '@/app/type/type'
 
 export default function SearchBar({
   geoData,

client/app/components/common/Card.tsx

@@ -8,16 +8,7 @@ import { useContextAPI } from '../../_lib/context/contextAPI';
 import { findAllFavorites } from '../../_lib/services/favoriteService'
 import Loader from '../../components/specialized/Loader'
 import ErrorMessage from '../../components/specialized/ErrorMessage';
-interface TextCardProps {
-  id:string;
-  title: string;
-  description: string;
-  rating?: number;
-  reviews?: number;
-  onView?: () => void;
-  token:string;
-  refetch?: () => void
-}
+import { TextCardProps } from '@/app/type/type';
 
 const TextCard: React.FC<TextCardProps> = ({
     id,
@@ -50,7 +41,7 @@ const TextCard: React.FC<TextCardProps> = ({
           View
         </button>
         </Link>
-        <FavoriteFunctionality id={id} token={token}   onFavoriteChange={refetch}/>
+        <FavoriteFunctionality id={id} onFavoriteChange={refetch}/>
       </div>
     </div>
   );

client/app/components/common/FavoriteFunctionality.tsx

@@ -1,29 +1,33 @@
 import { useMutation, useQuery } from '@tanstack/react-query'
-import React from 'react'
+import { MouseEvent, useEffect, useState } from 'react'
 import {
   addFavorite,
   findFavorite,
   removeFavorite,
 } from '../../_lib/services/favoriteService'
 import { HeartMinus, HeartPlus } from 'lucide-react'
-
-interface FavoriteFunctionalityProps {
-  id: string
-  token: string
-  onFavoriteChange?: () => void // New callback prop
-}
+import { FavoriteFunctionalityProps } from '@/app/type/type'
+import { useContextAPI } from '@/app/_lib/context/contextAPI'
 
 const FavoriteFunctionality = ({
   id,
-  token,
   onFavoriteChange,
 }: FavoriteFunctionalityProps) => {
+  const [token, setToken] = useState<string>('')
   const { data, refetch } = useQuery({
     queryKey: ['favorite', token, id],
     queryFn: findFavorite,
     enabled: !!token,
+    staleTime: 1000,
   })
-  console.log('token=>', token, 'id=>', id)
+
+  useEffect(() => {
+    const token = localStorage.getItem('token')
+    if (token) {
+      setToken(token)
+      refetch()
+    }
+  }, [token, refetch])
   const addFavoriteMutation = useMutation({
     mutationFn: addFavorite,
     onSuccess: () => {
@@ -41,37 +45,37 @@ const FavoriteFunctionality = ({
   })
 
   const handleFavorite = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
     addFavoriteMutation.mutate({ featureId: id, token })
   }
 
-  const handleUnFavorite = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
+  const handleUnFavorite = (e: MouseEvent) => {
     removeFavoriteMutation.mutate({ featureId: id, token })
   }
   return (
-    <button
-      className='flex gap-1 justify-center items-center ml-2 cursor-pointer'
-      aria-label={
-        data?.featureId ? 'Remove from favorites' : 'Add to favorites'
-      }
-    >
-      <div className='hover: cursor-pointer'>
-        {data?.featureId ? (
-          <HeartMinus
-            size={18}
-            color='red'
-            fill='red'
-            onClick={handleUnFavorite}
-          />
-        ) : (
-          <HeartPlus size={18} color='gray' onClick={handleFavorite} />
-        )}
-      </div>
-      <span>{data?.count || 0}</span>
-    </button>
+    <>
+      {token && (
+        <button
+          className='flex gap-1 justify-center items-center ml-2 cursor-pointer'
+          aria-label={
+            data?.featureId ? 'Remove from favorites' : 'Add to favorites'
+          }
+        >
+          <div className='hover: cursor-pointer'>
+            {data?.featureId ? (
+              <HeartMinus
+                size={18}
+                color='red'
+                fill='red'
+                onClick={handleUnFavorite}
+              />
+            ) : (
+              <HeartPlus size={18} color='gray' onClick={handleFavorite} />
+            )}
+          </div>
+          <span>{data?.count || 0}</span>
+        </button>
+      )}
+    </>
   )
 }
 

client/app/components/common/GeoCard.tsx

@@ -2,16 +2,10 @@
 import React from 'react';
 import Link from 'next/link';
 import FavoriteFunctionality from './FavoriteFunctionality';
+import { PopupCardProps } from '@/app/type/type';
 
-interface PopupCardProps {
-  id: string;
-  name?: string;
-  token: string;
-}
-
-const GeoCard = ({ id, name, token }: PopupCardProps) => {
+const GeoCard = ({ id, name }: PopupCardProps) => {
   const encodedId = encodeURIComponent(id);
-
   return (
     <div style={{
       width: 180,
@@ -30,7 +24,7 @@ const GeoCard = ({ id, name, token }: PopupCardProps) => {
           </div>
         </div>
       </Link>
-     {id && token && <FavoriteFunctionality id={id} token={token}/>}
+     {<FavoriteFunctionality id={id} />}
     </div>
   );
 };