Remove custom date range

This commit is contained in:
2024-12-21 19:01:25 -05:00
parent 9ffec2ad15
commit e4c35f2eb0

View File

@@ -19,28 +19,13 @@ import {
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import { TIME_RANGES } from "@/lib/constants";
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
TIME_RANGES,
formatDateForInput,
parseDateFromInput,
} from "@/lib/constants";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
const ProductGrid = ({ const ProductGrid = ({
timeRange = "today", timeRange = "today",
startDate,
endDate,
onTimeRangeChange, onTimeRangeChange,
title = "Top Products", title = "Top Products",
description description
@@ -49,10 +34,6 @@ const ProductGrid = ({
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [selectedTimeRange, setSelectedTimeRange] = useState(timeRange); const [selectedTimeRange, setSelectedTimeRange] = useState(timeRange);
const [customDateRange, setCustomDateRange] = useState({
startDate: formatDateForInput(startDate) || "",
endDate: formatDateForInput(endDate) || "",
});
const [sorting, setSorting] = useState({ const [sorting, setSorting] = useState({
column: "totalQuantity", column: "totalQuantity",
direction: "desc", direction: "desc",
@@ -61,27 +42,15 @@ const ProductGrid = ({
useEffect(() => { useEffect(() => {
fetchProducts(); fetchProducts();
}, [selectedTimeRange, customDateRange.startDate, customDateRange.endDate]); }, [selectedTimeRange]);
const fetchProducts = async () => { const fetchProducts = async () => {
try { try {
setLoading(true); setLoading(true);
setError(null); setError(null);
const params =
selectedTimeRange === "custom"
? {
startDate: parseDateFromInput(
customDateRange.startDate
)?.toISOString(),
endDate: parseDateFromInput(
customDateRange.endDate
)?.toISOString(),
}
: { timeRange: selectedTimeRange };
const response = await axios.get("/api/klaviyo/events/products", { const response = await axios.get("/api/klaviyo/events/products", {
params, params: { timeRange: selectedTimeRange },
}); });
setProducts(response.data.stats.products.list || []); setProducts(response.data.stats.products.list || []);
} catch (error) { } catch (error) {
@@ -224,48 +193,8 @@ const ProductGrid = ({
{range.label} {range.label}
</SelectItem> </SelectItem>
))} ))}
<SelectItem value="custom">Custom Range</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
{selectedTimeRange === "custom" && (
<div className="flex gap-2">
<div>
<Label htmlFor="startDate" className="sr-only">
Start Date
</Label>
<Input
id="startDate"
type="datetime-local"
value={customDateRange.startDate}
onChange={(e) =>
setCustomDateRange((prev) => ({
...prev,
startDate: e.target.value,
}))
}
className="h-9"
/>
</div>
<div>
<Label htmlFor="endDate" className="sr-only">
End Date
</Label>
<Input
id="endDate"
type="datetime-local"
value={customDateRange.endDate}
onChange={(e) =>
setCustomDateRange((prev) => ({
...prev,
endDate: e.target.value,
}))
}
className="h-9"
/>
</div>
</div>
)}
</div> </div>
</div> </div>
</CardHeader> </CardHeader>