fiter component

frontend/src/components/FilterBar.module.css

@@ -0,0 +1,2 @@
+/* FilterBar.module.css */
+/* This file can be empty since we're using Tailwind classes */

frontend/src/components/FilterBar.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { Container, TextInput, SelectInput, MultiSelectInput, Button } from '@ifrc-go/ui';
+import { useFilterContext } from '../contexts/FilterContext';
+import styles from './FilterBar.module.css';
+
+interface FilterBarProps {
+  sources: {s_code: string, label: string}[];
+  types: {t_code: string, label: string}[];
+  regions: {r_code: string, label: string}[];
+  countries: {c_code: string, label: string, r_code: string}[];
+  imageTypes: {image_type: string, label: string}[];
+  isLoadingFilters?: boolean;
+}
+
+export default function FilterBar({ 
+  sources, 
+  types, 
+  regions, 
+  countries, 
+  imageTypes, 
+  isLoadingFilters = false 
+}: FilterBarProps) {
+  const {
+    search, setSearch,
+    srcFilter, setSrcFilter,
+    catFilter, setCatFilter,
+    regionFilter, setRegionFilter,
+    countryFilter, setCountryFilter,
+    imageTypeFilter, setImageTypeFilter,
+    showReferenceExamples, setShowReferenceExamples,
+    clearAllFilters
+  } = useFilterContext();
+
+  return (
+    <div className="mb-6 space-y-4">
+      {/* Layer 1: Search, Reference Examples, Clear Filters */}
+      <div className="flex flex-wrap items-center gap-4">
+        <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2 flex-1 min-w-[300px]">
+          <TextInput
+            name="search"
+            placeholder="Search examples..."
+            value={search}
+            onChange={(v) => setSearch(v || '')}
+          />
+        </Container>
+
+        <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+          <Button
+            name="reference-examples"
+            variant={showReferenceExamples ? "primary" : "secondary"}
+            onClick={() => setShowReferenceExamples(!showReferenceExamples)}
+            className="whitespace-nowrap"
+          >
+            <span className="mr-2">
+              {showReferenceExamples ? "★" : "☆"}
+            </span>
+            Reference Examples
+          </Button>
+        </Container>
+
+        <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+          <Button
+            name="clear-filters"
+            variant="secondary"
+            onClick={clearAllFilters}
+          >
+            Clear Filters
+          </Button>
+        </Container>
+      </div>
+
+      {/* Layer 2: 5 Filter Bars */}
+      <div className="flex flex-wrap items-center gap-4">
+        <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+          <SelectInput
+            name="source"
+            placeholder={isLoadingFilters ? "Loading..." : "All Sources"}
+            options={sources}
+            value={srcFilter || null}
+            onChange={(v) => setSrcFilter(v as string || '')}
+            keySelector={(o) => o.s_code}
+            labelSelector={(o) => o.label}
+            required={false}
+            disabled={isLoadingFilters}
+          />
+        </Container>
+
+        <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+          <SelectInput
+            name="category"
+            placeholder={isLoadingFilters ? "Loading..." : "All Categories"}
+            options={types}
+            value={catFilter || null}
+            onChange={(v) => setCatFilter(v as string || '')}
+            keySelector={(o) => o.t_code}
+            labelSelector={(o) => o.label}
+            required={false}
+            disabled={isLoadingFilters}
+          />
+        </Container>
+
+        <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+          <SelectInput
+            name="region"
+            placeholder={isLoadingFilters ? "Loading..." : "All Regions"}
+            options={regions}
+            value={regionFilter || null}
+            onChange={(v) => setRegionFilter(v as string || '')}
+            keySelector={(o) => o.r_code}
+            labelSelector={(o) => o.label}
+            required={false}
+            disabled={isLoadingFilters}
+          />
+        </Container>
+
+        <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+          <MultiSelectInput
+            name="country"
+            placeholder={isLoadingFilters ? "Loading..." : "All Countries"}
+            options={countries}
+            value={countryFilter ? [countryFilter] : []}
+            onChange={(v) => setCountryFilter((v as string[])[0] || '')}
+            keySelector={(o) => o.c_code}
+            labelSelector={(o) => o.label}
+            disabled={isLoadingFilters}
+          />
+        </Container>
+
+        <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+          <SelectInput
+            name="imageType"
+            placeholder={isLoadingFilters ? "Loading..." : "All Image Types"}
+            options={imageTypes}
+            value={imageTypeFilter || null}
+            onChange={(v) => setImageTypeFilter(v as string || '')}
+            keySelector={(o) => o.image_type}
+            labelSelector={(o) => o.label}
+            required={false}
+            disabled={isLoadingFilters}
+          />
+        </Container>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/ExplorePage/ExplorePage.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { PageContainer, TextInput, SelectInput, MultiSelectInput, Container, SegmentInput, Spinner, Button, Checkbox } from '@ifrc-go/ui';
+import { PageContainer, Container, SegmentInput, Spinner, Button, Checkbox } from '@ifrc-go/ui';
 import { useFilterContext } from '../../contexts/FilterContext';
+import FilterBar from '../../components/FilterBar';
 import styles from './ExplorePage.module.css';
 
 interface ImageWithCaptionOut {
@@ -484,112 +485,13 @@ export default function ExplorePage() {
               {/* Layer 1: Search, Reference Examples, Clear Filters */}
               <div className="flex flex-wrap items-center gap-4">
                 <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2 flex-1 min-w-[300px]">
-                  <TextInput
-                    name="search"
-                    placeholder="Search examples..."
-                    value={search}
-                    onChange={(v) => setSearch(v || '')}
-                  />
-                </Container>
-
-                {/* Reference Examples Filter - Available to all users */}
-                <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-                  <Button
-                    name="reference-examples"
-                    variant={showReferenceExamples ? "primary" : "secondary"}
-                    onClick={() => setShowReferenceExamples(!showReferenceExamples)}
-                    className="whitespace-nowrap"
-                  >
-                    <span className="mr-2">
-                      {showReferenceExamples ? (
-                        <span className="text-yellow-400">★</span>
-                      ) : (
-                        <span className="text-yellow-400">☆</span>
-                      )}
-                    </span>
-                    Reference Examples
-                  </Button>
-                </Container>
-
-                <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-                  <Button
-                    name="clear-filters"
-                    variant="secondary"
-                    onClick={clearAllFilters}
-                  >
-                    Clear Filters
-                  </Button>
-                </Container>
-              </div>
-
-              {/* Layer 2: 5 Filter Bars */}
-              <div className="flex flex-wrap items-center gap-4">
-                <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-                  <SelectInput
-                    name="source"
-                    placeholder={isLoadingFilters ? "Loading..." : "All Sources"}
-                    options={sources}
-                    value={srcFilter || null}
-                    onChange={(v) => setSrcFilter(v as string || '')}
-                    keySelector={(o) => o.s_code}
-                    labelSelector={(o) => o.label}
-                    required={false}
-                    disabled={isLoadingFilters}
-                  />
-                </Container>
-
-                <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-                  <SelectInput
-                    name="category"
-                    placeholder={isLoadingFilters ? "Loading..." : "All Categories"}
-                    options={types}
-                    value={catFilter || null}
-                    onChange={(v) => setCatFilter(v as string || '')}
-                    keySelector={(o) => o.t_code}
-                    labelSelector={(o) => o.label}
-                    required={false}
-                    disabled={isLoadingFilters}
-                  />
-                </Container>
-
-                <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-                  <SelectInput
-                    name="region"
-                    placeholder={isLoadingFilters ? "Loading..." : "All Regions"}
-                    options={regions}
-                    value={regionFilter || null}
-                    onChange={(v) => setRegionFilter(v as string || '')}
-                    keySelector={(o) => o.r_code}
-                    labelSelector={(o) => o.label}
-                    required={false}
-                    disabled={isLoadingFilters}
-                  />
-                </Container>
-
-                <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-                  <MultiSelectInput
-                    name="country"
-                    placeholder={isLoadingFilters ? "Loading..." : "All Countries"}
-                    options={countries}
-                    value={countryFilter ? [countryFilter] : []}
-                    onChange={(v) => setCountryFilter((v as string[])[0] || '')}
-                    keySelector={(o) => o.c_code}
-                    labelSelector={(o) => o.label}
-                    disabled={isLoadingFilters}
-                  />
-                </Container>
-
-                <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-                  <SelectInput
-                    name="imageType"
-                    placeholder={isLoadingFilters ? "Loading..." : "All Image Types"}
-                    options={imageTypes}
-                    value={imageTypeFilter || null}
-                    onChange={(v) => setImageTypeFilter(v as string || '')}
-                    keySelector={(o) => o.image_type}
-                    labelSelector={(o) => o.label}
-                    required={false}
-                    disabled={isLoadingFilters}
+                  <FilterBar
+                    sources={sources}
+                    types={types}
+                    regions={regions}
+                    countries={countries}
+                    imageTypes={imageTypes}
+                    isLoadingFilters={isLoadingFilters}
                   />
                 </Container>
               </div>

frontend/src/pages/MapDetailsPage/MapDetailPage.tsx

@@ -240,16 +240,26 @@ export default function MapDetailPage() {
         
         const currentIndex = filteredImages.findIndex((img: { image_id: string }) => img.image_id === mapId);
         
+        // If current image is not in filtered list, add it temporarily for navigation
         if (currentIndex === -1) {
+          const currentImage = images.find((img: any) => img.image_id === mapId);
+          if (currentImage) {
+            filteredImages.push(currentImage);
+          }
+        }
+        
+        const adjustedCurrentIndex = filteredImages.findIndex((img: { image_id: string }) => img.image_id === mapId);
+        
+        if (adjustedCurrentIndex === -1) {
           console.error('Current image not found in filtered list');
           return;
         }
         
         let targetIndex: number;
         if (direction === 'previous') {
-          targetIndex = currentIndex > 0 ? currentIndex - 1 : filteredImages.length - 1;
+          targetIndex = adjustedCurrentIndex > 0 ? adjustedCurrentIndex - 1 : filteredImages.length - 1;
         } else {
-          targetIndex = currentIndex < filteredImages.length - 1 ? currentIndex + 1 : 0;
+          targetIndex = adjustedCurrentIndex < filteredImages.length - 1 ? adjustedCurrentIndex + 1 : 0;
         }
         
         const targetImage = filteredImages[targetIndex];