Merge branch 'ts-redux' into 'develop'

TS Redux

See merge request soapbox-pub/soapbox-fe!1098

.gitlab-ci.yml

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

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 me = state.get('me');
-  return state.getIn(['accounts', me, 'url']);
+const getMeUrl = (state: RootState) => {
+  const me = state.me;
+  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) {
-  return (dispatch, getState) => {
+export function rememberInstance(host: string) {
+  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 }) => {
-      dispatch({ type: NODEINFO_FETCH_SUCCESS, nodeinfo });
-    }).catch(error => {
-      dispatch({ type: NODEINFO_FETCH_FAIL, error, skipAlert: true });
+    return api(getState).get('/nodeinfo/2.1.json').then(({ data: nodeinfo }) => {
+      return dispatch({ type: NODEINFO_FETCH_SUCCESS, nodeinfo });
+    }).catch((error: Error) => {
+      return dispatch({ type: NODEINFO_FETCH_FAIL, error, skipAlert: true });
     });
   };
 }

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 whitelist = ['instance', 'soapbox', 'custom_emojis', 'auth'];
+const logOut = (state: any = StateRecord()): ReturnType<typeof appReducer> => {
+  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.js

@@ -1,132 +0,0 @@
-import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
-
-import { ADMIN_CONFIG_UPDATE_REQUEST, ADMIN_CONFIG_UPDATE_SUCCESS } from 'soapbox/actions/admin';
-import { PLEROMA_PRELOAD_IMPORT } from 'soapbox/actions/preload';
-import { normalizeInstance } from 'soapbox/normalizers/instance';
-import KVStore from 'soapbox/storage/kv_store';
-import { ConfigDB } from 'soapbox/utils/config_db';
-
-import {
-  INSTANCE_REMEMBER_SUCCESS,
-  INSTANCE_FETCH_SUCCESS,
-  INSTANCE_FETCH_FAIL,
-  NODEINFO_FETCH_SUCCESS,
-} from '../actions/instance';
-
-const initialState = normalizeInstance(ImmutableMap());
-
-const nodeinfoToInstance = nodeinfo => {
-  // Match Pleroma's develop branch
-  return ImmutableMap({
-    pleroma: ImmutableMap({
-      metadata: ImmutableMap({
-        account_activation_required: nodeinfo.getIn(['metadata', 'accountActivationRequired']),
-        features: nodeinfo.getIn(['metadata', 'features']),
-        federation: nodeinfo.getIn(['metadata', 'federation']),
-        fields_limits: ImmutableMap({
-          max_fields: nodeinfo.getIn(['metadata', 'fieldsLimits', 'maxFields']),
-        }),
-      }),
-    }),
-  });
-};
-
-const importInstance = (state, instance) => {
-  return normalizeInstance(instance);
-};
-
-const importNodeinfo = (state, nodeinfo) => {
-  return nodeinfoToInstance(nodeinfo).mergeDeep(state);
-};
-
-const preloadImport = (state, action, path) => {
-  const instance = action.data[path];
-  return instance ? importInstance(state, fromJS(instance)) : state;
-};
-
-const getConfigValue = (instanceConfig, key) => {
-  const v = instanceConfig
-    .find(value => value.getIn(['tuple', 0]) === key);
-
-  return v ? v.getIn(['tuple', 1]) : undefined;
-};
-
-const importConfigs = (state, configs) => {
-  // FIXME: This is pretty hacked together. Need to make a cleaner map.
-  const config = ConfigDB.find(configs, ':pleroma', ':instance');
-  const simplePolicy = ConfigDB.toSimplePolicy(configs);
-
-  if (!config && !simplePolicy) return state;
-
-  return state.withMutations(state => {
-    if (config) {
-      const value = config.get('value', ImmutableList());
-      const registrationsOpen = getConfigValue(value, ':registrations_open');
-      const approvalRequired = getConfigValue(value, ':account_approval_required');
-
-      state.update('registrations', c => typeof registrationsOpen === 'boolean' ? registrationsOpen : c);
-      state.update('approval_required', c => typeof approvalRequired === 'boolean' ? approvalRequired : c);
-    }
-
-    if (simplePolicy) {
-      state.setIn(['pleroma', 'metadata', 'federation', 'mrf_simple'], simplePolicy);
-    }
-  });
-};
-
-const handleAuthFetch = state => {
-  // Authenticated fetch is enabled, so make the instance appear censored
-  return ImmutableMap({
-    title: '██████',
-    description: '████████████',
-  }).merge(state);
-};
-
-const getHost = instance => {
-  try {
-    return new URL(instance.uri).host;
-  } catch {
-    try {
-      return new URL(`https://${instance.uri}`).host;
-    } catch {
-      return null;
-    }
-  }
-};
-
-const persistInstance = instance => {
-  const host = getHost(instance);
-
-  if (host) {
-    KVStore.setItem(`instance:${host}`, instance).catch(console.error);
-  }
-};
-
-const handleInstanceFetchFail = (state, error) => {
-  if (error.response?.status === 401) {
-    return handleAuthFetch(state);
-  } else {
-    return state;
-  }
-};
-
-export default function instance(state = initialState, action) {
-  switch(action.type) {
-  case PLEROMA_PRELOAD_IMPORT:
-    return preloadImport(state, action, '/api/v1/instance');
-  case INSTANCE_REMEMBER_SUCCESS:
-    return importInstance(state, fromJS(action.instance));
-  case INSTANCE_FETCH_SUCCESS:
-    persistInstance(action.instance);
-    return importInstance(state, fromJS(action.instance));
-  case INSTANCE_FETCH_FAIL:
-    return handleInstanceFetchFail(state, action.error);
-  case NODEINFO_FETCH_SUCCESS:
-    return importNodeinfo(state, fromJS(action.nodeinfo));
-  case ADMIN_CONFIG_UPDATE_REQUEST:
-  case ADMIN_CONFIG_UPDATE_SUCCESS:
-    return importConfigs(state, fromJS(action.configs));
-  default:
-    return state;
-  }
-}

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

@@ -1,6 +1,6 @@
 import { composeWithDevTools } from '@redux-devtools/extension';
-import { createStore, applyMiddleware } from 'redux';
-import thunk from 'redux-thunk';
+import { createStore, applyMiddleware, AnyAction } from 'redux';
+import thunk, { ThunkDispatch } from 'redux-thunk';
 
 import errorsMiddleware from './middleware/errors';
 import soundsMiddleware from './middleware/sounds';
@@ -20,4 +20,4 @@ export const store = createStore(
 // 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 = typeof store.dispatch;
+export type AppDispatch = ThunkDispatch<{}, {}, AnyAction>;

package.json

@@ -61,7 +61,7 @@
     "@tabler/icons": "^1.53.0",
     "@types/escape-html": "^1.0.1",
     "@types/http-link-header": "^1.0.3",
-    "@types/redux-immutable": "^4.0.2",
+    "@types/lodash": "^4.14.180",
     "array-includes": "^3.0.3",
     "autoprefixer": "^10.0.0",
     "axios": "^0.21.4",

tsconfig.json

@@ -9,7 +9,8 @@
     "allowJs": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "typeRoots": [ "./types", "./node_modules/@types"]
   },
-  "exclude": ["**/*.test.*", "**/__mocks__/*", "**/__tests__/*"]
+  "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 as ImmutableRecord } 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>(reducers: ReducersMapObject<S, any>, getDefaultState?: () => ImmutableRecord<any>): Reducer<S>;
+}

