feat: add toggleModal and allow for name typing (#33)

README.md

@@ -1004,12 +1004,13 @@ This way you can change the default locations to use different ones. This will b
 
 ## Modal
 
-Leverages redux state and provides actions to open and close each modal by name. It provides two simple actions:
+Leverages redux state and provides actions to open and close each modal by name. It provides a few simple actions:
 
 ```ts
 openModal(name: string, metadata: any = null)
 closeModal(name: string)
 closeAllModals()
+toggleModal(name: sgtring)
 ```
 
 It also provides a selector to get the open modals:
@@ -1091,6 +1092,39 @@ export const rootReducer = combineReducers({
 })
 ```
 
+### Advanced Usage
+
+You can have add more strict typing to the actions:
+
+<details><summary>Learn More</summary>
+<p>
+The modal actions allow for a generic type for the name. So say you want to type the name of your available modals, you can create a `modal` module in your dApp and add the following files:
+
+**Types**:
+
+```ts
+// modules/types/actions.ts
+import * as modals from 'components/Modals' // same import as the one use for <ModalProvider />
+
+export ModalName = keyof typeof modals
+```
+
+**Actions**:
+
+```ts
+// modules/modal/actions.ts
+import { getModalActions } from 'decentraland-dapps/dist/modules/modal/actions'
+import { ModalName } from './types'
+
+const { openModal, closeModal, toggleModal } = getModalActions<ModalName>()
+
+export * from 'decentraland-dapps/dist/modules/modal/actions'
+export { openModal, closeModal, toggleModal }
+```
+
+</p>
+</details>
+
 # Lib
 
 Common libraries for dApps

src/modules/modal/actions.ts

@@ -1,25 +1,48 @@
 import { action } from 'typesafe-actions'
 
+export let modals: { [key: string]: any } = {}
+
 // Open Modal
 
 export const OPEN_MODAL = 'Open Modal'
 
-export const openModal = (name: string, metadata: any = null) =>
-  action(OPEN_MODAL, {
-    name,
-    metadata
-  })
+export const getModalActions = <T>() => ({
+  openModal: function(name: T, metadata: any = null) {
+    return action(OPEN_MODAL, {
+      name,
+      metadata
+    })
+  },
+  closeModal: function(name: T) {
+    return action(CLOSE_MODAL, { name })
+  },
+  toggleModal: function(name: T) {
+    return action(TOGGLE_MODAL, { name })
+  }
+})
+
+const { openModal, closeModal, toggleModal } = getModalActions<string>()
+
+export { openModal }
 
 export type OpenModalAction = ReturnType<typeof openModal>
 
 // Close Modal
 
 export const CLOSE_MODAL = 'Close Modal'
 
-export const closeModal = (name: string) => action(CLOSE_MODAL, { name })
+export { closeModal }
 
 export type CloseModalAction = ReturnType<typeof closeModal>
 
+// Toggle Modal
+
+export const TOGGLE_MODAL = 'Toggle Modal'
+
+export { toggleModal }
+
+export type ToggleModalAction = ReturnType<typeof toggleModal>
+
 // Close All Modals
 
 export const CLOSE_ALL_MODALS = 'Close All Modal'

src/modules/modal/reducer.ts

@@ -2,9 +2,11 @@ import {
   OPEN_MODAL,
   CLOSE_MODAL,
   CLOSE_ALL_MODALS,
+  TOGGLE_MODAL,
   OpenModalAction,
   CloseModalAction,
-  CloseAllModalsAction
+  CloseAllModalsAction,
+  ToggleModalAction
 } from './actions'
 import { Modal } from './types'
 
@@ -16,6 +18,7 @@ export type ModalReducerAction =
   | OpenModalAction
   | CloseModalAction
   | CloseAllModalsAction
+  | ToggleModalAction
 
 export function modalReducer(
   state = INITIAL_STATE,
@@ -50,6 +53,18 @@ export function modalReducer(
         return state
       }
     }
+    case TOGGLE_MODAL: {
+      const { name } = action.payload
+      const modal = state[name] || { open: false }
+
+      return {
+        ...state,
+        [name]: {
+          ...modal,
+          open: !modal.open
+        }
+      }
+    }
     case CLOSE_ALL_MODALS: {
       const newState = {}
       for (const name in state) {