Skip to content

Commit 08135d6

Browse files
ben221199ben221199
committed
Implement search
1 parent d80aec5 commit 08135d6

8 files changed

Lines changed: 84 additions & 26 deletions

File tree

‎src/Discover.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {JSX} from "react";
33
function Discover(): JSX.Element {
44
return (
55
<>
6+
TODO Discover page
67
</>
78
);
89
}

‎src/Following.tsx‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,7 @@ function Following(): JSX.Element {
3131

3232
return (
3333
<>
34-
<div className="claim-preview-section">
35-
{row1.map((cell: unknown, i: number) => (
36-
<ClaimPreviewTile claim={cell} key={i}/>
37-
))}
38-
</div>
39-
{row2.length > 0 ? <h2>Top Content from Today</h2> : null}
40-
<div className="claim-preview-section">
41-
{row2.map((cell: unknown, i: number) => (
42-
<ClaimPreviewTile claim={cell} key={i}/>
43-
))}
44-
</div>
45-
{row3.length > 0 ? <h2>Latest From @lbry</h2> : null}
46-
<div className="claim-preview-section">
47-
{row3.map((cell: unknown, i: number) => (
48-
<ClaimPreviewTile claim={cell} key={i}/>
49-
))}
50-
</div>
34+
TODO Following page
5135
</>
5236
);
5337
}

‎src/Library.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {JSX} from "react";
33
function Library(): JSX.Element {
44
return (
55
<>
6+
TODO Library page
67
</>
78
);
89
}

‎src/Lists.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {JSX} from "react";
33
function Lists(): JSX.Element {
44
return (
55
<>
6+
TODO Lists page
67
</>
78
);
89
}

‎src/SearchPage.tsx‎

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,66 @@
1-
import {JSX} from "react";
1+
import {JSX, useEffect, useState} from "react";
2+
import {Location, useLocation} from "react-router";
3+
import LBRY from "./LBRY";
4+
import {NOT_TAGS} from "./Constants";
5+
import useDaemonRPC from "./DaemonRPC";
6+
import ClaimPreviewTile from "./components/ClaimPreviewTile";
27

38
function SearchPage(): JSX.Element{
4-
return <div>TODO Search</div>;
9+
const daemonRPC: string = useDaemonRPC();
10+
const location: Location = useLocation();
11+
12+
const query: string|null = new URLSearchParams(location.search).get('q');
13+
14+
const [resolveItem,setResolveItem] = useState(null);
15+
const [channelSearchItems,setChannelSearchItems] = useState([]);
16+
17+
useEffect((): void => {
18+
LBRY.rpc(daemonRPC,'resolve',{urls:['lbry://'+query,'lbry://@'+query],include_purchase_receipt:true},null,import.meta.env.VITE_DAEMON_PROXY==='true').then(json => {
19+
if(json.result['lbry://'+query] && !json.result['lbry://'+query].error){
20+
setResolveItem(json.result['lbry://'+query]);
21+
return;
22+
}
23+
if(json.result['lbry://@'+query] && !json.result['lbry://@'+query].error){
24+
setResolveItem(json.result['lbry://@'+query]);
25+
return;
26+
}
27+
});
28+
},[daemonRPC,query]);
29+
30+
useEffect((): void => {
31+
LBRY.rpc(daemonRPC,'claim_search',{"page_size":20,"claim_type":["channel","stream"],"not_tags":NOT_TAGS,"order_by":["release_time"],"text":query},null,import.meta.env.VITE_DAEMON_PROXY==='true').then(json => {
32+
setChannelSearchItems(json.result.items);
33+
});
34+
},[daemonRPC,query]);
35+
36+
console.log(resolveItem)
37+
38+
return (
39+
<div>
40+
<span>Search results for '<b>{(query)}</b>':</span>
41+
{!resolveItem && channelSearchItems.length===0?(
42+
<div>
43+
<span style={{fontSize: '10px'}}>No items found</span>
44+
</div>
45+
) : null}
46+
{resolveItem ? (
47+
<div>
48+
<h2>Exact match</h2>
49+
<ClaimPreviewTile claim={resolveItem}/>
50+
</div>
51+
) : null}
52+
{channelSearchItems.length>0?(
53+
<div>
54+
<h2>Other results</h2>
55+
<div className="claim-preview-section">
56+
{channelSearchItems.map((cell: unknown, i: number) => (
57+
<ClaimPreviewTile claim={cell} key={i}/>
58+
))}
59+
</div>
60+
</div>
61+
):null}
62+
</div>
63+
);
564
}
665

