Co-authored-by: Sophia Bui <[email protected]>

Author: Rachel Kucharski

app/src/components/App.tsx

@@ -10,9 +10,11 @@ import Cookies from 'js-cookie';
 import { useSelector, useDispatch } from 'react-redux';
 import { setInitialState, toggleLoggedIn, configToggle } from '../redux/reducers/slice/appStateSlice';
 
+import { RootState } from '../redux/store';
+
 // Intermediary component to wrap main App component with higher order provider components
 export const App = (): JSX.Element => {
-  const state = useSelector(store => store.appState);
+  const state = useSelector((store: RootState) => store.appState);
   const dispatch = useDispatch();
   // checks if user is signed in as guest or actual user and changes loggedIn boolean accordingly
   useEffect(()=>{

app/src/components/top/NavBarButtons.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import store from '../../redux/store.js';
+import store from '../../redux/store.ts';
 import { Link } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import List from '@mui/material/List';
@@ -8,7 +8,7 @@ import ListItemText from '@mui/material/ListItemText';
 import { resetAllState } from '../../redux/reducers/slice/appStateSlice.ts';
 import createModal from '../right/createModal.tsx';
 import ExportButton from '../right/ExportButton.tsx';
-import { setStyle } from '../../redux/reducers/slice/styleSlice';
+import { setStyle } from '../../redux/reducers/slice/styleSlice.ts';
 import LoginButton from '../right/LoginButton.tsx';
 import withStyles from '@mui/styles/withStyles';
 import MenuItem from '@mui/material/MenuItem';
@@ -18,15 +18,15 @@ import SaveProjectButton from '../right/SaveProjectButton.tsx';
 import ProjectsFolder from '../right/OpenProjects.tsx';
 import DeleteProjects from '../right/DeleteProjects.tsx';
 import Menu from '@mui/material/Menu';
-import { changeRoom } from '../../redux/reducers/slice/roomCodeSlice';
+import { changeRoom } from '../../redux/reducers/slice/roomCodeSlice.ts';
 // for websockets
 import debounce from 'lodash/debounce';
 // websocket front end starts here
 import { io } from 'socket.io-client';
-import { toggleDarkMode } from '../../redux/reducers/slice/darkModeSlice';
+import { toggleDarkMode } from '../../redux/reducers/slice/darkModeSlice.ts';
 import { allCooperativeState } from '../../redux/reducers/slice/appStateSlice.ts';
-import { codePreviewCooperative } from '../../redux/reducers/slice/codePreviewSlice';
-import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice';
+import { codePreviewCooperative } from '../../redux/reducers/slice/codePreviewSlice.ts';
+import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice.ts';
 import config from '../../../../config.js';
 const { API_BASE_URL } = config;
 

app/src/index.js

@@ -7,7 +7,7 @@ import {
 } from 'react-router-dom';
 import 'babel-polyfill';
 import React from 'react';
-import store from './redux/store';
+import store from './redux/store.ts';
 import { Provider } from 'react-redux';
 import ReactDOM from 'react-dom';
 import Cookies from 'js-cookie';

app/src/redux/reducers/rootReducer.js

@@ -1,12 +1,12 @@
 import { combineReducers } from 'redux';
 
 // Need to import each slice which will be combined in the rootReducer
-import darkModeReducer from './slice/darkModeSlice';
-import codePreviewReducer from './slice/codePreviewSlice';
-import contextReducer from './slice/contextReducer';
+import darkModeReducer from './slice/darkModeSlice.ts';
+import codePreviewReducer from './slice/codePreviewSlice.ts';
+import contextReducer from './slice/contextReducer.ts';
 import appStateReducer from './slice/appStateSlice.ts';
-import styleReducer from './slice/styleSlice';
-import roomCodeReducer from './slice/roomCodeSlice';
+import styleReducer from './slice/styleSlice.ts';
+import roomCodeReducer from './slice/roomCodeSlice.ts';
 
 const rootReducer = combineReducers({
   // Add desired slices here

app/src/redux/reducers/slice/codePreviewSlice.js renamed to app/src/redux/reducers/slice/codePreviewSlice.ts

@@ -1,14 +1,49 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+// import type { RootState } from '../redux/store';
 
-const initialState = {
-  allContext: []
+// -------------------------//
+// interfaces for all methods // calling actions payloads type referencss assigning type // typesccript
+//Defined Slice State and Action Types on this page
+interface Context {
+  name: string;
+  values: Array<{ key: string; value: string }>;
+  components: Array<string>;
+}
+
+interface AddContextPayload {
+  name: string;
+}
+
+interface AddContextValuesPayload {
+  name: string;
+  inputKey: string;
+  inputValue: string;
+}
+
+interface DeleteContextPayload {
+  name: string;
+}
+
+interface AddComponentToContextPayload {
+  context: { name: string };
+  component: { name: string };
+}
+// did not do getall context and allcontext cooperative
+// most imprtant because it allows reference from the intial state to all the interfaces
+interface ContextState {
+  allContext: Context[];
+}
+// -------------------------//
+
+const initialState: ContextState = {
+  allContext: [],
 };
 
 const contextReducerSlice = createSlice({
   name: 'context',
   initialState,
   reducers: {
-    addContext: (state, action) => {
+    addContext: (state, action:PayloadAction<AddContextPayload>) => {
       let newName = action.payload.name.trim();
       newName = newName.charAt(0).toUpperCase() + newName.slice(1);
       const newContext = {
@@ -18,7 +53,7 @@ const contextReducerSlice = createSlice({
       };
       state.allContext = [...state.allContext, newContext];
     },
-    addContextValues: (state, action) => {
+    addContextValues: (state, action: PayloadAction<AddContextValuesPayload>) => {
       const newAllContext = [...state.allContext];
 
       for (let i = 0; i < newAllContext.length; i += 1) {
@@ -31,12 +66,12 @@ const contextReducerSlice = createSlice({
       }
       state.allContext = newAllContext;
     },
-    deleteContext: (state, action) => {
+    deleteContext: (state, action: PayloadAction<DeleteContextPayload>) => {
       const tempState = [...state.allContext];
       const remains = tempState.filter((el) => el.name !== action.payload.name);
       state.allContext = remains;
     },
-    addComponentToContext: (state, action) => {
+    addComponentToContext: (state, action: PayloadAction<AddComponentToContextPayload>) => {
       const newTempState = [...state.allContext];
       for (let i = 0; i < newTempState.length; i += 1) {
         if (newTempState[i].name === action.payload.context.name) {
@@ -45,7 +80,7 @@ const contextReducerSlice = createSlice({
       }
       state.allContext = newTempState;
     },
-    getAllContext: (state, action) => {
+    getAllContext: (state,action) => {
       state = state;
     },
     allContextCooperative: (state, action) => {

app/src/redux/reducers/slice/contextReducer.js renamed to app/src/redux/reducers/slice/contextReducer.ts

@@ -3,10 +3,18 @@ import { configureStore } from '@reduxjs/toolkit';
 // Import of combined reducers in rootReducer
 import rootReducer from './reducers/rootReducer';
 
+/*
+// Define the root state type based on the rootReducer
+export type RootState = ReturnType<typeof rootReducer>;
+
+// Define the type of the Redux store
+export type AppStore = Store<RootState>;
+*/
+
 const store = configureStore({
   reducer: rootReducer,
-  middleware: getDefaultMiddleware => {
-    const ignoredPaths = [];
+  middleware: (getDefaultMiddleware) => {
+    let ignoredPaths: string[] = [];
 
     for (let i = 0; i < 21; i++) {
       ignoredPaths.push(`appState.HTMLTypes.${i}.icon`);
@@ -20,16 +28,18 @@ const store = configureStore({
         // Ignore these field paths in all actions
         // ignoredActionPaths: ['meta.arg', 'payload.timestamp'],
         // Ignore these paths in the state
-        ignoredPaths: ignoredPaths,
-      },
+        // ignoredPaths: ignoredPaths,
+        ignoredPaths
+      }
     });
-  },
+  }
 });
 
+// Define the root state type based on the rootReducer
+//export type RootState = ReturnType<typeof rootReducer>;
+export type RootState = ReturnType<typeof store.getState>;
 
-  
-  
-
-
+// Define the type of the Redux store
+export type AppStore = typeof store;
 
 export default store;

app/src/redux/reducers/slice/darkModeSlice.js renamed to app/src/redux/reducers/slice/darkModeSlice.ts

@@ -2,7 +2,7 @@
 import createFiles from './createFiles.util';
 import { Component } from '../interfaces/Interfaces';
 import createTestSuiteClassic from './createTestSuiteClassic.util';
-import store from '../redux/store.js';
+import store from '../redux/store.ts';
 
 const camelToKebab = (camel: string) => {
   return camel.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();