Skip to content

Commit fa4b2c1

Browse files
VulpoTheDevVulpoTheDev
committed
format: biome format search
1 parent bb224f8 commit fa4b2c1

File tree

5 files changed

+126
-39
lines changed

5 files changed

+126
-39
lines changed

‎apps/web/src/app/(main)/(search)/search/page.tsx‎

Lines changed: 51 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,73 @@
1-
'use client'
1+
"use client"
22

3-
import { Button, MoreButton } from "@mav/ui/components/buttons";
4-
import { useState } from "react";
5-
import { LuArrowDownAZ, LuArrowUpZA, LuCat, LuGalleryThumbnails, LuListOrdered, LuScan, LuUser } from "react-icons/lu";
3+
import { Button, MoreButton } from "@mav/ui/components/buttons"
4+
import { useState } from "react"
5+
import {
6+
LuArrowDownAZ,
7+
LuArrowUpZA,
8+
LuCat,
9+
LuGalleryThumbnails,
10+
LuListOrdered,
11+
LuScan,
12+
LuUser
13+
} from "react-icons/lu"
614

715
export default function Search() {
816
const [sortingMode, setSortingMode] = useState("Best Matched")
9-
const [searchType, setSearchType] = useState("all");
17+
const [searchType, setSearchType] = useState("all")
1018
return (
1119
<div className="mx-auto max-w-screen-3xl py-6 px-8 flex flex-row gap-x-8">
1220
<div className="w-1/4 flex flex-col gap-y-3">
1321
<span className="text-2xl">Filters</span>
1422
<div className="gap-y-3 flex flex-col text-base">
15-
<Button onClick={() => setSearchType("all")} variant={searchType === "all" ? "primary" : "secondary"} icon={<LuScan size={18} />}>All</Button>
16-
<Button onClick={() => setSearchType("users")} variant={searchType === "users" ? "primary" : "secondary"} icon={<LuUser size={18} />}>Users & Artist</Button>
17-
<Button onClick={() => setSearchType("artworks")} variant={searchType === "artworks" ? "primary" : "secondary"} icon={<LuGalleryThumbnails size={18} />}>Artworks</Button>
18-
<Button onClick={() => setSearchType("listings")} variant={searchType === "listings" ? "primary" : "secondary"} icon={<LuListOrdered size={18} />}>Listing</Button>
19-
<Button onClick={() => setSearchType("adopts")} variant={searchType === "adopts" ? "primary" : "secondary"} icon={<LuCat size={18} />}>Adopts</Button>
23+
<Button
24+
onClick={() => setSearchType("all")}
25+
variant={searchType === "all" ? "primary" : "secondary"}
26+
icon={<LuScan size={18} />}
27+
>
28+
All
29+
</Button>
30+
<Button
31+
onClick={() => setSearchType("users")}
32+
variant={searchType === "users" ? "primary" : "secondary"}
33+
icon={<LuUser size={18} />}
34+
>
35+
Users & Artist
36+
</Button>
37+
<Button
38+
onClick={() => setSearchType("artworks")}
39+
variant={searchType === "artworks" ? "primary" : "secondary"}
40+
icon={<LuGalleryThumbnails size={18} />}
41+
>
42+
Artworks
43+
</Button>
44+
<Button
45+
onClick={() => setSearchType("listings")}
46+
variant={searchType === "listings" ? "primary" : "secondary"}
47+
icon={<LuListOrdered size={18} />}
48+
>
49+
Listing
50+
</Button>
51+
<Button
52+
onClick={() => setSearchType("adopts")}
53+
variant={searchType === "adopts" ? "primary" : "secondary"}
54+
icon={<LuCat size={18} />}
55+
>
56+
Adopts
57+
</Button>
2058
</div>
2159
</div>
2260
<div className="w-full">
2361
<div className="flex flex-row justify-between">
2462
<span className="text-2xl">621 results</span>
2563
<div className="flex flex-row gap-x-2">
26-
<Button variant="primary" icon={<LuArrowDownAZ size={18} />}>Sort by: {sortingMode}</Button>
64+
<Button variant="primary" icon={<LuArrowDownAZ size={18} />}>
65+
Sort by: {sortingMode}
66+
</Button>
2767
<MoreButton></MoreButton>
2868
</div>
2969
</div>
3070
</div>
3171
</div>
3272
)
3373
}
34-

