mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-22 12:21:13 +00:00
* Adding listing_type to search. #143 * Adding async community searching. Fixes #262 * Some search additions. - Adding an async community picker. - Adding community_id to search page. * Adding creator search. * Accidentally removed line.
This commit is contained in:
Dessalines
GitHub
parent
1bd2473cdc
commit
55e53582aa
13 changed files with 461 additions and 64 deletions
|
|
@ -68,7 +68,7 @@
|
|||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"husky": "^6.0.0",
|
||||
"iso-639-1": "^2.1.9",
|
||||
"lemmy-js-client": "0.11.0-rc.6",
|
||||
"lemmy-js-client": "0.11.0-rc.9",
|
||||
"lint-staged": "^10.5.4",
|
||||
"mini-css-extract-plugin": "^1.4.1",
|
||||
"node-fetch": "^2.6.1",
|
||||
|
|
|
|||
|
|
@ -273,7 +273,7 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
handleSearchSubmit(i: Communities) {
|
||||
const searchParamEncoded = encodeURIComponent(i.state.searchText);
|
||||
i.context.router.history.push(
|
||||
`/search/q/${searchParamEncoded}/type/Communities/sort/TopAll/page/1`
|
||||
`/search/q/${searchParamEncoded}/type/Communities/sort/TopAll/listing_type/All/community_id/0/creator_id/0/page/1`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { HtmlTags } from "./html-tags";
|
|||
import { Spinner } from "./icon";
|
||||
import {
|
||||
authField,
|
||||
fetchLimit,
|
||||
isBrowser,
|
||||
setIsoData,
|
||||
setOptionalAuth,
|
||||
|
|
@ -24,6 +25,8 @@ import {
|
|||
SortType,
|
||||
ListingType,
|
||||
PostView,
|
||||
GetCommunity,
|
||||
GetCommunityResponse,
|
||||
} from "lemmy-js-client";
|
||||
import { i18n } from "../i18next";
|
||||
import { InitialFetchRequest, PostFormParams } from "shared/interfaces";
|
||||
|
|
@ -66,16 +69,28 @@ export class CreatePost extends Component<any, CreatePostState> {
|
|||
}
|
||||
|
||||
refetch() {
|
||||
if (this.params.community_id) {
|
||||
let form: GetCommunity = {
|
||||
id: this.params.community_id,
|
||||
};
|
||||
WebSocketService.Instance.send(wsClient.getCommunity(form));
|
||||
} else if (this.params.community_name) {
|
||||
let form: GetCommunity = {
|
||||
name: this.params.community_name,
|
||||
};
|
||||
WebSocketService.Instance.send(wsClient.getCommunity(form));
|
||||
} else {
|
||||
let listCommunitiesForm: ListCommunities = {
|
||||
type_: ListingType.All,
|
||||
sort: SortType.TopAll,
|
||||
limit: 9999,
|
||||
limit: fetchLimit,
|
||||
auth: authField(false),
|
||||
};
|
||||
WebSocketService.Instance.send(
|
||||
wsClient.listCommunities(listCommunitiesForm)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (isBrowser()) {
|
||||
|
|
@ -163,7 +178,7 @@ export class CreatePost extends Component<any, CreatePostState> {
|
|||
let listCommunitiesForm: ListCommunities = {
|
||||
type_: ListingType.All,
|
||||
sort: SortType.TopAll,
|
||||
limit: 9999,
|
||||
limit: fetchLimit,
|
||||
};
|
||||
setOptionalAuth(listCommunitiesForm, req.auth);
|
||||
return [req.client.listCommunities(listCommunitiesForm)];
|
||||
|
|
@ -180,6 +195,11 @@ export class CreatePost extends Component<any, CreatePostState> {
|
|||
this.state.communities = data.communities;
|
||||
this.state.loading = false;
|
||||
this.setState(this.state);
|
||||
} else if (op == UserOperation.GetCommunity) {
|
||||
let data = wsJsonToRes<GetCommunityResponse>(msg).data;
|
||||
this.state.communities = [data.community_view];
|
||||
this.state.loading = false;
|
||||
this.setState(this.state);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ import {
|
|||
authField,
|
||||
saveScrollPosition,
|
||||
restoreScrollPosition,
|
||||
showLocal,
|
||||
} from "../utils";
|
||||
import { i18n } from "../i18next";
|
||||
import { T } from "inferno-i18next";
|
||||
|
|
@ -588,7 +589,7 @@ export class Main extends Component<any, MainState> {
|
|||
<span class="mr-3">
|
||||
<ListingTypeSelect
|
||||
type_={this.state.listingType}
|
||||
showLocal={this.showLocal}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
onChange={this.handleListingTypeChange}
|
||||
/>
|
||||
</span>
|
||||
|
|
@ -650,10 +651,6 @@ export class Main extends Component<any, MainState> {
|
|||
);
|
||||
}
|
||||
|
||||
get showLocal(): boolean {
|
||||
return this.isoData.site_res.federated_instances?.linked.length > 0;
|
||||
}
|
||||
|
||||
get canAdmin(): boolean {
|
||||
return (
|
||||
UserService.Instance.localUserView &&
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
} else {
|
||||
const searchParamEncoded = encodeURIComponent(searchParam);
|
||||
this.context.router.history.push(
|
||||
`/search/q/${searchParamEncoded}/type/All/sort/TopAll/page/1`
|
||||
`/search/q/${searchParamEncoded}/type/All/sort/TopAll/listing_type/All/community_id/0/creator_id/0/page/1`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ import {
|
|||
setOptionalAuth,
|
||||
saveScrollPosition,
|
||||
restoreScrollPosition,
|
||||
showLocal,
|
||||
} from "../utils";
|
||||
import { PersonListing } from "./person-listing";
|
||||
import { HtmlTags } from "./html-tags";
|
||||
|
|
@ -655,9 +656,7 @@ export class Person extends Component<any, PersonState> {
|
|||
this.state.saveUserSettingsForm.default_listing_type
|
||||
]
|
||||
}
|
||||
showLocal={
|
||||
this.state.siteRes.federated_instances?.linked.length > 0
|
||||
}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
onChange={this.handleUserSettingsListingTypeChange}
|
||||
/>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import {
|
|||
Search,
|
||||
SearchType,
|
||||
SearchResponse,
|
||||
ListingType,
|
||||
} from "lemmy-js-client";
|
||||
import { WebSocketService, UserService } from "../services";
|
||||
import { PostFormParams } from "../interfaces";
|
||||
|
|
@ -36,6 +37,9 @@ import {
|
|||
wsUserOp,
|
||||
wsClient,
|
||||
authField,
|
||||
communityToChoice,
|
||||
fetchCommunities,
|
||||
choicesConfig,
|
||||
} from "../utils";
|
||||
import autosize from "autosize";
|
||||
|
||||
|
|
@ -406,6 +410,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
q: this.state.postForm.url,
|
||||
type_: SearchType.Url,
|
||||
sort: SortType.TopAll,
|
||||
listing_type: ListingType.All,
|
||||
page: 1,
|
||||
limit: 6,
|
||||
auth: authField(false),
|
||||
|
|
@ -435,6 +440,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
q: this.state.postForm.name,
|
||||
type_: SearchType.Posts,
|
||||
sort: SortType.TopAll,
|
||||
listing_type: ListingType.All,
|
||||
community_id: this.state.postForm.community_id,
|
||||
page: 1,
|
||||
limit: 6,
|
||||
|
|
@ -536,37 +542,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
if (isBrowser()) {
|
||||
let selectId: any = document.getElementById("post-community");
|
||||
if (selectId) {
|
||||
this.choices = new Choices(selectId, {
|
||||
shouldSort: false,
|
||||
classNames: {
|
||||
containerOuter: "choices",
|
||||
containerInner: "choices__inner bg-light border-0",
|
||||
input: "form-control",
|
||||
inputCloned: "choices__input--cloned",
|
||||
list: "choices__list",
|
||||
listItems: "choices__list--multiple",
|
||||
listSingle: "choices__list--single",
|
||||
listDropdown: "choices__list--dropdown",
|
||||
item: "choices__item bg-light",
|
||||
itemSelectable: "choices__item--selectable",
|
||||
itemDisabled: "choices__item--disabled",
|
||||
itemChoice: "choices__item--choice",
|
||||
placeholder: "choices__placeholder",
|
||||
group: "choices__group",
|
||||
groupHeading: "choices__heading",
|
||||
button: "choices__button",
|
||||
activeState: "is-active",
|
||||
focusState: "is-focused",
|
||||
openState: "is-open",
|
||||
disabledState: "is-disabled",
|
||||
highlightedState: "text-info",
|
||||
selectedState: "text-info",
|
||||
flippedState: "is-flipped",
|
||||
loadingState: "is-loading",
|
||||
noResults: "has-no-results",
|
||||
noChoices: "has-no-choices",
|
||||
},
|
||||
});
|
||||
this.choices = new Choices(selectId, choicesConfig);
|
||||
this.choices.passedElement.element.addEventListener(
|
||||
"choice",
|
||||
(e: any) => {
|
||||
|
|
@ -575,6 +551,20 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
},
|
||||
false
|
||||
);
|
||||
this.choices.passedElement.element.addEventListener(
|
||||
"search",
|
||||
debounce(async (e: any) => {
|
||||
let communities = (await fetchCommunities(e.detail.value))
|
||||
.communities;
|
||||
this.choices.setChoices(
|
||||
communities.map(cv => communityToChoice(cv)),
|
||||
"value",
|
||||
"label",
|
||||
true
|
||||
);
|
||||
}, 400),
|
||||
false
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import {
|
|||
SearchResponse,
|
||||
GetSiteResponse,
|
||||
GetCommunityResponse,
|
||||
ListingType,
|
||||
} from "lemmy-js-client";
|
||||
import {
|
||||
CommentSortType,
|
||||
|
|
@ -132,6 +133,7 @@ export class Post extends Component<any, PostState> {
|
|||
q: this.state.postRes.post_view.post.url,
|
||||
type_: SearchType.Url,
|
||||
sort: SortType.TopAll,
|
||||
listing_type: ListingType.All,
|
||||
page: 1,
|
||||
limit: 6,
|
||||
auth: authField(false),
|
||||
|
|
|
|||
|
|
@ -13,6 +13,11 @@ import {
|
|||
PostResponse,
|
||||
CommentResponse,
|
||||
Site,
|
||||
ListingType,
|
||||
ListCommunities,
|
||||
ListCommunitiesResponse,
|
||||
GetCommunity,
|
||||
GetPersonDetails,
|
||||
} from "lemmy-js-client";
|
||||
import { WebSocketService } from "../services";
|
||||
import {
|
||||
|
|
@ -32,6 +37,17 @@ import {
|
|||
setOptionalAuth,
|
||||
saveScrollPosition,
|
||||
restoreScrollPosition,
|
||||
routeListingTypeToEnum,
|
||||
showLocal,
|
||||
isBrowser,
|
||||
choicesConfig,
|
||||
debounce,
|
||||
fetchCommunities,
|
||||
communityToChoice,
|
||||
hostname,
|
||||
fetchUsers,
|
||||
personToChoice,
|
||||
capitalizeFirstLetter,
|
||||
} from "../utils";
|
||||
import { PostListing } from "./post-listing";
|
||||
import { HtmlTags } from "./html-tags";
|
||||
|
|
@ -39,14 +55,23 @@ import { Spinner } from "./icon";
|
|||
import { PersonListing } from "./person-listing";
|
||||
import { CommunityLink } from "./community-link";
|
||||
import { SortSelect } from "./sort-select";
|
||||
import { ListingTypeSelect } from "./listing-type-select";
|
||||
import { CommentNodes } from "./comment-nodes";
|
||||
import { i18n } from "../i18next";
|
||||
import { InitialFetchRequest } from "shared/interfaces";
|
||||
|
||||
var Choices;
|
||||
if (isBrowser()) {
|
||||
Choices = require("choices.js");
|
||||
}
|
||||
|
||||
interface SearchProps {
|
||||
q: string;
|
||||
type_: SearchType;
|
||||
sort: SortType;
|
||||
listingType: ListingType;
|
||||
communityId: number;
|
||||
creatorId: number;
|
||||
page: number;
|
||||
}
|
||||
|
||||
|
|
@ -54,8 +79,13 @@ interface SearchState {
|
|||
q: string;
|
||||
type_: SearchType;
|
||||
sort: SortType;
|
||||
listingType: ListingType;
|
||||
communityId: number;
|
||||
creatorId: number;
|
||||
page: number;
|
||||
searchResponse: SearchResponse;
|
||||
communities: CommunityView[];
|
||||
creator?: PersonViewSafe;
|
||||
loading: boolean;
|
||||
site: Site;
|
||||
searchText: string;
|
||||
|
|
@ -65,18 +95,30 @@ interface UrlParams {
|
|||
q?: string;
|
||||
type_?: SearchType;
|
||||
sort?: SortType;
|
||||
listingType?: ListingType;
|
||||
communityId?: number;
|
||||
creatorId?: number;
|
||||
page?: number;
|
||||
}
|
||||
|
||||
export class Search extends Component<any, SearchState> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private communityChoices: any;
|
||||
private creatorChoices: any;
|
||||
private subscription: Subscription;
|
||||
private emptyState: SearchState = {
|
||||
q: Search.getSearchQueryFromProps(this.props.match.params.q),
|
||||
type_: Search.getSearchTypeFromProps(this.props.match.params.type),
|
||||
sort: Search.getSortTypeFromProps(this.props.match.params.sort),
|
||||
listingType: Search.getListingTypeFromProps(
|
||||
this.props.match.params.listing_type
|
||||
),
|
||||
page: Search.getPageFromProps(this.props.match.params.page),
|
||||
searchText: Search.getSearchQueryFromProps(this.props.match.params.q),
|
||||
communityId: Search.getCommunityIdFromProps(
|
||||
this.props.match.params.community_id
|
||||
),
|
||||
creatorId: Search.getCreatorIdFromProps(this.props.match.params.creator_id),
|
||||
searchResponse: {
|
||||
type_: null,
|
||||
posts: [],
|
||||
|
|
@ -86,6 +128,7 @@ export class Search extends Component<any, SearchState> {
|
|||
},
|
||||
loading: true,
|
||||
site: this.isoData.site_res.site_view.site,
|
||||
communities: [],
|
||||
};
|
||||
|
||||
static getSearchQueryFromProps(q: string): string {
|
||||
|
|
@ -100,6 +143,18 @@ export class Search extends Component<any, SearchState> {
|
|||
return sort ? routeSortTypeToEnum(sort) : SortType.TopAll;
|
||||
}
|
||||
|
||||
static getListingTypeFromProps(listingType: string): ListingType {
|
||||
return listingType ? routeListingTypeToEnum(listingType) : ListingType.All;
|
||||
}
|
||||
|
||||
static getCommunityIdFromProps(id: string): number {
|
||||
return id ? Number(id) : 0;
|
||||
}
|
||||
|
||||
static getCreatorIdFromProps(id: string): number {
|
||||
return id ? Number(id) : 0;
|
||||
}
|
||||
|
||||
static getPageFromProps(page: string): number {
|
||||
return page ? Number(page) : 1;
|
||||
}
|
||||
|
|
@ -109,18 +164,33 @@ export class Search extends Component<any, SearchState> {
|
|||
|
||||
this.state = this.emptyState;
|
||||
this.handleSortChange = this.handleSortChange.bind(this);
|
||||
this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
|
||||
|
||||
this.parseMessage = this.parseMessage.bind(this);
|
||||
this.subscription = wsSubscribe(this.parseMessage);
|
||||
|
||||
// Only fetch the data if coming from another route
|
||||
if (this.state.q != "") {
|
||||
if (this.isoData.path == this.context.router.route.match.url) {
|
||||
this.state.searchResponse = this.isoData.routeData[0];
|
||||
let singleOrMultipleCommunities = this.isoData.routeData[0];
|
||||
if (singleOrMultipleCommunities.communities) {
|
||||
this.state.communities = this.isoData.routeData[0].communities;
|
||||
} else {
|
||||
this.state.communities = [this.isoData.routeData[0].community_view];
|
||||
}
|
||||
|
||||
let creator = this.isoData.routeData[1];
|
||||
if (creator?.person_view) {
|
||||
this.state.creator = this.isoData.routeData[1].person_view;
|
||||
}
|
||||
if (this.state.q != "") {
|
||||
this.state.searchResponse = this.isoData.routeData[2];
|
||||
this.state.loading = false;
|
||||
} else {
|
||||
this.search();
|
||||
}
|
||||
} else {
|
||||
this.fetchCommunities();
|
||||
this.search();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -129,26 +199,85 @@ export class Search extends Component<any, SearchState> {
|
|||
saveScrollPosition(this.context);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setupCommunityFilter();
|
||||
this.setupCreatorFilter();
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props: any): SearchProps {
|
||||
return {
|
||||
q: Search.getSearchQueryFromProps(props.match.params.q),
|
||||
type_: Search.getSearchTypeFromProps(props.match.params.type),
|
||||
sort: Search.getSortTypeFromProps(props.match.params.sort),
|
||||
listingType: Search.getListingTypeFromProps(
|
||||
props.match.params.listing_type
|
||||
),
|
||||
communityId: Search.getCommunityIdFromProps(
|
||||
props.match.params.community_id
|
||||
),
|
||||
creatorId: Search.getCreatorIdFromProps(props.match.params.creator_id),
|
||||
page: Search.getPageFromProps(props.match.params.page),
|
||||
};
|
||||
}
|
||||
|
||||
fetchCommunities() {
|
||||
let listCommunitiesForm: ListCommunities = {
|
||||
type_: ListingType.All,
|
||||
sort: SortType.TopAll,
|
||||
limit: fetchLimit,
|
||||
auth: authField(false),
|
||||
};
|
||||
WebSocketService.Instance.send(
|
||||
wsClient.listCommunities(listCommunitiesForm)
|
||||
);
|
||||
}
|
||||
|
||||
static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
|
||||
let pathSplit = req.path.split("/");
|
||||
let promises: Promise<any>[] = [];
|
||||
|
||||
let communityId = this.getCommunityIdFromProps(pathSplit[11]);
|
||||
if (communityId !== 0) {
|
||||
let getCommunityForm: GetCommunity = {
|
||||
id: communityId,
|
||||
};
|
||||
setOptionalAuth(getCommunityForm, req.auth);
|
||||
promises.push(req.client.getCommunity(getCommunityForm));
|
||||
} else {
|
||||
let listCommunitiesForm: ListCommunities = {
|
||||
type_: ListingType.All,
|
||||
sort: SortType.TopAll,
|
||||
limit: fetchLimit,
|
||||
};
|
||||
setOptionalAuth(listCommunitiesForm, req.auth);
|
||||
promises.push(req.client.listCommunities(listCommunitiesForm));
|
||||
}
|
||||
|
||||
let creatorId = this.getCreatorIdFromProps(pathSplit[13]);
|
||||
if (creatorId !== 0) {
|
||||
let getCreatorForm: GetPersonDetails = {
|
||||
person_id: creatorId,
|
||||
};
|
||||
setOptionalAuth(getCreatorForm, req.auth);
|
||||
promises.push(req.client.getPersonDetails(getCreatorForm));
|
||||
} else {
|
||||
promises.push(Promise.resolve());
|
||||
}
|
||||
|
||||
let form: SearchForm = {
|
||||
q: this.getSearchQueryFromProps(pathSplit[3]),
|
||||
type_: this.getSearchTypeFromProps(pathSplit[5]),
|
||||
sort: this.getSortTypeFromProps(pathSplit[7]),
|
||||
page: this.getPageFromProps(pathSplit[9]),
|
||||
listing_type: this.getListingTypeFromProps(pathSplit[9]),
|
||||
page: this.getPageFromProps(pathSplit[15]),
|
||||
limit: fetchLimit,
|
||||
};
|
||||
if (communityId !== 0) {
|
||||
form.community_id = communityId;
|
||||
}
|
||||
if (creatorId !== 0) {
|
||||
form.creator_id = creatorId;
|
||||
}
|
||||
setOptionalAuth(form, req.auth);
|
||||
|
||||
if (form.q != "") {
|
||||
|
|
@ -163,6 +292,9 @@ export class Search extends Component<any, SearchState> {
|
|||
lastState.q !== this.state.q ||
|
||||
lastState.type_ !== this.state.type_ ||
|
||||
lastState.sort !== this.state.sort ||
|
||||
lastState.listingType !== this.state.listingType ||
|
||||
lastState.communityId !== this.state.communityId ||
|
||||
lastState.creatorId !== this.state.creatorId ||
|
||||
lastState.page !== this.state.page
|
||||
) {
|
||||
this.setState({ loading: true, searchText: this.state.q });
|
||||
|
|
@ -242,6 +374,13 @@ export class Search extends Component<any, SearchState> {
|
|||
</option>
|
||||
<option value={SearchType.Users}>{i18n.t("users")}</option>
|
||||
</select>
|
||||
<span class="ml-2">
|
||||
<ListingTypeSelect
|
||||
type_={this.state.listingType}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
onChange={this.handleListingTypeChange}
|
||||
/>
|
||||
</span>
|
||||
<span class="ml-2">
|
||||
<SortSelect
|
||||
sort={this.state.sort}
|
||||
|
|
@ -250,6 +389,10 @@ export class Search extends Component<any, SearchState> {
|
|||
hideMostComments
|
||||
/>
|
||||
</span>
|
||||
<div class="form-row">
|
||||
{this.state.communities.length > 0 && this.communityFilter()}
|
||||
{this.creatorFilter()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -413,6 +556,60 @@ export class Search extends Component<any, SearchState> {
|
|||
);
|
||||
}
|
||||
|
||||
communityFilter() {
|
||||
return (
|
||||
<div class="form-group col-sm-6">
|
||||
<label class="col-form-label" htmlFor="community-filter">
|
||||
{i18n.t("community")}
|
||||
</label>
|
||||
<div>
|
||||
<select
|
||||
class="form-control"
|
||||
id="community-filter"
|
||||
value={this.state.communityId}
|
||||
>
|
||||
<option value="0">{i18n.t("all")}</option>
|
||||
{this.state.communities.map(cv => (
|
||||
<option value={cv.community.id}>
|
||||
{cv.community.local
|
||||
? cv.community.name
|
||||
: `${hostname(cv.community.actor_id)}/${cv.community.name}`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
creatorFilter() {
|
||||
return (
|
||||
<div class="form-group col-sm-6">
|
||||
<label class="col-form-label" htmlFor="creator-filter">
|
||||
{capitalizeFirstLetter(i18n.t("creator"))}
|
||||
</label>
|
||||
<div>
|
||||
<select
|
||||
class="form-control"
|
||||
id="creator-filter"
|
||||
value={this.state.creatorId}
|
||||
>
|
||||
<option value="0">{i18n.t("all")}</option>
|
||||
{this.state.creator && (
|
||||
<option value={this.state.creator.person.id}>
|
||||
{this.state.creator.person.local
|
||||
? this.state.creator.person.name
|
||||
: `${hostname(this.state.creator.person.actor_id)}/${
|
||||
this.state.creator.person.name
|
||||
}`}
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
paginator() {
|
||||
return (
|
||||
<div class="mt-2">
|
||||
|
|
@ -460,16 +657,76 @@ export class Search extends Component<any, SearchState> {
|
|||
q: this.state.q,
|
||||
type_: this.state.type_,
|
||||
sort: this.state.sort,
|
||||
listing_type: this.state.listingType,
|
||||
page: this.state.page,
|
||||
limit: fetchLimit,
|
||||
auth: authField(false),
|
||||
};
|
||||
if (this.state.communityId !== 0) {
|
||||
form.community_id = this.state.communityId;
|
||||
}
|
||||
if (this.state.creatorId !== 0) {
|
||||
form.creator_id = this.state.creatorId;
|
||||
}
|
||||
|
||||
if (this.state.q != "") {
|
||||
WebSocketService.Instance.send(wsClient.search(form));
|
||||
}
|
||||
}
|
||||
|
||||
setupCommunityFilter() {
|
||||
if (isBrowser()) {
|
||||
let selectId: any = document.getElementById("community-filter");
|
||||
if (selectId) {
|
||||
this.communityChoices = new Choices(selectId, choicesConfig);
|
||||
this.communityChoices.passedElement.element.addEventListener(
|
||||
"choice",
|
||||
(e: any) => {
|
||||
this.handleCommunityFilterChange(Number(e.detail.choice.value));
|
||||
},
|
||||
false
|
||||
);
|
||||
this.communityChoices.passedElement.element.addEventListener(
|
||||
"search",
|
||||
debounce(async (e: any) => {
|
||||
let communities = (await fetchCommunities(e.detail.value))
|
||||
.communities;
|
||||
let choices = communities.map(cv => communityToChoice(cv));
|
||||
choices.unshift({ value: "0", label: i18n.t("all") });
|
||||
this.communityChoices.setChoices(choices, "value", "label", true);
|
||||
}, 400),
|
||||
false
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setupCreatorFilter() {
|
||||
if (isBrowser()) {
|
||||
let selectId: any = document.getElementById("creator-filter");
|
||||
if (selectId) {
|
||||
this.creatorChoices = new Choices(selectId, choicesConfig);
|
||||
this.creatorChoices.passedElement.element.addEventListener(
|
||||
"choice",
|
||||
(e: any) => {
|
||||
this.handleCreatorFilterChange(Number(e.detail.choice.value));
|
||||
},
|
||||
false
|
||||
);
|
||||
this.creatorChoices.passedElement.element.addEventListener(
|
||||
"search",
|
||||
debounce(async (e: any) => {
|
||||
let creators = (await fetchUsers(e.detail.value)).users;
|
||||
let choices = creators.map(pvs => personToChoice(pvs));
|
||||
choices.unshift({ value: "0", label: i18n.t("all") });
|
||||
this.creatorChoices.setChoices(choices, "value", "label", true);
|
||||
}, 400),
|
||||
false
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleSortChange(val: SortType) {
|
||||
this.updateUrl({ sort: val, page: 1 });
|
||||
}
|
||||
|
|
@ -481,11 +738,35 @@ export class Search extends Component<any, SearchState> {
|
|||
});
|
||||
}
|
||||
|
||||
handleListingTypeChange(val: ListingType) {
|
||||
this.updateUrl({
|
||||
listingType: val,
|
||||
page: 1,
|
||||
});
|
||||
}
|
||||
|
||||
handleCommunityFilterChange(communityId: number) {
|
||||
this.updateUrl({
|
||||
communityId,
|
||||
page: 1,
|
||||
});
|
||||
}
|
||||
|
||||
handleCreatorFilterChange(creatorId: number) {
|
||||
this.updateUrl({
|
||||
creatorId,
|
||||
page: 1,
|
||||
});
|
||||
}
|
||||
|
||||
handleSearchSubmit(i: Search, event: any) {
|
||||
event.preventDefault();
|
||||
i.updateUrl({
|
||||
q: i.state.searchText,
|
||||
type_: i.state.type_,
|
||||
listingType: i.state.listingType,
|
||||
communityId: i.state.communityId,
|
||||
creatorId: i.state.creatorId,
|
||||
sort: i.state.sort,
|
||||
page: i.state.page,
|
||||
});
|
||||
|
|
@ -499,10 +780,19 @@ export class Search extends Component<any, SearchState> {
|
|||
const qStr = paramUpdates.q || this.state.q;
|
||||
const qStrEncoded = encodeURIComponent(qStr);
|
||||
const typeStr = paramUpdates.type_ || this.state.type_;
|
||||
const listingTypeStr = paramUpdates.listingType || this.state.listingType;
|
||||
const sortStr = paramUpdates.sort || this.state.sort;
|
||||
const communityId =
|
||||
paramUpdates.communityId == 0
|
||||
? 0
|
||||
: paramUpdates.communityId || this.state.communityId;
|
||||
const creatorId =
|
||||
paramUpdates.creatorId == 0
|
||||
? 0
|
||||
: paramUpdates.creatorId || this.state.creatorId;
|
||||
const page = paramUpdates.page || this.state.page;
|
||||
this.props.history.push(
|
||||
`/search/q/${qStrEncoded}/type/${typeStr}/sort/${sortStr}/page/${page}`
|
||||
`/search/q/${qStrEncoded}/type/${typeStr}/sort/${sortStr}/listing_type/${listingTypeStr}/community_id/${communityId}/creator_id/${creatorId}/page/${page}`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -530,6 +820,11 @@ export class Search extends Component<any, SearchState> {
|
|||
let data = wsJsonToRes<PostResponse>(msg).data;
|
||||
createPostLikeFindRes(data.post_view, this.state.searchResponse.posts);
|
||||
this.setState(this.state);
|
||||
} else if (op == UserOperation.ListCommunities) {
|
||||
let data = wsJsonToRes<ListCommunitiesResponse>(msg).data;
|
||||
this.state.communities = data.communities;
|
||||
this.setState(this.state);
|
||||
this.setupCommunityFilter();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Prompt } from "inferno-router";
|
|||
import { MarkdownTextArea } from "./markdown-textarea";
|
||||
import { Spinner } from "./icon";
|
||||
import { ImageUploadForm } from "./image-upload-form";
|
||||
import { Site, EditSite } from "lemmy-js-client";
|
||||
import { Site, EditSite, CreateSite } from "lemmy-js-client";
|
||||
import { WebSocketService } from "../services";
|
||||
import {
|
||||
authField,
|
||||
|
|
@ -250,7 +250,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
if (i.props.site) {
|
||||
WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
|
||||
} else {
|
||||
WebSocketService.Instance.send(wsClient.createSite(i.state.siteForm));
|
||||
let form: CreateSite = {
|
||||
name: i.state.siteForm.name || "My site",
|
||||
...i.state.siteForm,
|
||||
};
|
||||
WebSocketService.Instance.send(wsClient.createSite(form));
|
||||
}
|
||||
i.setState(i.state);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ export const routes: IRoutePropsWithFetch[] = [
|
|||
fetchInitialData: req => AdminSettings.fetchInitialData(req),
|
||||
},
|
||||
{
|
||||
path: `/search/q/:q/type/:type/sort/:sort/page/:page`,
|
||||
path: `/search/q/:q/type/:type/sort/:sort/listing_type/:listing_type/community_id/:community_id/creator_id/:creator_id/page/:page`,
|
||||
component: Search,
|
||||
fetchInitialData: req => Search.fetchInitialData(req),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ import {
|
|||
LemmyWebsocket,
|
||||
PersonViewSafe,
|
||||
CommunityView,
|
||||
LemmyHttp,
|
||||
} from "lemmy-js-client";
|
||||
|
||||
import {
|
||||
|
|
@ -70,6 +71,7 @@ import moment from "moment";
|
|||
import { Subscription } from "rxjs";
|
||||
import { retryWhen, delay, take } from "rxjs/operators";
|
||||
import { i18n } from "./i18next";
|
||||
import { httpBase } from "./env";
|
||||
|
||||
export const wsClient = new LemmyWebsocket();
|
||||
|
||||
|
|
@ -747,6 +749,7 @@ function personSearch(text: string, cb: (persons: PersonTribute[]) => any) {
|
|||
q: text,
|
||||
type_: SearchType.Users,
|
||||
sort: SortType.TopAll,
|
||||
listing_type: ListingType.All,
|
||||
page: 1,
|
||||
limit: mentionDropdownFetchLimit,
|
||||
auth: authField(false),
|
||||
|
|
@ -792,6 +795,7 @@ function communitySearch(
|
|||
q: text,
|
||||
type_: SearchType.Communities,
|
||||
sort: SortType.TopAll,
|
||||
listing_type: ListingType.All,
|
||||
page: 1,
|
||||
limit: mentionDropdownFetchLimit,
|
||||
auth: authField(false),
|
||||
|
|
@ -1226,3 +1230,89 @@ export function restoreScrollPosition(context: any) {
|
|||
let y = Number(sessionStorage.getItem(`scrollPosition_${path}`));
|
||||
window.scrollTo(0, y);
|
||||
}
|
||||
|
||||
export function showLocal(isoData: IsoData): boolean {
|
||||
return isoData.site_res.federated_instances?.linked.length > 0;
|
||||
}
|
||||
|
||||
interface ChoicesValue {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export function communityToChoice(cv: CommunityView): ChoicesValue {
|
||||
let choice: ChoicesValue = {
|
||||
value: cv.community.id.toString(),
|
||||
label: cv.community.name,
|
||||
};
|
||||
return choice;
|
||||
}
|
||||
|
||||
export function personToChoice(pvs: PersonViewSafe): ChoicesValue {
|
||||
let choice: ChoicesValue = {
|
||||
value: pvs.person.id.toString(),
|
||||
label: pvs.person.name,
|
||||
};
|
||||
return choice;
|
||||
}
|
||||
|
||||
export async function fetchCommunities(q: string) {
|
||||
let form: Search = {
|
||||
q,
|
||||
type_: SearchType.Communities,
|
||||
sort: SortType.TopAll,
|
||||
listing_type: ListingType.All,
|
||||
page: 1,
|
||||
limit: fetchLimit,
|
||||
auth: authField(false),
|
||||
};
|
||||
let client = new LemmyHttp(httpBase);
|
||||
return client.search(form);
|
||||
}
|
||||
|
||||
export async function fetchUsers(q: string) {
|
||||
let form: Search = {
|
||||
q,
|
||||
type_: SearchType.Users,
|
||||
sort: SortType.TopAll,
|
||||
listing_type: ListingType.All,
|
||||
page: 1,
|
||||
limit: fetchLimit,
|
||||
auth: authField(false),
|
||||
};
|
||||
let client = new LemmyHttp(httpBase);
|
||||
return client.search(form);
|
||||
}
|
||||
|
||||
export const choicesConfig = {
|
||||
shouldSort: false,
|
||||
searchResultLimit: fetchLimit,
|
||||
classNames: {
|
||||
containerOuter: "choices",
|
||||
containerInner: "choices__inner bg-light border-0",
|
||||
input: "form-control",
|
||||
inputCloned: "choices__input--cloned",
|
||||
list: "choices__list",
|
||||
listItems: "choices__list--multiple",
|
||||
listSingle: "choices__list--single",
|
||||
listDropdown: "choices__list--dropdown",
|
||||
item: "choices__item bg-light",
|
||||
itemSelectable: "choices__item--selectable",
|
||||
itemDisabled: "choices__item--disabled",
|
||||
itemChoice: "choices__item--choice",
|
||||
placeholder: "choices__placeholder",
|
||||
group: "choices__group",
|
||||
groupHeading: "choices__heading",
|
||||
button: "choices__button",
|
||||
activeState: "is-active",
|
||||
focusState: "is-focused",
|
||||
openState: "is-open",
|
||||
disabledState: "is-disabled",
|
||||
highlightedState: "text-info",
|
||||
selectedState: "text-info",
|
||||
flippedState: "is-flipped",
|
||||
loadingState: "is-loading",
|
||||
noResults: "has-no-results",
|
||||
noChoices: "has-no-choices",
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5125,10 +5125,10 @@ lcid@^1.0.0:
|
|||
dependencies:
|
||||
invert-kv "^1.0.0"
|
||||
|
||||
lemmy-js-client@0.11.0-rc.6:
|
||||
version "0.11.0-rc.6"
|
||||
resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.6.tgz#897671c8e24be8ba2a6074efc63264c421969380"
|
||||
integrity sha512-/AIws5bidcNIi8wSzJx7mwo5Ip2u78s4/bMdEyfEqWKWqdNwEKV/6eYnyThA3j9gYXjd8ty731s0l0kSs/vmhA==
|
||||
lemmy-js-client@0.11.0-rc.9:
|
||||
version "0.11.0-rc.9"
|
||||
resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.9.tgz#f8b1e3924388c6e7f719f052ba1568f4d210cabc"
|
||||
integrity sha512-697hLvHPr5+ZkJkFTaXl3y7Dt1va2Dghx9uvu/kZyZQZGVk2lL10R50SDaWsThyQKFBT4kiS1JZI+R3szzZEZQ==
|
||||
|
||||
levn@^0.4.1:
|
||||
version "0.4.1"
|
||||
|
|
|
|||
Loading…
Reference in a new issue