add react modal and use it for days wishes

src/store/rootReducer.ts

@@ -6,6 +6,7 @@ import javGameList from "./javGameList"
 import preVolunteerAdd from "./preVolunteerAdd"
 import preVolunteerCount from "./preVolunteerCount"
 import teamList from "./teamList"
+import ui from "./ui"
 import volunteer from "./volunteer"
 import volunteerAdd from "./volunteerAdd"
 import volunteerList from "./volunteerList"
@@ -27,6 +28,7 @@ export default (history: History) => ({
     preVolunteerAdd,
     preVolunteerCount,
     teamList,
+    ui,
     volunteer,
     volunteerAdd,
     volunteerList,

src/store/ui.ts

@@ -0,0 +1,31 @@
+import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { AppState } from "./index"
+
+const initialState = {
+    modalId: "",
+}
+
+const uiSlice = createSlice({
+    name: "ui",
+    initialState,
+    reducers: {
+        displayModal: (state, action: PayloadAction<string>) => {
+            state.modalId = action.payload
+        },
+        hideModal: (state) => {
+            state.modalId = ""
+        },
+    },
+})
+
+export default uiSlice.reducer
+
+export const { displayModal, hideModal } = uiSlice.actions
+
+const selectUiData = (state: AppState) => state.ui
+
+export const selectActiveModalId = createSelector(selectUiData, (ui) => ui.modalId)
+
+export const MODAL_IDS = {
+    DAYWISHES: "DAYWISHES",
+}