Skip to content

Commit 20d2949

Browse files
Roey7Roey7
committed
/search?query=%s works
1 parent 81f1187 commit 20d2949

File tree

3 files changed

+177
-27
lines changed

3 files changed

+177
-27
lines changed

‎ui/package-lock.json‎

Lines changed: 126 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
"react-icons": "^4.8.0",
1818
"react-image": "^4.1.0",
1919
"react-modal": "^3.16.1",
20+
"react-router": "^6.10.0",
21+
"react-router-dom": "^5.2.0",
2022
"react-scripts": "5.0.1",
2123
"react-select": "^5.7.0",
2224
"react-spinners": "^0.13.8",

‎ui/src/App.tsx‎

Lines changed: 49 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ export interface AppState {
3131
searchDuration: number
3232
dataSourceTypes: DataSourceType[]
3333
dataSourceTypesDict: { [key: string]: DataSourceType }
34+
didListedDataSources: boolean
35+
didListedConnectedDataSources: boolean
3436
connectedDataSources: ConnectedDataSource[]
3537
isLoading: boolean
3638
isNoResults: boolean
@@ -43,6 +45,7 @@ export interface AppState {
4345
docsLeftToIndex: number
4446
docsInIndexing: number
4547
lastServerDownTimestamp: number
48+
showResultsPage: boolean
4649
}
4750

4851
export interface ServerStatus {
@@ -86,8 +89,10 @@ export default class App extends React.Component <{}, AppState>{
8689
query: "",
8790
results: [],
8891
dataSourceTypes: [],
92+
didListedDataSources: false,
8993
dataSourceTypesDict: {},
9094
connectedDataSources: [],
95+
didListedConnectedDataSources: false,
9196
isLoading: false,
9297
isNoResults: false,
9398
isModalOpen: false,
@@ -100,6 +105,7 @@ export default class App extends React.Component <{}, AppState>{
100105
docsInIndexing: 0,
101106
searchDuration: 0,
102107
lastServerDownTimestamp: 0,
108+
showResultsPage: false
103109
}
104110

105111
this.openModal = this.openModal.bind(this);
@@ -124,6 +130,17 @@ export default class App extends React.Component <{}, AppState>{
124130
this.listConnectedDataSources();
125131
this.listDataSourceTypes();
126132
}
133+
134+
this.handleQueryInUrl();
135+
}
136+
137+
handleQueryInUrl() {
138+
const path = window.location.pathname;
139+
const query = new URLSearchParams(window.location.search).get('query');
140+
if (path === '/search' && query !== null && query !== "") {
141+
this.setState({query: query, showResultsPage: true});
142+
this.search(query);
143+
}
127144
}
128145

129146
async listDataSourceTypes() {
@@ -133,15 +150,15 @@ export default class App extends React.Component <{}, AppState>{
133150
response.data.forEach((dataSourceType) => {
134151
dataSourceTypesDict[dataSourceType.name] = dataSourceType;
135152
});
136-
this.setState({ dataSourceTypes: response.data, dataSourceTypesDict: dataSourceTypesDict });
153+
this.setState({ dataSourceTypes: response.data, dataSourceTypesDict: dataSourceTypesDict, didListedDataSources: true });
137154
} catch (error) {
138155
}
139156
}
140157

141158
async listConnectedDataSources() {
142159
try {
143160
const response = await api.get<ConnectedDataSource[]>('/data-sources/connected');
144-
this.setState({ connectedDataSources: response.data });
161+
this.setState({ connectedDataSources: response.data, didListedConnectedDataSources: true });
145162
} catch (error) {
146163
}
147164
}
@@ -308,7 +325,7 @@ export default class App extends React.Component <{}, AppState>{
308325
</div>
309326
}
310327
{
311-
this.state.connectedDataSources.length === 0 && this.state.didPassDiscord &&
328+
this.state.didListedConnectedDataSources && this.state.connectedDataSources.length === 0 && this.state.didPassDiscord &&
312329
<div className="absolute mx-auto left-0 right-0 w-fit z-20 top-6">
313330
<div className="text-xs bg-[#100101] border-[#a61616] border-[.8px] rounded-full inline-block px-3 py-1">
314331
<div className="text-[#E4E4E4] font-medium font-inter text-sm flex flex-row justify-center items-center">
@@ -358,7 +375,7 @@ export default class App extends React.Component <{}, AppState>{
358375

359376
</div>
360377
}
361-
<div className={"w-[98vw] z-10 filter" + (this.state.isModalOpen || this.state.connectedDataSources.length === 0 ? ' filter blur-sm' : '')}>
378+
<div className={"w-[98vw] z-10 filter" + (this.state.isModalOpen || (this.state.didListedConnectedDataSources && this.state.connectedDataSources.length === 0) ? ' filter blur-sm' : '')}>
362379
<Modal
363380
isOpen={this.state.isModalOpen}
364381
onRequestClose={this.closeModal}
@@ -371,7 +388,7 @@ export default class App extends React.Component <{}, AppState>{
371388

372389
{/* front search page*/}
373390
{
374-
this.state.results.length === 0 &&
391+
!this.state.showResultsPage &&
375392
<div className='relative flex flex-col items-center top-40 mx-auto w-full'>
376393
<h1 className='flex flex-row items-center text-7xl text-center text-white m-10'>
377394
<GiSocks className={('text-7xl text-center mt-4 mr-7' + this.getSocksColor())}></GiSocks>
@@ -387,16 +404,12 @@ export default class App extends React.Component <{}, AppState>{
387404
<span className="font-bold text-[15px] text-[#B3B3B3]">Search</span>
388405
<img alt="enter" className="ml-2" src={EnterImage}></img>
389406
</button>
390-
{ this.state.isNoResults &&
391-
<span className="text-[#D2D2D2] font-poppins font-medium text-base leading-[22px] mt-3">
392-
</span>
393-
}
394407
</div>
395408
}
396409

397410
{/* results page */}
398411
{
399-
this.state.results.length > 0 &&
412+
this.state.showResultsPage &&
400413
<div className="relative flex flex-row top-20 left-5 w-full sm:w-11/12">
401414
<span className='flex flex-row items-start text-3xl text-center text-white m-10 mx-7 mt-0'>
402415
<GiSocks className='text-4xl text-[#A78BF6] mx-3 my-1'></GiSocks>
@@ -405,17 +418,23 @@ export default class App extends React.Component <{}, AppState>{
405418
<div className="flex flex-col items-start w-10/12 sm:w-full">
406419
<SearchBar widthPercentage={40} isDisabled={this.state.isServerDown} query={this.state.query} isLoading={this.state.isLoading} showReset={this.state.results.length > 0}
407420
onSearch={this.search} onQueryChange={this.handleQueryChange} onClear={this.clear} showSuggestions={true} />
408-
<span className="text-[#D2D2D2] font-poppins font-medium text-base leading-[22px] mt-3">
409-
{this.state.results.length} Results ({this.state.searchDuration} seconds)
410-
</span>
411-
<div className='w-[100vw] 2xl:w-8/12 divide-y divide-[#3B3B3B] divide-y-[0.7px]'>
412-
{this.state.results.map((result, index) => {
413-
return (
414-
<SearchResult key={index} resultDetails={result} dataSourceType={this.state.dataSourceTypesDict[result.data_source]} />
415-
)
416-
}
417-
)}
418-
</div>
421+
{
422+
!this.state.isLoading &&
423+
<span className="text-[#D2D2D2] font-poppins font-medium text-base leading-[22px] mt-3">
424+
{this.state.results.length} Results ({this.state.searchDuration} seconds)
425+
</span>
426+
}
427+
{
428+
this.state.dataSourceTypes.length > 0 &&
429+
<div className='w-[100vw] 2xl:w-8/12 divide-y divide-[#3B3B3B] divide-y-[0.7px]'>
430+
{this.state.results.map((result, index) => {
431+
return (
432+
<SearchResult key={index} resultDetails={result} dataSourceType={this.state.dataSourceTypesDict[result.data_source]} />
433+
)
434+
}
435+
)}
436+
</div>
437+
}
419438
</div>
420439
</div>
421440
}
@@ -433,14 +452,17 @@ export default class App extends React.Component <{}, AppState>{
433452
}
434453

435454
clear = () => {
436-
this.setState({query: "", results: []});
455+
this.setState({query: ""});
437456
}
438457

439-
search = () => {
440-
if (this.state.query === "") {
458+
search = (query?: string) => {
459+
if (!query && this.state.query === "") {
460+
console.log("empty query");
441461
return;
442462
}
443463

464+
let searchQuery = query ? query : this.state.query;
465+
444466
this.setState({isLoading: true});
445467
let start = new Date().getTime();
446468

@@ -449,7 +471,7 @@ export default class App extends React.Component <{}, AppState>{
449471
try {
450472
api.get<SearchResultDetails[]>("/search", {
451473
params: {
452-
query: this.state.query
474+
query: searchQuery
453475
},
454476
headers: {
455477
uuid: localStorage.getItem('uuid')
@@ -460,9 +482,9 @@ export default class App extends React.Component <{}, AppState>{
460482
let end = new Date().getTime();
461483
let duartionSeconds = (end - start) / 1000;
462484
this.setState({results: response.data, isLoading: false, searchDuration: duartionSeconds,
463-
isNoResults: response.data.length === 0
485+
showResultsPage: response.data.length > 0,
464486
});
465-
addToSearchHistory(this.state.query);
487+
addToSearchHistory(searchQuery);
466488

467489
if(response.data.length === 0) {
468490
toast.warn("No results found");

0 commit comments

Comments
 (0)