feat(app): restructure routing and implement Search component
- Refactored the App component to streamline routing using the Router and Route components. - Introduced a new Search component to handle search functionality, including input handling and result display. - Removed inline search logic from the App component for better separation of concerns. - Updated index.tsx to render the App component directly, simplifying the routing structure.
This commit is contained in:
Dmytro Kondakov
@ -1,101 +1,16 @@
|
|||||||
import { Button } from "@kobalte/core/button";
|
import { Route, Router } from "@solidjs/router";
|
||||||
import { A } from "@solidjs/router";
|
|
||||||
import { IconSearch, IconSettings } from "@tabler/icons-solidjs";
|
|
||||||
import { listen } from "@tauri-apps/api/event";
|
import { listen } from "@tauri-apps/api/event";
|
||||||
import clsx from "clsx";
|
import { createEffect, onCleanup } from "solid-js";
|
||||||
import Fuse from "fuse.js";
|
import { Login } from "./Login";
|
||||||
import {
|
import { ProtectedRoute } from "./ProtectedRoute";
|
||||||
For,
|
import { Search } from "./Search";
|
||||||
createEffect,
|
import { Settings } from "./Settings";
|
||||||
createResource,
|
|
||||||
createSignal,
|
|
||||||
onCleanup,
|
|
||||||
} from "solid-js";
|
|
||||||
import { ImageViewer } from "./components/ImageViewer";
|
|
||||||
import { SearchCard } from "./components/search-card/SearchCard";
|
|
||||||
import { SearchCardContact } from "./components/search-card/SearchCardContact";
|
|
||||||
import { SearchCardEvent } from "./components/search-card/SearchCardEvent";
|
|
||||||
import { SearchCardLocation } from "./components/search-card/SearchCardLocation";
|
|
||||||
import { SearchCardNote } from "./components/search-card/SearchCardNote";
|
|
||||||
import { type UserImage, getUserImages } from "./network";
|
|
||||||
import { getCardSize } from "./utils/getCardSize";
|
|
||||||
|
|
||||||
// How wonderfully functional
|
|
||||||
const getAllValues = (object: object): Array<string> => {
|
|
||||||
const loop = (acc: Array<string>, next: object): Array<string> => {
|
|
||||||
for (const _value of Object.values(next)) {
|
|
||||||
const value: unknown = _value;
|
|
||||||
switch (typeof value) {
|
|
||||||
case "object":
|
|
||||||
if (value != null) {
|
|
||||||
acc.push(...loop(acc, value));
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "string":
|
|
||||||
case "number":
|
|
||||||
case "boolean":
|
|
||||||
acc.push(value.toString());
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return acc;
|
|
||||||
};
|
|
||||||
|
|
||||||
return loop([], object);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const App = () => {
|
export const App = () => {
|
||||||
const [searchResults, setSearchResults] = createSignal<UserImage[]>([]);
|
|
||||||
const [searchQuery, setSearchQuery] = createSignal("");
|
|
||||||
const [selectedItem, setSelectedItem] = createSignal<UserImage | null>(
|
|
||||||
null,
|
|
||||||
);
|
|
||||||
|
|
||||||
const [data] = createResource(() =>
|
|
||||||
getUserImages().then((data) =>
|
|
||||||
data.map((d) => ({
|
|
||||||
...d,
|
|
||||||
rawData: getAllValues(d),
|
|
||||||
})),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
let fuze = new Fuse<UserImage>(data() ?? [], {
|
|
||||||
keys: [
|
|
||||||
{ name: "rawData", weight: 1 },
|
|
||||||
{ name: "title", weight: 1 },
|
|
||||||
],
|
|
||||||
threshold: 0.4,
|
|
||||||
});
|
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
setSearchResults(data() ?? []);
|
// TODO: Don't use window.location.href
|
||||||
fuze = new Fuse<UserImage>(data() ?? [], {
|
|
||||||
keys: [
|
|
||||||
{ name: "data.Name", weight: 2 },
|
|
||||||
{ name: "rawData", weight: 1 },
|
|
||||||
],
|
|
||||||
threshold: 0.4,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const onInputChange = (event: InputEvent) => {
|
|
||||||
const query = (event.target as HTMLInputElement).value;
|
|
||||||
setSearchQuery(query);
|
|
||||||
setSearchResults(fuze.search(query).map((s) => s.item));
|
|
||||||
};
|
|
||||||
|
|
||||||
let searchInputRef: HTMLInputElement | undefined;
|
|
||||||
|
|
||||||
createEffect(() => {
|
|
||||||
// Listen for the focus-search event from Tauri
|
|
||||||
const unlisten = listen("focus-search", () => {
|
const unlisten = listen("focus-search", () => {
|
||||||
if (searchInputRef) {
|
window.location.href = "/";
|
||||||
searchInputRef.focus();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
onCleanup(() => {
|
onCleanup(() => {
|
||||||
@ -104,72 +19,13 @@ export const App = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Router>
|
||||||
<main class="container pt-2">
|
<Route path="/login" component={Login} />
|
||||||
<div class="px-4 flex items-center">
|
|
||||||
<div class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-neutral-200 text-neutral-900">
|
|
||||||
<div class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-md px-2.5 text-gray-900">
|
|
||||||
<IconSearch
|
|
||||||
size={20}
|
|
||||||
class="m-auto size-5 text-neutral-600"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
ref={searchInputRef}
|
|
||||||
type="text"
|
|
||||||
value={searchQuery()}
|
|
||||||
onInput={onInputChange}
|
|
||||||
placeholder="Search for stuff..."
|
|
||||||
autofocus
|
|
||||||
class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
as="a"
|
|
||||||
href="/settings"
|
|
||||||
class="ml-2 p-2.5 bg-neutral-200 rounded-lg"
|
|
||||||
>
|
|
||||||
<IconSettings size={20} />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="px-4 mt-4 bg-white rounded-t-2xl">
|
<Route path="/" component={ProtectedRoute}>
|
||||||
<div class="h-[254px] mt-4 overflow-scroll scrollbar-hide">
|
<Route path="/" component={Search} />
|
||||||
{searchResults().length > 0 ? (
|
<Route path="/settings" component={Settings} />
|
||||||
<div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
|
</Route>
|
||||||
<For each={searchResults()}>
|
</Router>
|
||||||
{(item) => (
|
|
||||||
<div
|
|
||||||
onClick={() =>
|
|
||||||
setSelectedItem(item)
|
|
||||||
}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === "Enter") {
|
|
||||||
setSelectedItem(item);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl"
|
|
||||||
>
|
|
||||||
<span class="sr-only">
|
|
||||||
{item.data.Name}
|
|
||||||
</span>
|
|
||||||
<SearchCard item={item} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div class="text-center text-lg m-auto text-neutral-700">
|
|
||||||
No results found
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full border-t h-10 bg-white px-4 flex items-center border-neutral-100">
|
|
||||||
footer
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
182
frontend/src/Search.tsx
Normal file
182
frontend/src/Search.tsx
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
import { Button } from "@kobalte/core/button";
|
||||||
|
import { A } from "@solidjs/router";
|
||||||
|
import { IconSearch, IconSettings } from "@tabler/icons-solidjs";
|
||||||
|
import { listen } from "@tauri-apps/api/event";
|
||||||
|
import clsx from "clsx";
|
||||||
|
import Fuse from "fuse.js";
|
||||||
|
import {
|
||||||
|
For,
|
||||||
|
createEffect,
|
||||||
|
createResource,
|
||||||
|
createSignal,
|
||||||
|
onCleanup,
|
||||||
|
onMount,
|
||||||
|
} from "solid-js";
|
||||||
|
import { ImageViewer } from "./components/ImageViewer";
|
||||||
|
import { SearchCard } from "./components/search-card/SearchCard";
|
||||||
|
import { SearchCardContact } from "./components/search-card/SearchCardContact";
|
||||||
|
import { SearchCardEvent } from "./components/search-card/SearchCardEvent";
|
||||||
|
import { SearchCardLocation } from "./components/search-card/SearchCardLocation";
|
||||||
|
import { SearchCardNote } from "./components/search-card/SearchCardNote";
|
||||||
|
import { type UserImage, getUserImages } from "./network";
|
||||||
|
import { getCardSize } from "./utils/getCardSize";
|
||||||
|
|
||||||
|
// How wonderfully functional
|
||||||
|
const getAllValues = (object: object): Array<string> => {
|
||||||
|
const loop = (acc: Array<string>, next: object): Array<string> => {
|
||||||
|
for (const _value of Object.values(next)) {
|
||||||
|
const value: unknown = _value;
|
||||||
|
switch (typeof value) {
|
||||||
|
case "object":
|
||||||
|
if (value != null) {
|
||||||
|
acc.push(...loop(acc, value));
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "string":
|
||||||
|
case "number":
|
||||||
|
case "boolean":
|
||||||
|
acc.push(value.toString());
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
};
|
||||||
|
|
||||||
|
return loop([], object);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Search = () => {
|
||||||
|
const [searchResults, setSearchResults] = createSignal<UserImage[]>([]);
|
||||||
|
const [searchQuery, setSearchQuery] = createSignal("");
|
||||||
|
const [selectedItem, setSelectedItem] = createSignal<UserImage | null>(
|
||||||
|
null,
|
||||||
|
);
|
||||||
|
|
||||||
|
const [data] = createResource(() =>
|
||||||
|
getUserImages().then((data) =>
|
||||||
|
data.map((d) => ({
|
||||||
|
...d,
|
||||||
|
rawData: getAllValues(d),
|
||||||
|
})),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
let fuze = new Fuse<UserImage>(data() ?? [], {
|
||||||
|
keys: [
|
||||||
|
{ name: "rawData", weight: 1 },
|
||||||
|
{ name: "title", weight: 1 },
|
||||||
|
],
|
||||||
|
threshold: 0.4,
|
||||||
|
});
|
||||||
|
|
||||||
|
createEffect(() => {
|
||||||
|
setSearchResults(data() ?? []);
|
||||||
|
fuze = new Fuse<UserImage>(data() ?? [], {
|
||||||
|
keys: [
|
||||||
|
{ name: "data.Name", weight: 2 },
|
||||||
|
{ name: "rawData", weight: 1 },
|
||||||
|
],
|
||||||
|
threshold: 0.4,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const onInputChange = (event: InputEvent) => {
|
||||||
|
const query = (event.target as HTMLInputElement).value;
|
||||||
|
setSearchQuery(query);
|
||||||
|
setSearchResults(fuze.search(query).map((s) => s.item));
|
||||||
|
};
|
||||||
|
|
||||||
|
let searchInputRef: HTMLInputElement | undefined;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
if (searchInputRef) {
|
||||||
|
searchInputRef.focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
createEffect(() => {
|
||||||
|
// Listen for the focus-search event from Tauri
|
||||||
|
const unlisten = listen("focus-search", () => {
|
||||||
|
if (searchInputRef) {
|
||||||
|
searchInputRef.focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onCleanup(() => {
|
||||||
|
unlisten.then((fn) => fn());
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<main class="container pt-2">
|
||||||
|
<div class="px-4 flex items-center">
|
||||||
|
<div class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-neutral-200 text-neutral-900">
|
||||||
|
<div class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-md px-2.5 text-gray-900">
|
||||||
|
<IconSearch
|
||||||
|
size={20}
|
||||||
|
class="m-auto size-5 text-neutral-600"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
ref={searchInputRef}
|
||||||
|
type="text"
|
||||||
|
value={searchQuery()}
|
||||||
|
onInput={onInputChange}
|
||||||
|
placeholder="Search for stuff..."
|
||||||
|
autofocus
|
||||||
|
class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
as="a"
|
||||||
|
href="/settings"
|
||||||
|
class="ml-2 p-2.5 bg-neutral-200 rounded-lg"
|
||||||
|
>
|
||||||
|
<IconSettings size={20} />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-4 mt-4 bg-white rounded-t-2xl">
|
||||||
|
<div class="h-[254px] mt-4 overflow-scroll scrollbar-hide">
|
||||||
|
{searchResults().length > 0 ? (
|
||||||
|
<div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
|
||||||
|
<For each={searchResults()}>
|
||||||
|
{(item) => (
|
||||||
|
<div
|
||||||
|
onClick={() =>
|
||||||
|
setSelectedItem(item)
|
||||||
|
}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
setSelectedItem(item);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl"
|
||||||
|
>
|
||||||
|
<span class="sr-only">
|
||||||
|
{item.data.Name}
|
||||||
|
</span>
|
||||||
|
<SearchCard item={item} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div class="text-center text-lg m-auto text-neutral-700">
|
||||||
|
No results found
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full border-t h-10 bg-white px-4 flex items-center border-neutral-100">
|
||||||
|
footer
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -2,23 +2,7 @@
|
|||||||
import { render } from "solid-js/web";
|
import { render } from "solid-js/web";
|
||||||
|
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
import { Route, Router } from "@solidjs/router";
|
|
||||||
|
|
||||||
import { App } from "./App";
|
import { App } from "./App";
|
||||||
import { Login } from "./Login";
|
|
||||||
import { ProtectedRoute } from "./ProtectedRoute";
|
|
||||||
import { Settings } from "./Settings";
|
|
||||||
|
|
||||||
render(
|
render(() => <App />, document.getElementById("root") as HTMLElement);
|
||||||
() => (
|
|
||||||
<Router>
|
|
||||||
<Route path="/login" component={Login} />
|
|
||||||
|
|
||||||
<Route path="/" component={ProtectedRoute}>
|
|
||||||
<Route path="/" component={App} />
|
|
||||||
<Route path="/settings" component={Settings} />
|
|
||||||
</Route>
|
|
||||||
</Router>
|
|
||||||
),
|
|
||||||
document.getElementById("root") as HTMLElement,
|
|
||||||
);
|
|
||||||
|
|||||||
Reference in New Issue
Block a user