yarn.lock

@@ -1911,6 +1911,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash@^4.14.180":
+  version "4.14.180"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.180.tgz#4ab7c9ddfc92ec4a887886483bc14c79fb380670"
+  integrity sha512-XOKXa1KIxtNXgASAnwj7cnttJxS4fksBRywK/9LzRV5YxrF80BXZIGeQSuoESQ/VkUj30Ae0+YcuHc15wJCB2g==
+
 "@types/mdast@^3.0.0":
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
@@ -1972,14 +1977,6 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/redux-immutable@^4.0.2":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@types/redux-immutable/-/redux-immutable-4.0.2.tgz#8c3c666c33130c6794280bc3dc7726bfa0cfacc7"
-  integrity sha512-nlnhJn9B+NtIemWnnNWO9arUioeHLNvYCADSSa+48c81y8VwutgHH3WHobX711KKrfhlMlEz3+Q9SYX3sxrYPg==
-  dependencies:
-    immutable "^4.0.0-rc.1"
-    redux "^4.0.0"
-
 "@types/retry@^0.12.0":
   version "0.12.1"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.1.tgz#d8f1c0d0dc23afad6dc16a9e993a0865774b4065"
@@ -5376,7 +5373,7 @@ immediate@~3.0.5:
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
   integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
 
-immutable@^4.0.0, immutable@^4.0.0-rc.1:
+immutable@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
   integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==