Improve "People to Follow" widget See merge request soapbox-pub/soapbox!1800environments/review-develop-3zknud/deployments/1034
Chewbacca
2 years ago
commit
89057abc7b
@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
|
||||
import { HStack, Stack } from 'soapbox/components/ui';
|
||||
|
||||
import { randomIntFromInterval, generateText } from '../utils';
|
||||
|
||||
export default ({ limit }: { limit: number }) => {
|
||||
const length = randomIntFromInterval(15, 3);
|
||||
const acctLength = randomIntFromInterval(15, 3);
|
||||
|
||||
return (
|
||||
<>
|
||||
{new Array(limit).fill(undefined).map((_, idx) => (
|
||||
<HStack key={idx} alignItems='center' space={2} className='animate-pulse'>
|
||||
<Stack space={3} className='text-center'>
|
||||
<div
|
||||
className='w-9 h-9 block mx-auto rounded-full bg-primary-200 dark:bg-primary-700'
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Stack className='text-primary-200 dark:text-primary-700'>
|
||||
<p>{generateText(length)}</p>
|
||||
<p>{generateText(acctLength)}</p>
|
||||
</Stack>
|
||||
</HStack>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,123 +1,201 @@
|
||||
import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import React from 'react';
|
||||
|
||||
import { render, screen } from '../../../../jest/test-helpers';
|
||||
import { normalizeAccount } from '../../../../normalizers';
|
||||
import { __stub } from 'soapbox/api';
|
||||
|
||||
import { render, rootState, screen, waitFor } from '../../../../jest/test-helpers';
|
||||
import { normalizeInstance } from '../../../../normalizers';
|
||||
import WhoToFollowPanel from '../who-to-follow-panel';
|
||||
|
||||
describe('<WhoToFollow />', () => {
|
||||
it('renders suggested accounts', () => {
|
||||
const store = {
|
||||
accounts: ImmutableMap({
|
||||
'1': normalizeAccount({
|
||||
id: '1',
|
||||
acct: 'username',
|
||||
display_name: 'My name',
|
||||
avatar: 'test.jpg',
|
||||
}),
|
||||
}),
|
||||
suggestions: {
|
||||
items: ImmutableOrderedSet([{
|
||||
const buildTruthSuggestion = (id: string) => ({
|
||||
account_avatar: 'avatar',
|
||||
account_id: id,
|
||||
acct: 'acct',
|
||||
display_name: 'my name',
|
||||
note: 'hello',
|
||||
verified: true,
|
||||
});
|
||||
|
||||
const buildSuggestion = (id: string) => ({
|
||||
source: 'staff',
|
||||
account: '1',
|
||||
}]),
|
||||
account: {
|
||||
username: 'username',
|
||||
verified: true,
|
||||
id,
|
||||
acct: 'acct',
|
||||
avatar: 'avatar',
|
||||
avatar_static: 'avatar',
|
||||
display_name: 'my name',
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
describe('<WhoToFollow />', () => {
|
||||
let store: any;
|
||||
|
||||
describe('using Truth Social software', () => {
|
||||
beforeEach(() => {
|
||||
store = rootState
|
||||
.set('me', '1234')
|
||||
.set('instance', normalizeInstance({
|
||||
version: '3.4.1 (compatible; TruthSocial 1.0.0)',
|
||||
}));
|
||||
});
|
||||
|
||||
describe('with a single suggestion', () => {
|
||||
beforeEach(() => {
|
||||
__stub((mock) => {
|
||||
mock.onGet('/api/v1/truth/carousels/suggestions')
|
||||
.reply(200, [buildTruthSuggestion('1')], {
|
||||
link: '<https://example.com/api/v1/truth/carousels/suggestions?since_id=1>; rel=\'prev\'',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('renders suggested accounts', async () => {
|
||||
render(<WhoToFollowPanel limit={1} />, undefined, store);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('account')).toHaveTextContent(/my name/i);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('renders multiple accounts', () => {
|
||||
const store = {
|
||||
accounts: ImmutableMap({
|
||||
'1': normalizeAccount({
|
||||
id: '1',
|
||||
acct: 'username',
|
||||
display_name: 'My name',
|
||||
avatar: 'test.jpg',
|
||||
}),
|
||||
'2': normalizeAccount({
|
||||
id: '1',
|
||||
acct: 'username2',
|
||||
display_name: 'My other name',
|
||||
avatar: 'test.jpg',
|
||||
}),
|
||||
}),
|
||||
suggestions: {
|
||||
items: ImmutableOrderedSet([
|
||||
{
|
||||
source: 'staff',
|
||||
account: '1',
|
||||
},
|
||||
{
|
||||
source: 'staff',
|
||||
account: '2',
|
||||
},
|
||||
]),
|
||||
},
|
||||
};
|
||||
describe('with a multiple suggestion', () => {
|
||||
beforeEach(() => {
|
||||
__stub((mock) => {
|
||||
mock.onGet('/api/v1/truth/carousels/suggestions')
|
||||
.reply(200, [buildTruthSuggestion('1'), buildTruthSuggestion('2')], {
|
||||
link: '<https://example.com/api/v1/truth/carousels/suggestions?since_id=1>; rel=\'prev\'',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('renders suggested accounts', async () => {
|
||||
render(<WhoToFollowPanel limit={2} />, undefined, store);
|
||||
|
||||
render(<WhoToFollowPanel limit={3} />, undefined, store);
|
||||
await waitFor(() => {
|
||||
expect(screen.queryAllByTestId('account')).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('respects the limit prop', () => {
|
||||
const store = {
|
||||
accounts: ImmutableMap({
|
||||
'1': normalizeAccount({
|
||||
id: '1',
|
||||
acct: 'username',
|
||||
display_name: 'My name',
|
||||
avatar: 'test.jpg',
|
||||
}),
|
||||
'2': normalizeAccount({
|
||||
id: '1',
|
||||
acct: 'username2',
|
||||
display_name: 'My other name',
|
||||
avatar: 'test.jpg',
|
||||
}),
|
||||
}),
|
||||
suggestions: {
|
||||
items: ImmutableOrderedSet([
|
||||
{
|
||||
source: 'staff',
|
||||
account: '1',
|
||||
},
|
||||
{
|
||||
source: 'staff',
|
||||
account: '2',
|
||||
},
|
||||
]),
|
||||
},
|
||||
};
|
||||
describe('with a set limit', () => {
|
||||
beforeEach(() => {
|
||||
__stub((mock) => {
|
||||
mock.onGet('/api/v1/truth/carousels/suggestions')
|
||||
.reply(200, [buildTruthSuggestion('1'), buildTruthSuggestion('2')], {
|
||||
link: '<https://example.com/api/v1/truth/carousels/suggestions?since_id=1>; rel=\'prev\'',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('respects the limit prop', async () => {
|
||||
render(<WhoToFollowPanel limit={1} />, undefined, store);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryAllByTestId('account')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('renders empty', () => {
|
||||
const store = {
|
||||
accounts: ImmutableMap({
|
||||
'1': normalizeAccount({
|
||||
id: '1',
|
||||
acct: 'username',
|
||||
display_name: 'My name',
|
||||
avatar: 'test.jpg',
|
||||
}),
|
||||
'2': normalizeAccount({
|
||||
id: '1',
|
||||
acct: 'username2',
|
||||
display_name: 'My other name',
|
||||
avatar: 'test.jpg',
|
||||
}),
|
||||
}),
|
||||
suggestions: {
|
||||
items: ImmutableOrderedSet([]),
|
||||
},
|
||||
};
|
||||
describe('when the API returns an empty list', () => {
|
||||
beforeEach(() => {
|
||||
__stub((mock) => {
|
||||
mock.onGet('/api/v1/truth/carousels/suggestions')
|
||||
.reply(200, [], {
|
||||
link: '',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('renders empty', async () => {
|
||||
render(<WhoToFollowPanel limit={1} />, undefined, store);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryAllByTestId('account')).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('using Pleroma software', () => {
|
||||
beforeEach(() => {
|
||||
store = rootState.set('me', '1234');
|
||||
});
|
||||
|
||||
describe('with a single suggestion', () => {
|
||||
beforeEach(() => {
|
||||
__stub((mock) => {
|
||||
mock.onGet('/api/v2/suggestions')
|
||||
.reply(200, [buildSuggestion('1')], {
|
||||
link: '<https://example.com/api/v2/suggestions?since_id=1>; rel=\'prev\'',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('renders suggested accounts', async () => {
|
||||
render(<WhoToFollowPanel limit={1} />, undefined, store);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('account')).toHaveTextContent(/my name/i);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('with a multiple suggestion', () => {
|
||||
beforeEach(() => {
|
||||
__stub((mock) => {
|
||||
mock.onGet('/api/v2/suggestions')
|
||||
.reply(200, [buildSuggestion('1'), buildSuggestion('2')], {
|
||||
link: '<https://example.com/api/v2/suggestions?since_id=1>; rel=\'prev\'',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('renders suggested accounts', async () => {
|
||||
render(<WhoToFollowPanel limit={2} />, undefined, store);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryAllByTestId('account')).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('with a set limit', () => {
|
||||
beforeEach(() => {
|
||||
__stub((mock) => {
|
||||
mock.onGet('/api/v2/suggestions')
|
||||
.reply(200, [buildSuggestion('1'), buildSuggestion('2')], {
|
||||
link: '<https://example.com/api/v2/suggestions?since_id=1>; rel=\'prev\'',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('respects the limit prop', async () => {
|
||||
render(<WhoToFollowPanel limit={1} />, undefined, store);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryAllByTestId('account')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the API returns an empty list', () => {
|
||||
beforeEach(() => {
|
||||
__stub((mock) => {
|
||||
mock.onGet('/api/v2/suggestions')
|
||||
.reply(200, [], {
|
||||
link: '',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('renders empty', async () => {
|
||||
render(<WhoToFollowPanel limit={1} />, undefined, store);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryAllByTestId('account')).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,61 @@
|
||||
import { queryClient } from 'soapbox/queries/client';
|
||||
|
||||
import type { InfiniteData, QueryKey, UseInfiniteQueryResult } from '@tanstack/react-query';
|
||||
|
||||
export interface PaginatedResult<T> {
|
||||
result: T[],
|
||||
hasMore: boolean,
|
||||
link?: string,
|
||||
}
|
||||
|
||||
/** Flatten paginated results into a single array. */
|
||||
const flattenPages = <T>(queryInfo: UseInfiniteQueryResult<PaginatedResult<T>>) => {
|
||||
return queryInfo.data?.pages.reduce<T[]>(
|
||||
(prev: T[], curr) => [...prev, ...curr.result],
|
||||
[],
|
||||
);
|
||||
};
|
||||
|
||||
/** Traverse pages and update the item inside if found. */
|
||||
const updatePageItem = <T>(queryKey: QueryKey, newItem: T, isItem: (item: T, newItem: T) => boolean) => {
|
||||
queryClient.setQueriesData<InfiniteData<PaginatedResult<T>>>(queryKey, (data) => {
|
||||
if (data) {
|
||||
const pages = data.pages.map(page => {
|
||||
const result = page.result.map(item => isItem(item, newItem) ? newItem : item);
|
||||
return { ...page, result };
|
||||
});
|
||||
return { ...data, pages };
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** Insert the new item at the beginning of the first page. */
|
||||
const appendPageItem = <T>(queryKey: QueryKey, newItem: T) => {
|
||||
queryClient.setQueryData<InfiniteData<PaginatedResult<T>>>(queryKey, (data) => {
|
||||
if (data) {
|
||||
const pages = [...data.pages];
|
||||
pages[0] = { ...pages[0], result: [...pages[0].result, newItem] };
|
||||
return { ...data, pages };
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** Remove an item inside if found. */
|
||||
const removePageItem = <T>(queryKey: QueryKey, itemToRemove: T, isItem: (item: T, newItem: T) => boolean) => {
|
||||
queryClient.setQueriesData<InfiniteData<PaginatedResult<T>>>(queryKey, (data) => {
|
||||
if (data) {
|
||||
const pages = data.pages.map(page => {
|
||||
const result = page.result.filter(item => !isItem(item, itemToRemove));
|
||||
return { ...page, result };
|
||||
});
|
||||
return { ...data, pages };
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export {
|
||||
flattenPages,
|
||||
updatePageItem,
|
||||
appendPageItem,
|
||||
removePageItem,
|
||||
};
|
||||
Loading…
Reference in new issue