egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring [WIP]

Browse Source
This commit is contained in:
daniel31x13
2023-11-30 06:13:42 -05:00
parent 5850a423f9
commit cfc308f521
5 changed files with 100 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Navbar.tsx
+1 -1
View File
@@ -53,7 +53,7 @@ export default function Navbar() {
const closeNewCollectionModal = () => setNewCollectionModalIsOpen(false);
return (
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content border-b">
<div className="flex justify-between gap-2 items-center px-4 py-2 border-solid border-b-neutral-content border-b">
<div
onClick={toggleSidebar}
className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
components/PublicPage/PublicSearchBar.tsx
-59
View File
@@ -1,59 +0,0 @@
import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { toast } from "react-hot-toast";
type Props = {
placeHolder?: string;
};
export default function PublicSearchBar({ placeHolder }: Props) {
const router = useRouter();
const [searchQuery, setSearchQuery] = useState<string>("");
useEffect(() => {
router.query.q
? setSearchQuery(decodeURIComponent(router.query.q as string))
: setSearchQuery("");
}, [router.query.q]);
return (
<div className="flex items-center relative group">
<label
htmlFor="search-box"
className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md text-primary"
>
<FontAwesomeIcon icon={faMagnifyingGlass} className="w-4 h-4" />
</label>
<input
id="search-box"
type="text"
placeholder={placeHolder}
value={searchQuery}
onChange={(e) => {
e.target.value.includes("%") &&
toast.error("The search query should not contain '%'.");
setSearchQuery(e.target.value.replace("%", ""));
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
if (!searchQuery) {
return router.push("/public/collections/" + router.query.id);
}
return router.push(
"/public/collections/" +
router.query.id +
"?q=" +
encodeURIComponent(searchQuery || "")
);
}
}}
className="border text-sm border-neutral-content bg-base-200 focus:border-primary rounded-md pl-8 py-2 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none"
/>
</div>
);
}
components/SearchBar.tsx
+28 -8
View File
@@ -4,7 +4,11 @@ import { useState } from "react";
import { useRouter } from "next/router";
import { toast } from "react-hot-toast";
export default function SearchBar() {
type Props = {
placeholder?: string;
};
export default function SearchBar({ placeholder }: Props) {
const router = useRouter();
const routeQuery = router.query.q;
@@ -17,7 +21,7 @@ export default function SearchBar() {
<div className="flex items-center relative group">
<label
htmlFor="search-box"
className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-primary"
className="inline-flex w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
>
<FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
</label>
@@ -25,18 +29,34 @@ export default function SearchBar() {
<input
id="search-box"
type="text"
placeholder="Search for Links"
placeholder={placeholder || "Search for Links"}
value={searchQuery}
onChange={(e) => {
e.target.value.includes("%") &&
toast.error("The search query should not contain '%'.");
setSearchQuery(e.target.value.replace("%", ""));
}}
onKeyDown={(e) =>
e.key === "Enter" &&
router.push("/search?q=" + encodeURIComponent(searchQuery))
}
className="border border-neutral-content bg-base-200 focus:border-primary py-2 rounded-md pl-10 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none"
onKeyDown={(e) => {
if (e.key === "Enter") {
if (router.pathname.startsWith("/public")) {
if (!searchQuery) {
return router.push("/public/collections/" + router.query.id);
}
return router.push(
"/public/collections/" +
router.query.id +
"?q=" +
encodeURIComponent(searchQuery || "")
);
} else {
return router.push(
"/search?q=" + encodeURIComponent(searchQuery)
);
}
}
}}
className="border border-neutral-content bg-base-200 focus:border-primary py-1 rounded-md pl-9 pr-2 w-44 sm:w-60 md:focus:w-80 duration-100 outline-none"
/>
</div>
);