environments/review-thread-g89cri/deployments/3117
commit
9b5acf9b17
@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { Input, Streamfield } from 'soapbox/components/ui';
|
||||
|
||||
const messages = defineMessages({
|
||||
hashtagPlaceholder: { id: 'manage_group.fields.hashtag_placeholder', defaultMessage: 'Add a topic' },
|
||||
});
|
||||
|
||||
interface IGroupTagsField {
|
||||
tags: string[]
|
||||
onChange(tags: string[]): void
|
||||
onAddItem(): void
|
||||
onRemoveItem(i: number): void
|
||||
maxItems?: number
|
||||
}
|
||||
|
||||
const GroupTagsField: React.FC<IGroupTagsField> = ({ tags, onChange, onAddItem, onRemoveItem, maxItems = 3 }) => {
|
||||
return (
|
||||
<Streamfield
|
||||
label={<FormattedMessage id='group.tags.label' defaultMessage='Tags' />}
|
||||
hint={<FormattedMessage id='group.tags.hint' defaultMessage='Add up to 3 keywords that will serve as core topics of discussion in the group.' />}
|
||||
component={HashtagField}
|
||||
values={tags}
|
||||
onChange={onChange}
|
||||
onAddItem={onAddItem}
|
||||
onRemoveItem={onRemoveItem}
|
||||
maxItems={maxItems}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
interface IHashtagField {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
}
|
||||
|
||||
const HashtagField: React.FC<IHashtagField> = ({ value, onChange }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
|
||||
onChange(target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Input
|
||||
outerClassName='w-full'
|
||||
type='text'
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
placeholder={intl.formatMessage(messages.hashtagPlaceholder)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupTagsField;
|
@ -1,67 +0,0 @@
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
|
||||
import { getNextLink } from 'soapbox/api';
|
||||
import { useApi, useFeatures } from 'soapbox/hooks';
|
||||
import { normalizeGroup } from 'soapbox/normalizers';
|
||||
import { Group } from 'soapbox/types/entities';
|
||||
import { flattenPages, PaginatedResult } from 'soapbox/utils/queries';
|
||||
|
||||
const GroupSearchKeys = {
|
||||
search: (query?: string) => query ? ['groups', 'search', query] : ['groups', 'search'] as const,
|
||||
};
|
||||
|
||||
type PageParam = {
|
||||
link: string
|
||||
}
|
||||
|
||||
const useGroupSearch = (search?: string) => {
|
||||
const api = useApi();
|
||||
const features = useFeatures();
|
||||
|
||||
const getSearchResults = async (pageParam: PageParam): Promise<PaginatedResult<Group>> => {
|
||||
const nextPageLink = pageParam?.link;
|
||||
const uri = nextPageLink || '/api/v1/groups/search';
|
||||
const response = await api.get<Group[]>(uri, {
|
||||
params: search ? {
|
||||
q: search,
|
||||
} : undefined,
|
||||
});
|
||||
const { data } = response;
|
||||
|
||||
const link = getNextLink(response);
|
||||
const hasMore = !!link;
|
||||
const result = data.map(normalizeGroup);
|
||||
|
||||
return {
|
||||
result,
|
||||
hasMore,
|
||||
link,
|
||||
};
|
||||
};
|
||||
|
||||
const queryInfo = useInfiniteQuery(
|
||||
GroupSearchKeys.search(search),
|
||||
({ pageParam }) => getSearchResults(pageParam),
|
||||
{
|
||||
keepPreviousData: true,
|
||||
enabled: features.groups && !!search,
|
||||
getNextPageParam: (config) => {
|
||||
if (config.hasMore) {
|
||||
return { link: config.link };
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
});
|
||||
|
||||
const data = flattenPages(queryInfo.data);
|
||||
|
||||
return {
|
||||
...queryInfo,
|
||||
groups: data || [],
|
||||
};
|
||||
};
|
||||
|
||||
export {
|
||||
useGroupSearch,
|
||||
};
|
@ -0,0 +1,9 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
const groupTagSchema = z.object({
|
||||
name: z.string(),
|
||||
});
|
||||
|
||||
type GroupTag = z.infer<typeof groupTagSchema>;
|
||||
|
||||
export { groupTagSchema, type GroupTag };
|
Loading…
Reference in new issue