@@ -30,6 +35,13 @@ export function NavbarComponent() {
radius="lg"
placeholder="Type to search..."
startContent={}
+ onChange={(e) => setSearch(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ navigate(`/search?q=${search}`);
+ }
+ }}
+ defaultValue={searchParams.get("q") || ""}
/>
diff --git a/src/pages/channel.tsx b/src/pages/channel.tsx
index d61caae..d143420 100644
--- a/src/pages/channel.tsx
+++ b/src/pages/channel.tsx
@@ -78,11 +78,11 @@ class ChannelPageŠ”omponent extends React.Component<
if (!channel) {
return (
-
+
{[...Array(20).keys()].map((num) => (
))}
-
+
);
} else {
return (
diff --git a/src/pages/search.tsx b/src/pages/search.tsx
new file mode 100644
index 0000000..7bd6a22
--- /dev/null
+++ b/src/pages/search.tsx
@@ -0,0 +1,98 @@
+import { Item } from "piped-api/dist/types";
+import { SkeletonVideoComponent, VideoContainer } from "../components/video";
+import React from "react";
+import { useSearchParams } from "react-router-dom";
+import { ItemComponent } from "../components/item";
+import { Button } from "@nextui-org/react";
+
+export default function SearchPage() {
+ const [searchParams, setSearchParams] = useSearchParams();
+
+ return (
+
+ );
+}
+
+class SearchPageComponent extends React.Component<
+ { search: string; setSearchParams },
+ {
+ items: Item[];
+ corrected: boolean;
+ suggestion: string | null;
+ nextpage: string;
+ search: string;
+ }
+> {
+ async componentDidMount() {
+ const { items, corrected, suggestion, nextpage } =
+ await window.piped_api.search(this.props.search);
+
+ this.setState({
+ items,
+ corrected,
+ suggestion,
+ nextpage,
+ search: this.props.search,
+ });
+ }
+
+ async componentDidUpdate() {
+ if (this.props.search !== this.state.search) {
+ const { items, corrected, suggestion, nextpage } =
+ await window.piped_api.search(this.props.search);
+
+ this.setState({
+ items,
+ corrected,
+ suggestion,
+ nextpage,
+ search: this.props.search,
+ });
+ }
+ }
+
+ render() {
+ if (!this.state) {
+ return null;
+ }
+
+ const { items } = this.state;
+
+ if (items.length === 0) {
+ return (
+
+ {[...Array(20).keys()].map((num) => (
+
+ ))}
+
+ );
+ }
+
+ return (
+ <>
+ {this.state.suggestion && (
+
+ Did you mean
+
+ ?
+
+ )}
+
+ {items.map((video) => (
+
+ ))}
+
+ >
+ );
+ }
+}
diff --git a/src/pages/trending.tsx b/src/pages/trending.tsx
index be8ac8d..4c2423d 100644
--- a/src/pages/trending.tsx
+++ b/src/pages/trending.tsx
@@ -1,5 +1,9 @@
import { Video } from "piped-api/dist/types";
-import { SkeletonVideoComponent, VideoComponent } from "../components/video";
+import {
+ SkeletonVideoComponent,
+ VideoComponent,
+ VideoContainer,
+} from "../components/video";
import React from "react";
export default class TrendingPage extends React.Component {
@@ -8,7 +12,6 @@ export default class TrendingPage extends React.Component {
};
async componentDidMount() {
- console.log("trending");
const trending = await window.piped_api.trending(
localStorage.getItem("region") || "US"
);
@@ -20,20 +23,20 @@ export default class TrendingPage extends React.Component {
if (trending.length === 0) {
return (
-
+
{[...Array(20).keys()].map((num) => (
))}
-
+
);
}
return (
-
+
{trending.map((video) => (
))}
-
+
);
}
}