Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-04-29 12:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

lint

Browse Source
This commit is contained in:
Michael Shamoon 2022-10-19 00:54:35 -07:00
parent 3249c95a74
commit fa46c9a1a4
2 changed files with 37 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/search.jsx
View File

@ -1,11 +1,11 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useEffect, useState, useRef } from "react"; import { useEffect, useState, useRef } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { resolveIcon } from "./services/item"; import { resolveIcon } from "./services/item";
export default function HomepageSearch({bookmarks, services, searchString, setSearchString, isOpen, close}) { export default function HomepageSearch({bookmarksAndServices, searchString, setSearchString, isOpen, close}) {
const { t, i18n } = useTranslation(); const { t } = useTranslation();
const all = [...bookmarks.map(bg => bg.bookmarks).flat(), ...services.map(sg => sg.services).flat()];
const searchField = useRef(); const searchField = useRef();
@ -25,10 +25,10 @@ export default function HomepageSearch({bookmarks, services, searchString, setSe
close(false); close(false);
const result = results[currentItemIndex]; const result = results[currentItemIndex];
window.open(result.href, '_blank'); window.open(result.href, '_blank');
} else if (event.key == "ArrowDown" && results[currentItemIndex + 1]) { } else if (event.key === "ArrowDown" && results[currentItemIndex + 1]) {
setCurrentItemIndex(currentItemIndex + 1); setCurrentItemIndex(currentItemIndex + 1);
event.preventDefault(); event.preventDefault();
} else if (event.key == "ArrowUp" && currentItemIndex > 0) { } else if (event.key === "ArrowUp" && currentItemIndex > 0) {
setCurrentItemIndex(currentItemIndex - 1); setCurrentItemIndex(currentItemIndex - 1);
event.preventDefault(); event.preventDefault();
} }
@ -37,13 +37,13 @@ export default function HomepageSearch({bookmarks, services, searchString, setSe
useEffect(() => { useEffect(() => {
if (searchString.length === 0) setResults([]); if (searchString.length === 0) setResults([]);
else { else {
const newResults = all.filter(r => r.name.toLowerCase().includes(searchString)); const newResults = bookmarksAndServices.filter(r => r.name.toLowerCase().includes(searchString));
setResults(newResults); setResults(newResults);
if (newResults.length) { if (newResults.length) {
setCurrentItemIndex(0); setCurrentItemIndex(0);
} }
} }
}, [searchString]) }, [searchString, bookmarksAndServices])
const [hidden, setHidden] = useState(true); const [hidden, setHidden] = useState(true);
@ -65,38 +65,35 @@ export default function HomepageSearch({bookmarks, services, searchString, setSe
!hidden && isOpen && "opacity-100", !hidden && isOpen && "opacity-100",
!isOpen && "opacity-0", !isOpen && "opacity-0",
)} role="dialog" aria-modal="true"> )} role="dialog" aria-modal="true">
<div className="fixed inset-0 bg-gray-500 bg-opacity-50"></div> <div className="fixed inset-0 bg-gray-500 bg-opacity-50" />
<div className="fixed inset-0 z-10 overflow-y-auto"> <div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full min-w-full items-start justify-center text-center"> <div className="flex min-h-full min-w-full items-start justify-center text-center">
<div className="mt-[10%] min-w-[80%] md:min-w-[40%] rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-50 dark:bg-theme-800"> <div className="mt-[10%] min-w-[80%] md:min-w-[40%] rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-50 dark:bg-theme-800">
<input placeholder="Search" className={classNames( <input placeholder="Search" className={classNames(
results.length > 0 && "rounded-t-md", results.length > 0 && "rounded-t-md",
results.length === 0 && "rounded-md", results.length === 0 && "rounded-md",
"w-full p-4 m-0 border-0 border-b border-slate-700 focus:border-slate-700 focus:outline-0 focus:ring-0 text-sm md:text-xl text-theme-700 dark:text-theme-200 bg-theme-60 dark:bg-theme-800" "w-full p-4 m-0 border-0 border-b border-slate-700 focus:border-slate-700 focus:outline-0 focus:ring-0 text-sm md:text-xl text-theme-700 dark:text-theme-200 bg-theme-60 dark:bg-theme-800"
)} type="text" ref={searchField} value={searchString} onChange={handleSearchChange} onKeyDown={handleSearchKeyDown} /> )} type="text" ref={searchField} value={searchString} onChange={handleSearchChange} onKeyDown={handleSearchKeyDown} />
<ul> {results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto">
{results.map((r, i) => { {results.map((r, i) => (
return ( <li className={classNames(
<li className={classNames( i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
i === 0 && "mt-4", "flex flex-row items-center justify-between rounded-md text-sm md:text-xl m-2 py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 hover:bg-theme-200/50 dark:hover:bg-theme-900/30",
i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50", )} key={r.name}>
"flex flex-row items-center justify-between rounded-md text-sm md:text-xl m-2 py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 hover:bg-theme-200/50 dark:hover:bg-theme-900/30", <div className="flex flex-row items-center mr-4">
)} key={r.name}> <div className="w-5 text-xs mr-4">
<div className="flex flex-row items-center mr-4"> {r.icon && resolveIcon(r.icon)}
<div className="w-5 text-xs mr-4"> {r.abbr && r.abbr}
{r.icon && resolveIcon(r.icon)} </div>
{r.abbr && r.abbr} {r.name}
</div> </div>
{r.name} <div className="text-xs text-theme-600">{r.abbr ? t("homepagesearch.bookmark") : t("homepagesearch.service")}</div>
</div> </li>
<div className="text-xs text-theme-600">{r.abbr ? t("homepagesearch.bookmark") : t("homepagesearch.service")}</div> ))}
</li>) </ul>}
})
}
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }

14
src/pages/index.jsx
View File

@ -161,11 +161,6 @@ const headerStyles = {
clean: "m-4 mb-0 sm:m-8 sm:mb-0", clean: "m-4 mb-0 sm:m-8 sm:mb-0",
}; };
function handleChange(event) {
// this.setState({value: event.target.value});
console.log(event);
}
function Home({ initialSettings }) { function Home({ initialSettings }) {
const { i18n } = useTranslation(); const { i18n } = useTranslation();
const { theme, setTheme } = useContext(ThemeContext); const { theme, setTheme } = useContext(ThemeContext);
@ -180,6 +175,8 @@ function Home({ initialSettings }) {
const { data: bookmarks } = useSWR("/api/bookmarks"); const { data: bookmarks } = useSWR("/api/bookmarks");
const { data: widgets } = useSWR("/api/widgets"); const { data: widgets } = useSWR("/api/widgets");
const bookmarksAndServices = [...bookmarks.map(bg => bg.bookmarks).flat(), ...services.map(sg => sg.services).flat()]
useEffect(() => { useEffect(() => {
if (settings.language) { if (settings.language) {
i18n.changeLanguage(settings.language); i18n.changeLanguage(settings.language);
@ -198,10 +195,7 @@ function Home({ initialSettings }) {
const [searchString, setSearchString] = useState(""); const [searchString, setSearchString] = useState("");
useEffect(() => { useEffect(() => {
document.addEventListener('keydown', handleKeyDown);
function handleKeyDown(e) { function handleKeyDown(e) {
console.log(e.target.tagName, e.key, e);
if (e.target.tagName === "BODY") { if (e.target.tagName === "BODY") {
if (String.fromCharCode(e.keyCode).match(/(\w|\s)/g) && !(e. altKey || e.ctrlKey || e.metaKey || e.shiftKey)) { if (String.fromCharCode(e.keyCode).match(/(\w|\s)/g) && !(e. altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
setSearching(true); setSearching(true);
@ -212,6 +206,8 @@ function Home({ initialSettings }) {
} }
} }
document.addEventListener('keydown', handleKeyDown);
return function cleanup() { return function cleanup() {
document.removeEventListener('keydown', handleKeyDown); document.removeEventListener('keydown', handleKeyDown);
} }
@ -240,7 +236,7 @@ function Home({ initialSettings }) {
headerStyles[initialSettings.headerStyle || "underlined"] headerStyles[initialSettings.headerStyle || "underlined"]
)} )}
> >
<HomepageSearch services={services} bookmarks={bookmarks} searchString={searchString} setSearchString={setSearchString} isOpen={searching} close={setSearching} /> <HomepageSearch bookmarksAndServices={bookmarksAndServices} searchString={searchString} setSearchString={setSearchString} isOpen={searching} close={setSearching} />
{widgets && ( {widgets && (
<> <>
{widgets {widgets