‎apps/web/src/components/Search/SearchBar.tsx‎

Lines changed: 51 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,20 @@ import { SearchSection } from "./Section"
1010
import { search } from "@/utils/api"
1111
import { SearchResult } from "@/types/utils"
1212

13-
export default function SearchBar({ recentSearches = [], characters = [] }: { recentSearches?: string[], characters?: { name: string; image: string }[] }) {
13+
export default function SearchBar({
14+
recentSearches = [],
15+
characters = []
16+
}: {
17+
recentSearches?: string[]
18+
characters?: { name: string; image: string }[]
19+
}) {
1420
const [isOpen, setIsOpen] = useState(false)
1521
const [loading, setLoading] = useState(false)
16-
const [results, setResults] = useState<SearchResult>({ user: [], artwork: [], character: [] })
22+
const [results, setResults] = useState<SearchResult>({
23+
user: [],
24+
artwork: [],
25+
character: []
26+
})
1727
const [query, setQuery] = useState("")
1828
const inputRef = useRef<HTMLInputElement>(null)
1929

@@ -23,10 +33,10 @@ export default function SearchBar({ recentSearches = [], characters = [] }: { re
2333
event.preventDefault()
2434
setIsOpen(true)
2535
} else if (event.key === "Escape") {
26-
redirect("/search/?q=" + encodeURIComponent(query.trim()))
36+
redirect(`/search/?q=${encodeURIComponent(query.trim())}`)
2737
} else if (event.key === "Enter" && isOpen) {
28-
redirect("/search/?q=" + encodeURIComponent(query.trim()))
2938
setIsOpen(false)
39+
redirect(`/search/?q=${encodeURIComponent(query.trim())}`)
3040
}
3141
}
3242
document.addEventListener("keydown", handleKeyDown)
@@ -105,17 +115,44 @@ export default function SearchBar({ recentSearches = [], characters = [] }: { re
105115
</form>
106116
</div>
107117
<div className="mt-4">
108-
{loading && <div className="text-center text-gray-500 py-4">Loading results...</div>}
109-
{!loading && (results.user ?? []).length > 0 && <SearchSection title="USER RESULTS" items={results} />}
110-
{!loading && (results.artwork ?? []).length > 0 && <SearchSection title="ARTWORK RESULTS" items={results} />}
111-
{!loading && (results.character ?? []).length > 0 && <SearchSection title="CHARACTER RESULTS" items={results} isCharacter />}
112-
{!loading && query.trim() && results.user?.length === 0 && results.artwork?.length === 0 && results.character?.length === 0 && (
113-
<>
114-
<div className="text-center text-gray-500 py-4">No results found for "<strong>{query}</strong>"</div>
115-
<SearchSection title="RECENT SEARCHES" items={recentSearches} />
116-
<SearchSection title="CHARACTERS" items={characters} isCharacter />
117-
</>
118+
{loading && (
119+
<div className="text-center text-gray-500 py-4">
120+
Loading results...
121+
</div>
118122
)}
123+
{!loading && (results.user ?? []).length > 0 && (
124+
<SearchSection title="USER RESULTS" items={results} />
125+
)}
126+
{!loading && (results.artwork ?? []).length > 0 && (
127+
<SearchSection title="ARTWORK RESULTS" items={results} />
128+
)}
129+
{!loading && (results.character ?? []).length > 0 && (
130+
<SearchSection
131+
title="CHARACTER RESULTS"
132+
items={results}
133+
isCharacter
134+
/>
135+
)}
136+
{!loading &&
137+
query.trim() &&
138+
results.user?.length === 0 &&
139+
results.artwork?.length === 0 &&
140+
results.character?.length === 0 && (
141+
<>
142+
<div className="text-center text-gray-500 py-4">
143+
No results found for "<strong>{query}</strong>"
144+
</div>
145+
<SearchSection
146+
title="RECENT SEARCHES"
147+
items={recentSearches}
148+
/>
149+
<SearchSection
150+
title="CHARACTERS"
151+
items={characters}
152+
isCharacter
153+
/>
154+
</>
155+
)}
119156
</div>
120157
</Dialog>
121158
</Transition>

‎apps/web/src/components/Search/Section.tsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Character, Artwork } from "@/types/characters";
2-
import { UserType } from "@/types/users";
3-
import { SearchResult } from "@/types/utils";
4-
import Link from "next/link";
1+
import { Character, Artwork } from "@/types/characters"
2+
import { UserType } from "@/types/users"
3+
import { SearchResult } from "@/types/utils"
4+
import Link from "next/link"
55

66
interface SearchSectionProps {
77
title: string
@@ -10,7 +10,7 @@ interface SearchSectionProps {
1010
}
1111

1212
export function SearchSection({ title, items }: SearchSectionProps) {
13-
let formattedItems: { name: string; image?: string, href: string }[] = []
13+
let formattedItems: { name: string; image?: string; href: string }[] = []
1414

1515
if (!items) {
1616
return null
@@ -20,25 +20,29 @@ export function SearchSection({ title, items }: SearchSectionProps) {
2020
formattedItems = items.map((item) =>
2121
typeof item === "string"
2222
? { name: item }
23-
: { name: item.name, image: (item as { image?: string }).image, href: `/search?q=${item.name}` }
23+
: {
24+
name: item.name,
25+
image: (item as { image?: string }).image,
26+
href: `/search?q=${item.name}`
27+
}
2428
)
2529
} else if (typeof items === "object") {
2630
formattedItems = [
2731
...(items.user?.map((user: UserType) => ({
2832
name: user.displayName || user.handle,
2933
image: user.avatarUrl,
30-
href: `/@${user.handle}`,
34+
href: `/@${user.handle}`
3135
})) ?? []),
3236
...(items.character?.map((char: Character) => ({
3337
name: char.name,
3438
image: char.avatarUrl,
35-
href: `/@${char.owner.handle}/${char.name}`,
39+
href: `/@${char.owner.handle}/${char.name}`
3640
})) ?? []),
3741
...(items.artwork?.map((art: Artwork) => ({
3842
name: art.title || "Untitled Artwork",
3943
image: art.artworkUrl || art.watermarkUrl,
40-
href: `/artworks/${art.id}`,
41-
})) ?? []),
44+
href: `/artworks/${art.id}`
45+
})) ?? [])
4246
]
4347
}
4448

@@ -53,7 +57,11 @@ export function SearchSection({ title, items }: SearchSectionProps) {
5357
>
5458
<Link href={item.href || "#"} className="flex items-center gap-2">
5559
{item.image && (
56-
<img src={item.image} alt={item.name} className="w-6 h-6 rounded-full" />
60+
<img
61+
src={item.image}
62+
alt={item.name}
63+
className="w-6 h-6 rounded-full"
64+
/>
5765
)}
5866
{item.name}
5967
</Link>

‎apps/web/src/components/layouts/AppLayout/Navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function Navbar() {
3636
</Link>
3737
</div>
3838
<div className="flex items-center gap-x-4">
39-
<SearchBar recentSearches={ user ? user.recentSearches : []} />
39+
<SearchBar recentSearches={user ? user.recentSearches : []} />
4040
{!isLoading &&
4141
(user ? (
4242
<ActionsLoggedIn user={user} isRegistered={true} />

‎apps/web/src/utils/api.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,10 @@ export const postComment = async (
310310
return redirect(redirectRoute)
311311
}
312312

313-
export const search = async (query: string, type?: "character" | "user" | "artwork") => {
313+
export const search = async (
314+
query: string,
315+
type?: "character" | "user" | "artwork"
316+
) => {
314317
if (!query.trim()) {
315318
return {
316319
user: [],

0 commit comments

Comments
 (0)