vmi-virtual-memorial/vmi-wd-frontend / 36d48d2

Browse files

update conflict page to have pill for alphapbetical/class year

Authored by espadonne
SHA
36d48d2adfb87ee0f75a446546191b6f30390680
Parents
729dc42
Tree
980bf64

1 changed file

StatusFile+-
M app/memorial/page.tsx 46 12
app/memorial/page.tsxmodified
@@ -21,25 +21,28 @@ export default function MemorialIndexPage() {
2121
   const [loading, setLoading] = useState(true);
2222
   const [error, setError] = useState<string | null>(null);
2323
   const [expandedConflicts, setExpandedConflicts] = useState<Set<number>>(new Set());
24
+  const [sortBy, setSortBy] = useState<'alphabetical' | 'class_year'>('alphabetical');
2425
2526
   useEffect(() => {
2627
     async function fetchData() {
2728
       try {
2829
         const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api';
29
-        const response = await fetch(`${apiUrl}/memorial/index/`);
30
-
30
+        const response = await fetch(`${apiUrl}/memorial/index/?sort=${sortBy}`);
31
+
3132
         if (!response.ok) {
3233
           throw new Error('Failed to fetch memorial index');
3334
         }
34
-
35
+
3536
         const data = await response.json();
3637
         setConflicts(data);
37
-
38
-        // By default, expand conflicts with casualties
39
-        const defaultExpanded = new Set<number>(
40
-          data.filter((c: ConflictWithCasualties) => c.casualty_count > 0).map((c: ConflictWithCasualties) => c.id)
41
-        );
42
-        setExpandedConflicts(defaultExpanded);
38
+
39
+        // By default, expand conflicts with casualties (only on first load)
40
+        if (expandedConflicts.size === 0) {
41
+          const defaultExpanded = new Set<number>(
42
+            data.filter((c: ConflictWithCasualties) => c.casualty_count > 0).map((c: ConflictWithCasualties) => c.id)
43
+          );
44
+          setExpandedConflicts(defaultExpanded);
45
+        }
4346
       } catch (err) {
4447
         setError(err instanceof Error ? err.message : 'Failed to load data');
4548
         console.error(err);
@@ -47,9 +50,9 @@ export default function MemorialIndexPage() {
4750
         setLoading(false);
4851
       }
4952
     }
50
-
53
+
5154
     fetchData();
52
-  }, []);
55
+  }, [sortBy]);
5356
5457
   const toggleConflict = (conflictId: number) => {
5558
     const newExpanded = new Set(expandedConflicts);
@@ -123,13 +126,41 @@ export default function MemorialIndexPage() {
123126
               <span className="text-vmi-red font-bold">{totalCasualties}</span>
124127
             </div>
125128
           </div>
126
-          <div className="mt-6">
129
+          <div className="mt-6 flex justify-between items-center">
127130
             <button
128131
               onClick={toggleAll}
129132
               className="bg-vmi-red text-white px-6 py-2 rounded hover:bg-vmi-dark-red transition-colors font-semibold"
130133
             >
131134
               {expandedConflicts.size === conflicts.length ? 'Collapse All' : 'Expand All'}
132135
             </button>
136
+
137
+            {/* Sort Toggle */}
138
+            <div className="flex items-center gap-2">
139
+              <span className="text-sm text-gray-600">Sort by:</span>
140
+              <button
141
+                onClick={() => setSortBy(sortBy === 'alphabetical' ? 'class_year' : 'alphabetical')}
142
+                className="flex items-center bg-white border-2 border-gray-300 rounded-full p-1 shadow-sm hover:shadow-md transition-shadow"
143
+              >
144
+                <span
145
+                  className={`px-3 py-1 rounded-full transition-all ${
146
+                    sortBy === 'alphabetical'
147
+                      ? 'bg-vmi-red text-white font-semibold'
148
+                      : 'text-gray-500'
149
+                  }`}
150
+                >
151
+                  ABC
152
+                </span>
153
+                <span
154
+                  className={`px-3 py-1 rounded-full transition-all ${
155
+                    sortBy === 'class_year'
156
+                      ? 'bg-vmi-red text-white font-semibold'
157
+                      : 'text-gray-500'
158
+                  }`}
159
+                >
160
+                  '42
161
+                </span>
162
+              </button>
163
+            </div>
133164
           </div>
134165
         </div>
135166
@@ -179,6 +210,9 @@ export default function MemorialIndexPage() {
179210
                           {person.rank
180211
                             ? person.display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '')
181212
                             : person.display_name}
213
+                          {person.class_year && (
214
+                            <span className="text-gray-600 font-normal">'{String(person.class_year).slice(-2)}</span>
215
+                          )}
182216
                           {person.pdf_key && <DocumentIcon className="flex-shrink-0" />}
183217
                         </h3>
184218
                         {person.rank && (