From 433189626745afaab1af6a901f146aa2a0bc2337 Mon Sep 17 00:00:00 2001
From: Geoff Maddock <geoff.maddock@gmail.com>
Date: Mon, 27 Jan 2025 02:23:10 -0500
Subject: [PATCH] Moves sorting out of the filters into pagination.

---
 src/components/Entities.tsx     | 13 +++-----
 src/components/Events.tsx       | 14 ++++-----
 src/components/Pagination.tsx   | 23 +++++++++++++-
 src/components/SortControls.tsx | 54 ++++++++++++++++-----------------
 4 files changed, 60 insertions(+), 44 deletions(-)

diff --git a/src/components/Entities.tsx b/src/components/Entities.tsx
index cd9d699..16b7229 100644
--- a/src/components/Entities.tsx
+++ b/src/components/Entities.tsx
@@ -9,7 +9,6 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
 import { useLocalStorage } from '../hooks/useLocalStorage';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import SortControls from './SortControls';
 import { EntityFilterContext } from '../context/EntityFilterContext';
 import { EntityFilters } from '../types/filters';
 import { ActiveEntityFilters as ActiveFilters } from './ActiveEntityFilters';
@@ -126,6 +125,11 @@ export default function Entities() {
                 totalItems={data.total}
                 itemsPerPage={itemsPerPage}
                 onItemsPerPageChange={handleItemsPerPageChange}
+                sort={sort}
+                setSort={setSort}
+                direction={direction}
+                setDirection={setDirection}
+                sortOptions={sortOptions}
             />
         );
     };
@@ -198,13 +202,6 @@ export default function Entities() {
                                 <Card className="border-gray-100 shadow-sm">
                                     <CardContent className="p-6 space-y-4">
                                         <EntityFilter filters={filters} onFilterChange={setFilters} />
-                                        <SortControls
-                                            sort={sort}
-                                            setSort={setSort}
-                                            direction={direction}
-                                            setDirection={setDirection}
-                                            sortOptions={sortOptions}
-                                        />
                                     </CardContent>
                                 </Card>
                             )}
diff --git a/src/components/Events.tsx b/src/components/Events.tsx
index 66a8987..048f08a 100644
--- a/src/components/Events.tsx
+++ b/src/components/Events.tsx
@@ -9,7 +9,6 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
 import { useLocalStorage } from '../hooks/useLocalStorage';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import SortControls from './SortControls';
 import { EventFilterContext } from '../context/EventFilterContext';
 import { EventFilters } from '../types/filters';
 import { ActiveEventFilters as ActiveFilters } from './ActiveEventFilters';
@@ -136,6 +135,11 @@ export default function Events() {
                 totalItems={data.total}
                 itemsPerPage={itemsPerPage}
                 onItemsPerPageChange={handleItemsPerPageChange}
+                sort={sort}
+                setSort={setSort}
+                direction={direction}
+                setDirection={setDirection}
+                sortOptions={sortOptions}
             />
         );
     };
@@ -208,13 +212,7 @@ export default function Events() {
                                 <Card className="shadow-sm">
                                     <CardContent className="p-6 space-y-4">
                                         <EventFilter filters={filters} onFilterChange={setFilters} />
-                                        <SortControls
-                                            sort={sort}
-                                            setSort={setSort}
-                                            direction={direction}
-                                            setDirection={setDirection}
-                                            sortOptions={sortOptions}
-                                        />
+
                                     </CardContent>
                                 </Card>
                             )}
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index c339c69..0a61c91 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import SortControls from './SortControls';
 
 interface PaginationProps {
     currentPage: number;
@@ -10,6 +11,11 @@ interface PaginationProps {
     totalItems: number;
     itemsPerPage: number;
     onItemsPerPageChange: (count: number) => void;
+    sort: string;
+    setSort: (value: string) => void;
+    direction: 'asc' | 'desc';
+    setDirection: (value: 'asc' | 'desc') => void;
+    sortOptions: { value: string; label: string }[];
 }
 
 const itemsPerPageOptions = [
@@ -26,12 +32,19 @@ export function Pagination({
     totalItems,
     itemsPerPage,
     onItemsPerPageChange,
+    sort,
+    setSort,
+    direction,
+    setDirection,
+    sortOptions
 }: PaginationProps) {
+
     return (
         <div className="flex flex-col gap-4 md:gap-0 border-t py-3 md:px-6">
             <div className="flex flex-col md:flex-row md:items-center md:justify-between">
                 <div className="flex items-center justify-between md:justify-start gap-4">
-                    <p className="text-sm text-gray-700">
+
+                    <p className="text-sm text-gray-700 hidden md:block">
                         Showing{' '}
                         <span className="font-medium">{((currentPage - 1) * itemsPerPage) + 1}</span>{' '}
                         to{' '}
@@ -58,6 +71,14 @@ export function Pagination({
                             ))}
                         </SelectContent>
                     </Select>
+
+                    <SortControls
+                        sort={sort}
+                        setSort={setSort}
+                        direction={direction}
+                        setDirection={setDirection}
+                        sortOptions={sortOptions}
+                    />
                 </div>
 
                 <div className="flex items-center justify-between md:justify-end gap-6 mt-4 md:mt-0">
diff --git a/src/components/SortControls.tsx b/src/components/SortControls.tsx
index cbe262a..94bf12d 100644
--- a/src/components/SortControls.tsx
+++ b/src/components/SortControls.tsx
@@ -12,34 +12,34 @@ interface SortControlsProps {
 
 const SortControls: React.FC<SortControlsProps> = ({ sort, setSort, direction, setDirection, sortOptions }) => {
     return (
-        <div className="flex items-center justify-between pt-4 border-t">
-            <div className="flex items-center gap-2">
-                <span className="text-sm text-gray-500">Sort by:</span>
-                <Select
-                    value={sort}
-                    onValueChange={(value) => setSort(value)}
-                >
-                    <SelectTrigger className="w-[180px]">
-                        <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                        {sortOptions.map((option) => (
-                            <SelectItem key={option.value} value={option.value}>
-                                {option.label}
-                            </SelectItem>
-                        ))}
-                    </SelectContent>
-                </Select>
-                <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => setDirection(direction === 'asc' ? 'desc' : 'asc')}
-                    className="text-gray-500"
-                >
-                    {direction === 'asc' ? '↑' : '↓'}
-                </Button>
-            </div>
+
+        <div className="flex items-center gap-2">
+            <span className="text-sm text-gray-500">Sort by:</span>
+            <Select
+                value={sort}
+                onValueChange={(value) => setSort(value)}
+            >
+                <SelectTrigger className="w-[180px]">
+                    <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                    {sortOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+            <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setDirection(direction === 'asc' ? 'desc' : 'asc')}
+                className="text-gray-500"
+            >
+                {direction === 'asc' ? '↑' : '↓'}
+            </Button>
         </div>
+
     );
 };