diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx index fc99546..332c19d 100644 --- a/components/FilterSearchDropdown.tsx +++ b/components/FilterSearchDropdown.tsx @@ -1,20 +1,23 @@ import React, { SetStateAction } from "react"; import ClickAwayHandler from "./ClickAwayHandler"; import Checkbox from "./Checkbox"; -import { SearchSettings } from "@/types/global"; type Props = { setFilterDropdown: (value: SetStateAction) => void; - toggleCheckbox: ( - name: "name" | "title" | "url" | "collection" | "tags" - ) => void; - searchSettings: SearchSettings; + setSearchFilter: Function; + searchFilter: { + name: boolean; + url: boolean; + title: boolean; + collection: boolean; + tags: boolean; + }; }; export default function FilterSearchDropdown({ setFilterDropdown, - toggleCheckbox, - searchSettings, + setSearchFilter, + searchFilter, }: Props) { return ( toggleCheckbox("name")} + state={searchFilter.name} + onClick={() => + setSearchFilter({ ...searchFilter, name: !searchFilter.name }) + } /> toggleCheckbox("url")} + state={searchFilter.url} + onClick={() => + setSearchFilter({ ...searchFilter, url: !searchFilter.url }) + } /> toggleCheckbox("title")} + state={searchFilter.title} + onClick={() => + setSearchFilter({ ...searchFilter, title: !searchFilter.title }) + } /> toggleCheckbox("collection")} + state={searchFilter.collection} + onClick={() => + setSearchFilter({ + ...searchFilter, + collection: !searchFilter.collection, + }) + } /> toggleCheckbox("tags")} + state={searchFilter.tags} + onClick={() => + setSearchFilter({ ...searchFilter, tags: !searchFilter.tags }) + } /> diff --git a/components/Search.tsx b/components/Search.tsx index 4ff6768..ed5e3ec 100644 --- a/components/Search.tsx +++ b/components/Search.tsx @@ -1,32 +1,20 @@ import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { useEffect, useState } from "react"; -import useSearchSettingsStore from "@/store/search"; +import { useState } from "react"; import { useRouter } from "next/router"; export default function Search() { const router = useRouter(); - const [searchBox, setSearchBox] = useState( - false || router.pathname == "/search" + const routeQuery = router.query.query; + + const [searchQuery, setSearchQuery] = useState( + routeQuery ? decodeURIComponent(routeQuery as string) : "" ); - const { searchSettings, setSearchSettings, setSearchQuery } = - useSearchSettingsStore(); - - useEffect(() => { - if (router.pathname !== "/search") - setSearchSettings({ - query: "", - filter: { - name: true, - url: true, - title: true, - collection: true, - tags: true, - }, - }); - }, [router]); + const [searchBox, setSearchBox] = useState( + router.pathname.startsWith("/search") || false + ); return ( diff --git a/pages/search/index.tsx b/pages/search/index.tsx index 30a33c1..f1b1777 100644 --- a/pages/search/index.tsx +++ b/pages/search/index.tsx @@ -1,146 +1,10 @@ -import FilterSearchDropdown from "@/components/FilterSearchDropdown"; -import LinkList from "@/components/LinkList"; -import SortLinkDropdown from "@/components/SortLinkDropdown"; -import MainLayout from "@/layouts/MainLayout"; -import useLinkStore from "@/store/links"; -import useSearchSettingsStore from "@/store/search"; -import { faFilter, faSearch, faSort } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { ChangeEvent, useEffect, useState } from "react"; +import { useRouter } from "next/router"; +import { useEffect } from "react"; -export default function Links() { - const { links } = useLinkStore(); - - const [filterDropdown, setFilterDropdown] = useState(false); - const [sortDropdown, setSortDropdown] = useState(false); - const [sortBy, setSortBy] = useState("Name (A-Z)"); - const [sortedLinks, setSortedLinks] = useState(links); - const { searchSettings, toggleCheckbox } = useSearchSettingsStore(); - - const handleSortChange = (event: ChangeEvent) => { - setSortBy(event.target.value); - }; - - const { name, url, title, collection, tags } = searchSettings.filter; +export default function Home() { + const router = useRouter(); useEffect(() => { - const linksArray = [ - ...links.filter((link) => { - const query = searchSettings.query.toLowerCase(); - - if ( - (name && link.name.toLowerCase().includes(query)) || - (url && link.url.toLowerCase().includes(query)) || - (title && link.title.toLowerCase().includes(query)) || - (collection && link.collection.name.toLowerCase().includes(query)) || - (tags && - link.tags.some((tag) => tag.name.toLowerCase().includes(query))) - ) - return true; - }), - ]; - - if (sortBy === "Name (A-Z)") - setSortedLinks(linksArray.sort((a, b) => a.name.localeCompare(b.name))); - else if (sortBy === "Title (A-Z)") - setSortedLinks(linksArray.sort((a, b) => a.title.localeCompare(b.title))); - else if (sortBy === "Name (Z-A)") - setSortedLinks(linksArray.sort((a, b) => b.name.localeCompare(a.name))); - else if (sortBy === "Title (Z-A)") - setSortedLinks(linksArray.sort((a, b) => b.title.localeCompare(a.title))); - else if (sortBy === "Date (Newest First)") - setSortedLinks( - linksArray.sort( - (a, b) => - new Date(b.createdAt as string).getTime() - - new Date(a.createdAt as string).getTime() - ) - ); - else if (sortBy === "Date (Oldest First)") - setSortedLinks( - linksArray.sort( - (a, b) => - new Date(a.createdAt as string).getTime() - - new Date(b.createdAt as string).getTime() - ) - ); - }, [searchSettings, links, sortBy]); - - return ( - -
-
-
-
- -

- Search Results -

-
-
- -
-
-
setFilterDropdown(!filterDropdown)} - id="filter-dropdown" - className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1" - > - -
- - {filterDropdown ? ( - - ) : null} -
- -
-
setSortDropdown(!sortDropdown)} - id="sort-dropdown" - className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1" - > - -
- - {sortDropdown ? ( - setSortDropdown(!sortDropdown)} - /> - ) : null} -
-
-
- {sortedLinks[0] ? ( - sortedLinks.map((e, i) => { - return ; - }) - ) : ( -

- Nothing found.{" "} - - ¯\_(ツ)_/¯ - -

- )} -
-
- ); + router.push("/links"); + }, []); } diff --git a/store/search.ts b/store/search.ts deleted file mode 100644 index 5c92637..0000000 --- a/store/search.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { SearchSettings } from "@/types/global"; -import { create } from "zustand"; - -type SearchSettingsState = { - searchSettings: SearchSettings; - setSearchSettings: (searchSettings: SearchSettings) => void; - toggleCheckbox: (name: keyof SearchSettings["filter"]) => void; - setSearchQuery: (query: string) => void; -}; - -const useSearchSettingsStore = create((set) => ({ - searchSettings: { - query: "", - filter: { - name: true, - url: true, - title: true, - collection: true, - tags: true, - }, - }, - setSearchSettings: (searchSettings) => set({ searchSettings }), - toggleCheckbox: (name) => - set((state) => ({ - searchSettings: { - ...state.searchSettings, - filter: { - ...state.searchSettings.filter, - [name]: !state.searchSettings.filter[name], - }, - }, - })), - setSearchQuery: (query) => - set((state) => ({ - searchSettings: { - ...state.searchSettings, - query, - }, - })), -})); - -export default useSearchSettingsStore; diff --git a/types/global.ts b/types/global.ts index c9930bf..4e5c741 100644 --- a/types/global.ts +++ b/types/global.ts @@ -34,17 +34,6 @@ export interface AccountSettings extends User { newPassword?: string; } -export type SearchSettings = { - query: string; - filter: { - name: boolean; - url: boolean; - title: boolean; - collection: boolean; - tags: boolean; - }; -}; - export interface PublicCollectionIncludingLinks extends Omit { ownerName?: string;