Merge remote-tracking branch 'origin/develop' into react-router-5

.eslintrc.js

@@ -254,18 +254,12 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['**/*.tsx'],
+      files: ['**/*.ts', '**/*.tsx'],
       rules: {
+        'no-undef': 'off', // https://stackoverflow.com/a/69155899
         'react/prop-types': 'off',
       },
-    },
+      parser: '@typescript-eslint/parser',
-    // Disable no-undef in TypeScript
-    // https://stackoverflow.com/a/69155899
-    {
-      files: ['*.ts', '*.tsx'],
-      rules: {
-        'no-undef': 'off',
-      },
     },
   ],
 };

.gitlab-ci.yml

@@ -26,6 +26,9 @@ lint-js:
   only:
     changes:
       - "**/*.js"
+      - "**/*.jsx"
+      - "**/*.ts"
+      - "**/*.tsx"
       - ".eslintignore"
       - ".eslintrc.js"
 

.stylelintrc.json

@@ -10,6 +10,6 @@
     "font-family-no-missing-generic-family-keyword": [true, { "ignoreFontFamilies": ["ForkAwesome", "Font Awesome 5 Free", "OpenDyslexic", "soapbox"] }],
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,
-    "scss/at-rule-no-unknown": true
+    "scss/at-rule-no-unknown": [true, { "ignoreAtRules": ["/tailwind/"]}]
   }
 }

app/soapbox/__mocks__/api.ts

@@ -0,0 +1,28 @@
+import { jest } from '@jest/globals';
+import { AxiosInstance } from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+
+const api = jest.requireActual('../api') as Record<string, Function>;
+let mocks: Array<Function> = [];
+
+export const __stub = (func: Function) => mocks.push(func);
+export const __clear = (): Function[] => mocks = [];
+
+const setupMock = (axios: AxiosInstance) => {
+  const mock = new MockAdapter(axios);
+  mocks.map(func => func(mock));
+};
+
+export const staticClient = api.staticClient;
+
+export const baseClient = (...params: any[]) => {
+  const axios = api.baseClient(...params);
+  setupMock(axios);
+  return axios;
+};
+
+export default (...params: any[]) => {
+  const axios = api.default(...params);
+  setupMock(axios);
+  return axios;
+};

app/soapbox/__tests__/api.js

@@ -1,8 +0,0 @@
-import api from 'soapbox/api';
-import { getState } from 'soapbox/test_helpers';
-
-test('returns a 404', () => {
-  return api(getState).get('/').catch(error => {
-    expect(error.response).toMatchObject({ data: { error: 'Not implemented' } });
-  });
-});

app/soapbox/actions/__tests__/preload-test.js

@@ -1,6 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
 
-import { server, rest } from 'soapbox/msw';
+import { __stub } from 'soapbox/api';
 import { mockStore } from 'soapbox/test_helpers';
 
 import { VERIFY_CREDENTIALS_REQUEST } from '../auth';
