From 27564dd3605e54debf216f8eed93add515e24c4f Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 15 Mar 2022 08:48:18 -0500 Subject: [PATCH] WIP: reducer typescript --- .../actions/{instance.js => instance.ts} | 39 +++--- app/soapbox/components/badge.tsx | 12 +- app/soapbox/reducers/{index.js => index.ts} | 12 +- app/soapbox/reducers/instance.js | 132 ------------------ .../storage/{kv_store.js => kv_store.ts} | 2 +- package.json | 3 +- tsconfig.json | 6 +- types/redux-immutable/index.d.ts | 17 +++ yarn.lock | 22 +-- 9 files changed, 73 insertions(+), 172 deletions(-) rename app/soapbox/actions/{instance.js => instance.ts} (66%) rename app/soapbox/reducers/{index.js => index.ts} (89%) delete mode 100644 app/soapbox/reducers/instance.js rename app/soapbox/storage/{kv_store.js => kv_store.ts} (93%) create mode 100644 types/redux-immutable/index.d.ts diff --git a/app/soapbox/actions/instance.js b/app/soapbox/actions/instance.ts similarity index 66% rename from app/soapbox/actions/instance.js rename to app/soapbox/actions/instance.ts index b1df09d64..a59970c2f 100644 --- a/app/soapbox/actions/instance.js +++ b/app/soapbox/actions/instance.ts @@ -1,9 +1,12 @@ import { get } from 'lodash'; +import { AnyAction } from 'redux'; +import { ThunkAction } from 'redux-thunk' +import { AxiosResponse } from 'axios'; 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'; - import api from '../api'; export const INSTANCE_FETCH_REQUEST = 'INSTANCE_FETCH_REQUEST'; @@ -18,13 +21,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 +37,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) => { 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): boolean => { const v = parseVersion(get(instance, 'version')); return v.software === 'Pleroma' && !get(instance, ['pleroma', 'metadata']); }; -export function fetchInstance() { +export function fetchInstance(): ThunkAction { return (dispatch, getState) => { 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 }) => { dispatch({ type: INSTANCE_FETCH_SUCCESS, instance }); if (needsNodeinfo(instance)) { dispatch(fetchNodeinfo()); // Pleroma < 2.1 backwards compatibility @@ -69,7 +72,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 +82,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 }); }); }; } diff --git a/app/soapbox/components/badge.tsx b/app/soapbox/components/badge.tsx index b12ed768f..5afc4ee64 100644 --- a/app/soapbox/components/badge.tsx +++ b/app/soapbox/components/badge.tsx @@ -1,9 +1,15 @@ import PropTypes from 'prop-types'; import React from 'react'; -const Badge = (props: any) => ( - {props.title} -); +import { useAppSelector } from 'soapbox/hooks'; + +const Badge = (props: any) => { + const title = useAppSelector(state => state.instance.titles); + + return ( + {props.title} + ); +}; Badge.propTypes = { title: PropTypes.string.isRequired, diff --git a/app/soapbox/reducers/index.js b/app/soapbox/reducers/index.ts similarity index 89% rename from app/soapbox/reducers/index.js rename to app/soapbox/reducers/index.ts index 989a1fa1f..3c61591e3 100644 --- a/app/soapbox/reducers/index.js +++ b/app/soapbox/reducers/index.ts @@ -117,7 +117,7 @@ const reducers = { // Build a default state from all reducers: it has the key and `undefined` const StateRecord = ImmutableRecord( - Object.keys(reducers).reduce((params, reducer) => { + Object.keys(reducers).reduce((params: Record, reducer) => { params[reducer] = undefined; return params; }, {}), @@ -126,18 +126,18 @@ 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 => { + const whitelist: string[] = ['instance', 'soapbox', 'custom_emojis', 'auth']; return StateRecord( - whitelist.reduce((acc, curr) => { + whitelist.reduce((acc: Record, curr) => { acc[curr] = state.get(curr); return acc; }, {}), - ); + ) as unknown as ReturnType; }; -const rootReducer = (state, action) => { +const rootReducer: typeof appReducer = (state, action) => { switch(action.type) { case AUTH_LOGGED_OUT: return appReducer(logOut(state), action); diff --git a/app/soapbox/reducers/instance.js b/app/soapbox/reducers/instance.js deleted file mode 100644 index ac28e88ee..000000000 --- a/app/soapbox/reducers/instance.js +++ /dev/null @@ -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; - } -} diff --git a/app/soapbox/storage/kv_store.js b/app/soapbox/storage/kv_store.ts similarity index 93% rename from app/soapbox/storage/kv_store.js rename to app/soapbox/storage/kv_store.ts index 3c957fdc1..2140486de 100644 --- a/app/soapbox/storage/kv_store.js +++ b/app/soapbox/storage/kv_store.ts @@ -11,7 +11,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}`); diff --git a/package.json b/package.json index fda7716ca..da68d8759 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,8 @@ "@sentry/tracing": "^6.12.0", "@tabler/icons": "^1.53.0", "@types/escape-html": "^1.0.1", - "@types/redux-immutable": "^4.0.2", + "@types/http-link-header": "^1.0.3", + "@types/lodash": "^4.14.180", "array-includes": "^3.0.3", "autoprefixer": "^10.0.0", "axios": "^0.21.4", diff --git a/tsconfig.json b/tsconfig.json index cead8687c..b40a14711 100644 --- a/tsconfig.json +++ b/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"] } diff --git a/types/redux-immutable/index.d.ts b/types/redux-immutable/index.d.ts new file mode 100644 index 000000000..17451330c --- /dev/null +++ b/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 +// Gavin Gregory +// Kanitkorn Sujautra +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +declare module 'redux-immutable' { + import { ReducersMapObject, Reducer, Action } from 'redux'; + import { Collection, Record as ImmutableRecord } from 'immutable'; + + export function combineReducers(reducers: ReducersMapObject, getDefaultState?: () => Collection.Keyed): Reducer; + export function combineReducers(reducers: ReducersMapObject, getDefaultState?: () => Collection.Indexed): Reducer; + export function combineReducers(reducers: ReducersMapObject, getDefaultState?: () => Collection.Indexed): Reducer; + export function combineReducers(reducers: ReducersMapObject, getDefaultState?: () => ImmutableRecord): Reducer; +} diff --git a/yarn.lock b/yarn.lock index 5bc0a3e5a..01f6d2fab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1814,6 +1814,13 @@ resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57" integrity sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w== +"@types/http-link-header@^1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@types/http-link-header/-/http-link-header-1.0.3.tgz#899adf1d8d2036074514f3dbd148fb901ceff920" + integrity sha512-y8HkoD/vyid+5MrJ3aas0FvU3/BVBGcyG9kgxL0Zn4JwstA8CglFPnrR0RuzOjRCXwqzL5uxWC2IO7Ub0rMU2A== + dependencies: + "@types/node" "*" + "@types/http-proxy@^1.17.5": version "1.17.7" resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.7.tgz#30ea85cc2c868368352a37f0d0d3581e24834c6f" @@ -1850,6 +1857,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" @@ -1911,14 +1923,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" @@ -5163,7 +5167,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==