LumeWeb
/
web3.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: use the proper filters on all instances of search

This commit is contained in:
Juan Di Toro 2023-12-09 16:26:32 +01:00
parent d203ad3400
commit 56107acef5
3 changed files with 53 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/SearchBar.tsx
View File

@ -11,7 +11,7 @@ import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/24/outline"
import { flushSync } from "react-dom"
import Link from "next/link"
import { usePathname, useSearchParams, useRouter } from "next/navigation"
import { formatDate, getResults } from "@/utils"
import { FILTER_TIMES, formatDate, getResults } from "@/utils"
import {
Select,
SelectContent,
@ -198,29 +198,6 @@ const SearchBar = ({}: Props) => {
)
}
const FILTER_TIMES = [
{
label: "All Times",
value: 0,
},
{
label: "1d ago",
value: 1
},
{
label: "7d ago",
value: 7
},
{
label: "15d ago",
value: 15
},
{
label: "1m ago",
value: 30
}
]
// Placeholder components for Shadcn
const LoadingComponent = () => {
// Replace with actual Shadcn Loading component

81
src/components/SimplifiedSearchBar.tsx
View File

@ -2,46 +2,37 @@
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import React, { FormEvent, useState } from "react"
import { Select, SelectContent, SelectTrigger, SelectItem } from "./ui/select"
import { subDays, subMonths, subYears } from "date-fns"
import { Select, SelectContent, SelectTrigger, SelectItem, SelectValue } from "./ui/select"
import { SitesCombobox } from "./SitesCombobox"
import { FILTER_TIMES } from "@/utils"
type Props = {
value: string
placeholder?: string
className?: string
filters?: {
sites: {value: string, label:string}[]
sites: { value: string; label: string }[]
}
}
export const TIME_FILTER_OPTIONS = [
{ value: subDays(new Date(), 1), label: '1d ago' },
{ value: subDays(new Date(), 7), label: '7d ago' },
{ value: subDays(new Date(), 15), label: '15d ago' },
{ value: subMonths(new Date(), 1), label: '1m ago' },
{ value: subMonths(new Date(), 6), label: '6m ago' },
{ value: subYears(new Date(), 1), label: '1y ago' },
];
const SimplifiedSearchBar = ({
value: initialValue,
placeholder,
filters,
className
}: Props) => {
const searchParams = useSearchParams();
const pathname = usePathname();
const router = useRouter();
const searchParams = useSearchParams()
const pathname = usePathname()
const router = useRouter()
const [value, setValue] = useState<string>(initialValue)
const handleSearch = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
const newSearchParams = new URLSearchParams(searchParams)
event.preventDefault()
const newSearchParams = new URLSearchParams(searchParams ?? undefined)
if(value) {
newSearchParams.set('q', value)
if (value) {
newSearchParams.set("q", value)
} else {
newSearchParams.delete('q')
newSearchParams.delete("q")
}
router.push(`${pathname}?${newSearchParams}`)
@ -54,10 +45,16 @@ const SimplifiedSearchBar = ({
<div className="flex-1 flex flex-row max-w-full">
<span className="text-white mr-2">results: </span>
<fieldset
className={`${value && value !== "" ? `after:content-['"'] before:content-['"'] relative after:absolute after:-right-1` : "w-full"} text-primary ${className}`}
className={`${
value && value !== ""
? `after:content-['"'] before:content-['"'] relative after:absolute after:-right-1`
: "w-full"
} text-primary ${className}`}
>
<input
className={`flex-grow inline bg-transparent placeholder-gray-400 outline-none ring-none text-primary ${value && value !== "" ? "" : "w-full"}`}
className={`flex-grow inline bg-transparent placeholder-gray-400 outline-none ring-none text-primary ${
value && value !== "" ? "" : "w-full"
}`}
placeholder={placeholder}
value={value}
onChange={(e) => setValue(e.target.value)}
@ -65,24 +62,26 @@ const SimplifiedSearchBar = ({
/>
</fieldset>
</div>
<div className="w-56 flex">
<Select>
<SelectTrigger className="w-32 flex-1">
All Sites
</SelectTrigger>
<SelectContent>
<SelectItem value="none">No Options yet</SelectItem>
</SelectContent>
</Select>
<Select>
<SelectTrigger className="w-32 flex-1">
All Times
</SelectTrigger>
<SelectContent>
{TIME_FILTER_OPTIONS.map(o => <SelectItem key={o.value.toISOString()} value={o.value.toISOString()}> {o.label}</SelectItem>)}
</SelectContent>
</Select>
</div>
<div className="w-56 flex gap-2">
{/* Dropdown component should be here */}
<SitesCombobox />
{/* Dropdown component should be here */}
<Select defaultValue={"0"}>
<SelectTrigger className="hover:bg-muted w-auto">
<SelectValue placeholder="Time ago" />
</SelectTrigger>
<SelectContent>
{FILTER_TIMES.map((v) => (
<SelectItem
value={String(v.value)}
key={`FilteTimeSelectItem_${v.value}`}
>
{v.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</form>
)
}

12
src/utils.ts
View File

@ -1,4 +1,4 @@
import { formatDistanceToNow } from "date-fns"
import { formatDistanceToNow, subDays, subMonths, subYears } from "date-fns"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
@ -71,3 +71,13 @@ export async function getAvailableSites() {
return statuses;
}
export const FILTER_TIMES = [
{ value: 0, label: "All Times" },
{ value: subDays(new Date(), 1), label: "1d ago" },
{ value: subDays(new Date(), 7), label: "7d ago" },
{ value: subDays(new Date(), 15), label: "15d ago" },
{ value: subMonths(new Date(), 1), label: "1m ago" },
{ value: subMonths(new Date(), 6), label: "6m ago" },
{ value: subYears(new Date(), 1), label: "1y ago" }
]