@@ -14,14 +14,10 @@ describe('preloadMastodon()', () => {
   it('creates the expected actions', () => {
     const data = require('soapbox/__fixtures__/mastodon_initial_state.json');
 
-    server.use(
+    __stub(mock => {
-      rest.get('/api/v1/accounts/verify_credentials', (req, res, ctx) => {
+      mock.onGet('/api/v1/accounts/verify_credentials')
-        return res(
+        .reply(200, {});
-          ctx.status(200),
+    });
-          ctx.json(require('soapbox/__fixtures__/pleroma-account.json')),
-        );
-      }),
-    );
 
     const store = mockStore(ImmutableMap());
     store.dispatch(preloadMastodon(data));

app/soapbox/actions/__tests__/statuses-test.js

@@ -1,19 +1,17 @@
 import { STATUSES_IMPORT } from 'soapbox/actions/importer';
-import { server, rest } from 'soapbox/msw';
+import { __stub } from 'soapbox/api';
-import { rootState, mockStore } from 'soapbox/test_helpers';
+import { mockStore, rootState } from 'soapbox/test_helpers';
 
 import { fetchContext } from '../statuses';
 
 describe('fetchContext()', () => {
   it('handles Mitra context', done => {
-    server.use(
+    const statuses = require('soapbox/__fixtures__/mitra-context.json');
-      rest.get('/api/v1/statuses/017ed505-5926-392f-256a-f86d5075df70/context', (req, res, ctx) => {
+
-        return res(
+    __stub(mock => {
-          ctx.status(200),
+      mock.onGet('/api/v1/statuses/017ed505-5926-392f-256a-f86d5075df70/context')
-          ctx.json(require('soapbox/__fixtures__/mitra-context.json')),
+        .reply(200, statuses);
-        );
+    });
-      }),
-    );
 
     const store = mockStore(rootState);
 

app/soapbox/actions/instance.ts

@@ -1,6 +1,7 @@
 import { get } from 'lodash';
 
 import KVStore from 'soapbox/storage/kv_store';
+import { AppDispatch, RootState } from 'soapbox/store';
 import { getAuthUserUrl } from 'soapbox/utils/auth';
 import { parseVersion } from 'soapbox/utils/features';
 
@@ -18,13 +19,13 @@ export const NODEINFO_FETCH_REQUEST = 'NODEINFO_FETCH_REQUEST';
 export const NODEINFO_FETCH_SUCCESS = 'NODEINFO_FETCH_SUCCESS';
 export const NODEINFO_FETCH_FAIL    = 'NODEINFO_FETCH_FAIL';
 
-const getMeUrl = state => {
+const getMeUrl = (state: RootState) => {
-  const me = state.get('me');
+  const me = state.me;
-  return state.getIn(['accounts', me, 'url']);
+  return state.accounts.getIn([me, 'url']);
 };
 
 // Figure out the appropriate instance to fetch depending on the state
-export const getHost = state => {
+export const getHost = (state: RootState) => {
   const accountUrl = getMeUrl(state) || getAuthUserUrl(state);
 
   try {
@@ -34,28 +35,28 @@ export const getHost = state => {
   }
 };
 
-export function rememberInstance(host) {
+export function rememberInstance(host: string) {
-  return (dispatch, getState) => {
+  return (dispatch: AppDispatch, _getState: () => RootState) => {
     dispatch({ type: INSTANCE_REMEMBER_REQUEST, host });
-    return KVStore.getItemOrError(`instance:${host}`).then(instance => {
+    return KVStore.getItemOrError(`instance:${host}`).then((instance: Record<string, any>) => {
       dispatch({ type: INSTANCE_REMEMBER_SUCCESS, host, instance });
       return instance;
-    }).catch(error => {
+    }).catch((error: Error) => {
       dispatch({ type: INSTANCE_REMEMBER_FAIL, host, error, skipAlert: true });
     });
   };
 }
 
 // We may need to fetch nodeinfo on Pleroma < 2.1
-const needsNodeinfo = instance => {
+const needsNodeinfo = (instance: Record<string, any>): boolean => {
   const v = parseVersion(get(instance, 'version'));
   return v.software === 'Pleroma' && !get(instance, ['pleroma', 'metadata']);
 };
 
 export function fetchInstance() {
-  return (dispatch, getState) => {
+  return (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch({ type: INSTANCE_FETCH_REQUEST });
-    return api(getState).get('/api/v1/instance').then(({ data: instance }) => {
+    return api(getState).get('/api/v1/instance').then(({ data: instance }: { data: Record<string, any> }) => {
       dispatch({ type: INSTANCE_FETCH_SUCCESS, instance });
       if (needsNodeinfo(instance)) {
         dispatch(fetchNodeinfo()); // Pleroma < 2.1 backwards compatibility
@@ -69,7 +70,7 @@ export function fetchInstance() {
 
 // Tries to remember the instance from browser storage before fetching it
 export function loadInstance() {
-  return (dispatch, getState) => {
+  return (dispatch: AppDispatch, getState: () => RootState) => {
     const host = getHost(getState());
 
     return dispatch(rememberInstance(host)).finally(() => {
@@ -79,12 +80,12 @@ export function loadInstance() {
 }
 
 export function fetchNodeinfo() {
-  return (dispatch, getState) => {
+  return (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch({ type: NODEINFO_FETCH_REQUEST });
-    api(getState).get('/nodeinfo/2.1.json').then(({ data: nodeinfo }) => {
+    return api(getState).get('/nodeinfo/2.1.json').then(({ data: nodeinfo }) => {
-      dispatch({ type: NODEINFO_FETCH_SUCCESS, nodeinfo });
+      return dispatch({ type: NODEINFO_FETCH_SUCCESS, nodeinfo });
-    }).catch(error => {
+    }).catch((error: Error) => {
-      dispatch({ type: NODEINFO_FETCH_FAIL, error, skipAlert: true });
+      return dispatch({ type: NODEINFO_FETCH_FAIL, error, skipAlert: true });
     });
   };
 }

app/soapbox/api.ts

@@ -5,11 +5,12 @@
  */
 'use strict';
 
-import axios from 'axios';
+import axios, { AxiosInstance, AxiosResponse } from 'axios';
 import LinkHeader from 'http-link-header';
 import { createSelector } from 'reselect';
 
-import { BACKEND_URL, FE_SUBDIRECTORY } from 'soapbox/build_config';
+import * as BuildConfig from 'soapbox/build_config';
+import { RootState } from 'soapbox/store';
 import { getAccessToken, getAppToken, parseBaseURL } from 'soapbox/utils/auth';
 import { isURL } from 'soapbox/utils/auth';
 
@@ -19,17 +20,15 @@ import { isURL } from 'soapbox/utils/auth';
  @param {object} response - Axios response object
  @returns {object} Link object
  */
-export const getLinks = response => {
+export const getLinks = (response: AxiosResponse): LinkHeader => {
-  const value = response.headers.link;
+  return new LinkHeader(response.headers?.link);
-  if (!value) return { refs: [] };
-  return LinkHeader.parse(value);
 };
 
-const getToken = (state, authType) => {
+const getToken = (state: RootState, authType: string) => {
   return authType === 'app' ? getAppToken(state) : getAccessToken(state);
 };
 
-const maybeParseJSON = data => {
+const maybeParseJSON = (data: string) => {
   try {
     return JSON.parse(data);
   } catch(Exception) {
@@ -38,8 +37,8 @@ const maybeParseJSON = data => {
 };
 
 const getAuthBaseURL = createSelector([
-  (state, me) => state.getIn(['accounts', me, 'url']),
+  (state: RootState, me: string | false | null) => state.accounts.getIn([me, 'url']),
-  (state, me) => state.getIn(['auth', 'me']),
+  (state: RootState, _me: string | false | null) => state.auth.get('me'),
 ], (accountUrl, authUserUrl) => {
   const baseURL = parseBaseURL(accountUrl) || parseBaseURL(authUserUrl);
   return baseURL !== window.location.origin ? baseURL : '';
@@ -51,10 +50,10 @@ const getAuthBaseURL = createSelector([
  * @param {string} baseURL
  * @returns {object} Axios instance
  */
-export const baseClient = (accessToken, baseURL = '') => {
+export const baseClient = (accessToken: string, baseURL: string = ''): AxiosInstance => {
   return axios.create({
     // When BACKEND_URL is set, always use it.
-    baseURL: isURL(BACKEND_URL) ? BACKEND_URL : baseURL,
+    baseURL: isURL(BuildConfig.BACKEND_URL) ? BuildConfig.BACKEND_URL : baseURL,
     headers: Object.assign(accessToken ? {
       'Authorization': `Bearer ${accessToken}`,
     } : {}),
@@ -69,7 +68,7 @@ export const baseClient = (accessToken, baseURL = '') => {
  * No authorization is needed.
  */
 export const staticClient = axios.create({
-  baseURL: FE_SUBDIRECTORY,
+  baseURL: BuildConfig.FE_SUBDIRECTORY,
   transformResponse: [maybeParseJSON],
 });
 
@@ -80,10 +79,10 @@ export const staticClient = axios.create({
  * @param {string} authType - Either 'user' or 'app'
  * @returns {object} Axios instance
  */
-export default (getState, authType = 'user') => {
+export default (getState: () => RootState, authType: string = 'user'): AxiosInstance => {
   const state = getState();
   const accessToken = getToken(state, authType);
-  const me = state.get('me');
+  const me = state.me;
   const baseURL = getAuthBaseURL(state, me);
 
   return baseClient(accessToken, baseURL);

app/soapbox/containers/soapbox.js

@@ -27,7 +27,7 @@ import { INTRODUCTION_VERSION } from '../actions/onboarding';
 import { preload } from '../actions/preload';
 import ErrorBoundary from '../components/error_boundary';
 import UI from '../features/ui';
-import configureStore from '../store/configureStore';
+import { store } from '../store';
 
 const validLocale = locale => Object.keys(messages).includes(locale);
 
@@ -39,8 +39,6 @@ const isInstanceLoaded = state => {
   return v !== '0.0.0' || fetchFailed;
 };
 
-export const store = configureStore();
-
 // Configure global functions for developers
 createGlobals(store);
 

app/soapbox/hooks/index.ts

@@ -0,0 +1 @@
+export { useAppSelector } from './useAppSelector';

app/soapbox/hooks/useAppSelector.ts

@@ -0,0 +1,5 @@
+import { TypedUseSelectorHook, useSelector } from 'react-redux';
+
+import { RootState } from 'soapbox/store';
+
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

app/soapbox/msw.js

@@ -1,13 +0,0 @@
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-
-export const server = setupServer(
-  rest.get('*', (req, res, ctx) => {
-    return res(
-      ctx.status(404),
-      ctx.json({ error: 'Not implemented' }),
-    );
-  }),
-);
-
-export { rest } from 'msw';

app/soapbox/normalizers/account.ts

@@ -13,7 +13,6 @@ import {
 
 import emojify from 'soapbox/features/emoji/emoji';
 import { normalizeEmoji } from 'soapbox/normalizers/emoji';
-import { IAccount } from 'soapbox/types';
 import { acctFull } from 'soapbox/utils/accounts';
 import { unescapeHTML } from 'soapbox/utils/html';
 import { mergeDefined, makeEmojiMap } from 'soapbox/utils/normalizers';
@@ -200,7 +199,7 @@ const normalizeFqn = (account: ImmutableMap<string, any>) => {
   return account.set('fqn', acctFull(account));
 };
 
-export const normalizeAccount = (account: Record<string, any>): IAccount => {
+export const normalizeAccount = (account: Record<string, any>) => {
   return AccountRecord(
     ImmutableMap(fromJS(account)).withMutations(account => {
       normalizePleromaLegacyFields(account);

app/soapbox/normalizers/status.ts

@@ -15,7 +15,6 @@ import { normalizeCard } from 'soapbox/normalizers/card';
 import { normalizeEmoji } from 'soapbox/normalizers/emoji';
 import { normalizeMention } from 'soapbox/normalizers/mention';
 import { normalizePoll } from 'soapbox/normalizers/poll';
-import { IStatus } from 'soapbox/types';
 
 // https://docs.joinmastodon.org/entities/status/
 export const StatusRecord = ImmutableRecord({
@@ -136,7 +135,7 @@ const fixQuote = (status: ImmutableMap<string, any>) => {
   });
 };
 
-export const normalizeStatus = (status: Record<string, any>): IStatus => {
+export const normalizeStatus = (status: Record<string, any>) => {
   return StatusRecord(
     ImmutableMap(fromJS(status)).withMutations(status => {
       normalizeAttachments(status);

app/soapbox/reducers/__tests__/instance-test.js

@@ -1,5 +1,6 @@
 import { Record } from 'immutable';
 
+import { ADMIN_CONFIG_UPDATE_REQUEST } from 'soapbox/actions/admin';
 import { INSTANCE_REMEMBER_SUCCESS } from 'soapbox/actions/instance';
 
 import reducer from '../instance';
@@ -116,4 +117,23 @@ describe('instance reducer', () => {
       expect(result.toJS()).toMatchObject(expected);
     });
   });
+
+  describe('ADMIN_CONFIG_UPDATE_REQUEST', () => {
+    const { configs } = require('soapbox/__fixtures__/pleroma-admin-config.json');
+
+    it('imports the configs', () => {
+      const action = {
+        type: ADMIN_CONFIG_UPDATE_REQUEST,
+        configs,
+      };
+
+      // The normalizer has `registrations: closed` by default
+      const state = reducer(undefined, {});
+      expect(state.registrations).toBe(false);
+
+      // After importing the configs, registration will be open
+      const result = reducer(state, action);
+      expect(result.registrations).toBe(true);
+    });
+  });
 });

app/soapbox/reducers/accounts.ts

@@ -3,6 +3,7 @@ import {
   List as ImmutableList,
   fromJS,
 } from 'immutable';
+import { AnyAction } from 'redux';
 
 import {
   ADMIN_USERS_FETCH_SUCCESS,
@@ -37,20 +38,27 @@ import {
   ACCOUNT_FETCH_FAIL_FOR_USERNAME_LOOKUP,
 } from '../actions/importer';
 
-const initialState = ImmutableMap();
+type AccountRecord = ReturnType<typeof normalizeAccount>;
+type AccountMap = ImmutableMap<string, any>;
+type APIEntity = Record<string, any>;
+type APIEntities = Array<APIEntity>;
 
-const minifyAccount = account => {
+type State = ImmutableMap<string | number, AccountRecord>;
+
+const initialState: State = ImmutableMap();
+
+const minifyAccount = (account: AccountRecord): AccountRecord => {
   return account.mergeWith((o, n) => n || o, {
     moved: account.getIn(['moved', 'id']),
   });
 };
 
-const fixAccount = (state, account) => {
+const fixAccount = (state: State, account: APIEntity) => {
   const normalized = minifyAccount(normalizeAccount(account));
   return state.set(account.id, normalized);
 };
 
-const normalizeAccounts = (state, accounts) => {
+const normalizeAccounts = (state: State, accounts: ImmutableList<AccountMap>) => {
   accounts.forEach(account => {
     state = fixAccount(state, account);
   });
@@ -58,33 +66,44 @@ const normalizeAccounts = (state, accounts) => {
   return state;
 };
 
-const importAccountFromChat = (state, chat) => fixAccount(state, chat.account);
+const importAccountFromChat = (
+  state: State,
+  chat: APIEntity,
+): State => fixAccount(state, chat.account);
 
-const importAccountsFromChats = (state, chats) =>
+const importAccountsFromChats = (state: State, chats: APIEntities): State =>
   state.withMutations(mutable =>
     chats.forEach(chat => importAccountFromChat(mutable, chat)));
 
-const addTags = (state, accountIds, tags) => {
+const addTags = (
+  state: State,
+  accountIds: Array<string>,
+  tags: Array<string>,
+): State => {
   return state.withMutations(state => {
     accountIds.forEach(id => {
-      state.updateIn([id, 'pleroma', 'tags'], ImmutableList(), v =>
+      state.updateIn([id, 'pleroma', 'tags'], ImmutableList(), (v: ImmutableList<string>) =>
         v.toOrderedSet().union(tags).toList(),
       );
     });
   });
 };
 
-const removeTags = (state, accountIds, tags) => {
+const removeTags = (
+  state: State,
+  accountIds: Array<string>,
+  tags: Array<string>,
+): State => {
   return state.withMutations(state => {
     accountIds.forEach(id => {
-      state.updateIn([id, 'pleroma', 'tags'], ImmutableList(), v =>
+      state.updateIn([id, 'pleroma', 'tags'], ImmutableList(), (v: ImmutableList<string>) =>
         v.toOrderedSet().subtract(tags).toList(),
       );
     });
   });
 };
 
-const setActive = (state, accountIds, active) => {
+const setActive = (state: State, accountIds: Array<string>, active: boolean): State => {
   return state.withMutations(state => {
     accountIds.forEach(id => {
       state.setIn([id, 'pleroma', 'is_active'], active);
@@ -92,12 +111,16 @@ const setActive = (state, accountIds, active) => {
   });
 };
 
-const permissionGroupFields = {
+const permissionGroupFields: Record<string, string> = {
   admin: 'is_admin',
   moderator: 'is_moderator',
 };
 
-const addPermission = (state, accountIds, permissionGroup) => {
+const addPermission = (
+  state: State,
+  accountIds: Array<string>,
+  permissionGroup: string,
+): State => {
   const field = permissionGroupFields[permissionGroup];
   if (!field) return state;
 
@@ -108,7 +131,11 @@ const addPermission = (state, accountIds, permissionGroup) => {
   });
 };
 
-const removePermission = (state, accountIds, permissionGroup) => {
+const removePermission = (
+  state: State,
+  accountIds: Array<string>,
+  permissionGroup: string,
+): State => {
   const field = permissionGroupFields[permissionGroup];
   if (!field) return state;
 
@@ -119,7 +146,7 @@ const removePermission = (state, accountIds, permissionGroup) => {
   });
 };
 
-const buildAccount = adminUser => normalizeAccount({
+const buildAccount = (adminUser: ImmutableMap<string, any>): AccountRecord => normalizeAccount({
   id: adminUser.get('id'),
   username: adminUser.get('nickname').split('@')[0],
   acct: adminUser.get('nickname'),
@@ -144,7 +171,10 @@ const buildAccount = adminUser => normalizeAccount({
   should_refetch: true,
 });
 
-const mergeAdminUser = (account, adminUser) => {
+const mergeAdminUser = (
+  account: AccountRecord,
+  adminUser: ImmutableMap<string, any>,
+) => {
   return account.withMutations(account => {
     account.set('display_name', adminUser.get('display_name'));
     account.set('avatar', adminUser.get('avatar'));
@@ -157,7 +187,7 @@ const mergeAdminUser = (account, adminUser) => {
   });
 };
 
-const importAdminUser = (state, adminUser) => {
+const importAdminUser = (state: State, adminUser: ImmutableMap<string, any>): State => {
   const id = adminUser.get('id');
   const account = state.get(id);
 
@@ -168,15 +198,15 @@ const importAdminUser = (state, adminUser) => {
   }
 };
 
-const importAdminUsers = (state, adminUsers) => {
+const importAdminUsers = (state: State, adminUsers: Array<Record<string, any>>): State => {
-  return state.withMutations(state => {
+  return state.withMutations((state: State) => {
     fromJS(adminUsers).forEach(adminUser => {
-      importAdminUser(state, adminUser);
+      importAdminUser(state, ImmutableMap(adminUser));
     });
   });
 };
 
-const setSuggested = (state, accountIds, isSuggested) => {
+const setSuggested = (state: State, accountIds: Array<string>, isSuggested: boolean): State => {
   return state.withMutations(state => {
     accountIds.forEach(id => {
       state.setIn([id, 'pleroma', 'is_suggested'], isSuggested);
@@ -184,16 +214,14 @@ const setSuggested = (state, accountIds, isSuggested) => {
   });
 };
 
-export default function accounts(state = initialState, action) {
+export default function accounts(state: State = initialState, action: AnyAction): State {
   switch(action.type) {
   case ACCOUNT_IMPORT:
     return fixAccount(state, action.account);
   case ACCOUNTS_IMPORT:
     return normalizeAccounts(state, action.accounts);
   case ACCOUNT_FETCH_FAIL_FOR_USERNAME_LOOKUP:
-    return state.set(-1, ImmutableMap({
+    return state.set(-1, normalizeAccount({ username: action.username }));
-      username: action.username,
-    }));
   case CHATS_FETCH_SUCCESS:
   case CHATS_EXPAND_SUCCESS:
     return importAccountsFromChats(state, action.chats);

app/soapbox/reducers/index.ts

@@ -117,7 +117,7 @@ const reducers = {
 
 // Build a default state from all reducers: it has the key and `undefined`
 export const StateRecord = ImmutableRecord(
-  Object.keys(reducers).reduce((params, reducer) => {
+  Object.keys(reducers).reduce((params: Record<string, any>, reducer) => {
     params[reducer] = undefined;
     return params;
   }, {}),
@@ -126,18 +126,18 @@ export const StateRecord = ImmutableRecord(
 const appReducer = combineReducers(reducers, StateRecord);
 
 // Clear the state (mostly) when the user logs out
-const logOut = (state = StateRecord()) => {
+const logOut = (state: any = StateRecord()): ReturnType<typeof appReducer> => {
-  const whitelist = ['instance', 'soapbox', 'custom_emojis', 'auth'];
+  const whitelist: string[] = ['instance', 'soapbox', 'custom_emojis', 'auth'];
 
   return StateRecord(
-    whitelist.reduce((acc, curr) => {
+    whitelist.reduce((acc: Record<string, any>, curr) => {
       acc[curr] = state.get(curr);
       return acc;
     }, {}),
-  );
+  ) as unknown as ReturnType<typeof appReducer>;
 };
 
-const rootReducer = (state, action) => {
+const rootReducer: typeof appReducer = (state, action) => {
   switch(action.type) {
   case AUTH_LOGGED_OUT:
     return appReducer(logOut(state), action);

app/soapbox/reducers/instance.ts

@@ -1,4 +1,5 @@
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
+import { AnyAction } from 'redux';
 
 import { ADMIN_CONFIG_UPDATE_REQUEST, ADMIN_CONFIG_UPDATE_SUCCESS } from 'soapbox/actions/admin';
 import { PLEROMA_PRELOAD_IMPORT } from 'soapbox/actions/preload';
@@ -15,9 +16,9 @@ import {
 
 const initialState = normalizeInstance(ImmutableMap());
 
-const nodeinfoToInstance = nodeinfo => {
+const nodeinfoToInstance = (nodeinfo: ImmutableMap<string, any>) => {
   // Match Pleroma's develop branch
-  return ImmutableMap({
+  return normalizeInstance(ImmutableMap({
     pleroma: ImmutableMap({
       metadata: ImmutableMap({
         account_activation_required: nodeinfo.getIn(['metadata', 'accountActivationRequired']),
@@ -28,30 +29,30 @@ const nodeinfoToInstance = nodeinfo => {
         }),
       }),
     }),
-  });
+  }));
 };
 
-const importInstance = (state, instance) => {
+const importInstance = (_state: typeof initialState, instance: ImmutableMap<string, any>) => {
   return normalizeInstance(instance);
 };
 
-const importNodeinfo = (state, nodeinfo) => {
+const importNodeinfo = (state: typeof initialState, nodeinfo: ImmutableMap<string, any>) => {
   return nodeinfoToInstance(nodeinfo).mergeDeep(state);
 };
 
-const preloadImport = (state, action, path) => {
+const preloadImport = (state: typeof initialState, action: Record<string, any>, path: string) => {
   const instance = action.data[path];
-  return instance ? importInstance(state, fromJS(instance)) : state;
+  return instance ? importInstance(state, ImmutableMap(fromJS(instance))) : state;
 };
 
-const getConfigValue = (instanceConfig, key) => {
+const getConfigValue = (instanceConfig: ImmutableMap<string, any>, key: string) => {
   const v = instanceConfig
     .find(value => value.getIn(['tuple', 0]) === key);
 
   return v ? v.getIn(['tuple', 1]) : undefined;
 };
 
-const importConfigs = (state, configs) => {
+const importConfigs = (state: typeof initialState, configs: ImmutableList<any>) => {
   // FIXME: This is pretty hacked together. Need to make a cleaner map.
   const config = ConfigDB.find(configs, ':pleroma', ':instance');
   const simplePolicy = ConfigDB.toSimplePolicy(configs);
@@ -74,15 +75,15 @@ const importConfigs = (state, configs) => {
   });
 };
 
-const handleAuthFetch = state => {
+const handleAuthFetch = (state: typeof initialState) => {
   // Authenticated fetch is enabled, so make the instance appear censored
-  return ImmutableMap({
+  return state.mergeWith((o, n) => o || n, {
     title: '██████',
     description: '████████████',
-  }).merge(state);
+  });
 };
 
-const getHost = instance => {
+const getHost = (instance: { uri: string }) => {
   try {
     return new URL(instance.uri).host;
   } catch {
@@ -94,7 +95,7 @@ const getHost = instance => {
   }
 };
 
-const persistInstance = instance => {
+const persistInstance = (instance: { uri: string }) => {
   const host = getHost(instance);
 
   if (host) {
@@ -102,7 +103,7 @@ const persistInstance = instance => {
   }
 };
 
-const handleInstanceFetchFail = (state, error) => {
+const handleInstanceFetchFail = (state: typeof initialState, error: Record<string, any>) => {
   if (error.response?.status === 401) {
     return handleAuthFetch(state);
   } else {
@@ -110,22 +111,22 @@ const handleInstanceFetchFail = (state, error) => {
   }
 };
 
-export default function instance(state = initialState, action) {
+export default function instance(state = initialState, action: AnyAction) {
   switch(action.type) {
   case PLEROMA_PRELOAD_IMPORT:
     return preloadImport(state, action, '/api/v1/instance');
   case INSTANCE_REMEMBER_SUCCESS:
-    return importInstance(state, fromJS(action.instance));
+    return importInstance(state, ImmutableMap(fromJS(action.instance)));
   case INSTANCE_FETCH_SUCCESS:
     persistInstance(action.instance);
-    return importInstance(state, fromJS(action.instance));
+    return importInstance(state, ImmutableMap(fromJS(action.instance)));
   case INSTANCE_FETCH_FAIL:
     return handleInstanceFetchFail(state, action.error);
   case NODEINFO_FETCH_SUCCESS:
-    return importNodeinfo(state, fromJS(action.nodeinfo));
+    return importNodeinfo(state, ImmutableMap(fromJS(action.nodeinfo)));
   case ADMIN_CONFIG_UPDATE_REQUEST:
   case ADMIN_CONFIG_UPDATE_SUCCESS:
-    return importConfigs(state, fromJS(action.configs));
+    return importConfigs(state, ImmutableList(fromJS(action.configs)));
   default:
     return state;
   }

app/soapbox/reducers/statuses.ts

@@ -1,10 +1,11 @@
 import escapeTextContentForBrowser from 'escape-html';
-import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
+import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import { AnyAction } from 'redux';
 
 import emojify from 'soapbox/features/emoji/emoji';
-import { normalizeStatus } from 'soapbox/normalizers/status';
+import { normalizeStatus } from 'soapbox/normalizers';
 import { simulateEmojiReact, simulateUnEmojiReact } from 'soapbox/utils/emoji_reacts';
-import { stripCompatibilityFeatures } from 'soapbox/utils/html';
+import { stripCompatibilityFeatures, unescapeHTML } from 'soapbox/utils/html';
 import { makeEmojiMap } from 'soapbox/utils/normalizers';
 
 import {
@@ -33,7 +34,13 @@ import { TIMELINE_DELETE } from '../actions/timelines';
 
 const domParser = new DOMParser();
 
-const minifyStatus = status => {
+type StatusRecord = ReturnType<typeof normalizeStatus>;
+type APIEntity = Record<string, any>;
+type APIEntities = Array<APIEntity>;
+
+type State = ImmutableMap<string, StatusRecord>;
+
+const minifyStatus = (status: StatusRecord): StatusRecord => {
   return status.mergeWith((o, n) => n || o, {
     account: status.getIn(['account', 'id']),
     reblog: status.getIn(['reblog', 'id']),
@@ -42,48 +49,69 @@ const minifyStatus = status => {
   });
 };
 
+// Gets titles of poll options from status
+const getPollOptionTitles = (status: StatusRecord): Array<string> => {
+  return status.poll?.options.map(({ title }: { title: string }) => title);
+};
+
+// Creates search text from the status
+const buildSearchContent = (status: StatusRecord): string => {
+  const pollOptionTitles = getPollOptionTitles(status);
+
+  const fields = ImmutableList([
+    status.spoiler_text,
+    status.content,
+  ]).concat(pollOptionTitles);
+
+  return unescapeHTML(fields.join('\n\n'));
+};
+
 // Only calculate these values when status first encountered
 // Otherwise keep the ones already in the reducer
-export const calculateStatus = (status, oldStatus, expandSpoilers = false) => {
+export const calculateStatus = (
+  status: StatusRecord,
+  oldStatus: StatusRecord,
+  expandSpoilers: boolean = false,
+): StatusRecord => {
   if (oldStatus) {
     return status.merge({
-      search_index: oldStatus.get('search_index'),
+      search_index: oldStatus.search_index,
-      contentHtml: oldStatus.get('contentHtml'),
+      contentHtml: oldStatus.contentHtml,
-      spoilerHtml: oldStatus.get('spoilerHtml'),
+      spoilerHtml: oldStatus.spoilerHtml,
-      hidden: oldStatus.get('hidden'),
+      hidden: oldStatus.hidden,
     });
   } else {
-    const spoilerText   = status.get('spoiler_text') || '';
+    const spoilerText   = status.spoiler_text;
-    const searchContent = (ImmutableList([spoilerText, status.get('content')]).concat(status.getIn(['poll', 'options'], ImmutableList()).map(option => option.get('title')))).join('\n\n').replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n');
+    const searchContent = buildSearchContent(status);
-    const emojiMap      = makeEmojiMap(status.get('emojis'));
+    const emojiMap      = makeEmojiMap(status.emojis);
 
     return status.merge({
       search_index: domParser.parseFromString(searchContent, 'text/html').documentElement.textContent,
-      contentHtml: stripCompatibilityFeatures(emojify(status.get('content'), emojiMap)),
+      contentHtml: stripCompatibilityFeatures(emojify(status.content, emojiMap)),
       spoilerHtml: emojify(escapeTextContentForBrowser(spoilerText), emojiMap),
-      hidden: expandSpoilers ? false : spoilerText.length > 0 || status.get('sensitive'),
+      hidden: expandSpoilers ? false : spoilerText.length > 0 || status.sensitive,
     });
   }
 };
 
 // Check whether a status is a quote by secondary characteristics
-const isQuote = status => {
+const isQuote = (status: StatusRecord) => {
-  return Boolean(status.get('quote_id') || status.getIn(['pleroma', 'quote_url']));
+  return Boolean(status.getIn(['pleroma', 'quote_url']));
 };
 
 // Preserve quote if an existing status already has it
-const fixQuote = (status, oldStatus) => {
+const fixQuote = (status: StatusRecord, oldStatus: StatusRecord): StatusRecord => {
-  if (oldStatus && !status.get('quote') && isQuote(status)) {
+  if (oldStatus && !status.quote && isQuote(status)) {
     return status
-      .set('quote', oldStatus.get('quote'))
+      .set('quote', oldStatus.quote)
       .updateIn(['pleroma', 'quote_visible'], visible => visible || oldStatus.getIn(['pleroma', 'quote_visible']));
   } else {
     return status;
   }
 };
 
-const fixStatus = (state, status, expandSpoilers) => {
+const fixStatus = (state: State, status: APIEntity, expandSpoilers: boolean): StatusRecord => {
-  const oldStatus = state.get(status.get('id'));
+  const oldStatus: StatusRecord = state.get(status.id);
 
   return normalizeStatus(status).withMutations(status => {
     fixQuote(status, oldStatus);
@@ -92,13 +120,13 @@ const fixStatus = (state, status, expandSpoilers) => {
   });
 };
 
-const importStatus = (state, status, expandSpoilers) =>
+const importStatus = (state: State, status: APIEntity, expandSpoilers: boolean): State =>
-  state.set(status.id, fixStatus(state, fromJS(status), expandSpoilers));
+  state.set(status.id, fixStatus(state, status, expandSpoilers));
 
-const importStatuses = (state, statuses, expandSpoilers) =>
+const importStatuses = (state: State, statuses: APIEntities, expandSpoilers: boolean): State =>
   state.withMutations(mutable => statuses.forEach(status => importStatus(mutable, status, expandSpoilers)));
 
-const deleteStatus = (state, id, references) => {
+const deleteStatus = (state: State, id: string, references: Array<string>) => {
   references.forEach(ref => {
     state = deleteStatus(state, ref[0], []);
   });
@@ -106,25 +134,25 @@ const deleteStatus = (state, id, references) => {
   return state.delete(id);
 };
 
-const importPendingStatus = (state, { in_reply_to_id }) => {
+const importPendingStatus = (state: State, { in_reply_to_id }: APIEntity) => {
   if (in_reply_to_id) {
-    return state.updateIn([in_reply_to_id, 'replies_count'], 0, count => count + 1);
+    return state.updateIn([in_reply_to_id, 'replies_count'], 0, (count: number) => count + 1);
   } else {
     return state;
   }
 };
 
-const deletePendingStatus = (state, { in_reply_to_id }) => {
+const deletePendingStatus = (state: State, { in_reply_to_id }: APIEntity) => {
   if (in_reply_to_id) {
-    return state.updateIn([in_reply_to_id, 'replies_count'], 0, count => Math.max(0, count - 1));
+    return state.updateIn([in_reply_to_id, 'replies_count'], 0, (count: number) => Math.max(0, count - 1));
   } else {
     return state;
   }
 };
 
-const initialState = ImmutableMap();
+const initialState: State = ImmutableMap();
 
-export default function statuses(state = initialState, action) {
+export default function statuses(state = initialState, action: AnyAction): State {
   switch(action.type) {
   case STATUS_IMPORT:
     return importStatus(state, action.status, action.expandSpoilers);
@@ -172,7 +200,7 @@ export default function statuses(state = initialState, action) {
     return state.setIn([action.id, 'muted'], false);
   case STATUS_REVEAL:
     return state.withMutations(map => {
-      action.ids.forEach(id => {
+      action.ids.forEach((id: string) => {
         if (!(state.get(id) === undefined)) {
           map.setIn([id, 'hidden'], false);
         }
@@ -180,7 +208,7 @@ export default function statuses(state = initialState, action) {
     });
   case STATUS_HIDE:
     return state.withMutations(map => {
-      action.ids.forEach(id => {
+      action.ids.forEach((id: string) => {
         if (!(state.get(id) === undefined)) {
           map.setIn([id, 'hidden'], true);
         }

app/soapbox/storage/kv_store.ts

@@ -1,8 +1,12 @@
 import localforage from 'localforage';
 
+interface IKVStore extends LocalForage {
+  getItemOrError?: (key: string) => Promise<any>,
+}
+
 // localForage
 // https://localforage.github.io/localForage/#settings-api-config
-export const KVStore = localforage.createInstance({
+export const KVStore: IKVStore = localforage.createInstance({
   name: 'soapbox',
   description: 'Soapbox offline data store',
   driver: localforage.INDEXEDDB,
@@ -11,7 +15,7 @@ export const KVStore = localforage.createInstance({
 
 // localForage returns 'null' when a key isn't found.
 // In the Redux action flow, we want it to fail harder.
-KVStore.getItemOrError = key => {
+KVStore.getItemOrError = (key: string) => {
   return KVStore.getItem(key).then(value => {
     if (value === null) {
       throw new Error(`KVStore: null value for key ${key}`);

app/soapbox/store.ts

@@ -0,0 +1,23 @@
+import { composeWithDevTools } from '@redux-devtools/extension';
+import { createStore, applyMiddleware, AnyAction } from 'redux';
+import thunk, { ThunkDispatch } from 'redux-thunk';
+
+import errorsMiddleware from './middleware/errors';
+import soundsMiddleware from './middleware/sounds';
+import appReducer from './reducers';
+
+export const store = createStore(
+  appReducer,
+  composeWithDevTools(
+    applyMiddleware(
+      thunk,
+      errorsMiddleware(),
+      soundsMiddleware(),
+    ),
+  ),
+);
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+// https://redux.js.org/usage/usage-with-typescript
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = ThunkDispatch<{}, {}, AnyAction>;

app/soapbox/store/configureStore.js

@@ -1,14 +0,0 @@
-import { createStore, applyMiddleware, compose } from 'redux';
-import thunk from 'redux-thunk';
-
-import errorsMiddleware from '../middleware/errors';
-import soundsMiddleware from '../middleware/sounds';
-import appReducer from '../reducers';
-
-export default function configureStore() {
-  return createStore(appReducer, compose(applyMiddleware(
-    thunk,
-    errorsMiddleware(),
-    soundsMiddleware(),
-  ), window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f));
-}

app/soapbox/test_setup.js

@@ -3,14 +3,12 @@
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
-import { server } from 'soapbox/msw';
+import { __clear as clearApiMocks } from 'soapbox/api';
 
 // Enzyme
 const adapter = new Adapter();
 configure({ adapter });
 
-// Setup MSW
+// API mocking
-// https://mswjs.io/docs/api/setup-server
+jest.mock('soapbox/api');
-beforeAll(() => server.listen());
+afterEach(() => clearApiMocks());
-afterEach(() => server.resetHandlers());
-afterAll(() => server.close());

app/soapbox/utils/config_db.ts

@@ -6,17 +6,25 @@ import {
 } from 'immutable';
 import { trimStart } from 'lodash';
 
-const find = (configs, group, key) => {
+type Config = ImmutableMap<string, any>;
+type Policy = ImmutableMap<string, any>;
+
+const find = (
+  configs: ImmutableList<Config>,
+  group: string,
+  key: string,
+): Config => {
   return configs.find(config =>
-    config.isSuperset({ group, key }),
+    config.isSuperset(ImmutableMap({ group, key })),
   );
 };
 
-const toSimplePolicy = configs => {
+const toSimplePolicy = (configs: ImmutableList<Config>): Policy => {
   const config = find(configs, ':pleroma', ':mrf_simple');
 
-  const reducer = (acc, curr) => {
+  const reducer = (acc: ImmutableMap<string, any>, curr: ImmutableMap<string, any>) => {
-    const { tuple: [key, hosts] } = curr.toJS();
+    const key = curr.getIn(['tuple', 0]) as string;
+    const hosts = curr.getIn(['tuple', 1]) as ImmutableList<string>;
     return acc.set(trimStart(key, ':'), ImmutableSet(hosts));
   };
 
@@ -28,8 +36,9 @@ const toSimplePolicy = configs => {
   }
 };
 
-const fromSimplePolicy = simplePolicy => {
+const fromSimplePolicy = (simplePolicy: Policy): ImmutableList<Config> => {
-  const mapper = (hosts, key) => fromJS({ tuple: [`:${key}`, hosts.toJS()] });
+  const mapper = (hosts: ImmutableList<string>, key: string) => fromJS({ tuple: [`:${key}`, hosts.toJS()] });
+
   const value = simplePolicy.map(mapper).toList();
 
   return ImmutableList([

package.json

@@ -54,13 +54,18 @@
     "@gamestdio/websocket": "^0.3.2",
     "@lcdp/offline-plugin": "^5.1.0",
     "@popperjs/core": "^2.4.4",
+    "@redux-devtools/extension": "^3.2.2",
     "@sentry/browser": "^6.12.0",
     "@sentry/react": "^6.12.0",
     "@sentry/tracing": "^6.12.0",
     "@tabler/icons": "^1.53.0",
+    "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.1",
     "@types/escape-html": "^1.0.1",
+    "@types/http-link-header": "^1.0.3",
+    "@types/lodash": "^4.14.180",
     "array-includes": "^3.0.3",
-    "autoprefixer": "^10.0.0",
+    "autoprefixer": "^10.4.2",
     "axios": "^0.21.4",
     "babel-loader": "^8.2.2",
     "babel-plugin-lodash": "^3.3.4",
@@ -109,12 +114,11 @@
     "mark-loader": "^0.1.6",
     "marky": "^1.2.1",
     "mini-css-extract-plugin": "^1.6.2",
-    "msw": "^0.39.2",
     "object-assign": "^4.1.1",
     "object-fit-images": "^3.2.3",
     "object.values": "^1.1.0",
     "path-browserify": "^1.0.1",
-    "postcss": "^8.1.1",
+    "postcss": "^8.4.5",
     "postcss-loader": "^4.0.3",
     "postcss-object-fit-images": "^1.1.2",
     "process": "^0.11.10",
@@ -156,7 +160,6 @@
     "substring-trie": "^1.0.2",
     "terser-webpack-plugin": "^5.2.3",
     "tiny-queue": "^0.2.1",
-    "ts-jest": "^27.0.5",
     "ts-loader": "^9.2.6",
     "tslib": "^2.3.1",
     "twemoji": "https://github.com/twitter/twemoji#v13.0.2",
@@ -171,6 +174,9 @@
     "wicg-inert": "^3.1.1"
   },
   "devDependencies": {
+    "@jest/globals": "^27.5.1",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
     "axios-mock-adapter": "^1.18.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.1.0",
@@ -192,6 +198,8 @@
     "stylelint": "^13.7.2",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-scss": "^3.18.0",
+    "tailwindcss": "^3.0.15",
+    "ts-jest": "^27.0.5",
     "webpack-dev-server": "^4.1.0",
     "yargs": "^16.0.3"
   }

postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = ({ env }) => ({
   plugins: {
+    tailwindcss: {},
     autoprefixer: {},
     'postcss-object-fit-images': {},
     cssnano: env === 'production' ? {} : false,

tailwind.config.js

@@ -0,0 +1,42 @@
+module.exports = {
+  content: ['./app/**/*.{html,js,ts,tsx}'],
+  darkMode: 'class',
+  theme: {
+    screens: {
+      sm: '581px',
+      md: '768px',
+      lg: '976px',
+      xl: '1440px',
+    },
+    extend: {
+      fontSize: {
+        base: '0.9375rem',
+      },
+      fontFamily: {
+        'sans': [
+          'Inter',
+          'ui-sans-serif',
+          'system-ui',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'Segoe UI',
+          'Roboto',
+          'Helvetica Neue',
+          'Arial',
+          'Noto Sans',
+          'sans-serif',
+          'Apple Color Emoji',
+          'Segoe UI Emoji',
+          'Segoe UI Symbol',
+          'Noto Color Emoji',
+        ],
+      },
+      colors: {
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+  ],
+};

tsconfig.json

@@ -9,6 +9,8 @@
     "allowJs": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
-  }
+    "typeRoots": [ "./types", "./node_modules/@types"]
+  },
+  "exclude": ["node_modules", "types", "**/*.test.*", "**/__mocks__/*", "**/__tests__/*"]
 }

types/redux-immutable/index.d.ts

@@ -0,0 +1,17 @@
+// Type definitions for redux-immutable v4.0.0
+// Project: https://github.com/gajus/redux-immutable
+// Definitions by: Sebastian Sebald <https://github.com/sebald>
+//                 Gavin Gregory <https://github.com/gavingregory>
+//                 Kanitkorn Sujautra <https://github.com/lukyth>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+declare module 'redux-immutable' {
+  import { Collection, Record } from 'immutable';
+  import { ReducersMapObject, Reducer, Action } from 'redux';
+
+  export function combineReducers<S, A extends Action, T>(reducers: ReducersMapObject<S, A>, getDefaultState?: () => Collection.Keyed<T, S>): Reducer<S, A>;
+  export function combineReducers<S, A extends Action>(reducers: ReducersMapObject<S, A>, getDefaultState?: () => Collection.Indexed<S>): Reducer<S, A>;
+  export function combineReducers<S>(reducers: ReducersMapObject<S, any>, getDefaultState?: () => Collection.Indexed<S>): Reducer<S>;
+  export function combineReducers<S, T extends object>(reducers: ReducersMapObject<S, any>, getDefaultState?: Record.Factory<T>): Reducer<S>;
+}