refactor: improve type checking for DispatchingStore dispatch payloads

packages/hoppscotch-common/src/composables/settings.ts

@@ -1,15 +1,15 @@
 import { Ref } from "vue"
-import { settingsStore, SettingsType } from "~/newstore/settings"
+import { settingsStore, SettingsDef } from "~/newstore/settings"
 import { pluck, distinctUntilChanged } from "rxjs/operators"
 import { useStream, useStreamStatic } from "./stream"
 
-export function useSetting<K extends keyof SettingsType>(
+export function useSetting<K extends keyof SettingsDef>(
   settingKey: K
-): Ref<SettingsType[K]> {
+): Ref<SettingsDef[K]> {
   return useStream(
     settingsStore.subject$.pipe(pluck(settingKey), distinctUntilChanged()),
     settingsStore.value[settingKey],
-    (value: SettingsType[K]) => {
+    (value: SettingsDef[K]) => {
       settingsStore.dispatch({
         dispatcher: "applySetting",
         payload: {
@@ -25,13 +25,13 @@ export function useSetting<K extends keyof SettingsType>(
  * A static version (does not require component setup)
  * of `useSetting`
  */
-export function useSettingStatic<K extends keyof SettingsType>(
+export function useSettingStatic<K extends keyof SettingsDef>(
   settingKey: K
-): [Ref<SettingsType[K]>, () => void] {
+): [Ref<SettingsDef[K]>, () => void] {
   return useStreamStatic(
     settingsStore.subject$.pipe(pluck(settingKey), distinctUntilChanged()),
     settingsStore.value[settingKey],
-    (value: SettingsType[K]) => {
+    (value: SettingsDef[K]) => {
       settingsStore.dispatch({
         dispatcher: "applySetting",
         payload: {

packages/hoppscotch-common/src/helpers/fb/settings.ts

@@ -6,7 +6,7 @@ import {
   setDoc,
 } from "firebase/firestore"
 import { platform } from "~/platform"
-import { applySetting, settingsStore, SettingsType } from "~/newstore/settings"
+import { applySetting, settingsStore, SettingsDef } from "~/newstore/settings"
 
 /**
  * Used locally to prevent infinite loop when settings sync update
@@ -59,7 +59,7 @@ export function initSettings() {
       } else {
         writeSettings(
           dispatch.payload.settingKey,
-          settingsStore.value[dispatch.payload.settingKey as keyof SettingsType]
+          settingsStore.value[dispatch.payload.settingKey as keyof SettingsDef]
         )
       }
     }

packages/hoppscotch-common/src/newstore/DispatchingStore.ts

@@ -2,9 +2,9 @@ import { Subject, BehaviorSubject } from "rxjs"
 import { map } from "rxjs/operators"
 import { assign, clone } from "lodash-es"
 
-type dispatcherFunc<StoreType> = (
+type DispatcherFunc<StoreType, PayloadType> = (
   currentVal: StoreType,
-  payload: any
+  payload: PayloadType
 ) => Partial<StoreType>
 
 /**
@@ -13,26 +13,32 @@ type dispatcherFunc<StoreType> = (
  * This function exists to provide better typing for dispatch function.
  * As you can see, its pretty much an identity function.
  */
-export const defineDispatchers = <StoreType, T>(
+export const defineDispatchers = <
+  StoreType,
+  T extends { [x: string]: DispatcherFunc<StoreType, any> }
+>(
   // eslint-disable-next-line no-unused-vars
-  dispatchers: { [_ in keyof T]: dispatcherFunc<StoreType> }
+  dispatchers: T
 ) => dispatchers
 
 type Dispatch<
   StoreType,
-  DispatchersType extends Record<string, dispatcherFunc<StoreType>>
+  DispatchersType extends { [x: string]: DispatcherFunc<StoreType, any> },
+  Dispatcher extends keyof DispatchersType
 > = {
-  dispatcher: keyof DispatchersType
-  payload: any
+  dispatcher: Dispatcher
+  payload: Parameters<DispatchersType[Dispatcher]>[1]
 }
 
 export default class DispatchingStore<
   StoreType,
-  DispatchersType extends Record<string, dispatcherFunc<StoreType>>
+  DispatchersType extends { [x: string]: DispatcherFunc<StoreType, any> }
 > {
   #state$: BehaviorSubject<StoreType>
   #dispatchers: DispatchersType
-  #dispatches$: Subject<Dispatch<StoreType, DispatchersType>> = new Subject()
+  #dispatches$: Subject<
+    Dispatch<StoreType, DispatchersType, keyof DispatchersType>
+  > = new Subject()
 
   constructor(initialValue: StoreType, dispatchers: DispatchersType) {
     this.#state$ = new BehaviorSubject(initialValue)
@@ -64,9 +70,12 @@ export default class DispatchingStore<
     return this.#dispatches$
   }
 
-  dispatch({ dispatcher, payload }: Dispatch<StoreType, DispatchersType>) {
+  dispatch<Dispatcher extends keyof DispatchersType>({
+    dispatcher,
+    payload,
+  }: Dispatch<StoreType, DispatchersType, Dispatcher>) {
     if (!this.#dispatchers[dispatcher])
-      throw new Error(`Undefined dispatch type '${dispatcher}'`)
+      throw new Error(`Undefined dispatch type '${String(dispatcher)}'`)
 
     this.#dispatches$.next({ dispatcher, payload })
   }

packages/hoppscotch-common/src/newstore/RESTSession.ts

@@ -114,7 +114,7 @@ const dispatchers = defineDispatchers({
       },
     }
   },
-  deleteAllParams(curr: RESTSession) {
+  deleteAllParams(curr: RESTSession, {}) {
     return {
       request: {
         ...curr.request,
@@ -168,7 +168,7 @@ const dispatchers = defineDispatchers({
       },
     }
   },
-  deleteAllHeaders(curr: RESTSession) {
+  deleteAllHeaders(curr: RESTSession, {}) {
     return {
       request: {
         ...curr.request,
@@ -257,7 +257,7 @@ const dispatchers = defineDispatchers({
       },
     }
   },
-  deleteAllFormDataEntries(curr: RESTSession) {
+  deleteAllFormDataEntries(curr: RESTSession, {}) {
     // Only perform update if the current content-type is formdata
     if (curr.request.body.contentType !== "multipart/form-data") return {}
 
@@ -288,7 +288,7 @@ const dispatchers = defineDispatchers({
     }
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  clearResponse(_curr: RESTSession) {
+  clearResponse(_curr: RESTSession, {}) {
     return {
       response: null,
     }
@@ -490,7 +490,7 @@ export function setRESTTestScript(newScript: string) {
   })
 }
 
-export function setRESTReqBody(newBody: HoppRESTReqBody | null) {
+export function setRESTReqBody(newBody: HoppRESTReqBody) {
   restSessionStore.dispatch({
     dispatcher: "setRequestBody",
     payload: {

packages/hoppscotch-common/src/newstore/SocketIOSession.ts

@@ -109,7 +109,7 @@ export function setSIOEndpoint(newEndpoint: string) {
   })
 }
 
-export function setSIOVersion(newVersion: string) {
+export function setSIOVersion(newVersion: SIOClientVersion) {
   SIOSessionStore.dispatch({
     dispatcher: "setVersion",
     payload: {

packages/hoppscotch-common/src/newstore/WebSocketSession.ts

@@ -74,7 +74,7 @@ const dispatchers = defineDispatchers({
       },
     }
   },
-  deleteAllProtocols(curr: HoppWSSession) {
+  deleteAllProtocols(curr: HoppWSSession, {}) {
     return {
       request: {
         endpoint: curr.request.endpoint,

packages/hoppscotch-common/src/newstore/collections.ts

@@ -127,7 +127,13 @@ const restCollectionDispatchers = defineDispatchers({
 
   editFolder(
     { state }: RESTCollectionStoreType,
-    { path, folder }: { path: string; folder: string }
+    {
+      path,
+      folder,
+    }: {
+      path: string
+      folder: HoppCollection<HoppRESTRequest>
+    }
   ) {
     const newState = state
 
@@ -393,7 +399,7 @@ const gqlCollectionDispatchers = defineDispatchers({
 
   editFolder(
     { state }: GraphqlCollectionStoreType,
-    { path, folder }: { path: string; folder: string }
+    { path, folder }: { path: string; folder: HoppCollection<HoppGQLRequest> }
   ) {
     const newState = state
 

packages/hoppscotch-common/src/newstore/environments.ts

@@ -236,7 +236,8 @@ const dispatchers = defineDispatchers({
       globals: entries,
     }
   },
-  clearGlobalVariables() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  clearGlobalVariables(_store, {}) {
     return {
       globals: [],
     }

packages/hoppscotch-common/src/newstore/history.ts

@@ -141,7 +141,8 @@ const RESTHistoryDispatchers = defineDispatchers({
       state: currentVal.state.filter((e) => !isEqual(e, entry)),
     }
   },
-  clearHistory() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  clearHistory(_, {}) {
     return {
       state: [],
     }
@@ -189,7 +190,8 @@ const GQLHistoryDispatchers = defineDispatchers({
       state: currentVal.state.filter((e) => !isEqual(e, entry)),
     }
   },
-  clearHistory() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  clearHistory(_, {}) {
     return {
       state: [],
     }

packages/hoppscotch-common/src/newstore/localstate.ts

@@ -11,14 +11,18 @@ const defaultLocalState: LocalState = {
   REMEMBERED_TEAM_ID: undefined,
 }
 
+type ApplyLocalState = {
+  [K in keyof LocalState]: {
+    key: K
+    value: LocalState[K]
+  }
+}[keyof LocalState]
+
 const dispatchers = defineDispatchers({
   bulkApplyState(_currentState: LocalState, payload: Partial<LocalState>) {
     return payload
   },
-  applyState<K extends keyof LocalState>(
-    _currentState: LocalState,
-    { key, value }: { key: K; value: LocalState[K] }
-  ) {
+  applyState(_currentState: LocalState, { key, value }: ApplyLocalState) {
     const result: Partial<LocalState> = {
       [key]: value,
     }

packages/hoppscotch-common/src/newstore/settings.ts

@@ -27,7 +27,7 @@ export const HoppFontSizes = ["small", "medium", "large"] as const
 
 export type HoppFontSize = (typeof HoppFontSizes)[number]
 
-export type SettingsType = {
+export type SettingsDef = {
   syncCollections: boolean
   syncHistory: boolean
   syncEnvironments: boolean
@@ -53,7 +53,7 @@ export type SettingsType = {
   COLUMN_LAYOUT: boolean
 }
 
-export const defaultSettings: SettingsType = {
+export const defaultSettings: SettingsDef = {
   syncCollections: true,
   syncHistory: true,
   syncEnvironments: true,
@@ -79,18 +79,22 @@ export const defaultSettings: SettingsType = {
   COLUMN_LAYOUT: true,
 }
 
+type ApplySettingPayload = {
+  [K in keyof SettingsDef]: {
+    settingKey: K
+    value: SettingsDef[K]
+  }
+}[keyof SettingsDef]
+
 const validKeys = Object.keys(defaultSettings)
 
 const dispatchers = defineDispatchers({
-  bulkApplySettings(
-    _currentState: SettingsType,
-    payload: Partial<SettingsType>
-  ) {
+  bulkApplySettings(_currentState: SettingsDef, payload: Partial<SettingsDef>) {
     return payload
   },
   toggleSetting(
-    currentState: SettingsType,
-    { settingKey }: { settingKey: KeysMatching<SettingsType, boolean> }
+    currentState: SettingsDef,
+    { settingKey }: { settingKey: KeysMatching<SettingsDef, boolean> }
   ) {
     if (!has(currentState, settingKey)) {
       // console.log(
@@ -99,14 +103,14 @@ const dispatchers = defineDispatchers({
       return {}
     }
 
-    const result: Partial<SettingsType> = {}
+    const result: Partial<SettingsDef> = {}
     result[settingKey] = !currentState[settingKey]
 
     return result
   },
-  applySetting<K extends keyof SettingsType>(
-    _currentState: SettingsType,
-    { settingKey, value }: { settingKey: K; value: SettingsType[K] }
+  applySetting(
+    _currentState: SettingsDef,
+    { settingKey, value }: ApplySettingPayload
   ) {
     if (!validKeys.includes(settingKey)) {
       // console.log(
@@ -115,8 +119,9 @@ const dispatchers = defineDispatchers({
       return {}
     }
 
-    const result: Partial<SettingsType> = {}
-    result[settingKey] = value
+    const result: Partial<SettingsDef> = {
+      [settingKey]: value,
+    }
 
     return result
   },
@@ -129,20 +134,20 @@ export const settingsStore = new DispatchingStore(defaultSettings, dispatchers)
  */
 export const settings$ = settingsStore.subject$.asObservable()
 
-export function getSettingSubject<K extends keyof SettingsType>(
+export function getSettingSubject<K extends keyof SettingsDef>(
   settingKey: K
-): Observable<SettingsType[K]> {
+): Observable<SettingsDef[K]> {
   return settingsStore.subject$.pipe(pluck(settingKey), distinctUntilChanged())
 }
 
-export function bulkApplySettings(settingsObj: Partial<SettingsType>) {
+export function bulkApplySettings(settingsObj: Partial<SettingsDef>) {
   settingsStore.dispatch({
     dispatcher: "bulkApplySettings",
     payload: settingsObj,
   })
 }
 
-export function toggleSetting(settingKey: KeysMatching<SettingsType, boolean>) {
+export function toggleSetting(settingKey: KeysMatching<SettingsDef, boolean>) {
   settingsStore.dispatch({
     dispatcher: "toggleSetting",
     payload: {
@@ -151,12 +156,13 @@ export function toggleSetting(settingKey: KeysMatching<SettingsType, boolean>) {
   })
 }
 
-export function applySetting<K extends keyof SettingsType>(
-  settingKey: K,
-  value: SettingsType[K]
+export function applySetting<K extends ApplySettingPayload>(
+  settingKey: K["settingKey"],
+  value: K["value"]
 ) {
   settingsStore.dispatch({
     dispatcher: "applySetting",
+    // @ts-expect-error TS is not able to understand the type semantics here
     payload: {
       settingKey,
       value,