moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'soapbox/develop' into ts 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-07-13 20:57:12 +02:00
parent 8e8329a7b0 ffe14d9aa7
commit 479386af03
297 changed files with 2458 additions and 1950 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitlab-ci.yml
View File

@ -57,7 +57,7 @@ lint-sass:
jest:
stage: test
script: yarn test:coverage
script: yarn test:coverage --runInBand
only:
changes:
- "**/*.js"

26
app/soapbox/actions/__tests__/account-notes.test.ts
View File

@ -1,18 +1,20 @@
import { Map as ImmutableMap } from 'immutable';
import { __stub } from 'soapbox/api';
import { mockStore } from 'soapbox/jest/test-helpers';
import rootReducer from 'soapbox/reducers';
import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { ReducerRecord, EditRecord } from 'soapbox/reducers/account_notes';
import { normalizeAccount } from '../../normalizers';
import { normalizeAccount, normalizeRelationship } from '../../normalizers';
import { changeAccountNoteComment, initAccountNoteModal, submitAccountNote } from '../account-notes';
import type { Account } from 'soapbox/types/entities';
describe('submitAccountNote()', () => {
let store;
let store: ReturnType<typeof mockStore>;
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('account_notes', { edit: { account: 1, comment: 'hello' } });
const state = rootState
.set('account_notes', ReducerRecord({ edit: EditRecord({ account: '1', comment: 'hello' }) }));
store = mockStore(state);
});
@ -60,11 +62,11 @@ describe('submitAccountNote()', () => {
});
describe('initAccountNoteModal()', () => {
let store;
let store: ReturnType<typeof mockStore>;
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('relationships', ImmutableMap({ 1: { note: 'hello' } }));
const state = rootState
.set('relationships', ImmutableMap({ '1': normalizeRelationship({ note: 'hello' }) }));
store = mockStore(state);
});
@ -75,7 +77,7 @@ describe('initAccountNoteModal()', () => {
display_name: 'Justin L',
avatar: 'test.jpg',
verified: true,
});
}) as Account;
const expectedActions = [
{ type: 'ACCOUNT_NOTE_INIT_MODAL', account, comment: 'hello' },
{ type: 'MODAL_OPEN', modalType: 'ACCOUNT_NOTE' },
@ -88,10 +90,10 @@ describe('initAccountNoteModal()', () => {
});
describe('changeAccountNoteComment()', () => {
let store;
let store: ReturnType<typeof mockStore>;
beforeEach(() => {
const state = rootReducer(undefined, {});
const state = rootState;
store = mockStore(state);
});

184
app/soapbox/actions/__tests__/accounts.test.ts
View File

@ -1,10 +1,10 @@
import { Map as ImmutableMap } from 'immutable';
import { __stub } from 'soapbox/api';
import { mockStore } from 'soapbox/jest/test-helpers';
import rootReducer from 'soapbox/reducers';
import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { ListRecord, ReducerRecord } from 'soapbox/reducers/user_lists';
import { normalizeAccount } from '../../normalizers';
import { normalizeAccount, normalizeInstance, normalizeRelationship } from '../../normalizers';
import {
authorizeFollowRequest,
blockAccount,
@ -28,7 +28,7 @@ import {
unsubscribeAccount,
} from '../accounts';
let store;
let store: ReturnType<typeof mockStore>;
describe('createAccount()', () => {
const params = {
@ -37,7 +37,7 @@ describe('createAccount()', () => {
describe('with a successful API request', () => {
beforeEach(() => {
const state = rootReducer(undefined, {});
const state = rootState;
store = mockStore(state);
__stub((mock) => {
@ -74,10 +74,10 @@ describe('fetchAccount()', () => {
avatar: 'test.jpg',
});
const state = rootReducer(undefined, {})
const state = rootState
.set('accounts', ImmutableMap({
[id]: account,
}));
}) as any);
store = mockStore(state);
@ -98,7 +98,7 @@ describe('fetchAccount()', () => {
const account = require('soapbox/__fixtures__/pleroma-account.json');
beforeEach(() => {
const state = rootReducer(undefined, {});
const state = rootState;
store = mockStore(state);
__stub((mock) => {
@ -125,7 +125,7 @@ describe('fetchAccount()', () => {
describe('with an unsuccessful API request', () => {
beforeEach(() => {
const state = rootReducer(undefined, {});
const state = rootState;
store = mockStore(state);
__stub((mock) => {
@ -155,7 +155,7 @@ describe('fetchAccount()', () => {
describe('fetchAccountByUsername()', () => {
const id = '123';
const username = 'tiger';
let state, account;
let state, account: any;
beforeEach(() => {
account = normalizeAccount({
@ -166,7 +166,7 @@ describe('fetchAccountByUsername()', () => {
birthday: undefined,
});
state = rootReducer(undefined, {})
state = rootState
.set('accounts', ImmutableMap({
[id]: account,
}));
@ -180,15 +180,15 @@ describe('fetchAccountByUsername()', () => {
describe('when "accountByUsername" feature is enabled', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('instance', {
const state = rootState
.set('instance', normalizeInstance({
version: '2.7.2 (compatible; Pleroma 2.4.52-1337-g4779199e.gleasonator+soapbox)',
pleroma: ImmutableMap({
metadata: ImmutableMap({
features: [],
}),
}),
})
}))
.set('me', '123');
store = mockStore(state);
});
@ -243,15 +243,15 @@ describe('fetchAccountByUsername()', () => {
describe('when "accountLookup" feature is enabled', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('instance', {
const state = rootState
.set('instance', normalizeInstance({
version: '3.4.1 (compatible; TruthSocial 1.0.0)',
pleroma: ImmutableMap({
metadata: ImmutableMap({
features: [],
}),
}),
})
}))
.set('me', '123');
store = mockStore(state);
});
@ -308,7 +308,7 @@ describe('fetchAccountByUsername()', () => {
describe('when using the accountSearch function', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -373,12 +373,12 @@ describe('fetchAccountByUsername()', () => {
describe('followAccount()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
it('should do nothing', async() => {
await store.dispatch(followAccount(1));
await store.dispatch(followAccount('1'));
const actions = store.getActions();
expect(actions).toEqual([]);
@ -386,10 +386,10 @@ describe('followAccount()', () => {
});
describe('when logged in', () => {
const id = 1;
const id = '1';
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -460,12 +460,12 @@ describe('followAccount()', () => {
describe('unfollowAccount()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
it('should do nothing', async() => {
await store.dispatch(unfollowAccount(1));
await store.dispatch(unfollowAccount('1'));
const actions = store.getActions();
expect(actions).toEqual([]);
@ -473,10 +473,10 @@ describe('unfollowAccount()', () => {
});
describe('when logged in', () => {
const id = 1;
const id = '1';
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -489,7 +489,7 @@ describe('unfollowAccount()', () => {
it('should dispatch the correct actions', async() => {
const expectedActions = [
{ type: 'ACCOUNT_UNFOLLOW_REQUEST', id: 1, skipLoading: true },
{ type: 'ACCOUNT_UNFOLLOW_REQUEST', id: '1', skipLoading: true },
{
type: 'ACCOUNT_UNFOLLOW_SUCCESS',
relationship: { success: true },
@ -534,11 +534,11 @@ describe('unfollowAccount()', () => {
});
describe('blockAccount()', () => {
const id = 1;
const id = '1';
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -552,7 +552,7 @@ describe('blockAccount()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -601,11 +601,11 @@ describe('blockAccount()', () => {
});
describe('unblockAccount()', () => {
const id = 1;
const id = '1';
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -619,7 +619,7 @@ describe('unblockAccount()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -667,11 +667,11 @@ describe('unblockAccount()', () => {
});
describe('muteAccount()', () => {
const id = 1;
const id = '1';
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -685,7 +685,7 @@ describe('muteAccount()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -734,11 +734,11 @@ describe('muteAccount()', () => {
});
describe('unmuteAccount()', () => {
const id = 1;
const id = '1';
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -752,7 +752,7 @@ describe('unmuteAccount()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -800,11 +800,11 @@ describe('unmuteAccount()', () => {
});
describe('subscribeAccount()', () => {
const id = 1;
const id = '1';
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -818,7 +818,7 @@ describe('subscribeAccount()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -866,11 +866,11 @@ describe('subscribeAccount()', () => {
});
describe('unsubscribeAccount()', () => {
const id = 1;
const id = '1';
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -884,7 +884,7 @@ describe('unsubscribeAccount()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -936,7 +936,7 @@ describe('removeFromFollowers()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -950,7 +950,7 @@ describe('removeFromFollowers()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -1002,7 +1002,7 @@ describe('fetchFollowers()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -1059,7 +1059,7 @@ describe('expandFollowers()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -1073,28 +1073,28 @@ describe('expandFollowers()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('user_lists', {
const state = rootState
.set('user_lists', ReducerRecord({
followers: ImmutableMap({
[id]: {
[id]: ListRecord({
next: 'next_url',
},
}),
}),
})
}))
.set('me', '123');
store = mockStore(state);
});
describe('when the url is null', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('user_lists', {
const state = rootState
.set('user_lists', ReducerRecord({
followers: ImmutableMap({
[id]: {
[id]: ListRecord({
next: null,
},
}),
}),
})
}))
.set('me', '123');
store = mockStore(state);
});
@ -1160,7 +1160,7 @@ describe('fetchFollowing()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -1217,7 +1217,7 @@ describe('expandFollowing()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -1231,28 +1231,28 @@ describe('expandFollowing()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('user_lists', {
const state = rootState
.set('user_lists', ReducerRecord({
following: ImmutableMap({
[id]: {
[id]: ListRecord({
next: 'next_url',
},
}),
}),
})
}))
.set('me', '123');
store = mockStore(state);
});
describe('when the url is null', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('user_lists', {
const state = rootState
.set('user_lists', ReducerRecord({
following: ImmutableMap({
[id]: {
[id]: ListRecord({
next: null,
},
}),
}),
})
}))
.set('me', '123');
store = mockStore(state);
});
@ -1318,7 +1318,7 @@ describe('fetchRelationships()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -1332,15 +1332,15 @@ describe('fetchRelationships()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
const state = rootState
.set('me', '123');
store = mockStore(state);
});
describe('without newAccountIds', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('relationships', ImmutableMap({ [id]: {} }))
const state = rootState
.set('relationships', ImmutableMap({ [id]: normalizeRelationship({}) }))
.set('me', '123');
store = mockStore(state);
});
@ -1355,7 +1355,7 @@ describe('fetchRelationships()', () => {
describe('with a successful API request', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
const state = rootState
.set('relationships', ImmutableMap({}))
.set('me', '123');
store = mockStore(state);
@ -1409,7 +1409,7 @@ describe('fetchRelationships()', () => {
describe('fetchFollowRequests()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -1423,14 +1423,14 @@ describe('fetchFollowRequests()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
const state = rootState
.set('me', '123');
store = mockStore(state);
});
describe('with a successful API request', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
const state = rootState
.set('relationships', ImmutableMap({}))
.set('me', '123');
store = mockStore(state);
@ -1483,7 +1483,7 @@ describe('fetchFollowRequests()', () => {
describe('expandFollowRequests()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -1497,24 +1497,24 @@ describe('expandFollowRequests()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('user_lists', {
follow_requests: {
const state = rootState
.set('user_lists', ReducerRecord({
follow_requests: ListRecord({
next: 'next_url',
},
})
}),
}))
.set('me', '123');
store = mockStore(state);
});
describe('when the url is null', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('user_lists', {
follow_requests: {
const state = rootState
.set('user_lists', ReducerRecord({
follow_requests: ListRecord({
next: null,
},
})
}),
}))
.set('me', '123');
store = mockStore(state);
});
@ -1579,7 +1579,7 @@ describe('authorizeFollowRequest()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -1593,7 +1593,7 @@ describe('authorizeFollowRequest()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});

17
app/soapbox/actions/__tests__/alerts.test.ts
View File

@ -1,11 +1,10 @@
import { AxiosError } from 'axios';
import { mockStore } from 'soapbox/jest/test-helpers';
import rootReducer from 'soapbox/reducers';
import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { dismissAlert, showAlert, showAlertForError } from '../alerts';
const buildError = (message: string, status: number) => new AxiosError<any>(message, String(status), null, null, {
const buildError = (message: string, status: number) => new AxiosError<any>(message, String(status), undefined, null, {
data: {
error: message,
},
@ -15,10 +14,10 @@ const buildError = (message: string, status: number) => new AxiosError<any>(mess
config: {},
});
let store;
let store: ReturnType<typeof mockStore>;
beforeEach(() => {
const state = rootReducer(undefined, {});
const state = rootState;
store = mockStore(state);
});
@ -28,7 +27,7 @@ describe('dismissAlert()', () => {
const expectedActions = [
{ type: 'ALERT_DISMISS', alert },
];
await store.dispatch(dismissAlert(alert));
await store.dispatch(dismissAlert(alert as any));
const actions = store.getActions();
expect(actions).toEqual(expectedActions);
@ -70,11 +69,10 @@ describe('showAlert()', () => {
it('dispatches the proper actions', async() => {
const error = buildError('', 404);
const expectedActions = [];
await store.dispatch(showAlertForError(error));
const actions = store.getActions();
expect(actions).toEqual(expectedActions);
expect(actions).toEqual([]);
});
});
@ -82,11 +80,10 @@ describe('showAlert()', () => {
it('dispatches the proper actions', async() => {
const error = buildError('', 410);
const expectedActions = [];
await store.dispatch(showAlertForError(error));
const actions = store.getActions();
expect(actions).toEqual(expectedActions);
expect(actions).toEqual([]);
});
});

26
app/soapbox/actions/__tests__/blocks.test.ts
View File

@ -1,8 +1,6 @@
import { Record as ImmutableRecord } from 'immutable';
import { __stub } from 'soapbox/api';
import { mockStore } from 'soapbox/jest/test-helpers';
import rootReducer from 'soapbox/reducers';
import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { ListRecord, ReducerRecord as UserListsRecord } from 'soapbox/reducers/user_lists';
import { expandBlocks, fetchBlocks } from '../blocks';
@ -14,11 +12,11 @@ const account = {
};
describe('fetchBlocks()', () => {
let store;
let store: ReturnType<typeof mockStore>;
describe('if logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -32,7 +30,7 @@ describe('fetchBlocks()', () => {
describe('if logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '1234');
const state = rootState.set('me', '1234');
store = mockStore(state);
});
@ -87,11 +85,11 @@ describe('fetchBlocks()', () => {
});
describe('expandBlocks()', () => {
let store;
let store: ReturnType<typeof mockStore>;
describe('if logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -105,15 +103,15 @@ describe('expandBlocks()', () => {
describe('if logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '1234');
const state = rootState.set('me', '1234');
store = mockStore(state);
});
describe('without a url', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
const state = rootState
.set('me', '1234')
.set('user_lists', ImmutableRecord({ blocks: { next: null } })());
.set('user_lists', UserListsRecord({ blocks: ListRecord({ next: null }) }));
store = mockStore(state);
});
@ -127,9 +125,9 @@ describe('expandBlocks()', () => {
describe('with a url', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
const state = rootState
.set('me', '1234')
.set('user_lists', ImmutableRecord({ blocks: { next: 'example' } })());
.set('user_lists', UserListsRecord({ blocks: ListRecord({ next: 'example' }) }));
store = mockStore(state);
});

4
app/soapbox/actions/__tests__/carousels.test.ts
View File

@ -4,14 +4,14 @@ import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { fetchCarouselAvatars } from '../carousels';
describe('fetchCarouselAvatars()', () => {
let store;
let store: ReturnType<typeof mockStore>;
beforeEach(() => {
store = mockStore(rootState);
});
describe('with a successful API request', () => {
let avatars;
let avatars: Record<string, any>[];
beforeEach(() => {
avatars = [

43
app/soapbox/actions/__tests__/compose.test.ts
View File

@ -1,28 +1,29 @@
import { fromJS } from 'immutable';
import { Map as ImmutableMap } from 'immutable';
import { mockStore } from 'soapbox/jest/test-helpers';
import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { InstanceRecord } from 'soapbox/normalizers';
import rootReducer from 'soapbox/reducers';
import { uploadCompose } from '../compose';
import type { IntlShape } from 'react-intl';
describe('uploadCompose()', () => {
describe('with images', () => {
let files, store;
let files: FileList, store: ReturnType<typeof mockStore>;
beforeEach(() => {
const instance = InstanceRecord({
configuration: fromJS({
statuses: {
configuration: ImmutableMap({
statuses: ImmutableMap({
max_media_attachments: 4,
},
media_attachments: {
}),
media_attachments: ImmutableMap({
image_size_limit: 10,
},
}),
}),
});
const state = rootReducer(undefined, {})
const state = rootState
.set('me', '1234')
.set('instance', instance);
@ -32,13 +33,13 @@ describe('uploadCompose()', () => {
name: 'Image',
size: 15,
type: 'image/png',
}];
}] as unknown as FileList;
});
it('creates an alert if exceeds max size', async() => {
const mockIntl = {
formatMessage: jest.fn().mockReturnValue('Image exceeds the current file size limit (10 Bytes)'),
};
} as unknown as IntlShape;
const expectedActions = [
{ type: 'COMPOSE_UPLOAD_REQUEST', skipLoading: true },
@ -60,21 +61,21 @@ describe('uploadCompose()', () => {
});
describe('with videos', () => {
let files, store;
let files: FileList, store: ReturnType<typeof mockStore>;
beforeEach(() => {
const instance = InstanceRecord({
configuration: fromJS({
statuses: {
configuration: ImmutableMap({
statuses: ImmutableMap({
max_media_attachments: 4,
},
media_attachments: {
}),
media_attachments: ImmutableMap({
video_size_limit: 10,
},
}),
}),
});
const state = rootReducer(undefined, {})
const state = rootState
.set('me', '1234')
.set('instance', instance);
@ -84,13 +85,13 @@ describe('uploadCompose()', () => {
name: 'Video',
size: 15,
type: 'video/mp4',
}];
}] as unknown as FileList;
});
it('creates an alert if exceeds max size', async() => {
const mockIntl = {
formatMessage: jest.fn().mockReturnValue('Video exceeds the current file size limit (10 Bytes)'),
};
} as unknown as IntlShape;
const expectedActions = [
{ type: 'COMPOSE_UPLOAD_REQUEST', skipLoading: true },

13
app/soapbox/actions/__tests__/onboarding.test.ts
View File

@ -1,5 +1,4 @@
import { mockStore, mockWindowProperty } from 'soapbox/jest/test-helpers';
import rootReducer from 'soapbox/reducers';
import { mockStore, mockWindowProperty, rootState } from 'soapbox/jest/test-helpers';
import { checkOnboardingStatus, startOnboarding, endOnboarding } from '../onboarding';
@ -17,7 +16,7 @@ describe('checkOnboarding()', () => {
it('does nothing if localStorage item is not set', async() => {
mockGetItem = jest.fn().mockReturnValue(null);
const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
const store = mockStore(state);
await store.dispatch(checkOnboardingStatus());
@ -30,7 +29,7 @@ describe('checkOnboarding()', () => {
it('does nothing if localStorage item is invalid', async() => {
mockGetItem = jest.fn().mockReturnValue('invalid');
const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
const store = mockStore(state);
await store.dispatch(checkOnboardingStatus());
@ -43,7 +42,7 @@ describe('checkOnboarding()', () => {
it('dispatches the correct action', async() => {
mockGetItem = jest.fn().mockReturnValue('1');
const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
const store = mockStore(state);
await store.dispatch(checkOnboardingStatus());
@ -66,7 +65,7 @@ describe('startOnboarding()', () => {
});
it('dispatches the correct action', async() => {
const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
const store = mockStore(state);
await store.dispatch(startOnboarding());
@ -89,7 +88,7 @@ describe('endOnboarding()', () => {
});
it('dispatches the correct action', async() => {
const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
const store = mockStore(state);
await store.dispatch(endOnboarding());

13
app/soapbox/actions/__tests__/statuses.test.ts
View File

@ -4,7 +4,6 @@ import { STATUSES_IMPORT } from 'soapbox/actions/importer';
import { __stub } from 'soapbox/api';
import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { normalizeStatus } from 'soapbox/normalizers/status';
import rootReducer from 'soapbox/reducers';
import { deleteStatus, fetchContext } from '../statuses';
@ -19,7 +18,7 @@ describe('fetchContext()', () => {
const store = mockStore(rootState);
store.dispatch(fetchContext('017ed505-5926-392f-256a-f86d5075df70')).then(context => {
store.dispatch(fetchContext('017ed505-5926-392f-256a-f86d5075df70')).then(() => {
const actions = store.getActions();
expect(actions[3].type).toEqual(STATUSES_IMPORT);
@ -31,11 +30,11 @@ describe('fetchContext()', () => {
});
describe('deleteStatus()', () => {
let store;
let store: ReturnType<typeof mockStore>;
describe('if logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -54,16 +53,16 @@ describe('deleteStatus()', () => {
});
beforeEach(() => {
const state = rootReducer(undefined, {})
const state = rootState
.set('me', '1234')
.set('statuses', fromJS({
[statusId]: cachedStatus,
}));
}) as any);
store = mockStore(state);
});
describe('with a successful API request', () => {
let status;
let status: any;
beforeEach(() => {
status = require('soapbox/__fixtures__/pleroma-status-deleted.json');

108
app/soapbox/actions/__tests__/suggestions.test.ts Normal file
View File

@ -0,0 +1,108 @@
import { Map as ImmutableMap } from 'immutable';
import { __stub } from 'soapbox/api';
import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { normalizeInstance } from 'soapbox/normalizers';
import {
fetchSuggestions,
} from '../suggestions';
let store: ReturnType<typeof mockStore>;
let state;
describe('fetchSuggestions()', () => {
describe('with Truth Social software', () => {
beforeEach(() => {
state = rootState
.set('instance', normalizeInstance({
version: '3.4.1 (compatible; TruthSocial 1.0.0)',
pleroma: ImmutableMap({
metadata: ImmutableMap({
features: [],
}),
}),
}))
.set('me', '123');
store = mockStore(state);
});
describe('with a successful API request', () => {
const response = [
{
account_id: '1',
acct: 'jl',
account_avatar: 'https://example.com/some.jpg',
display_name: 'justin',
note: '<p>note</p>',
verified: true,
},
];
beforeEach(() => {
__stub((mock) => {
mock.onGet('/api/v1/truth/carousels/suggestions').reply(200, response, {
link: '<https://example.com/api/v1/truth/carousels/suggestions?since_id=1>; rel=\'prev\'',
});
});
});
it('dispatches the correct actions', async() => {
const expectedActions = [
{ type: 'SUGGESTIONS_V2_FETCH_REQUEST', skipLoading: true },
{
type: 'ACCOUNTS_IMPORT', accounts: [{
acct: response[0].acct,
avatar: response[0].account_avatar,
avatar_static: response[0].account_avatar,
id: response[0].account_id,
note: response[0].note,
verified: response[0].verified,
display_name: response[0].display_name,
}],
},
{
type: 'SUGGESTIONS_TRUTH_FETCH_SUCCESS',
suggestions: response,
next: undefined,
skipLoading: true,
},
{
type: 'RELATIONSHIPS_FETCH_REQUEST',
skipLoading: true,
ids: [response[0].account_id],
},
];
await store.dispatch(fetchSuggestions());
const actions = store.getActions();
expect(actions).toEqual(expectedActions);
});
});
describe('with an unsuccessful API request', () => {
beforeEach(() => {
__stub((mock) => {
mock.onGet('/api/v1/truth/carousels/suggestions').networkError();
});
});
it('should dispatch the correct actions', async() => {
const expectedActions = [
{ type: 'SUGGESTIONS_V2_FETCH_REQUEST', skipLoading: true },
{
type: 'SUGGESTIONS_V2_FETCH_FAIL',
error: new Error('Network Error'),
skipLoading: true,
skipAlert: true,
},
];
await store.dispatch(fetchSuggestions());
const actions = store.getActions();
expect(actions).toEqual(expectedActions);
});
});
});
});

12
app/soapbox/actions/auth.ts
View File

@ -180,8 +180,8 @@ export const verifyCredentials = (token: string, accountUrl?: string) => {
return account;
} else {
if (getState().me === null) dispatch(fetchMeFail(error));
dispatch({ type: VERIFY_CREDENTIALS_FAIL, token, error, skipAlert: true });
return error;
dispatch({ type: VERIFY_CREDENTIALS_FAIL, token, error });
throw error;
}
});
};
@ -214,14 +214,6 @@ export const logIn = (username: string, password: string) =>
if ((error.response?.data as any).error === 'mfa_required') {
// If MFA is required, throw the error and handle it in the component.
throw error;
} else if ((error.response?.data as any).error === 'invalid_grant') {
// Mastodon returns this user-unfriendly error as a catch-all
// for everything from "bad request" to "wrong password".
// Assume our code is correct and it's a wrong password.
dispatch(snackbar.error(messages.invalidCredentials));
} else if ((error.response?.data as any).error) {
// If the backend returns an error, display it.
dispatch(snackbar.error((error.response?.data as any).error));
} else {
// Return "wrong password" message.
dispatch(snackbar.error(messages.invalidCredentials));

10
app/soapbox/actions/me.ts
View File

@ -6,7 +6,7 @@ import api from '../api';
import { loadCredentials } from './auth';
import { importFetchedAccount } from './importer';
import type { AxiosError } from 'axios';
import type { AxiosError, AxiosRequestHeaders } from 'axios';
import type { AppDispatch, RootState } from 'soapbox/store';
import type { APIEntity } from 'soapbox/types/entities';
@ -62,12 +62,16 @@ const persistAuthAccount = (account: APIEntity, params: Record<string, any>) =>
}
};
const patchMe = (params: Record<string, any>) =>
const patchMe = (params: Record<string, any>, isFormData = false) =>
(dispatch: AppDispatch, getState: () => RootState) => {
dispatch(patchMeRequest());
const headers: AxiosRequestHeaders = isFormData ? {
'Content-Type': 'multipart/form-data',
} : {};
return api(getState)
.patch('/api/v1/accounts/update_credentials', params)
.patch('/api/v1/accounts/update_credentials', params, { headers })
.then(response => {
persistAuthAccount(response.data, params);
dispatch(patchMeSuccess(response.data));

10
app/soapbox/actions/moderation.tsx
View File

@ -44,7 +44,7 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm =
const name = state.accounts.get(accountId)!.username;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/user-off.svg'),
icon: require('@tabler/icons/user-off.svg'),
heading: intl.formatMessage(messages.deactivateUserHeading, { acct }),
message: intl.formatMessage(messages.deactivateUserPrompt, { acct }),
confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }),
@ -83,7 +83,7 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/user-minus.svg'),
icon: require('@tabler/icons/user-minus.svg'),
heading: intl.formatMessage(messages.deleteUserHeading, { acct }),
message,
confirm,
@ -106,7 +106,7 @@ const rejectUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
const name = state.accounts.get(accountId)!.username;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/user-off.svg'),
icon: require('@tabler/icons/user-off.svg'),
heading: intl.formatMessage(messages.rejectUserHeading, { acct }),
message: intl.formatMessage(messages.rejectUserPrompt, { acct }),
confirm: intl.formatMessage(messages.rejectUserConfirm, { name }),
@ -127,7 +127,7 @@ const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensiti
const acct = state.accounts.get(accountId)!.acct;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/alert-triangle.svg'),
icon: require('@tabler/icons/alert-triangle.svg'),
heading: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveHeading : messages.markStatusNotSensitiveHeading),
message: intl.formatMessage(sensitive === false ? messages.markStatusSensitivePrompt : messages.markStatusNotSensitivePrompt, { acct }),
confirm: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveConfirm : messages.markStatusNotSensitiveConfirm),
@ -148,7 +148,7 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
const acct = state.accounts.get(accountId)!.acct;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/trash.svg'),
icon: require('@tabler/icons/trash.svg'),
heading: intl.formatMessage(messages.deleteStatusHeading),
message: intl.formatMessage(messages.deleteStatusPrompt, { acct }),
confirm: intl.formatMessage(messages.deleteStatusConfirm),

1
app/soapbox/actions/notifications.ts
View File

@ -89,6 +89,7 @@ const updateNotifications = (notification: APIEntity) =>
const updateNotificationsQueue = (notification: APIEntity, intlMessages: Record<string, string>, intlLocale: string, curPath: string) =>
(dispatch: AppDispatch, getState: () => RootState) => {
if (!notification.type) return; // drop invalid notifications
if (notification.type === 'pleroma:chat_mention') return; // Drop chat notifications, handle them per-chat
const showAlert = getSettings(getState()).getIn(['notifications', 'alerts', notification.type]);

73
app/soapbox/actions/suggestions.ts
View File

@ -1,3 +1,5 @@
import { AxiosResponse } from 'axios';
import { isLoggedIn } from 'soapbox/utils/auth';
import { getFeatures } from 'soapbox/utils/features';
@ -5,6 +7,7 @@ import api, { getLinks } from '../api';
import { fetchRelationships } from './accounts';
import { importFetchedAccounts } from './importer';
import { insertSuggestionsIntoTimeline } from './timelines';
import type { AppDispatch, RootState } from 'soapbox/store';
import type { APIEntity } from 'soapbox/types/entities';
@ -19,6 +22,10 @@ const SUGGESTIONS_V2_FETCH_REQUEST = 'SUGGESTIONS_V2_FETCH_REQUEST';
const SUGGESTIONS_V2_FETCH_SUCCESS = 'SUGGESTIONS_V2_FETCH_SUCCESS';
const SUGGESTIONS_V2_FETCH_FAIL = 'SUGGESTIONS_V2_FETCH_FAIL';
const SUGGESTIONS_TRUTH_FETCH_REQUEST = 'SUGGESTIONS_TRUTH_FETCH_REQUEST';
const SUGGESTIONS_TRUTH_FETCH_SUCCESS = 'SUGGESTIONS_TRUTH_FETCH_SUCCESS';
const SUGGESTIONS_TRUTH_FETCH_FAIL = 'SUGGESTIONS_TRUTH_FETCH_FAIL';
const fetchSuggestionsV1 = (params: Record<string, any> = {}) =>
(dispatch: AppDispatch, getState: () => RootState) => {
dispatch({ type: SUGGESTIONS_FETCH_REQUEST, skipLoading: true });
@ -52,6 +59,48 @@ const fetchSuggestionsV2 = (params: Record<string, any> = {}) =>
});
};
export type SuggestedProfile = {
account_avatar: string
account_id: string
acct: string
display_name: string
note: string
verified: boolean
}
const mapSuggestedProfileToAccount = (suggestedProfile: SuggestedProfile) => ({
id: suggestedProfile.account_id,
avatar: suggestedProfile.account_avatar,
avatar_static: suggestedProfile.account_avatar,
acct: suggestedProfile.acct,
display_name: suggestedProfile.display_name,
note: suggestedProfile.note,
verified: suggestedProfile.verified,
});
const fetchTruthSuggestions = (params: Record<string, any> = {}) =>
(dispatch: AppDispatch, getState: () => RootState) => {
const next = getState().suggestions.next;
dispatch({ type: SUGGESTIONS_V2_FETCH_REQUEST, skipLoading: true });
return api(getState)
.get(next ? next : '/api/v1/truth/carousels/suggestions', next ? {} : { params })
.then((response: AxiosResponse<SuggestedProfile[]>) => {
const suggestedProfiles = response.data;
const next = getLinks(response).refs.find(link => link.rel === 'next')?.uri;
const accounts = suggestedProfiles.map(mapSuggestedProfileToAccount);
dispatch(importFetchedAccounts(accounts));
dispatch({ type: SUGGESTIONS_TRUTH_FETCH_SUCCESS, suggestions: suggestedProfiles, next, skipLoading: true });
return suggestedProfiles;
})
.catch(error => {
dispatch({ type: SUGGESTIONS_V2_FETCH_FAIL, error, skipLoading: true, skipAlert: true });
throw error;
});
};
const fetchSuggestions = (params: Record<string, any> = { limit: 50 }) =>
(dispatch: AppDispatch, getState: () => RootState) => {
const state = getState();
@ -59,17 +108,24 @@ const fetchSuggestions = (params: Record<string, any> = { limit: 50 }) =>
const instance = state.instance;
const features = getFeatures(instance);
if (!me) return;
if (!me) return null;
if (features.suggestionsV2) {
dispatch(fetchSuggestionsV2(params))
if (features.truthSuggestions) {
return dispatch(fetchTruthSuggestions(params))
.then((suggestions: APIEntity[]) => {
const accountIds = suggestions.map((account) => account.account_id);
dispatch(fetchRelationships(accountIds));
})
.catch(() => { });
} else if (features.suggestionsV2) {
return dispatch(fetchSuggestionsV2(params))
.then((suggestions: APIEntity[]) => {
const accountIds = suggestions.map(({ account }) => account.id);
dispatch(fetchRelationships(accountIds));
})
.catch(() => { });
} else if (features.suggestions) {
dispatch(fetchSuggestionsV1(params))
return dispatch(fetchSuggestionsV1(params))
.then((accounts: APIEntity[]) => {
const accountIds = accounts.map(({ id }) => id);
dispatch(fetchRelationships(accountIds));
@ -77,9 +133,14 @@ const fetchSuggestions = (params: Record<string, any> = { limit: 50 }) =>
.catch(() => { });
} else {
// Do nothing
return null;
}
};
const fetchSuggestionsForTimeline = () => (dispatch: AppDispatch, _getState: () => RootState) => {
dispatch(fetchSuggestions({ limit: 20 }))?.then(() => dispatch(insertSuggestionsIntoTimeline()));
};
const dismissSuggestion = (accountId: string) =>
(dispatch: AppDispatch, getState: () => RootState) => {
if (!isLoggedIn(getState)) return;
@ -100,8 +161,12 @@ export {
SUGGESTIONS_V2_FETCH_REQUEST,
SUGGESTIONS_V2_FETCH_SUCCESS,
SUGGESTIONS_V2_FETCH_FAIL,
SUGGESTIONS_TRUTH_FETCH_REQUEST,
SUGGESTIONS_TRUTH_FETCH_SUCCESS,
SUGGESTIONS_TRUTH_FETCH_FAIL,
fetchSuggestionsV1,
fetchSuggestionsV2,
fetchSuggestions,
fetchSuggestionsForTimeline,
dismissSuggestion,
};

31
app/soapbox/actions/timelines.ts
View File

@ -12,21 +12,22 @@ import type { AxiosError } from 'axios';
import type { AppDispatch, RootState } from 'soapbox/store';
import type { APIEntity, Status } from 'soapbox/types/entities';
const TIMELINE_UPDATE = 'TIMELINE_UPDATE';
const TIMELINE_DELETE = 'TIMELINE_DELETE';
const TIMELINE_CLEAR = 'TIMELINE_CLEAR';
const TIMELINE_UPDATE = 'TIMELINE_UPDATE';
const TIMELINE_DELETE = 'TIMELINE_DELETE';
const TIMELINE_CLEAR = 'TIMELINE_CLEAR';
const TIMELINE_UPDATE_QUEUE = 'TIMELINE_UPDATE_QUEUE';
const TIMELINE_DEQUEUE = 'TIMELINE_DEQUEUE';
const TIMELINE_SCROLL_TOP = 'TIMELINE_SCROLL_TOP';
const TIMELINE_EXPAND_REQUEST = 'TIMELINE_EXPAND_REQUEST';
const TIMELINE_EXPAND_SUCCESS = 'TIMELINE_EXPAND_SUCCESS';
const TIMELINE_EXPAND_FAIL = 'TIMELINE_EXPAND_FAIL';
const TIMELINE_EXPAND_FAIL = 'TIMELINE_EXPAND_FAIL';
const TIMELINE_CONNECT = 'TIMELINE_CONNECT';
const TIMELINE_CONNECT = 'TIMELINE_CONNECT';
const TIMELINE_DISCONNECT = 'TIMELINE_DISCONNECT';
const TIMELINE_REPLACE = 'TIMELINE_REPLACE';
const TIMELINE_INSERT = 'TIMELINE_INSERT';
const MAX_QUEUED_ITEMS = 40;
@ -110,9 +111,9 @@ const dequeueTimeline = (timelineId: string, expandFunc?: (lastStatusId: string)
const deleteFromTimelines = (id: string) =>
(dispatch: AppDispatch, getState: () => RootState) => {
const accountId = getState().statuses.get(id)?.account;
const accountId = getState().statuses.get(id)?.account;
const references = getState().statuses.filter(status => status.get('reblog') === id).map(status => [status.get('id'), status.get('account')]);
const reblogOf = getState().statuses.getIn([id, 'reblog'], null);
const reblogOf = getState().statuses.getIn([id, 'reblog'], null);
dispatch({
type: TIMELINE_DELETE,
@ -127,7 +128,7 @@ const clearTimeline = (timeline: string) =>
(dispatch: AppDispatch) =>
dispatch({ type: TIMELINE_CLEAR, timeline });
const noOp = () => {};
const noOp = () => { };
const noOpAsync = () => () => new Promise(f => f(undefined));
const parseTags = (tags: Record<string, any[]> = {}, mode: 'any' | 'all' | 'none') => {
@ -141,7 +142,7 @@ const replaceHomeTimeline = (
{ maxId }: Record<string, any> = {},
) => (dispatch: AppDispatch, _getState: () => RootState) => {
dispatch({ type: TIMELINE_REPLACE, accountId });
dispatch(expandHomeTimeline({ accountId, maxId }));
dispatch(expandHomeTimeline({ accountId, maxId }, () => dispatch(insertSuggestionsIntoTimeline())));
};
const expandTimeline = (timelineId: string, path: string, params: Record<string, any> = {}, done = noOp) =>
@ -214,9 +215,9 @@ const expandGroupTimeline = (id: string, { maxId }: Record<string, any> = {}, do
const expandHashtagTimeline = (hashtag: string, { maxId, tags }: Record<string, any> = {}, done = noOp) => {
return expandTimeline(`hashtag:${hashtag}`, `/api/v1/timelines/tag/${hashtag}`, {
max_id: maxId,
any: parseTags(tags, 'any'),
all: parseTags(tags, 'all'),
none: parseTags(tags, 'none'),
any: parseTags(tags, 'any'),
all: parseTags(tags, 'all'),
none: parseTags(tags, 'none'),
}, done);
};
@ -259,6 +260,10 @@ const scrollTopTimeline = (timeline: string, top: boolean) => ({
top,
});
const insertSuggestionsIntoTimeline = () => (dispatch: AppDispatch, getState: () => RootState) => {
dispatch({ type: TIMELINE_INSERT, timeline: 'home' });
};
export {
TIMELINE_UPDATE,
TIMELINE_DELETE,
@ -272,6 +277,7 @@ export {
TIMELINE_CONNECT,
TIMELINE_DISCONNECT,
TIMELINE_REPLACE,
TIMELINE_INSERT,
MAX_QUEUED_ITEMS,
processTimelineUpdate,
updateTimeline,
@ -298,4 +304,5 @@ export {
connectTimeline,
disconnectTimeline,
scrollTopTimeline,
insertSuggestionsIntoTimeline,
};

14
app/soapbox/components/__tests__/account.test.tsx
View File

@ -5,6 +5,8 @@ import { render, screen } from '../../jest/test-helpers';
import { normalizeAccount } from '../../normalizers';
import Account from '../account';
import type { ReducerAccount } from 'soapbox/reducers/accounts';
describe('<Account />', () => {
it('renders account name and username', () => {
const account = normalizeAccount({
@ -12,7 +14,7 @@ describe('<Account />', () => {
acct: 'justin-username',
display_name: 'Justin L',
avatar: 'test.jpg',
});
}) as ReducerAccount;
const store = {
accounts: ImmutableMap({
@ -20,7 +22,7 @@ describe('<Account />', () => {
}),
};
render(<Account account={account} />, null, store);
render(<Account account={account} />, undefined, store);
expect(screen.getByTestId('account')).toHaveTextContent('Justin L');
expect(screen.getByTestId('account')).toHaveTextContent(/justin-username/i);
});
@ -33,7 +35,7 @@ describe('<Account />', () => {
display_name: 'Justin L',
avatar: 'test.jpg',
verified: true,
});
}) as ReducerAccount;
const store = {
accounts: ImmutableMap({
@ -41,7 +43,7 @@ describe('<Account />', () => {
}),
};
render(<Account account={account} />, null, store);
render(<Account account={account} />, undefined, store);
expect(screen.getByTestId('verified-badge')).toBeInTheDocument();
});
@ -52,7 +54,7 @@ describe('<Account />', () => {
display_name: 'Justin L',
avatar: 'test.jpg',
verified: false,
});
}) as ReducerAccount;
const store = {
accounts: ImmutableMap({
@ -60,7 +62,7 @@ describe('<Account />', () => {
}),
};
render(<Account account={account} />, null, store);
render(<Account account={account} />, undefined, store);
expect(screen.queryAllByTestId('verified-badge')).toHaveLength(0);
});
});

4
app/soapbox/components/__tests__/avatar.test.tsx
View File

@ -5,6 +5,8 @@ import { normalizeAccount } from 'soapbox/normalizers';
import { render, screen } from '../../jest/test-helpers';
import Avatar from '../avatar';
import type { ReducerAccount } from 'soapbox/reducers/accounts';
describe('<Avatar />', () => {
const account = normalizeAccount({
username: 'alice',
@ -12,7 +14,7 @@ describe('<Avatar />', () => {
display_name: 'Alice',
avatar: '/animated/alice.gif',
avatar_static: '/static/alice.jpg',
});
}) as ReducerAccount;
const size = 100;

13
app/soapbox/components/__tests__/avatar_overlay.test.tsx
View File

@ -1,25 +1,28 @@
import { fromJS } from 'immutable';
import React from 'react';
import { normalizeAccount } from 'soapbox/normalizers';
import { render, screen } from '../../jest/test-helpers';
import AvatarOverlay from '../avatar_overlay';
import type { ReducerAccount } from 'soapbox/reducers/accounts';
describe('<AvatarOverlay', () => {
const account = fromJS({
const account = normalizeAccount({
username: 'alice',
acct: 'alice',
display_name: 'Alice',
avatar: '/animated/alice.gif',
avatar_static: '/static/alice.jpg',
});
}) as ReducerAccount;
const friend = fromJS({
const friend = normalizeAccount({
username: 'eve',
acct: 'eve@blackhat.lair',
display_name: 'Evelyn',
avatar: '/animated/eve.gif',
avatar_static: '/static/eve.jpg',
});
}) as ReducerAccount;
it('renders a overlay avatar', () => {
render(<AvatarOverlay account={account} friend={friend} />);

4
app/soapbox/components/__tests__/display_name.test.tsx
View File

@ -5,9 +5,11 @@ import { normalizeAccount } from 'soapbox/normalizers';
import { render, screen } from '../../jest/test-helpers';
import DisplayName from '../display-name';
import type { ReducerAccount } from 'soapbox/reducers/accounts';
describe('<DisplayName />', () => {
it('renders display name + account name', () => {
const account = normalizeAccount({ acct: 'bar@baz' });
const account = normalizeAccount({ acct: 'bar@baz' }) as ReducerAccount;
render(<DisplayName account={account} />);
expect(screen.getByTestId('display-name')).toHaveTextContent('bar@baz');

1
app/soapbox/components/__tests__/emoji_selector.test.tsx
View File

@ -6,6 +6,7 @@ import EmojiSelector from '../emoji_selector';
describe('<EmojiSelector />', () => {
it('renders correctly', () => {
const children = <EmojiSelector />;
// @ts-ignore
children.__proto__.addEventListener = () => {};
render(children);

8
app/soapbox/components/__tests__/quoted-status.test.tsx
View File

@ -4,6 +4,8 @@ import { render, screen, rootState } from '../../jest/test-helpers';
import { normalizeStatus, normalizeAccount } from '../../normalizers';
import QuotedStatus from '../quoted-status';
import type { ReducerStatus } from 'soapbox/reducers/statuses';
describe('<QuotedStatus />', () => {
it('renders content', () => {
const account = normalizeAccount({
@ -16,11 +18,11 @@ describe('<QuotedStatus />', () => {
account,
content: 'hello world',
contentHtml: 'hello world',
});
}) as ReducerStatus;
const state = rootState.setIn(['accounts', '1', account]);
const state = rootState.setIn(['accounts', '1'], account);
render(<QuotedStatus status={status} />, null, state);
render(<QuotedStatus status={status} />, undefined, state);
screen.getByText(/hello world/i);
expect(screen.getByTestId('quoted-status')).toHaveTextContent(/hello world/i);
});

4
app/soapbox/components/__tests__/scroll-top-button.test.tsx
View File

@ -28,7 +28,7 @@ describe('<ScrollTopButton />', () => {
message={messages.queue}
/>,
);
expect(screen.getByText('Click to see 1 new post', { hidden: true })).toBeInTheDocument();
expect(screen.getByText('Click to see 1 new post')).toBeInTheDocument();
render(
<ScrollTopButton
@ -38,6 +38,6 @@ describe('<ScrollTopButton />', () => {
message={messages.queue}
/>,
);
expect(screen.getByText('Click to see 9999999 new posts', { hidden: true })).toBeInTheDocument();
expect(screen.getByText('Click to see 9999999 new posts')).toBeInTheDocument();
});
});

66
app/soapbox/components/account.tsx
View File

@ -9,7 +9,7 @@ import { getAcct } from 'soapbox/utils/accounts';
import { displayFqn } from 'soapbox/utils/state';
import RelativeTimestamp from './relative_timestamp';
import { Avatar, Emoji, HStack, Icon, IconButton, Text } from './ui';
import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui';
import type { Account as AccountEntity } from 'soapbox/types/entities';
@ -57,7 +57,9 @@ interface IAccount {
timestamp?: string | Date,
timestampUrl?: string,
futureTimestamp?: boolean,
withAccountNote?: boolean,
withDate?: boolean,
withLinkToProfile?: boolean,
withRelationship?: boolean,
showEdit?: boolean,
emoji?: string,
@ -78,7 +80,9 @@ const Account = ({
timestamp,
timestampUrl,
futureTimestamp = false,
withAccountNote = false,
withDate = false,
withLinkToProfile = true,
withRelationship = true,
showEdit = false,
emoji,
@ -154,12 +158,12 @@ const Account = ({
if (withDate) timestamp = account.created_at;
const LinkEl: any = showProfileHoverCard ? Link : 'div';
const LinkEl: any = withLinkToProfile ? Link : 'div';
return (
<div data-testid='account' className='flex-shrink-0 group block w-full' ref={overflowRef}>
<HStack alignItems={actionAlignment} justifyContent='between'>
<HStack alignItems='center' space={3} grow>
<HStack alignItems={withAccountNote ? 'top' : 'center'} space={3}>
<ProfilePopper
condition={showProfileHoverCard}
wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
@ -202,35 +206,45 @@ const Account = ({
</LinkEl>
</ProfilePopper>
<HStack alignItems='center' space={1} style={style}>
<Text theme='muted' size='sm' truncate>@{username}</Text>
<Stack space={withAccountNote ? 1 : 0}>
<HStack alignItems='center' space={1} style={style}>
<Text theme='muted' size='sm' truncate>@{username}</Text>
{account.favicon && (
<InstanceFavicon account={account} />
)}
{account.favicon && (
<InstanceFavicon account={account} />
)}
{(timestamp) ? (
<>
<Text tag='span' theme='muted' size='sm'>&middot;</Text>
{(timestamp) ? (
<>
<Text tag='span' theme='muted' size='sm'>&middot;</Text>
{timestampUrl ? (
<Link to={timestampUrl} className='hover:underline'>
{timestampUrl ? (
<Link to={timestampUrl} className='hover:underline'>
<RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' futureDate={futureTimestamp} />
</Link>
) : (
<RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' futureDate={futureTimestamp} />
</Link>
) : (
<RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' futureDate={futureTimestamp} />
)}
</>
) : null}
)}
</>
) : null}
{showEdit ? (
<>
<Text tag='span' theme='muted' size='sm'>&middot;</Text>
{showEdit ? (
<>
<Text tag='span' theme='muted' size='sm'>&middot;</Text>
<Icon className='h-5 w-5 stroke-[1.35]' src={require('@tabler/icons/icons/pencil.svg')} />
</>
) : null}
</HStack>
<Icon className='h-5 w-5 stroke-[1.35]' src={require('@tabler/icons/pencil.svg')} />
</>
) : null}
</HStack>
{withAccountNote && (
<Text
size='sm'
dangerouslySetInnerHTML={{ __html: account.note_emojified }}
className='mr-2'
/>
)}
</Stack>
</div>
</HStack>

4
app/soapbox/components/account_search.tsx
View File

@ -70,8 +70,8 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
/>
</label>
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
<Icon src={require('@tabler/icons/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty() })} />
<Icon src={require('@tabler/icons/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
<Icon src={require('@tabler/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty() })} />
<Icon src={require('@tabler/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
</div>
</div>
);

8
app/soapbox/components/birthday_input.tsx
View File

@ -70,7 +70,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
<div className='flex items-center justify-between'>
<IconButton
className='datepicker__button'
src={require('@tabler/icons/icons/chevron-left.svg')}
src={require('@tabler/icons/chevron-left.svg')}
onClick={decreaseMonth}
disabled={prevMonthButtonDisabled}
aria-label={intl.formatMessage(messages.previousMonth)}
@ -79,7 +79,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
{intl.formatDate(date, { month: 'long' })}
<IconButton
className='datepicker__button'
src={require('@tabler/icons/icons/chevron-right.svg')}
src={require('@tabler/icons/chevron-right.svg')}
onClick={increaseMonth}
disabled={nextMonthButtonDisabled}
aria-label={intl.formatMessage(messages.nextMonth)}
@ -89,7 +89,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
<div className='flex items-center justify-between'>
<IconButton
className='datepicker__button'
src={require('@tabler/icons/icons/chevron-left.svg')}
src={require('@tabler/icons/chevron-left.svg')}
onClick={decreaseYear}
disabled={prevYearButtonDisabled}
aria-label={intl.formatMessage(messages.previousYear)}
@ -98,7 +98,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
{intl.formatDate(date, { year: 'numeric' })}
<IconButton
className='datepicker__button'
src={require('@tabler/icons/icons/chevron-right.svg')}
src={require('@tabler/icons/chevron-right.svg')}
onClick={increaseYear}
disabled={nextYearButtonDisabled}
aria-label={intl.formatMessage(messages.nextYear)}

2
app/soapbox/components/display-name.tsx
View File

@ -22,7 +22,7 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = fal
const joinedAt = createdAt ? (
<div className='account__joined-at'>
<Icon src={require('@tabler/icons/icons/clock.svg')} />
<Icon src={require('@tabler/icons/clock.svg')} />
<RelativeTimestamp timestamp={createdAt} />
</div>
) : null;

4
app/soapbox/components/domain.tsx
View File

@ -21,7 +21,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
// const onBlockDomain = () => {
// dispatch(openModal('CONFIRM', {
// icon: require('@tabler/icons/icons/ban.svg'),
// icon: require('@tabler/icons/ban.svg'),
// heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
// message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable.' values={{ domain: <strong>{domain}</strong> }} />,
// confirm: intl.formatMessage(messages.blockDomainConfirm),
@ -41,7 +41,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
</span>
<div className='domain__buttons'>
<IconButton active src={require('@tabler/icons/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
<IconButton active src={require('@tabler/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
</div>
</div>
</div>

2
app/soapbox/components/dropdown_menu.tsx
View File

@ -366,7 +366,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
}
render() {
const { src = require('@tabler/icons/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children } = this.props;
const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children } = this.props;
const open = this.state.id === openDropdownId;
return (

2
app/soapbox/components/error_boundary.tsx
View File

@ -120,7 +120,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
{logo ? (
<img className='h-12' src={logo} alt={siteTitle} />
) : (
<SvgIcon className='h-12 w-12' src={require('@tabler/icons/icons/home.svg')} alt={siteTitle} />
<SvgIcon className='h-12 w-12' src={require('@tabler/icons/home.svg')} alt={siteTitle} />
)}
</a>
</div>

2
app/soapbox/components/list.tsx
View File

@ -54,7 +54,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick }) => {
<div className='flex flex-row items-center text-gray-500 dark:text-gray-400'>
{children}
<Icon src={require('@tabler/icons/icons/chevron-right.svg')} className='ml-1' />
<Icon src={require('@tabler/icons/chevron-right.svg')} className='ml-1' />
</div>
) : renderChildren()}
</Comp>

6
app/soapbox/components/media_gallery.js
View File

@ -149,7 +149,7 @@ class Item extends React.PureComponent {
const attachmentIcon = (
<Icon
className='h-16 w-16 text-gray-800 dark:text-gray-200'
src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type'])] || require('@tabler/icons/icons/paperclip.svg')}
src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type'])] || require('@tabler/icons/paperclip.svg')}
/>
);
@ -602,7 +602,7 @@ class MediaGallery extends React.PureComponent {
(visible || compact) ? (
<Button
text={intl.formatMessage(messages.toggle_visible)}
icon={visible ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}
icon={visible ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
onClick={this.handleOpen}
theme='transparent'
size='sm'
@ -617,7 +617,7 @@ class MediaGallery extends React.PureComponent {
</Text>
</div>
<Button type='button' theme='primary' size='sm' icon={require('@tabler/icons/icons/eye.svg')}>
<Button type='button' theme='primary' size='sm' icon={require('@tabler/icons/eye.svg')}>
<FormattedMessage id='status.sensitive_warning.action' defaultMessage='Show content' />
</Button>
</div>

2
app/soapbox/components/modal_root.js
View File

@ -78,7 +78,7 @@ class ModalRoot extends React.PureComponent {
if (hasComposeContent && type === 'COMPOSE') {
onOpenModal('CONFIRM', {
icon: require('@tabler/icons/icons/trash.svg'),
icon: require('@tabler/icons/trash.svg'),
heading: isEditing ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' /> : <FormattedMessage id='confirmations.delete.heading' defaultMessage='Delete post' />,
message: isEditing ? <FormattedMessage id='confirmations.cancel_editing.message' defaultMessage='Are you sure you want to cancel editing this post? All changes will be lost.' /> : <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this post?' />,
confirm: intl.formatMessage(messages.confirm),

4
app/soapbox/components/polls/__tests__/poll-footer.test.tsx
View File

@ -6,7 +6,7 @@ import { Provider } from 'react-redux';
import { __stub } from 'soapbox/api';
import { normalizePoll } from 'soapbox/normalizers/poll';
import { mockStore, render, rootReducer, screen } from '../../../jest/test-helpers';
import { mockStore, render, screen, rootState } from '../../../jest/test-helpers';
import PollFooter from '../poll-footer';
let poll = normalizePoll({
@ -36,7 +36,7 @@ describe('<PollFooter />', () => {
});
const user = userEvent.setup();
const store = mockStore(rootReducer(undefined, {}));
const store = mockStore(rootState);
render(
<Provider store={store}>
<IntlProvider locale='en'>

4
app/soapbox/components/polls/poll-option.tsx
View File

@ -85,7 +85,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
aria-label={option.title}
>
{active && (
<Icon src={require('@tabler/icons/icons/check.svg')} className='text-white dark:text-primary-900 w-4 h-4' />
<Icon src={require('@tabler/icons/check.svg')} className='text-white dark:text-primary-900 w-4 h-4' />
)}
</span>
</div>
@ -138,7 +138,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
<HStack space={2} alignItems='center' className='relative'>
{voted ? (
<Icon
src={require('@tabler/icons/icons/circle-check.svg')}
src={require('@tabler/icons/circle-check.svg')}
alt={intl.formatMessage(messages.voted)}
className='text-primary-600 dark:text-primary-800 dark:fill-white w-4 h-4'
/>

3
app/soapbox/components/quoted-status.tsx
View File

@ -116,7 +116,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
if (onCancel) {
actions = {
onActionClick: handleClose,
actionIcon: require('@tabler/icons/icons/x.svg'),
actionIcon: require('@tabler/icons/x.svg'),
actionAlignment: 'top',
actionTitle: intl.formatMessage(messages.cancel),
};
@ -137,6 +137,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
timestamp={status.created_at}
withRelationship={false}
showProfileHoverCard={!compose}
withLinkToProfile={!compose}
/>
{renderReplyMentions()}

14
app/soapbox/components/scroll-top-button.tsx
View File

@ -34,6 +34,12 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
const [scrolled, setScrolled] = useState<boolean>(false);
const autoload = settings.get('autoloadTimelines') === true;
const visible = count > 0 && scrolled;
const classes = classNames('left-1/2 -translate-x-1/2 fixed top-20 z-50', {
'hidden': !visible,
});
const getScrollTop = (): number => {
return (document.scrollingElement || document.documentElement).scrollTop;
};
@ -75,16 +81,10 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
maybeUnload();
}, [count]);
const visible = count > 0 && scrolled;
const classes = classNames('left-1/2 -translate-x-1/2 fixed top-20 z-50', {
'hidden': !visible,
});
return (
<div className={classes}>
<a className='flex items-center bg-primary-600 hover:bg-primary-700 hover:scale-105 active:scale-100 transition-transform text-white rounded-full px-4 py-2 space-x-1.5 cursor-pointer whitespace-nowrap' onClick={handleClick}>
<Icon src={require('@tabler/icons/icons/arrow-bar-to-up.svg')} />
<Icon src={require('@tabler/icons/arrow-bar-to-up.svg')} />
{(count > 0) && (
<Text theme='inherit' size='sm'>

28
app/soapbox/components/sidebar-navigation.tsx
View File

@ -43,7 +43,7 @@ const SidebarNavigation = () => {
menu.push({
to: '/follow_requests',
text: intl.formatMessage(messages.follow_requests),
icon: require('@tabler/icons/icons/user-plus.svg'),
icon: require('@tabler/icons/user-plus.svg'),
count: followRequestsCount,
});
}
@ -52,7 +52,7 @@ const SidebarNavigation = () => {
menu.push({
to: '/bookmarks',
text: intl.formatMessage(messages.bookmarks),
icon: require('@tabler/icons/icons/bookmark.svg'),
icon: require('@tabler/icons/bookmark.svg'),
});
}
@ -60,14 +60,14 @@ const SidebarNavigation = () => {
menu.push({
to: '/lists',
text: intl.formatMessage(messages.lists),
icon: require('@tabler/icons/icons/list.svg'),
icon: require('@tabler/icons/list.svg'),
});
}
if (settings.get('isDeveloper')) {
menu.push({
to: '/developers',
icon: require('@tabler/icons/icons/code.svg'),
icon: require('@tabler/icons/code.svg'),
text: intl.formatMessage(messages.developers),
});
}
@ -75,7 +75,7 @@ const SidebarNavigation = () => {
if (account.staff) {
menu.push({
to: '/soapbox/admin',
icon: require('@tabler/icons/icons/dashboard.svg'),
icon: require('@tabler/icons/dashboard.svg'),
text: intl.formatMessage(messages.dashboard),
count: dashboardCount,
});
@ -89,7 +89,7 @@ const SidebarNavigation = () => {
if (features.publicTimeline) {
menu.push({
to: '/timeline/local',
icon: features.federating ? require('@tabler/icons/icons/users.svg') : require('@tabler/icons/icons/world.svg'),
icon: features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg'),
text: features.federating ? instance.title : intl.formatMessage(messages.all),
});
}
@ -113,7 +113,7 @@ const SidebarNavigation = () => {
return (
<SidebarNavigationLink
to='/chats'
icon={require('@tabler/icons/icons/messages.svg')}
icon={require('@tabler/icons/messages.svg')}
count={chatsCount}
text={<FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' />}
/>
@ -124,7 +124,7 @@ const SidebarNavigation = () => {
return (
<SidebarNavigationLink
to='/messages'
icon={require('@tabler/icons/icons/mail.svg')}
icon={require('@tabler/icons/mail.svg')}
text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
/>
);
@ -138,13 +138,13 @@ const SidebarNavigation = () => {
<div className='flex flex-col space-y-2'>
<SidebarNavigationLink
to='/'
icon={require('@tabler/icons/icons/home.svg')}
icon={require('@tabler/icons/home.svg')}
text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
/>
<SidebarNavigationLink
to='/search'
icon={require('@tabler/icons/icons/search.svg')}
icon={require('@tabler/icons/search.svg')}
text={<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />}
/>
@ -152,7 +152,7 @@ const SidebarNavigation = () => {
<>
<SidebarNavigationLink
to='/notifications'
icon={require('@tabler/icons/icons/bell.svg')}
icon={require('@tabler/icons/bell.svg')}
count={notificationCount}
text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
/>
@ -161,13 +161,13 @@ const SidebarNavigation = () => {
<SidebarNavigationLink
to={`/@${account.acct}`}
icon={require('@tabler/icons/icons/user.svg')}
icon={require('@tabler/icons/user.svg')}
text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
/>
<SidebarNavigationLink
to='/settings'
icon={require('@tabler/icons/icons/settings.svg')}
icon={require('@tabler/icons/settings.svg')}
text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
/>
</>
@ -176,7 +176,7 @@ const SidebarNavigation = () => {
{menu.length > 0 && (
<DropdownMenu items={menu}>
<SidebarNavigationLink
icon={require('@tabler/icons/icons/dots-circle-horizontal.svg')}
icon={require('@tabler/icons/dots-circle-horizontal.svg')}
count={dashboardCount}
text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
/>

38
app/soapbox/components/sidebar_menu.tsx
View File

@ -84,7 +84,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
const getAccount = makeGetAccount();
const instance = useAppSelector((state) => state.instance);
const me = useAppSelector((state) => state.me);
const account = useAppSelector((state) => me ? getAccount(state, me) : null);
const account = useAppSelector((state) => me ? getAccount(state, me) : null);
const otherAccounts: ImmutableList<AccountEntity> = useAppSelector((state) => getOtherAccounts(state));
const sidebarOpen = useAppSelector((state) => state.sidebar.sidebarOpen);
const settings = useAppSelector((state) => getSettings(state));
@ -121,7 +121,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
const renderAccount = (account: AccountEntity) => (
<a href='#' className='block py-2' onClick={handleSwitchAccount(account)} key={account.id}>
<div className='pointer-events-none'>
<Account account={account} showProfileHoverCard={false} withRelationship={false} />
<Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
</div>
</a>
);
@ -158,7 +158,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<IconButton
title='close'
onClick={handleClose}
src={require('@tabler/icons/icons/x.svg')}
src={require('@tabler/icons/x.svg')}
ref={closeButtonRef}
className='text-gray-400 hover:text-gray-600'
/>
@ -166,7 +166,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<Stack space={1}>
<Link to={`/@${account.acct}`} onClick={onClose}>
<Account account={account} showProfileHoverCard={false} />
<Account account={account} showProfileHoverCard={false} withLinkToProfile={false} />
</Link>
<Stack>
@ -177,7 +177,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
</Text>
<Icon
src={require('@tabler/icons/icons/chevron-down.svg')}
src={require('@tabler/icons/chevron-down.svg')}
className={classNames('text-black dark:text-white transition-transform', {
'rotate-180': switcher,
})}
@ -190,7 +190,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{otherAccounts.map(account => renderAccount(account))}
<NavLink className='flex py-2 space-x-1' to='/login/add' onClick={handleClose}>
<Icon className='dark:text-white' src={require('@tabler/icons/icons/plus.svg')} />
<Icon className='dark:text-white' src={require('@tabler/icons/plus.svg')} />
<Text>{intl.formatMessage(messages.addAccount)}</Text>
</NavLink>
</div>
@ -208,7 +208,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink
to={`/@${account.acct}`}
icon={require('@tabler/icons/icons/user.svg')}
icon={require('@tabler/icons/user.svg')}
text={intl.formatMessage(messages.profile)}
onClick={onClose}
/>
@ -216,7 +216,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.bookmarks && (
<SidebarLink
to='/bookmarks'
icon={require('@tabler/icons/icons/bookmark.svg')}
icon={require('@tabler/icons/bookmark.svg')}
text={intl.formatMessage(messages.bookmarks)}
onClick={onClose}
/>
@ -225,7 +225,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.lists && (
<SidebarLink
to='/lists'
icon={require('@tabler/icons/icons/list.svg')}
icon={require('@tabler/icons/list.svg')}
text={intl.formatMessage(messages.lists)}
onClick={onClose}
/>
@ -234,7 +234,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{settings.get('isDeveloper') && (
<SidebarLink
to='/developers'
icon={require('@tabler/icons/icons/code.svg')}
icon={require('@tabler/icons/code.svg')}
text={intl.formatMessage(messages.developers)}
onClick={onClose}
/>
@ -245,7 +245,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink
to='/timeline/local'
icon={features.federating ? require('@tabler/icons/icons/users.svg') : require('@tabler/icons/icons/world.svg')}
icon={features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg')}
text={features.federating ? instance.title : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
onClick={onClose}
/>
@ -264,21 +264,21 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink
to='/blocks'
icon={require('@tabler/icons/icons/ban.svg')}
icon={require('@tabler/icons/ban.svg')}
text={intl.formatMessage(messages.blocks)}
onClick={onClose}
/>
<SidebarLink
to='/mutes'
icon={require('@tabler/icons/icons/circle-x.svg')}
icon={require('@tabler/icons/circle-x.svg')}
text={intl.formatMessage(messages.mutes)}
onClick={onClose}
/>
<SidebarLink
to='/settings/preferences'
icon={require('@tabler/icons/icons/settings.svg')}
icon={require('@tabler/icons/settings.svg')}
text={intl.formatMessage(messages.preferences)}
onClick={onClose}
/>
@ -286,7 +286,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.federating && (
<SidebarLink
to='/domain_blocks'
icon={require('@tabler/icons/icons/ban.svg')}
icon={require('@tabler/icons/ban.svg')}
text={intl.formatMessage(messages.domainBlocks)}
onClick={onClose}
/>
@ -295,7 +295,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.filters && (
<SidebarLink
to='/filters'
icon={require('@tabler/icons/icons/filter.svg')}
icon={require('@tabler/icons/filter.svg')}
text={intl.formatMessage(messages.filters)}
onClick={onClose}
/>
@ -304,7 +304,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{account.admin && (
<SidebarLink
to='/soapbox/config'
icon={require('@tabler/icons/icons/settings.svg')}
icon={require('@tabler/icons/settings.svg')}
text={intl.formatMessage(messages.soapboxConfig)}
onClick={onClose}
/>
@ -313,7 +313,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.import && (
<SidebarLink
to='/settings/import'
icon={require('@tabler/icons/icons/cloud-upload.svg')}
icon={require('@tabler/icons/cloud-upload.svg')}
text={intl.formatMessage(messages.importData)}
onClick={onClose}
/>
@ -323,7 +323,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink
to='/logout'
icon={require('@tabler/icons/icons/logout.svg')}
icon={require('@tabler/icons/logout.svg')}
text={intl.formatMessage(messages.logout)}
onClick={onClickLogOut}
/>

38
app/soapbox/components/status-action-button.tsx
View File

@ -1,7 +1,7 @@
import classNames from 'classnames';
import React from 'react';
import { Text, Icon } from 'soapbox/components/ui';
import { Text, Icon, Emoji } from 'soapbox/components/ui';
import { shortNumberFormat } from 'soapbox/utils/numbers';
const COLORS = {
@ -15,7 +15,7 @@ interface IStatusActionCounter {
count: number,
}
/** Action button numerical counter, eg "5" likes */
/** Action button numerical counter, eg "5" likes. */
const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
return (
<Text size='xs' weight='semibold' theme='inherit'>
@ -31,10 +31,11 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
active?: boolean,
color?: Color,
filled?: boolean,
emoji?: string,
}
const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
const { icon, className, iconClassName, active, color, filled = false, count = 0, ...filteredProps } = props;
const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, ...filteredProps } = props;
return (
<button
@ -46,22 +47,29 @@ const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: Re
'bg-white dark:bg-transparent',
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',
{
'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && color === COLORS.accent,
'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && color === COLORS.success,
'text-black dark:text-white': active && emoji,
'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && !emoji && color === COLORS.accent,
'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && !emoji && color === COLORS.success,
},
className,
)}
{...filteredProps}
>
<Icon
src={icon}
className={classNames(
{
'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
},
iconClassName,
)}
/>
{emoji ? (
<span className='block w-6 h-6 flex items-center justify-center'>
<Emoji className='w-full h-full p-0.5' emoji={emoji} />
</span>
) : (
<Icon
src={icon}
className={classNames(
{
'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
},
iconClassName,
)}
/>
)}
{(count || null) && (
<StatusActionCounter count={count} />

37
app/soapbox/components/status.tsx
View File

@ -84,8 +84,6 @@ interface IStatus extends RouteComponentProps {
onMoveDown: (statusId: string, featured?: boolean) => void,
getScrollPosition?: () => ScrollPosition | undefined,
updateScrollBottom?: (bottom: number) => void,
cacheMediaWidth: () => void,
cachedMediaWidth: number,
group: ImmutableMap<string, any>,
displayMedia: string,
allowedEmoji: ImmutableList<string>,
@ -134,11 +132,11 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
this.didShowCard = Boolean(!this.props.muted && !this.props.hidden && this.props.status && this.props.status.card);
}
getSnapshotBeforeUpdate(): ScrollPosition | undefined {
getSnapshotBeforeUpdate(): ScrollPosition | null {
if (this.props.getScrollPosition) {
return this.props.getScrollPosition();
return this.props.getScrollPosition() || null;
} else {
return undefined;
return null;
}
}
@ -346,7 +344,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
prepend = (
<div className='pt-4 px-4'>
<HStack alignItems='center' space={1}>
<Icon src={require('@tabler/icons/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
<Icon src={require('@tabler/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
<Text size='sm' theme='muted' weight='medium'>
<FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
@ -365,7 +363,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
onClick={(event) => event.stopPropagation()}
className='hidden sm:flex items-center text-gray-500 text-xs font-medium space-x-1 hover:underline'
>
<Icon src={require('@tabler/icons/icons/repeat.svg')} className='text-green-600' />
<Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
<HStack alignItems='center'>
<FormattedMessage
@ -388,7 +386,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
onClick={(event) => event.stopPropagation()}
className='flex items-center text-gray-500 text-xs font-medium space-x-1 hover:underline'
>
<Icon src={require('@tabler/icons/icons/repeat.svg')} className='text-green-600' />
<Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
<span>
<FormattedMessage
@ -474,18 +472,17 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
{reblogElementMobile}
<div className='mb-4'>
<HStack justifyContent='between' alignItems='start'>
<AccountContainer
key={String(status.getIn(['account', 'id']))}
id={String(status.getIn(['account', 'id']))}
timestamp={status.created_at}
timestampUrl={statusUrl}
action={reblogElement}
hideActions={!reblogElement}
showEdit={!!status.edited_at}
showProfileHoverCard={this.props.hoverable}
/>
</HStack>
<AccountContainer
key={String(status.getIn(['account', 'id']))}
id={String(status.getIn(['account', 'id']))}
timestamp={status.created_at}
timestampUrl={statusUrl}
action={reblogElement}
hideActions={!reblogElement}
showEdit={!!status.edited_at}
showProfileHoverCard={this.props.hoverable}
withLinkToProfile={this.props.hoverable}
/>
</div>
<div className='status__content-wrapper'>

69
app/soapbox/components/status_action_bar.tsx
View File

@ -377,21 +377,21 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(messages.open),
action: this.handleOpen,
icon: require('@tabler/icons/icons/arrows-vertical.svg'),
icon: require('@tabler/icons/arrows-vertical.svg'),
});
if (publicStatus) {
menu.push({
text: intl.formatMessage(messages.copy),
action: this.handleCopy,
icon: require('@tabler/icons/icons/link.svg'),
icon: require('@tabler/icons/link.svg'),
});
if (features.embeds) {
menu.push({
text: intl.formatMessage(messages.embed),
action: this.handleEmbed,
icon: require('@tabler/icons/icons/share.svg'),
icon: require('@tabler/icons/share.svg'),
});
}
}
@ -404,7 +404,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
action: this.handleBookmarkClick,
icon: require(status.bookmarked ? '@tabler/icons/icons/bookmark-off.svg' : '@tabler/icons/icons/bookmark.svg'),
icon: status.bookmarked ? require('@tabler/icons/bookmark-off.svg') : require('@tabler/icons/bookmark.svg'),
});
}
@ -414,7 +414,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
action: this.handleConversationMuteClick,
icon: require(mutingConversation ? '@tabler/icons/icons/bell.svg' : '@tabler/icons/icons/bell-off.svg'),
icon: mutingConversation ? require('@tabler/icons/bell.svg') : require('@tabler/icons/bell-off.svg'),
});
menu.push(null);
}
@ -424,14 +424,14 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
action: this.handlePinClick,
icon: require(mutingConversation ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'),
icon: mutingConversation ? require('@tabler/icons/pinned-off.svg') : require('@tabler/icons/pin.svg'),
});
} else {
if (status.visibility === 'private') {
menu.push({
text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
action: this.handleReblogClick,
icon: require('@tabler/icons/icons/repeat.svg'),
icon: require('@tabler/icons/repeat.svg'),
});
}
}
@ -439,20 +439,20 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(messages.delete),
action: this.handleDeleteClick,
icon: require('@tabler/icons/icons/trash.svg'),
icon: require('@tabler/icons/trash.svg'),
destructive: true,
});
if (features.editStatuses) {
menu.push({
text: intl.formatMessage(messages.edit),
action: this.handleEditClick,
icon: require('@tabler/icons/icons/edit.svg'),
icon: require('@tabler/icons/edit.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.redraft),
action: this.handleRedraftClick,
icon: require('@tabler/icons/icons/edit.svg'),
icon: require('@tabler/icons/edit.svg'),
destructive: true,
});
}
@ -460,20 +460,20 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(messages.mention, { name: username }),
action: this.handleMentionClick,
icon: require('@tabler/icons/icons/at.svg'),
icon: require('@tabler/icons/at.svg'),
});
// if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) {
// menu.push({
// text: intl.formatMessage(messages.chat, { name: username }),
// action: this.handleChatClick,
// icon: require('@tabler/icons/icons/messages.svg'),
// icon: require('@tabler/icons/messages.svg'),
// });
// } else {
// menu.push({
// text: intl.formatMessage(messages.direct, { name: username }),
// action: this.handleDirectClick,
// icon: require('@tabler/icons/icons/mail.svg'),
// icon: require('@tabler/icons/mail.svg'),
// });
// }
@ -481,17 +481,17 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(messages.mute, { name: username }),
action: this.handleMuteClick,
icon: require('@tabler/icons/icons/circle-x.svg'),
icon: require('@tabler/icons/circle-x.svg'),
});
menu.push({
text: intl.formatMessage(messages.block, { name: username }),
action: this.handleBlockClick,
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
});
menu.push({
text: intl.formatMessage(messages.report, { name: username }),
action: this.handleReport,
icon: require('@tabler/icons/icons/flag.svg'),
icon: require('@tabler/icons/flag.svg'),
});
}
@ -502,13 +502,13 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(messages.admin_account, { name: username }),
href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
icon: require('@tabler/icons/icons/gavel.svg'),
icon: require('@tabler/icons/gavel.svg'),
action: (event) => event.stopPropagation(),
});
menu.push({
text: intl.formatMessage(messages.admin_status),
href: `/pleroma/admin/#/statuses/${status.id}/`,
icon: require('@tabler/icons/icons/pencil.svg'),
icon: require('@tabler/icons/pencil.svg'),
action: (event) => event.stopPropagation(),
});
}
@ -516,25 +516,25 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
action: this.handleToggleStatusSensitivity,
icon: require('@tabler/icons/icons/alert-triangle.svg'),
icon: require('@tabler/icons/alert-triangle.svg'),
});
if (!ownAccount) {
menu.push({
text: intl.formatMessage(messages.deactivateUser, { name: username }),
action: this.handleDeactivateUser,
icon: require('@tabler/icons/icons/user-off.svg'),
icon: require('@tabler/icons/user-off.svg'),
});
menu.push({
text: intl.formatMessage(messages.deleteUser, { name: username }),
action: this.handleDeleteUser,
icon: require('@tabler/icons/icons/user-minus.svg'),
icon: require('@tabler/icons/user-minus.svg'),
destructive: true,
});
menu.push({
text: intl.formatMessage(messages.deleteStatus),
action: this.handleDeleteStatus,
icon: require('@tabler/icons/icons/trash.svg'),
icon: require('@tabler/icons/trash.svg'),
destructive: true,
});
}
@ -545,13 +545,13 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
// menu.push({
// text: intl.formatMessage(messages.group_remove_account),
// action: this.handleGroupRemoveAccount,
// icon: require('@tabler/icons/icons/user-x.svg'),
// icon: require('@tabler/icons/user-x.svg'),
// destructive: true,
// });
// menu.push({
// text: intl.formatMessage(messages.group_remove_post),
// action: this.handleGroupRemovePost,
// icon: require('@tabler/icons/icons/trash.svg'),
// icon: require('@tabler/icons/trash.svg'),
// destructive: true,
// });
// }
@ -601,23 +601,23 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiReact || ''] || messages.favourite);
const menu = this._makeMenu(publicStatus);
let reblogIcon = require('@tabler/icons/icons/repeat.svg');
let reblogIcon = require('@tabler/icons/repeat.svg');
let replyTitle;
if (status.visibility === 'direct') {
reblogIcon = require('@tabler/icons/icons/mail.svg');
reblogIcon = require('@tabler/icons/mail.svg');
} else if (status.visibility === 'private') {
reblogIcon = require('@tabler/icons/icons/lock.svg');
reblogIcon = require('@tabler/icons/lock.svg');
}
const reblogMenu = [{
text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
action: this.handleReblogClick,
icon: require('@tabler/icons/icons/repeat.svg'),
icon: require('@tabler/icons/repeat.svg'),
}, {
text: intl.formatMessage(messages.quotePost),
action: this.handleQuoteClick,
icon: require('@tabler/icons/icons/quote.svg'),
icon: require('@tabler/icons/quote.svg'),
}];
const reblogButton = (
@ -644,7 +644,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
<div className='pt-4 flex flex-row space-x-2'>
<StatusActionButton
title={replyTitle}
icon={require('@tabler/icons/icons/message-circle-2.svg')}
icon={require('@tabler/icons/message-circle-2.svg')}
onClick={this.handleReplyClick}
count={replyCount}
/>
@ -665,17 +665,18 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
<EmojiButtonWrapper statusId={status.id}>
<StatusActionButton
title={meEmojiTitle}
icon={require('@tabler/icons/icons/heart.svg')}
icon={require('@tabler/icons/heart.svg')}
filled
color='accent'
active={Boolean(meEmojiReact)}
count={emojiReactCount}
emoji={meEmojiReact}
/>
</EmojiButtonWrapper>
) : (
<StatusActionButton
title={intl.formatMessage(messages.favourite)}
icon={require('@tabler/icons/icons/heart.svg')}
icon={require('@tabler/icons/heart.svg')}
color='accent'
filled
onClick={this.handleFavouriteClick}
@ -687,7 +688,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
{canShare && (
<StatusActionButton
title={intl.formatMessage(messages.share)}
icon={require('@tabler/icons/icons/upload.svg')}
icon={require('@tabler/icons/upload.svg')}
onClick={this.handleShareClick}
/>
)}
@ -695,7 +696,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
<DropdownMenuContainer items={menu} status={status}>
<StatusActionButton
title={intl.formatMessage(messages.more)}
icon={require('@tabler/icons/icons/dots.svg')}
icon={require('@tabler/icons/dots.svg')}
/>
</DropdownMenuContainer>
</div>

9
app/soapbox/components/status_list.tsx
View File

@ -6,6 +6,7 @@ import { FormattedMessage } from 'react-intl';
import LoadGap from 'soapbox/components/load_gap';
import ScrollableList from 'soapbox/components/scrollable_list';
import StatusContainer from 'soapbox/containers/status_container';
import FeedSuggestions from 'soapbox/features/feed-suggestions/feed-suggestions';
import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
import PendingStatus from 'soapbox/features/ui/components/pending_status';
@ -77,7 +78,7 @@ const StatusList: React.FC<IStatusList> = ({
const handleLoadOlder = useCallback(debounce(() => {
const maxId = lastStatusId || statusIds.last();
if (onLoadMore && maxId) {
onLoadMore(maxId);
onLoadMore(maxId.replace('末suggestions-', ''));
}
}, 300, { leading: true }), [onLoadMore, lastStatusId, statusIds.last()]);
@ -149,11 +150,17 @@ const StatusList: React.FC<IStatusList> = ({
));
};
const renderFeedSuggestions = (): React.ReactNode => {
return <FeedSuggestions key='suggestions' />;
};
const renderStatuses = (): React.ReactNode[] => {
if (isLoading || statusIds.size > 0) {
return statusIds.toArray().map((statusId, index) => {
if (statusId === null) {
return renderLoadGap(index);
} else if (statusId.startsWith('末suggestions-')) {
return renderFeedSuggestions();
} else if (statusId.startsWith('末pending-')) {
return renderPendingStatus(statusId);
} else {

12
app/soapbox/components/thumb_navigation.tsx
View File

@ -17,7 +17,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
if (features.chats) {
return (
<ThumbNavigationLink
src={require('@tabler/icons/icons/messages.svg')}
src={require('@tabler/icons/messages.svg')}
text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
to='/chats'
exact
@ -29,7 +29,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
if (features.directTimeline || features.conversations) {
return (
<ThumbNavigationLink
src={require('@tabler/icons/icons/mail.svg')}
src={require('@tabler/icons/mail.svg')}
text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
to='/messages'
paths={['/messages', '/conversations']}
@ -43,14 +43,14 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
return (
<div className='thumb-navigation'>
<ThumbNavigationLink
src={require('@tabler/icons/icons/home.svg')}
src={require('@tabler/icons/home.svg')}
text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
to='/'
exact
/>
<ThumbNavigationLink
src={require('@tabler/icons/icons/search.svg')}
src={require('@tabler/icons/search.svg')}
text={<FormattedMessage id='navigation.search' defaultMessage='Search' />}
to='/search'
exact
@ -58,7 +58,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
{account && (
<ThumbNavigationLink
src={require('@tabler/icons/icons/bell.svg')}
src={require('@tabler/icons/bell.svg')}
text={<FormattedMessage id='navigation.notifications' defaultMessage='Alerts' />}
to='/notifications'
exact
@ -70,7 +70,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
{(account && account.staff) && (
<ThumbNavigationLink
src={require('@tabler/icons/icons/dashboard.svg')}
src={require('@tabler/icons/dashboard.svg')}
text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
to='/soapbox/admin'
count={dashboardCount}

2
app/soapbox/components/ui/card/card.tsx
View File

@ -64,7 +64,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
return (
<Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2' aria-label={intl.formatMessage(messages.back)}>
<SvgIcon src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' />
<SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6' />
<span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
</Comp>
);

23
app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx
View File

@ -30,7 +30,7 @@ describe('<Datepicker />', () => {
);
let daySelect: HTMLElement;
daySelect = document.querySelector('[data-testid="datepicker-day"]');
daySelect = document.querySelector('[data-testid="datepicker-day"]') as HTMLElement;
expect(queryAllByRole(daySelect, 'option')).toHaveLength(29);
await userEvent.selectOptions(
@ -56,26 +56,41 @@ describe('<Datepicker />', () => {
it('calls the onChange function when the inputs change', async() => {
const handler = jest.fn();
render(<Datepicker onChange={handler} />);
const today = new Date();
/**
* A date with a different day, month, and year than today
* so this test will always pass!
*/
const notToday = new Date(
today.getFullYear() - 1, // last year
(today.getMonth() + 2) % 11, // two months from now (mod 11 because it's 0-indexed)
(today.getDate() + 2) % 28, // 2 days from now (for timezone stuff)
);
const month = notToday.toLocaleString('en-us', { month: 'long' });
const year = String(notToday.getFullYear());
const day = String(notToday.getDate());
expect(handler.mock.calls.length).toEqual(1);
await userEvent.selectOptions(
screen.getByTestId('datepicker-month'),
screen.getByRole('option', { name: 'February' }),
screen.getByRole('option', { name: month }),
);
expect(handler.mock.calls.length).toEqual(2);
await userEvent.selectOptions(
screen.getByTestId('datepicker-year'),
screen.getByRole('option', { name: '2020' }),
screen.getByRole('option', { name: year }),
);
expect(handler.mock.calls.length).toEqual(3);
await userEvent.selectOptions(
screen.getByTestId('datepicker-day'),
screen.getByRole('option', { name: '5' }),
screen.getByRole('option', { name: day }),
);
expect(handler.mock.calls.length).toEqual(4);

3
app/soapbox/components/ui/hstack/hstack.tsx
View File

@ -6,6 +6,7 @@ const justifyContentOptions = {
center: 'justify-center',
start: 'justify-start',
end: 'justify-end',
around: 'justify-around',
};
const alignItemsOptions = {
@ -32,7 +33,7 @@ interface IHStack {
/** Extra class names on the <div> element. */
className?: string,
/** Horizontal alignment of children. */
justifyContent?: 'between' | 'center' | 'start' | 'end',
justifyContent?: 'between' | 'center' | 'start' | 'end' | 'around',
/** Size of the gap between elements. */
space?: 0.5 | 1 | 1.5 | 2 | 3 | 4 | 6 | 8,
/** Whether to let the flexbox grow. */

1
app/soapbox/components/ui/icon-button/icon-button.tsx
View File

@ -25,6 +25,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
type='button'
className={classNames('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500', {
'bg-white dark:bg-transparent': !transparent,
'opacity-50': filteredProps.disabled,
}, className)}
{...filteredProps}
data-testid='icon-button'

2
app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx
View File

@ -5,7 +5,7 @@ import SvgIcon from '../svg-icon';
describe('<SvgIcon />', () => {
it('renders loading element with default size', () => {
render(<SvgIcon className='text-primary-500' src={require('@tabler/icons/icons/code.svg')} />);
render(<SvgIcon className='text-primary-500' src={require('@tabler/icons/code.svg')} />);
const svg = screen.getByTestId('svg-icon-loader');
expect(svg.getAttribute('width')).toBe('24');

2
app/soapbox/components/ui/input/input.tsx
View File

@ -88,7 +88,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
className='text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 h-full px-2 focus:ring-primary-500 focus:ring-2'
>
<SvgIcon
src={revealed ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}
src={revealed ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
className='h-4 w-4'
/>
</button>

4
app/soapbox/components/ui/modal/modal.tsx
View File

@ -59,7 +59,7 @@ const Modal: React.FC<IModal> = ({
cancelAction,
cancelText,
children,
closeIcon = require('@tabler/icons/icons/x.svg'),
closeIcon = require('@tabler/icons/x.svg'),
closePosition = 'right',
confirmationAction,
confirmationDisabled,
@ -83,7 +83,7 @@ const Modal: React.FC<IModal> = ({
}, [skipFocus, buttonRef]);
return (
<div data-testid='modal' className={classNames('block w-full p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 text-black dark:text-white shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
<div data-testid='modal' className={classNames('block w-full p-6 mx-auto text-left align-middle transition-all transform bg-white dark:bg-slate-800 text-black dark:text-white shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
<div className='sm:flex sm:items-start w-full justify-between'>
<div className='w-full'>
{title && (

3
app/soapbox/components/ui/stack/stack.tsx
View File

@ -1,9 +1,10 @@
import classNames from 'classnames';
import React from 'react';
type SIZES = 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10
type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10
const spaces = {
0: 'space-y-0',
'0.5': 'space-y-0.5',
1: 'space-y-1',
'1.5': 'space-y-1.5',

4
app/soapbox/components/ui/streamfield/streamfield.tsx
View File

@ -74,7 +74,7 @@ const Streamfield: React.FC<IStreamfield> = ({
<IconButton
iconClassName='w-4 h-4'
className='bg-transparent text-gray-400 hover:text-gray-600'
src={require('@tabler/icons/icons/x.svg')}
src={require('@tabler/icons/x.svg')}
onClick={() => onRemoveItem(i)}
title={intl.formatMessage(messages.remove)}
/>
@ -86,7 +86,7 @@ const Streamfield: React.FC<IStreamfield> = ({
{onAddItem && (
<Button
icon={require('@tabler/icons/icons/plus.svg')}
icon={require('@tabler/icons/plus.svg')}
onClick={onAddItem}
disabled={values.length >= maxItems}
theme='ghost'

4
app/soapbox/components/ui/tooltip/tooltip.css
View File

@ -6,3 +6,7 @@
@apply pointer-events-none absolute px-2.5 py-1.5 rounded shadow whitespace-nowrap text-xs font-medium bg-gray-800 text-white;
z-index: 100;
}
[data-reach-tooltip-arrow] {
@apply absolute z-50 w-0 h-0 border-l-8 border-solid border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-800;
}

49
app/soapbox/components/ui/tooltip/tooltip.tsx
View File

@ -1,4 +1,5 @@
import { default as ReachTooltip } from '@reach/tooltip';
import Portal from '@reach/portal';
import { TooltipPopup, useTooltip } from '@reach/tooltip';
import React from 'react';
import './tooltip.css';
@ -8,15 +9,55 @@ interface ITooltip {
text: string,
}
const centered = (triggerRect: any, tooltipRect: any) => {
const triggerCenter = triggerRect.left + triggerRect.width / 2;
const left = triggerCenter - tooltipRect.width / 2;
const maxLeft = window.innerWidth - tooltipRect.width - 2;
return {
left: Math.min(Math.max(2, left), maxLeft) + window.scrollX,
top: triggerRect.bottom + 8 + window.scrollY,
};
};
/** Hoverable tooltip element. */
const Tooltip: React.FC<ITooltip> = ({
children,
text,
}) => {
// get the props from useTooltip
const [trigger, tooltip] = useTooltip();
// destructure off what we need to position the triangle
const { isVisible, triggerRect } = tooltip;
return (
<ReachTooltip label={text}>
{children}
</ReachTooltip>
<React.Fragment>
{React.cloneElement(children as any, trigger)}
{isVisible && (
// The Triangle. We position it relative to the trigger, not the popup
// so that collisions don't have a triangle pointing off to nowhere.
// Using a Portal may seem a little extreme, but we can keep the
// positioning logic simpler here instead of needing to consider
// the popup's position relative to the trigger and collisions
<Portal>
<div
data-reach-tooltip-arrow='true'
style={{
left:
triggerRect && triggerRect.left - 10 + triggerRect.width / 2 as any,
top: triggerRect && triggerRect.bottom + window.scrollY as any,
}}
/>
</Portal>
)}
<TooltipPopup
{...tooltip}
label={text}
aria-label={text}
position={centered}
/>
</React.Fragment>
);
};

2
app/soapbox/components/ui/widget/widget.tsx
View File

@ -36,7 +36,7 @@ const Widget: React.FC<IWidget> = ({
title,
children,
onActionClick,
actionIcon = require('@tabler/icons/icons/arrow-right.svg'),
actionIcon = require('@tabler/icons/arrow-right.svg'),
actionTitle,
action,
}): JSX.Element => {

2
app/soapbox/components/upload-progress.tsx
View File

@ -15,7 +15,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
return (
<HStack alignItems='center' space={2}>
<Icon
src={require('@tabler/icons/icons/cloud-upload.svg')}
src={require('@tabler/icons/cloud-upload.svg')}
className='w-7 h-7 text-gray-500'
/>

2
app/soapbox/components/validation-checkmark.tsx
View File

@ -12,7 +12,7 @@ const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
return (
<HStack alignItems='center' space={2} data-testid='validation-checkmark'>
<Icon
src={isValid ? require('@tabler/icons/icons/check.svg') : require('@tabler/icons/icons/point.svg')}
src={isValid ? require('@tabler/icons/check.svg') : require('@tabler/icons/point.svg')}
className={classNames({
'w-4 h-4': true,
'text-gray-400 fill-gray-400': !isValid,

2
app/soapbox/containers/account_container.js
View File

@ -38,7 +38,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
if (account.relationship?.following || account.relationship?.requested) {
if (unfollowModal) {
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/minus.svg'),
icon: require('@tabler/icons/minus.svg'),
heading: <FormattedMessage id='confirmations.unfollow.heading' defaultMessage='Unfollow {name}' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.unfollowConfirm),

27
app/soapbox/containers/soapbox.tsx
View File

@ -5,6 +5,8 @@ import React, { useState, useEffect } from 'react';
import { IntlProvider } from 'react-intl';
import { Provider } from 'react-redux';
import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
// @ts-ignore: it doesn't have types
import { ScrollContext } from 'react-router-scroll-4';
import { loadInstance } from 'soapbox/actions/instance';
import { fetchMe } from 'soapbox/actions/me';
@ -115,6 +117,11 @@ const SoapboxMount = () => {
});
}, []);
// @ts-ignore: I don't actually know what these should be, lol
const shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey);
};
/** Whether to display a loading indicator. */
const showLoading = [
me === null,
@ -223,17 +230,19 @@ const SoapboxMount = () => {
{helmet}
<ErrorBoundary>
<BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
<>
{renderBody()}
<ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
<>
{renderBody()}
<BundleContainer fetchComponent={NotificationsContainer}>
{(Component) => <Component />}
</BundleContainer>
<BundleContainer fetchComponent={NotificationsContainer}>
{(Component) => <Component />}
</BundleContainer>
<BundleContainer fetchComponent={ModalContainer}>
{Component => <Component />}
</BundleContainer>
</>
<BundleContainer fetchComponent={ModalContainer}>
{Component => <Component />}
</BundleContainer>
</>
</ScrollContext>
</BrowserRouter>
</ErrorBoundary>
</IntlProvider>

4
app/soapbox/containers/status_container.js
View File

@ -163,7 +163,7 @@ const mapDispatchToProps = (dispatch, { intl }) => {
dispatch(deleteStatus(status.get('id'), withRedraft));
} else {
dispatch(openModal('CONFIRM', {
icon: withRedraft ? require('@tabler/icons/icons/edit.svg') : require('@tabler/icons/icons/trash.svg'),
icon: withRedraft ? require('@tabler/icons/edit.svg') : require('@tabler/icons/trash.svg'),
heading: intl.formatMessage(withRedraft ? messages.redraftHeading : messages.deleteHeading),
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
@ -204,7 +204,7 @@ const mapDispatchToProps = (dispatch, { intl }) => {
onBlock(status) {
const account = status.get('account');
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.blockConfirm),

82
app/soapbox/features/account/components/header.js
View File

@ -175,7 +175,7 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.share, { name: account.get('username') }),
action: this.handleShare,
icon: require('@tabler/icons/icons/upload.svg'),
icon: require('@tabler/icons/upload.svg'),
});
menu.push(null);
}
@ -184,53 +184,53 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.edit_profile),
to: '/settings/profile',
icon: require('@tabler/icons/icons/user.svg'),
icon: require('@tabler/icons/user.svg'),
});
menu.push({
text: intl.formatMessage(messages.preferences),
to: '/settings',
icon: require('@tabler/icons/icons/settings.svg'),
icon: require('@tabler/icons/settings.svg'),
});
// menu.push(null);
// menu.push({
// text: intl.formatMessage(messages.follow_requests),
// to: '/follow_requests',
// icon: require('@tabler/icons/icons/user-plus.svg'),
// icon: require('@tabler/icons/user-plus.svg'),
// });
menu.push(null);
menu.push({
text: intl.formatMessage(messages.mutes),
to: '/mutes',
icon: require('@tabler/icons/icons/circle-x.svg'),
icon: require('@tabler/icons/circle-x.svg'),
});
menu.push({
text: intl.formatMessage(messages.blocks),
to: '/blocks',
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
});
// menu.push({
// text: intl.formatMessage(messages.domain_blocks),
// to: '/domain_blocks',
// icon: require('@tabler/icons/icons/ban.svg'),
// icon: require('@tabler/icons/ban.svg'),
// });
} else {
menu.push({
text: intl.formatMessage(messages.mention, { name: account.get('username') }),
action: this.props.onMention,
icon: require('@tabler/icons/icons/at.svg'),
icon: require('@tabler/icons/at.svg'),
});
// if (account.getIn(['pleroma', 'accepts_chat_messages'], false) === true) {
// menu.push({
// text: intl.formatMessage(messages.chat, { name: account.get('username') }),
// action: this.props.onChat,
// icon: require('@tabler/icons/icons/messages.svg'),
// icon: require('@tabler/icons/messages.svg'),
// });
// } else {
// menu.push({
// text: intl.formatMessage(messages.direct, { name: account.get('username') }),
// action: this.props.onDirect,
// icon: require('@tabler/icons/icons/mail.svg'),
// icon: require('@tabler/icons/mail.svg'),
// });
// }
@ -239,13 +239,13 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.hideReblogs, { name: account.get('username') }),
action: this.props.onReblogToggle,
icon: require('@tabler/icons/icons/repeat.svg'),
icon: require('@tabler/icons/repeat.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.showReblogs, { name: account.get('username') }),
action: this.props.onReblogToggle,
icon: require('@tabler/icons/icons/repeat.svg'),
icon: require('@tabler/icons/repeat.svg'),
});
}
@ -253,7 +253,7 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.add_or_remove_from_list),
action: this.props.onAddToList,
icon: require('@tabler/icons/icons/list.svg'),
icon: require('@tabler/icons/list.svg'),
});
}
@ -263,7 +263,7 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.add_or_remove_from_list),
action: this.props.onAddToList,
icon: require('@tabler/icons/icons/list.svg'),
icon: require('@tabler/icons/list.svg'),
});
}
@ -271,7 +271,7 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.removeFromFollowers),
action: this.props.onRemoveFromFollowers,
icon: require('@tabler/icons/icons/user-x.svg'),
icon: require('@tabler/icons/user-x.svg'),
});
}
@ -279,13 +279,13 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.unmute, { name: account.get('username') }),
action: this.props.onMute,
icon: require('@tabler/icons/icons/circle-x.svg'),
icon: require('@tabler/icons/circle-x.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.mute, { name: account.get('username') }),
action: this.props.onMute,
icon: require('@tabler/icons/icons/circle-x.svg'),
icon: require('@tabler/icons/circle-x.svg'),
});
}
@ -293,20 +293,20 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.unblock, { name: account.get('username') }),
action: this.props.onBlock,
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.block, { name: account.get('username') }),
action: this.props.onBlock,
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
});
}
menu.push({
text: intl.formatMessage(messages.report, { name: account.get('username') }),
action: this.props.onReport,
icon: require('@tabler/icons/icons/flag.svg'),
icon: require('@tabler/icons/flag.svg'),
});
}
@ -319,13 +319,13 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.unblockDomain, { domain }),
action: this.props.onUnblockDomain,
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.blockDomain, { domain }),
action: this.props.onBlockDomain,
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
});
}
}
@ -338,7 +338,7 @@ class Header extends ImmutablePureComponent {
text: intl.formatMessage(messages.admin_account, { name: account.get('username') }),
to: `/pleroma/admin/#/users/${account.id}/`,
newTab: true,
icon: require('@tabler/icons/icons/gavel.svg'),
icon: require('@tabler/icons/gavel.svg'),
});
}
@ -347,34 +347,34 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.demoteToModerator, { name: account.get('username') }),
action: this.props.onPromoteToModerator,
icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
icon: require('@tabler/icons/arrow-up-circle.svg'),
});
menu.push({
text: intl.formatMessage(messages.demoteToUser, { name: account.get('username') }),
action: this.props.onDemoteToUser,
icon: require('@tabler/icons/icons/arrow-down-circle.svg'),
icon: require('@tabler/icons/arrow-down-circle.svg'),
});
} else if (account.moderator) {
menu.push({
text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }),
action: this.props.onPromoteToAdmin,
icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
icon: require('@tabler/icons/arrow-up-circle.svg'),
});
menu.push({
text: intl.formatMessage(messages.demoteToUser, { name: account.get('username') }),
action: this.props.onDemoteToUser,
icon: require('@tabler/icons/icons/arrow-down-circle.svg'),
icon: require('@tabler/icons/arrow-down-circle.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }),
action: this.props.onPromoteToAdmin,
icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
icon: require('@tabler/icons/arrow-up-circle.svg'),
});
menu.push({
text: intl.formatMessage(messages.promoteToModerator, { name: account.get('username') }),
action: this.props.onPromoteToModerator,
icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
icon: require('@tabler/icons/arrow-up-circle.svg'),
});
}
}
@ -383,13 +383,13 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.unverifyUser, { name: account.username }),
action: this.props.onUnverifyUser,
icon: require('@tabler/icons/icons/check.svg'),
icon: require('@tabler/icons/check.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.verifyUser, { name: account.username }),
action: this.props.onVerifyUser,
icon: require('@tabler/icons/icons/check.svg'),
icon: require('@tabler/icons/check.svg'),
});
}
@ -397,13 +397,13 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.removeDonor, { name: account.username }),
action: this.props.onRemoveDonor,
icon: require('@tabler/icons/icons/coin.svg'),
icon: require('@tabler/icons/coin.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.setDonor, { name: account.username }),
action: this.props.onSetDonor,
icon: require('@tabler/icons/icons/coin.svg'),
icon: require('@tabler/icons/coin.svg'),
});
}
@ -412,13 +412,13 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.unsuggestUser, { name: account.get('username') }),
action: this.props.onUnsuggestUser,
icon: require('@tabler/icons/icons/user-x.svg'),
icon: require('@tabler/icons/user-x.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.suggestUser, { name: account.get('username') }),
action: this.props.onSuggestUser,
icon: require('@tabler/icons/icons/user-check.svg'),
icon: require('@tabler/icons/user-check.svg'),
});
}
}
@ -427,11 +427,11 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.deactivateUser, { name: account.get('username') }),
action: this.props.onDeactivateUser,
icon: require('@tabler/icons/icons/user-off.svg'),
icon: require('@tabler/icons/user-off.svg'),
});
menu.push({
text: intl.formatMessage(messages.deleteUser, { name: account.get('username') }),
icon: require('@tabler/icons/icons/user-minus.svg'),
icon: require('@tabler/icons/user-minus.svg'),
});
}
}
@ -497,7 +497,7 @@ class Header extends ImmutablePureComponent {
if (canChat) {
return (
<IconButton
src={require('@tabler/icons/icons/messages.svg')}
src={require('@tabler/icons/messages.svg')}
onClick={this.props.onChat}
title={intl.formatMessage(messages.chat, { name: account.get('username') })}
/>
@ -505,7 +505,7 @@ class Header extends ImmutablePureComponent {
} else {
return (
<IconButton
src={require('@tabler/icons/icons/mail.svg')}
src={require('@tabler/icons/mail.svg')}
onClick={this.props.onDirect}
title={intl.formatMessage(messages.direct, { name: account.get('username') })}
className='text-primary-700 bg-primary-100 hover:bg-primary-200 p-2'
@ -525,7 +525,7 @@ class Header extends ImmutablePureComponent {
return (
<IconButton
src={require('@tabler/icons/icons/upload.svg')}
src={require('@tabler/icons/upload.svg')}
onClick={this.handleShare}
title={intl.formatMessage(messages.share, { name: account.get('username') })}
className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 p-2'
@ -602,7 +602,7 @@ class Header extends ImmutablePureComponent {
<Menu>
<MenuButton
as={IconButton}
src={require('@tabler/icons/icons/dots.svg')}
src={require('@tabler/icons/dots.svg')}
className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 p-2'
iconClassName='w-5 h-5'
/>

2
app/soapbox/features/account_timeline/components/column_settings.js
View File

@ -31,7 +31,7 @@ class ColumnSettings extends React.PureComponent {
<FormattedMessage id='account.column_settings.title' defaultMessage='Account timeline settings' />
</h1>
<div className='column-settings__close'>
<IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
<IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/x.svg')} onClick={onClose} />
</div>
</div>

4
app/soapbox/features/account_timeline/containers/header_container.js
View File

@ -96,7 +96,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
dispatch(unblockAccount(account.get('id')));
} else {
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.blockConfirm),
@ -164,7 +164,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
onBlockDomain(domain) {
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications.' values={{ domain: <strong>{domain}</strong> }} />,
confirm: intl.formatMessage(messages.blockDomainConfirm),

6
app/soapbox/features/admin/components/report.tsx
View File

@ -40,11 +40,11 @@ const Report: React.FC<IReport> = ({ report }) => {
return [{
text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username as string }),
action: handleDeactivateUser,
icon: require('@tabler/icons/icons/user-off.svg'),
icon: require('@tabler/icons/user-off.svg'),
}, {
text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username as string }),
action: handleDeleteUser,
icon: require('@tabler/icons/icons/user-minus.svg'),
icon: require('@tabler/icons/user-minus.svg'),
}];
};
@ -124,7 +124,7 @@ const Report: React.FC<IReport> = ({ report }) => {
<FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
</Button>
<DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} />
<DropdownMenu items={menu} src={require('@tabler/icons/dots-vertical.svg')} />
</HStack>
</div>
);

6
app/soapbox/features/admin/components/report_status.tsx
View File

@ -40,11 +40,11 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
return [{
text: intl.formatMessage(messages.viewStatus, { acct: `@${acct}` }),
to: `/@${acct}/posts/${status.id}`,
icon: require('@tabler/icons/icons/pencil.svg'),
icon: require('@tabler/icons/pencil.svg'),
}, {
text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }),
action: handleDeleteStatus,
icon: require('@tabler/icons/icons/trash.svg'),
icon: require('@tabler/icons/trash.svg'),
destructive: true,
}];
};
@ -123,7 +123,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
<div className='admin-report__status-actions'>
<DropdownMenu
items={menu}
src={require('@tabler/icons/icons/dots-vertical.svg')}
src={require('@tabler/icons/dots-vertical.svg')}
/>
</div>
</div>

4
app/soapbox/features/admin/components/unapproved_account.tsx
View File

@ -52,8 +52,8 @@ const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
<blockquote className='md'>{adminAccount?.invite_request || ''}</blockquote>
</div>
<div className='unapproved-account__actions'>
<IconButton src={require('@tabler/icons/icons/check.svg')} onClick={handleApprove} />
<IconButton src={require('@tabler/icons/icons/x.svg')} onClick={handleReject} />
<IconButton src={require('@tabler/icons/check.svg')} onClick={handleApprove} />
<IconButton src={require('@tabler/icons/x.svg')} onClick={handleReject} />
</div>
</div>
);

2
app/soapbox/features/aliases/components/account.tsx
View File

@ -48,7 +48,7 @@ const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
if (!added && accountId !== me) {
button = (
<div className='account__relationship'>
<IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
<IconButton src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
</div>
);
}

2
app/soapbox/features/aliases/components/search.tsx
View File

@ -54,7 +54,7 @@ const Search: React.FC = () => {
/>
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
<Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
<Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
</div>
</label>
<Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>

6
app/soapbox/features/audio/index.js
View File

@ -491,8 +491,8 @@ class Audio extends React.PureComponent {
<div className='video-player__controls active'>
<div className='video-player__buttons-bar'>
<div className='video-player__buttons left'>
<button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon src={paused ? require('@tabler/icons/icons/player-play.svg') : require('@tabler/icons/icons/player-pause.svg')} /></button>
<button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon src={muted ? require('@tabler/icons/icons/volume-3.svg') : require('@tabler/icons/icons/volume.svg')} /></button>
<button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon src={paused ? require('@tabler/icons/player-play.svg') : require('@tabler/icons/player-pause.svg')} /></button>
<button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon src={muted ? require('@tabler/icons/volume-3.svg') : require('@tabler/icons/volume.svg')} /></button>
<div className={classNames('video-player__volume', { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}>
<div className='video-player__volume__current' style={{ width: `${volume * 100}%`, backgroundColor: this._getAccentColor() }} />
@ -522,7 +522,7 @@ class Audio extends React.PureComponent {
download
target='_blank'
>
<Icon src={require('@tabler/icons/icons/download.svg')} />
<Icon src={require('@tabler/icons/download.svg')} />
</a>
</div>
</div>

2
app/soapbox/features/auth_layout/index.tsx
View File

@ -54,7 +54,7 @@ const AuthLayout = () => {
<div className='relative z-10 ml-auto flex items-center'>
<Button
theme='link'
icon={require('@tabler/icons/icons/user.svg')}
icon={require('@tabler/icons/user.svg')}
to='/signup'
>
{intl.formatMessage(messages.register)}

6
app/soapbox/features/auth_login/components/__tests__/captcha.test.tsx
View File

@ -6,7 +6,7 @@ import CaptchaField, { NativeCaptchaField } from '../captcha';
describe('<CaptchaField />', () => {
it('renders null by default', () => {
render(<CaptchaField />);
render(<CaptchaField idempotencyKey='' value='' />);
expect(screen.queryAllByRole('textbox')).toHaveLength(0);
});
@ -24,7 +24,9 @@ describe('<NativeCaptchaField />', () => {
render(
<NativeCaptchaField
captcha={captcha}
onChange={() => {}} // eslint-disable-line react/jsx-no-bind
onChange={() => {}}
onClick={() => {}}
value=''
/>,
);

4
app/soapbox/features/auth_login/components/__tests__/login_form.test.tsx
View File

@ -13,7 +13,7 @@ describe('<LoginForm />', () => {
}),
};
render(<LoginForm handleSubmit={mockFn} isLoading={false} />, null, store);
render(<LoginForm handleSubmit={mockFn} isLoading={false} />, undefined, store);
expect(screen.getByRole('heading')).toHaveTextContent(/sign in/i);
});
@ -26,7 +26,7 @@ describe('<LoginForm />', () => {
}),
};
render(<LoginForm handleSubmit={mockFn} isLoading={false} />, null, store);
render(<LoginForm handleSubmit={mockFn} isLoading={false} />, undefined, store);
expect(screen.getByRole('heading')).toHaveTextContent(/sign in/i);
});

2
app/soapbox/features/auth_login/components/__tests__/login_page.test.tsx
View File

@ -12,7 +12,7 @@ describe('<LoginPage />', () => {
}),
};
render(<LoginPage />, null, store);
render(<LoginPage />, undefined, store);
expect(screen.getByRole('heading')).toHaveTextContent('Sign In');
});

2
app/soapbox/features/auth_login/components/registration_form.tsx
View File

@ -130,7 +130,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
</>);
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/check.svg'),
icon: require('@tabler/icons/check.svg'),
heading: needsConfirmation
? intl.formatMessage(messages.needsConfirmationHeader)
: needsApproval

2
app/soapbox/features/backups/index.tsx
View File

@ -33,7 +33,7 @@ const Backups = () => {
return [{
text: intl.formatMessage(messages.create),
action: handleCreateBackup,
icon: require('@tabler/icons/icons/plus.svg'),
icon: require('@tabler/icons/plus.svg'),
}];
};

2
app/soapbox/features/birthdays/account.tsx
View File

@ -51,7 +51,7 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
date: formattedBirthday,
})}
>
<Icon src={require('@tabler/icons/icons/ballon.svg')} />
<Icon src={require('@tabler/icons/ballon.svg')} />
{formattedBirthday}
</div>
</div>

4
app/soapbox/features/chats/components/chat-box.tsx
View File

@ -144,7 +144,7 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
</div>
<div className='chat-box__remove-attachment'>
<IconButton
src={require('@tabler/icons/icons/x.svg')}
src={require('@tabler/icons/x.svg')}
onClick={handleRemoveFile}
/>
</div>
@ -155,7 +155,7 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
const renderActionButton = () => {
return canSubmit() ? (
<IconButton
src={require('@tabler/icons/icons/send.svg')}
src={require('@tabler/icons/send.svg')}
title={intl.formatMessage(messages.send)}
onClick={sendMessage}
/>

6
app/soapbox/features/chats/components/chat-message-list.tsx
View File

@ -219,7 +219,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
{
text: intl.formatMessage(messages.delete),
action: handleDeleteMessage(chatMessage.chat_id, chatMessage.id),
icon: require('@tabler/icons/icons/trash.svg'),
icon: require('@tabler/icons/trash.svg'),
destructive: true,
},
];
@ -228,7 +228,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
menu.push({
text: intl.formatMessage(messages.report),
action: handleReportUser(chatMessage.account_id),
icon: require('@tabler/icons/icons/flag.svg'),
icon: require('@tabler/icons/flag.svg'),
});
}
@ -251,7 +251,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
<div className='chat-message__menu'>
<DropdownMenuContainer
items={menu}
src={require('@tabler/icons/icons/dots.svg')}
src={require('@tabler/icons/dots.svg')}
title={intl.formatMessage(messages.more)}
/>
</div>

2
app/soapbox/features/chats/components/chat-window.tsx
View File

@ -98,7 +98,7 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
@{getAcct(account, displayFqn)}
</button>
<div className='pane__close'>
<IconButton src={require('@tabler/icons/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
<IconButton src={require('@tabler/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
</div>
</HStack>
<div className='pane__content'>

2
app/soapbox/features/chats/components/chat.tsx
View File

@ -44,7 +44,7 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
{attachment && (
<Icon
className='chat__attachment-icon'
src={image ? require('@tabler/icons/icons/photo.svg') : require('@tabler/icons/icons/paperclip.svg')}
src={image ? require('@tabler/icons/photo.svg') : require('@tabler/icons/paperclip.svg')}
/>
)}
{content ? (

2
app/soapbox/features/community_timeline/components/column_settings.js
View File

@ -31,7 +31,7 @@ class ColumnSettings extends React.PureComponent {
<FormattedMessage id='community.column_settings.title' defaultMessage='Local timeline settings' />
</h1>
<div className='column-settings__close'>
<IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
<IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/x.svg')} onClick={onClose} />
</div>
</div>

4
app/soapbox/features/compose/components/compose_form.js
View File

@ -270,14 +270,14 @@ class ComposeForm extends ImmutablePureComponent {
} else if (this.props.privacy === 'direct') {
publishText = (
<>
<Icon src={require('@tabler/icons/icons/mail.svg')} />
<Icon src={require('@tabler/icons/mail.svg')} />
{intl.formatMessage(messages.message)}
</>
);
} else if (this.props.privacy === 'private') {
publishText = (
<>
<Icon src={require('@tabler/icons/icons/lock.svg')} />
<Icon src={require('@tabler/icons/lock.svg')} />
{intl.formatMessage(messages.publish)}
</>
);

2
app/soapbox/features/compose/components/emoji_picker_dropdown.js
View File

@ -365,7 +365,7 @@ class EmojiPickerDropdown extends React.PureComponent {
'pulse-loading': active && loading,
})}
alt='😀'
src={require('@tabler/icons/icons/mood-happy.svg')}
src={require('@tabler/icons/mood-happy.svg')}
title={title}
aria-label={title}
aria-expanded={active}

2
app/soapbox/features/compose/components/markdown_button.tsx
View File

@ -18,7 +18,7 @@ const MarkdownButton: React.FC<IMarkdownButton> = ({ active, onClick }) => {
return (
<ComposeFormButton
icon={require('@tabler/icons/icons/markdown.svg')}
icon={require('@tabler/icons/markdown.svg')}
title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
active={active}
onClick={onClick}

2
app/soapbox/features/compose/components/poll_button.tsx
View File

@ -24,7 +24,7 @@ const PollButton: React.FC<IPollButton> = ({ active, unavailable, disabled, onCl
return (
<ComposeFormButton
icon={require('@tabler/icons/icons/chart-bar.svg')}
icon={require('@tabler/icons/chart-bar.svg')}
title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
active={active}
disabled={disabled}

8
app/soapbox/features/compose/components/privacy_dropdown.tsx
View File

@ -161,10 +161,10 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
const [placement, setPlacement] = useState('bottom');
const options = [
{ icon: require('@tabler/icons/icons/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
{ icon: require('@tabler/icons/icons/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
{ icon: require('@tabler/icons/icons/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
{ icon: require('@tabler/icons/icons/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
{ icon: require('@tabler/icons/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
{ icon: require('@tabler/icons/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
{ icon: require('@tabler/icons/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
{ icon: require('@tabler/icons/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
];
const handleToggle: React.MouseEventHandler<HTMLButtonElement> = (e) => {

3
app/soapbox/features/compose/components/reply_indicator.tsx
View File

@ -26,7 +26,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
if (!hideActions && onCancel) {
actions = {
onActionClick: handleClick,
actionIcon: require('@tabler/icons/icons/x.svg'),
actionIcon: require('@tabler/icons/x.svg'),
actionAlignment: 'top',
actionTitle: 'Dismiss',
};
@ -39,6 +39,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
id={status.getIn(['account', 'id']) as string}
timestamp={status.created_at}
showProfileHoverCard={false}
withLinkToProfile={false}
/>
<Text

2
app/soapbox/features/compose/components/schedule_button.tsx
View File

@ -28,7 +28,7 @@ const ScheduleButton: React.FC<IScheduleButton> = ({ active, unavailable, disabl
return (
<ComposeFormButton
icon={require('@tabler/icons/icons/calendar-stats.svg')}
icon={require('@tabler/icons/calendar-stats.svg')}
title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
active={active}
disabled={disabled}

2
app/soapbox/features/compose/components/schedule_form.tsx
View File

@ -72,7 +72,7 @@ const ScheduleForm: React.FC = () => {
<IconButton
iconClassName='w-4 h-4'
className='bg-transparent text-gray-400 hover:text-gray-600'
src={require('@tabler/icons/icons/x.svg')}
src={require('@tabler/icons/x.svg')}
onClick={handleRemove}
title={intl.formatMessage(messages.remove)}
/>

6
app/soapbox/features/compose/components/search.tsx
View File

@ -105,7 +105,7 @@ const Search = (props: ISearch) => {
const makeMenu = () => [
{
text: intl.formatMessage(messages.action, { query: value }),
icon: require('@tabler/icons/icons/search.svg'),
icon: require('@tabler/icons/search.svg'),
action: handleSubmit,
},
];
@ -140,12 +140,12 @@ const Search = (props: ISearch) => {
onClick={handleClear}
>
<SvgIcon
src={require('@tabler/icons/icons/search.svg')}
src={require('@tabler/icons/search.svg')}
className={classNames('h-4 w-4 text-gray-400', { hidden: hasValue })}
/>
<SvgIcon
src={require('@tabler/icons/icons/x.svg')}
src={require('@tabler/icons/x.svg')}
className={classNames('h-4 w-4 text-gray-400', { hidden: !hasValue })}
aria-label={intl.formatMessage(messages.placeholder)}
/>

2
app/soapbox/features/compose/components/spoiler_button.tsx
View File

@ -18,7 +18,7 @@ const SpoilerButton: React.FC<ISpoilerButton> = ({ active, onClick }) => {
return (
<ComposeFormButton
icon={require('@tabler/icons/icons/alert-triangle.svg')}
icon={require('@tabler/icons/alert-triangle.svg')}
title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
active={active}
onClick={onClick}

18
app/soapbox/features/compose/components/upload.tsx
View File

@ -12,13 +12,13 @@ import Motion from '../../ui/util/optional_motion';
import type { Map as ImmutableMap } from 'immutable';
const bookIcon = require('@tabler/icons/icons/book.svg');
const fileAnalyticsIcon = require('@tabler/icons/icons/file-analytics.svg');
const fileCodeIcon = require('@tabler/icons/icons/file-code.svg');
const fileTextIcon = require('@tabler/icons/icons/file-text.svg');
const fileZipIcon = require('@tabler/icons/icons/file-zip.svg');
const defaultIcon = require('@tabler/icons/icons/paperclip.svg');
const presentationIcon = require('@tabler/icons/icons/presentation.svg');
const bookIcon = require('@tabler/icons/book.svg');
const fileAnalyticsIcon = require('@tabler/icons/file-analytics.svg');
const fileCodeIcon = require('@tabler/icons/file-code.svg');
const fileTextIcon = require('@tabler/icons/file-text.svg');
const fileZipIcon = require('@tabler/icons/file-zip.svg');
const defaultIcon = require('@tabler/icons/paperclip.svg');
const presentationIcon = require('@tabler/icons/presentation.svg');
export const MIMETYPE_ICONS: Record<string, string> = {
'application/x-freearc': fileZipIcon,
@ -157,7 +157,7 @@ const Upload: React.FC<IUpload> = (props) => {
<div className={classNames('compose-form__upload__actions', { active })}>
<IconButton
onClick={handleUndoClick}
src={require('@tabler/icons/icons/x.svg')}
src={require('@tabler/icons/x.svg')}
text={<FormattedMessage id='upload_form.undo' defaultMessage='Delete' />}
/>
@ -165,7 +165,7 @@ const Upload: React.FC<IUpload> = (props) => {
{(mediaType !== 'unknown' && Boolean(props.media.get('url'))) && (
<IconButton
onClick={handleOpenModal}
src={require('@tabler/icons/icons/zoom-in.svg')}
src={require('@tabler/icons/zoom-in.svg')}
text={<FormattedMessage id='upload_form.preview' defaultMessage='Preview' />}
/>
)}

4
app/soapbox/features/compose/components/upload_button.tsx
View File

@ -48,8 +48,8 @@ const UploadButton: React.FC<IUploadButton> = ({
}
const src = onlyImages(attachmentTypes)
? require('@tabler/icons/icons/photo.svg')
: require('@tabler/icons/icons/paperclip.svg');
? require('@tabler/icons/photo.svg')
: require('@tabler/icons/paperclip.svg');
return (
<div>

4
app/soapbox/features/crypto_donate/components/crypto_address.tsx
View File

@ -42,12 +42,12 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
<HStack alignItems='center' className='ml-auto'>
<a className='text-gray-500 ml-1' href='#' onClick={handleModalClick}>
<Icon src={require('@tabler/icons/icons/qrcode.svg')} size={20} />
<Icon src={require('@tabler/icons/qrcode.svg')} size={20} />
</a>
{explorerUrl && (
<a className='text-gray-500 ml-1' href={explorerUrl} target='_blank'>
<Icon src={require('@tabler/icons/icons/external-link.svg')} size={20} />
<Icon src={require('@tabler/icons/external-link.svg')} size={20} />
</a>
)}
</HStack>

2
app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx
View File

@ -30,7 +30,7 @@ const DetailedCryptoAddress: React.FC<IDetailedCryptoAddress> = ({ address, tick
<div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
<div className='crypto-address__actions'>
{explorerUrl && <a href={explorerUrl} target='_blank'>
<Icon src={require('@tabler/icons/icons/external-link.svg')} />
<Icon src={require('@tabler/icons/external-link.svg')} />
</a>}
</div>
</div>

12
app/soapbox/features/developers/developers_menu.tsx
View File

@ -32,7 +32,7 @@ const Developers = () => {
<Column label={intl.formatMessage(messages.heading)}>
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
<Link to='/developers/apps/create' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<SvgIcon src={require('@tabler/icons/icons/apps.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/apps.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@ -40,7 +40,7 @@ const Developers = () => {
</Link>
<Link to='/developers/settings_store' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<SvgIcon src={require('@tabler/icons/icons/code-plus.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/code-plus.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@ -48,7 +48,7 @@ const Developers = () => {
</Link>
<Link to='/developers/timeline' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<SvgIcon src={require('@tabler/icons/icons/home.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/home.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
@ -56,7 +56,7 @@ const Developers = () => {
</Link>
<Link to='/error' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<SvgIcon src={require('@tabler/icons/icons/mood-sad.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/mood-sad.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@ -64,7 +64,7 @@ const Developers = () => {
</Link>
<Link to='/error/network' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<SvgIcon src={require('@tabler/icons/icons/refresh.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/refresh.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
@ -72,7 +72,7 @@ const Developers = () => {
</Link>
<button onClick={leaveDevelopers} className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<SvgIcon src={require('@tabler/icons/icons/logout.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/logout.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />

47
app/soapbox/features/edit_profile/index.tsx
View File

@ -4,9 +4,19 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { updateNotificationSettings } from 'soapbox/actions/accounts';
import { patchMe } from 'soapbox/actions/me';
import snackbar from 'soapbox/actions/snackbar';
import BirthdayInput from 'soapbox/components/birthday_input';
import List, { ListItem } from 'soapbox/components/list';
import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack, Toggle, FileInput } from 'soapbox/components/ui';
import {
Button,
Column,
FileInput,
Form,
FormActions,
FormGroup,
HStack,
Input,
Textarea,
Toggle,
} from 'soapbox/components/ui';
import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
import { normalizeAccount } from 'soapbox/normalizers';
@ -25,25 +35,6 @@ const hidesNetwork = (account: Account): boolean => {
return Boolean(hide_followers && hide_follows && hide_followers_count && hide_follows_count);
};
/** Converts JSON objects to FormData. */
// https://stackoverflow.com/a/60286175/8811886
// @ts-ignore
const toFormData = (f => f(f))(h => f => f(x => h(h)(f)(x)))(f => fd => pk => d => {
if (d instanceof Object) {
// eslint-disable-next-line consistent-return
Object.keys(d).forEach(k => {
const v = d[k];
if (pk) k = `${pk}[${k}]`;
if (v instanceof Object && !(v instanceof Date) && !(v instanceof File)) {
return f(fd)(k)(v);
} else {
fd.append(k, v);
}
});
}
return fd;
})(new FormData())();
const messages = defineMessages({
heading: { id: 'column.edit_profile', defaultMessage: 'Edit profile' },
header: { id: 'edit_profile.header', defaultMessage: 'Edit Profile' },
@ -205,9 +196,8 @@ const EditProfile: React.FC = () => {
const handleSubmit: React.FormEventHandler = (event) => {
const promises = [];
const formData = toFormData(data);
promises.push(dispatch(patchMe(formData)));
promises.push(dispatch(patchMe(data, true)));
if (features.muteStrangers) {
promises.push(
@ -242,10 +232,6 @@ const EditProfile: React.FC = () => {
};
};
const handleBirthdayChange = (date: string) => {
updateData('birthday', date);
};
const handleHideNetworkChange: React.ChangeEventHandler<HTMLInputElement> = e => {
const hide = e.target.checked;
@ -329,9 +315,12 @@ const EditProfile: React.FC = () => {
<FormGroup
labelText={<FormattedMessage id='edit_profile.fields.birthday_label' defaultMessage='Birthday' />}
>
<BirthdayInput
<Input
type='text'
value={data.birthday}
onChange={handleBirthdayChange}
onChange={handleTextChange('birthday')}
placeholder='YYYY-MM-DD'
pattern='\d{4}-\d{2}-\d{2}'
/>
</FormGroup>
)}

27
app/soapbox/features/emoji/__tests__/emoji_index.test.ts
View File

@ -1,9 +1,10 @@
// @ts-ignore
import { emojiIndex } from 'emoji-mart';
import pick from 'lodash/pick';
import { search } from '../emoji_mart_search_light';
const trimEmojis = emoji => pick(emoji, ['id', 'unified', 'native', 'custom']);
const trimEmojis = (emoji: any) => pick(emoji, ['id', 'unified', 'native', 'custom']);
describe('emoji_index', () => {
it('should give same result for emoji_index_light and emoji-mart', () => {
@ -46,7 +47,7 @@ describe('emoji_index', () => {
});
it('can include/exclude categories', () => {
expect(search('flag', { include: ['people'] })).toEqual([]);
expect(search('flag', { include: ['people'] } as any)).toEqual([]);
expect(emojiIndex.search('flag', { include: ['people'] })).toEqual([]);
});
@ -63,9 +64,8 @@ describe('emoji_index', () => {
custom: true,
},
];
search('', { custom });
search('', { custom } as any);
emojiIndex.search('', { custom });
const expected = [];
const lightExpected = [
{
id: 'mastodon',
@ -73,7 +73,7 @@ describe('emoji_index', () => {
},
];
expect(search('masto').map(trimEmojis)).toEqual(lightExpected);
expect(emojiIndex.search('masto').map(trimEmojis)).toEqual(expected);
expect(emojiIndex.search('masto').map(trimEmojis)).toEqual([]);
});
it('(different behavior from emoji-mart) erases custom emoji if another is passed', () => {
@ -89,11 +89,10 @@ describe('emoji_index', () => {
custom: true,
},
];
search('', { custom });
search('', { custom } as any);
emojiIndex.search('', { custom });
const expected = [];
expect(search('masto', { custom: [] }).map(trimEmojis)).toEqual(expected);
expect(emojiIndex.search('masto').map(trimEmojis)).toEqual(expected);
expect(search('masto', { custom: [] } as any).map(trimEmojis)).toEqual([]);
expect(emojiIndex.search('masto').map(trimEmojis)).toEqual([]);
});
it('handles custom emoji', () => {
@ -109,7 +108,7 @@ describe('emoji_index', () => {
custom: true,
},
];
search('', { custom });
search('', { custom } as any);
emojiIndex.search('', { custom });
const expected = [
{
@ -117,15 +116,15 @@ describe('emoji_index', () => {
custom: true,
},
];
expect(search('masto', { custom }).map(trimEmojis)).toEqual(expected);
expect(search('masto', { custom } as any).map(trimEmojis)).toEqual(expected);
expect(emojiIndex.search('masto', { custom }).map(trimEmojis)).toEqual(expected);
});
it('should filter only emojis we care about, exclude pineapple', () => {
const emojisToShowFilter = emoji => emoji.unified !== '1F34D';
expect(search('apple', { emojisToShowFilter }).map((obj) => obj.id))
const emojisToShowFilter = (emoji: any) => emoji.unified !== '1F34D';
expect(search('apple', { emojisToShowFilter } as any).map((obj: any) => obj.id))
.not.toContain('pineapple');
expect(emojiIndex.search('apple', { emojisToShowFilter }).map((obj) => obj.id))
expect(emojiIndex.search('apple', { emojisToShowFilter }).map((obj: any) => obj.id))
.not.toContain('pineapple');
});

36
app/soapbox/features/federation_restrictions/components/instance_restrictions.js
View File

@ -50,8 +50,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
if (followers_only) {
items.push((
<Text key='followers_only'>
<Icon className='mr-2' src={require('@tabler/icons/icons/lock.svg')} />
<Text key='followers_only' className='flex items-center gap-2' theme='muted'>
<Icon src={require('@tabler/icons/lock.svg')} />
<FormattedMessage
id='federation_restriction.followers_only'
defaultMessage='Hidden except to followers'
@ -60,8 +60,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
));
} else if (federated_timeline_removal) {
items.push((
<Text key='federated_timeline_removal'>
<Icon className='mr-2' src={require('@tabler/icons/icons/lock-open.svg')} />
<Text key='federated_timeline_removal' className='flex items-center gap-2' theme='muted'>
<Icon src={require('@tabler/icons/lock-open.svg')} />
<FormattedMessage
id='federation_restriction.federated_timeline_removal'
defaultMessage='Fediverse timeline removal'
@ -72,8 +72,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
if (fullMediaRemoval) {
items.push((
<Text key='full_media_removal'>
<Icon className='mr-2' src={require('@tabler/icons/icons/photo-off.svg')} />
<Text key='full_media_removal' className='flex items-center gap-2' theme='muted'>
<Icon src={require('@tabler/icons/photo-off.svg')} />
<FormattedMessage
id='federation_restriction.full_media_removal'
defaultMessage='Full media removal'
@ -82,8 +82,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
));
} else if (partialMediaRemoval) {
items.push((
<Text key='partial_media_removal'>
<Icon className='mr-2' src={require('@tabler/icons/icons/photo-off.svg')} />
<Text key='partial_media_removal' className='flex items-center gap-2' theme='muted'>
<Icon src={require('@tabler/icons/photo-off.svg')} />
<FormattedMessage
id='federation_restriction.partial_media_removal'
defaultMessage='Partial media removal'
@ -94,8 +94,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
if (!fullMediaRemoval && media_nsfw) {
items.push((
<Text key='media_nsfw'>
<Icon className='mr-2' id='eye-slash' />
<Text key='media_nsfw' className='flex items-center gap-2' theme='muted'>
<Icon id='eye-slash' />
<FormattedMessage
id='federation_restriction.media_nsfw'
defaultMessage='Attachments marked NSFW'
@ -116,8 +116,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
if (remoteInstance.getIn(['federation', 'reject']) === true) {
return (
<Text>
<Icon className='mr-2' id='times' />
<Text className='flex items-center gap-2' theme='muted'>
<Icon id='times' />
<FormattedMessage
id='remote_instance.federation_panel.restricted_message'
defaultMessage='{siteTitle} blocks all activities from {host}.'
@ -128,7 +128,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
} else if (hasRestrictions(remoteInstance)) {
return [
(
<Text>
<Text theme='muted'>
<FormattedMessage
id='remote_instance.federation_panel.some_restrictions_message'
defaultMessage='{siteTitle} has placed some restrictions on {host}.'
@ -140,8 +140,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
];
} else {
return (
<Text>
<Icon className='mr-2' id='check' />
<Text className='flex items-center gap-2' theme='muted'>
<Icon id='check' />
<FormattedMessage
id='remote_instance.federation_panel.no_restrictions_message'
defaultMessage='{siteTitle} has placed no restrictions on {host}.'
@ -153,7 +153,11 @@ class InstanceRestrictions extends ImmutablePureComponent {
}
render() {
return <div className='instance-restrictions'>{this.renderContent()}</div>;
return (
<div className='py-1 pl-4 mb-4 border-solid border-l-[3px] border-gray-300 dark:border-gray-500'>
{this.renderContent()}
</div>
);
}
}

Some files were not shown because too many files have changed in this diff Show More