Add sorting to Activities list and fix dark mode styling

Author: Neeraj-Kondaveeti

src/components/CommunityPortal/Activities/ActivityList.jsx

@@ -3,10 +3,16 @@ import { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import styles from './ActivityList.module.css';
 import { mockActivities } from './mockActivities';
-// import { useHistory } from 'react-router-dom';
 
 function ActivityList() {
-  const darkMode = useSelector(state => state.theme.darkMode);
+  let darkMode = false;
+
+  try {
+    darkMode = useSelector(state => state.theme?.darkMode);
+  } catch (error) {
+    darkMode = false;
+  }
+
   const [activities, setActivities] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -17,6 +23,7 @@ function ActivityList() {
   });
   const [locationSuggestions, setLocationSuggestions] = useState([]);
   const [showSuggestions, setShowSuggestions] = useState(false);
+  const [sortOrder, setSortOrder] = useState('earliest');
 
   useEffect(() => {
     if (darkMode) {
@@ -36,21 +43,10 @@ function ActivityList() {
         setLoading(true);
         setError(null);
 
-        // TODO: Replace with actual API endpoint
-        // const response = await fetch('/api/activities');
-        // if (!response.ok) {
-        //   throw new Error('Failed to fetch activities');
-        // }
-        // const data = await response.json();
-        // setActivities(data);
-
-        // Simulating API call - remove this when real API is available
-        // For now, we'll use mock data directly
         throw new Error('API not implemented yet');
       } catch (err) {
         console.warn('Failed to fetch activities from API, using mock data:', err.message);
         setError(err.message);
-        // Fallback to mock data
         setActivities(mockActivities);
       } finally {
         setLoading(false);
@@ -60,43 +56,31 @@ function ActivityList() {
     fetchActivities();
   }, []);
 
-  // Get location suggestions with STRICT prefix-based matching only
   const getLocationSuggestions = input => {
-    if (!input.trim()) {
-      return [];
-    }
+    if (!input.trim()) return [];
 
-    // Get unique locations
     const uniqueLocations = [...new Set(activities.map(a => a.location))];
     const lowerInput = input.toLowerCase();
 
-    // ONLY return locations that START with the input (prefix matching)
-    const prefixMatches = uniqueLocations.filter(loc => loc.toLowerCase().startsWith(lowerInput));
-
-    // Limit to top 10 results
-    return prefixMatches.slice(0, 10);
+    return uniqueLocations
+      .filter(loc => loc.toLowerCase().startsWith(lowerInput))
+      .slice(0, 10);
   };
 
   const handleFilterChange = e => {
     const { name, value } = e.target;
     setFilter({ ...filter, [name]: value });
 
-    // Update location suggestions when location input changes
     if (name === 'location') {
       const suggestions = getLocationSuggestions(value);
       setLocationSuggestions(suggestions);
       setShowSuggestions(true);
     }
   };
 
-  const filteredActivities = activities.filter(activity => {
-    return (
-      (!filter.type || activity.type === filter.type) &&
-      (!filter.date || activity.date === filter.date) &&
-      (!filter.location ||
-        activity.location.toLowerCase().startsWith(filter.location.toLowerCase()))
-    );
-  });
+  const handleSortChange = e => {
+    setSortOrder(e.target.value);
+  };
 
   const handleSuggestionClick = location => {
     setFilter({ ...filter, location });
@@ -114,9 +98,26 @@ function ActivityList() {
     setShowSuggestions(false);
   };
 
+  const filteredActivities = activities
+    .filter(activity => {
+      return (
+        (!filter.type || activity.type === filter.type) &&
+        (!filter.date || activity.date === filter.date) &&
+        (!filter.location ||
+          activity.location.toLowerCase().startsWith(filter.location.toLowerCase()))
+      );
+    })
+    .sort((a, b) => {
+      const dateA = new Date(a.date);
+      const dateB = new Date(b.date);
+      return sortOrder === 'earliest' ? dateA - dateB : dateB - dateA;
+    });
+
   return (
     <div className={`${styles.activityListContainer} ${darkMode ? 'bg-oxford-blue' : ''}`}>
-      <h1 className={`${styles.heading} ${darkMode ? 'text-light' : ''}`}>Activity List</h1>
+      <h1 className={`${styles.heading} ${darkMode ? 'text-light' : ''}`}>
+        Activity List
+      </h1>
 
       <div className={`${styles.filters} ${darkMode ? styles.darkModeFilters : ''}`}>
         <label className={darkMode ? 'text-light' : ''}>
@@ -142,6 +143,18 @@ function ActivityList() {
           />
         </label>
 
+        <label className={darkMode ? 'text-light' : ''}>
+          Sort By:
+          <select
+            value={sortOrder}
+            onChange={handleSortChange}
+            className={darkMode ? styles.darkModeInput : ''}
+          >
+            <option value="earliest">Start Time: Earliest to Latest</option>
+            <option value="latest">Start Time: Latest to Earliest</option>
+          </select>
+        </label>
+
         <label className={darkMode ? 'text-light' : ''}>
           Location:
           <div style={{ position: 'relative' }}>
@@ -157,37 +170,26 @@ function ActivityList() {
                   setShowSuggestions(true);
                 }
               }}
-              onBlur={() => {
-                // Delay to allow click on suggestion
-                setTimeout(() => setShowSuggestions(false), 200);
-              }}
+              onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
               placeholder="Enter location"
               autoComplete="off"
               className={darkMode ? styles.darkModeInput : ''}
             />
+
             {showSuggestions && locationSuggestions.length > 0 && (
               <div
-                className={`${styles.suggestions} ${darkMode ? styles.darkSuggestions : ''}`}
-                role="listbox"
-                aria-label="Location suggestions"
+                className={`${styles.suggestions} ${
+                  darkMode ? styles.darkSuggestions : ''
+                }`}
               >
                 {locationSuggestions.map((location, index) => (
                   <div
                     key={index}
                     className={styles.suggestionItem}
-                    role="option"
-                    tabIndex={0}
-                    aria-selected="false"
                     onMouseDown={e => {
-                      e.preventDefault(); // Prevent blur from firing
+                      e.preventDefault();
                       handleSuggestionClick(location);
                     }}
-                    onKeyDown={e => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        handleSuggestionClick(location);
-                      }
-                    }}
                   >
                     {location}
                   </div>
@@ -196,6 +198,7 @@ function ActivityList() {
             )}
           </div>
         </label>
+
         <div className={styles.clearButtonWrapper}>
           <button
             type="button"
@@ -207,15 +210,23 @@ function ActivityList() {
           </button>
         </div>
       </div>
+
       <div className={`${styles.activityList} ${darkMode ? styles.darkModeList : ''}`}>
         {loading ? (
           <p className={darkMode ? 'text-light' : ''}>Loading activities...</p>
         ) : filteredActivities.length > 0 ? (
           <ul>
             {filteredActivities.map(activity => (
-              <li key={activity.id} className={darkMode ? styles.darkModeItem : ''}>
-                <strong>{activity.name}</strong> - {activity.type} - {activity.date} -{' '}
-                {activity.location}
+              <li
+                key={activity.id}
+                className={`${styles.activityItem} ${
+                  darkMode ? styles.darkModeItem : ''
+                }`}
+              >
+                <strong>{activity.name}</strong>
+                <span>
+                  {activity.type} – {activity.date} – {activity.location}
+                </span>
               </li>
             ))}
           </ul>
@@ -227,4 +238,4 @@ function ActivityList() {
   );
 }
 
-export default ActivityList;
+export default ActivityList;