thanks for the help shawn :)

Author: gordenstein72

src/actions/navbarActions.ts

@@ -1,4 +1,5 @@
 import { DropdownProps, ButtonProps } from "semantic-ui-react";
+import { emptyStatement } from "@babel/types";
 
 export const CHANGE_ALGO = "CHANGE_ALGO";
 export const START_VISUALIZATION = "START_VISUALIZATION";
@@ -55,3 +56,5 @@ export const handleClearGrid = (
     payload: null
   };
 };
+
+

src/components/Maze/Maze.tsx

@@ -10,6 +10,7 @@ import { MazeState } from '../../models/maze';
 import { SpaceState } from '../../models/space';
 
 import './Maze.scss';
+import { makeWall, makeEmpty } from '../../actions/mazeActions';
 
 const CameraController = () => {
   const { camera, gl } = useThree();
@@ -38,7 +39,9 @@ const CameraController = () => {
 
 const populateMaze = (
   mazeSize: { x: number; y: number },
-  mazeInfo: { [key: number]: SpaceState[] }
+  mazeInfo: { [key: number]: SpaceState[] },
+  makeWall: (data: {x: number; y: number}, type: string) => void,
+  makeEmpty: (data: {x: number; y: number}, type: string) => void
 ) => {
   console.log(mazeInfo);
   let list = [];
@@ -49,15 +52,23 @@ const populateMaze = (
       key++;
       console.log('visited: ' + mazeInfo[j][i].visited);
       list.push(
-        <Space type={mazeInfo[j][i].type} visited={mazeInfo[j][i].visited} path={mazeInfo[i][j].path} position={[i, 0, j]} key={key} />
+        <Space type={mazeInfo[j][i].type} visited={mazeInfo[j][i].visited} path={mazeInfo[i][j].path} position={[i, 0, j]} key={key} 
+        onSetWall={() => makeWall( {x:i, y:j}, "empty" )}
+        onSetEmpty={() => makeEmpty( {x:i, y:j}, "wall" )}
+        />
       );
     }
   }
 
   return list;
 };
 
-const Maze: React.FC<MazeState> = props => {
+interface Props extends MazeState {
+  makeWall: any;
+  makeEmpty: any;
+}
+
+const Maze: React.FC<Props> = props => {
   const { mazeInfo } = props;
   const mazeSize = {
     x: mazeInfo[0].length,
@@ -86,7 +97,7 @@ const Maze: React.FC<MazeState> = props => {
         <planeBufferGeometry attach="geometry" args={[100, 100, 100, 100]}/>
         <meshPhongMaterial attach="material" wireframe={true} color={'grey'}/>
       </mesh>
-      {populateMaze(mazeSize, mazeInfo)}
+      {populateMaze(mazeSize, mazeInfo, props.makeWall, props.makeEmpty)}
     </Canvas>
   );
 };

src/components/Space/Space.tsx

@@ -49,12 +49,20 @@ const GenericSpace: React.FC<BoxProps> = props => {
   }
 };
 
-const Space: React.FC<BoxProps> = props => {
+const Space: React.FC<SpaceProps> = props => {
 
   const [hovered, setHover] = useState(false);
 
   const spaceClicked = () => {
-    console.log('space clicked');
+    if (props.type === "wall") {
+      console.log('wall space clicked');
+      props.onSetEmpty()
+    }
+    if (props.type === "empty") {
+      console.log('empty space clicked');
+      props.onSetWall()
+    }
+   
   };
 
   return (
@@ -83,4 +91,9 @@ export interface BoxProps {
   path?: Boolean;
 }
 
+export interface SpaceProps extends BoxProps{
+  onSetWall: () => void,
+  onSetEmpty: () => void
+}
+
 export default Space;

src/containers/MazeContainer/MazeContainer.tsx

@@ -1,8 +1,15 @@
 import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import {makeWall, makeEmpty} from  '../../actions/mazeActions';
+import {Dispatch} from 'redux';
 import Grid from '../../components/Maze/Maze';
 
 const mapStateToProps = (state: any) => ({
   mazeInfo: state.maze.mazeInfo
 });
 
-export default connect(mapStateToProps, null)(Grid as any);
+const mapDispatchToProps = (dispatch: Dispatch) => {
+  return bindActionCreators({ makeWall, makeEmpty }, dispatch);
+};
+
+export default connect(mapStateToProps, mapDispatchToProps) (Grid); 

src/reducers/mazeReducer.ts

@@ -1,6 +1,26 @@
 import { MazeState } from "../models/maze";
 import { initialState, clearMaze } from "../models/maze/initialState";
 import { CLEAR_GRID } from "../actions/navbarActions";
+import {MAKE_EMPTY, MAKE_WALL} from "../actions/mazeActions"
+
+export interface SpaceState {
+  path: Boolean;
+  type: string;
+  visited: Boolean;
+}
+
+
+const changeSpaceType = (
+  mazeInfo: {
+    [key: number]: SpaceState[];
+  },
+  data: { data: {x:number, y:number},type: string}
+) =>{
+  console.log(data)
+  let copy = mazeInfo;
+  copy[data.data.x][data.data.y].type = data.type;
+  return copy;
+}
 
 export const mazeReducer = (
   state: MazeState = initialState,
@@ -12,6 +32,16 @@ export const mazeReducer = (
         ...state,
         mazeInfo: clearMaze
       };
+      case MAKE_WALL:
+      return{
+        ...state,
+        mazeInfo: changeSpaceType(state.mazeInfo , payload )
+      };
+    case MAKE_EMPTY:
+      return{
+        ...state,
+        mazeInfo: changeSpaceType(state.mazeInfo , payload )
+      };
     default:
       return state;
   }