766
export default SearchPage;

‎src/Tags.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {JSX} from "react";
33
function Tags(): JSX.Element {
44
return (
55
<>
6+
TODO Tags page
67
</>
78
);
89
}

‎src/components/ClaimPreviewTile.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {NavLink} from "react-router";
33

44
function ClaimPreviewTile({claim}): JSX.Element{
55
return (
6-
<NavLink to={`/claim/${claim.canonical_url.replaceAll('lbry://','').replaceAll('#',':')}`} className="claimPreviewTile">
6+
<NavLink to={`/claim/${claim.canonical_url?.replaceAll('lbry://','').replaceAll('#',':')}`} className="claimPreviewTile">
77
<div className="claimPreviewTileThumbnail" style={{backgroundImage:`url(${claim.value?.thumbnail?.url || claim.reposted_claim?.value?.thumbnail?.url})`}}/>
88
<div className="claimPreviewTileTitle">
99
<b>{claim.value?.title || claim.reposted_claim?.value?.title}</b>

‎src/components/Header.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
1-
import {JSX} from "react";
2-
import {Link, NavLink, NavigateFunction, useNavigate} from "react-router";
1+
import {ChangeEvent, JSX, useEffect, useState} from "react";
2+
import {Link, NavLink, NavigateFunction, useNavigate, useLocation, Location, NavigateOptions} from "react-router";
33

44
import useAppHistory from "../AppHistory";
55
import CustomSVG from "./CustomSVG";
66

77
function Header({menuOpen,menuOpenSetter}): JSX.Element {
88
const appHistory: object = useAppHistory();
99

10+
const location: Location = useLocation();
1011
const navigate: NavigateFunction = useNavigate();
1112

13+
const [query,setQuery] = useState('');
14+
useEffect((): void => {
15+
setQuery(new URLSearchParams(location.search).get('q') || '');
16+
}, [location.search]);
17+
1218
function handleSubmitSearch(event): boolean{
1319
event.preventDefault();
1420
const input: HTMLInputElement = event.target.elements[0];
15-
navigate(`/search?q=${encodeURIComponent(input.value)}`,{});
21+
const options: NavigateOptions = {
22+
state: {
23+
q: input.value,
24+
},
25+
};
26+
navigate(`/search?q=${encodeURIComponent(input.value)}`,options);
1627
return false;
1728
}
1829

@@ -84,7 +95,7 @@ function Header({menuOpen,menuOpenSetter}): JSX.Element {
8495
<div style={{display: 'inline-block', height: '40px'}}>
8596
<form onSubmit={handleSubmitSearch} style={{height:'100%',marginRight:'10px',position:'relative'}}>
8697
<CustomSVG icon="search" style={{fill:'transparent',height:'100%',left:'10px',position:'absolute',stroke:'white',strokeWidth:'2px',verticalAlign:'middle',width:'16px'}} viewBox="0 0 24 24"/>
87-
<input placeholder="Search" style={{
98+
<input onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)} placeholder="Search" style={{
8899
backgroundColor: 'rgba(45, 45, 45, 0.7)',
89100
border: 'none',
90101
borderRadius: '6px',
@@ -95,7 +106,7 @@ function Header({menuOpen,menuOpenSetter}): JSX.Element {
95106
paddingRight: '10px',
96107
verticalAlign:'middle',
97108
width:'480px',
98-
}}/>
109+
}} value={query}/>
99110
</form>
100111
</div>
101112
<NavLink className="hoverHeaderButtonFill" to={null} style={{
@@ -154,7 +165,7 @@ function Header({menuOpen,menuOpenSetter}): JSX.Element {
154165
verticalAlign: 'middle',
155166
width: '40px'
156167
}}>
157-
<CustomSVG icon="account" viewBox="0 0 24 24" style={{height: '18px', padding: '11px 0'}}/>
168+
<CustomSVG icon="account" viewBox="0 0 24 24" style={{fill:'transparent',height: '18px',padding: '11px 0',strokeWidth:'2px'}}/>
158169
</Link>
159170
</div>
160171
</div>

0 commit comments

Comments
 (0)