Skip to content

Commit f68d0b7

Browse files
author
Shawn Toubeau
committed
refactored load modal
1 parent 64b1bff commit f68d0b7

File tree

1 file changed

+66
-70
lines changed

1 file changed

+66
-70
lines changed

‎src/components/Menu/index.tsx

+66-70
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
ButtonProps,
1212
Modal,
1313
Form,
14-
TextAreaProps,
1514
Sidebar,
1615
Segment,
1716
Message,
@@ -29,7 +28,21 @@ import { aStarDesc, bfsDesc, dfsDesc, djikstrasDesc } from "../Maze/algorithms";
2928

3029
import "./Menu.scss";
3130

32-
export interface MenuProps extends MenuState {
31+
const SpaceSchema = yup.object({
32+
type: yup
33+
.mixed()
34+
.oneOf([
35+
SpaceTypes.wall,
36+
SpaceTypes.empty,
37+
SpaceTypes.start,
38+
SpaceTypes.end,
39+
])
40+
.required(),
41+
visited: yup.bool().required(),
42+
path: yup.bool().required(),
43+
});
44+
45+
export interface Props extends MenuState {
3346
canMoveStart: boolean;
3447
canMoveEnd: boolean;
3548
maze: Maze;
@@ -70,36 +83,20 @@ export interface MenuProps extends MenuState {
7083
randomizeWalls: () => void;
7184
}
7285

73-
export interface _MenuState {
86+
export interface State {
7487
pastedMaze: string | number | undefined;
75-
showModal: boolean;
76-
hasError: boolean;
77-
errorMessage: string;
88+
errorMessage: string | null;
89+
loadModalOpen: boolean;
7890
sidebarOpen: boolean;
7991
mazeCols: number;
8092
mazeRows: number;
8193
}
8294

83-
export const yupSpaceSchema = yup.object({
84-
type: yup
85-
.mixed()
86-
.oneOf([
87-
SpaceTypes.wall,
88-
SpaceTypes.empty,
89-
SpaceTypes.start,
90-
SpaceTypes.end,
91-
])
92-
.required(),
93-
visited: yup.bool().required(),
94-
path: yup.bool().required(),
95-
});
96-
97-
class MenuBar extends React.Component<MenuProps, _MenuState> {
95+
class MenuBar extends React.Component<Props, State> {
9896
state = {
9997
pastedMaze: "",
100-
showModal: false,
101-
hasError: false,
102-
errorMessage: "",
98+
errorMessage: null,
99+
loadModalOpen: false,
103100
sidebarOpen: false,
104101
mazeCols: getMazeSize(this.props.maze.mazeInfo).x,
105102
mazeRows: getMazeSize(this.props.maze.mazeInfo).y,
@@ -121,8 +118,7 @@ class MenuBar extends React.Component<MenuProps, _MenuState> {
121118
if (!isArray) return false;
122119
if (obj[i].length === 0) return false;
123120
for (let j = 0; j < obj[i].length; j++) {
124-
console.log(obj[keys[i]][j]);
125-
const spaceIsValid = yupSpaceSchema.isValidSync(obj[keys[i]][j]);
121+
const spaceIsValid = SpaceSchema.isValidSync(obj[keys[i]][j]);
126122
if (!spaceIsValid) {
127123
return false;
128124
}
@@ -134,23 +130,16 @@ class MenuBar extends React.Component<MenuProps, _MenuState> {
134130
checkStartEndPoints = (maze: MazeInfo): boolean => {
135131
let numStart: number = 0;
136132
let numEnd: number = 0;
137-
// eslint-disable-next-line array-callback-return
138-
Object.keys(maze).map((key: string) => {
139-
// eslint-disable-next-line array-callback-return
140-
maze[+key].map((value: Space) => {
133+
Object.keys(maze).forEach((key: string) => {
134+
maze[+key].forEach((value: Space) => {
141135
numStart += value.type === SpaceTypes.start ? 1 : 0;
142136
numEnd += value.type === SpaceTypes.end ? 1 : 0;
143137
});
144138
});
145139
return numStart <= 1 && numEnd <= 1;
146140
};
147141

148-
//event: React.FormEvent<HTMLTextAreaElement>, data: TextAreaProps) => void
149142
isValidMaze = (mazeInfo: MazeInfo): boolean => {
150-
console.log("validate");
151-
// try {
152-
// const maze: MazeInfo = JSON.parse(data.value as string);
153-
// console.log(maze);
154143
const keys = Object.keys(mazeInfo);
155144

156145
if (keys.length === 0) {
@@ -184,43 +173,30 @@ class MenuBar extends React.Component<MenuProps, _MenuState> {
184173
});
185174
return false;
186175
}
187-
// else {
188-
// this.setState({
189-
// hasError: false,
190-
// pastedMaze: data.value as string,
191-
// });
192-
// }
193176
}
194177
}
195178
}
196-
// } catch (e) {
197-
// this.setState({
198-
// ...this.state,
199-
// hasError: true,
200-
// errorMessage: "Maze data must be in JSON format!",
201-
// });
202-
// }
203179
return true;
204180
};
205181

206182
loadMaze = () => {
207-
// TODO: move validation here
208183
const { pastedMaze } = this.state;
209-
console.log("Submit", pastedMaze);
210184

211185
try {
212186
const mazeInfo: MazeInfo = JSON.parse(pastedMaze);
213187

214188
if (this.isValidMaze(mazeInfo)) {
215-
// Maze is valid
216-
console.log("valid");
217-
// this.props.loadMaze(mazeInfo);
218-
// this.setState({ pastedMaze: "", showModal: false });
219-
} else {
220-
console.log("invalid");
189+
this.props.loadMaze(mazeInfo);
190+
this.setState({
191+
pastedMaze: "",
192+
errorMessage: null,
193+
loadModalOpen: false,
194+
});
221195
}
222196
} catch (err) {
223-
console.error(err);
197+
this.setState({
198+
errorMessage: "Unable to parse JSON",
199+
});
224200
}
225201
};
226202

@@ -265,7 +241,14 @@ class MenuBar extends React.Component<MenuProps, _MenuState> {
265241
startTime,
266242
endTime,
267243
} = this.props;
268-
const { mazeCols, mazeRows, pastedMaze, sidebarOpen } = this.state;
244+
const {
245+
mazeCols,
246+
mazeRows,
247+
pastedMaze,
248+
loadModalOpen,
249+
sidebarOpen,
250+
errorMessage,
251+
} = this.state;
269252

270253
return (
271254
<div>
@@ -398,8 +381,21 @@ class MenuBar extends React.Component<MenuProps, _MenuState> {
398381
&nbsp; {/* Essentially just a fancy space */}
399382
<Modal
400383
centered={false}
384+
open={loadModalOpen}
385+
onClose={() =>
386+
this.setState({
387+
pastedMaze: "",
388+
errorMessage: null,
389+
loadModalOpen: false,
390+
})
391+
}
401392
trigger={
402-
<Button color="blue" circular disabled={isPlaying}>
393+
<Button
394+
color="blue"
395+
circular
396+
disabled={isPlaying}
397+
onClick={() => this.setState({ loadModalOpen: true })}
398+
>
403399
<Icon
404400
name="upload"
405401
style={{ marginRight: "0.5rem" }}
@@ -412,20 +408,18 @@ class MenuBar extends React.Component<MenuProps, _MenuState> {
412408
<Modal.Header>Paste your maze in the text box</Modal.Header>
413409
<Modal.Content>
414410
<Modal.Description>
415-
{/* Trying to hook up this textarea to capture maze info
416-
inspration, https://react.semantic-ui.com/collections/form/#usage-capture-values */}
417411
<Form onSubmit={this.loadMaze}>
418412
<Form.TextArea
419413
style={{ minHeight: 500, minWidth: 800 }}
420414
placeholder="Maze Text"
421415
name="name"
422416
value={pastedMaze}
423-
onChange={(e: TextAreaProps) =>
424-
this.setState({ pastedMaze: e.value })
417+
onChange={(e: any) =>
418+
this.setState({ pastedMaze: e.target.value })
425419
}
426420
/>
427-
<Message visible={this.state.hasError}>
428-
Enter properly formatted json
421+
<Message hidden={errorMessage ? false : true}>
422+
{errorMessage}
429423
</Message>
430424
<Form.Button content="Submit" />
431425
</Form>
@@ -443,7 +437,6 @@ class MenuBar extends React.Component<MenuProps, _MenuState> {
443437
<Sidebar
444438
as={Menu}
445439
animation="push"
446-
overlay
447440
icon="labeled"
448441
direction="right"
449442
onHide={() => this.setState({ sidebarOpen: false })}
@@ -468,20 +461,23 @@ class MenuBar extends React.Component<MenuProps, _MenuState> {
468461
<div>
469462
<Label image>
470463
<img
471-
src={process.env.PUBLIC_URL + "./startpoint.png"}
464+
src={`${process.env.PUBLIC_URL}/${SpaceTypes.start}.png`}
472465
alt="startpoint tag"
473466
/>
474467
Start Point
475468
</Label>
476469
<Label image>
477470
<img
478-
src={process.env.PUBLIC_URL + "./endpoint.png"}
471+
src={`${process.env.PUBLIC_URL}/${SpaceTypes.end}.png`}
479472
alt="endpoint tag"
480473
/>
481474
End Point
482475
</Label>
483476
<Label image>
484-
<img src={process.env.PUBLIC_URL + "./wall.png"} alt="wall tag" />
477+
<img
478+
src={`${process.env.PUBLIC_URL}/${SpaceTypes.wall}.png`}
479+
alt="wall tag"
480+
/>
485481
Wall
486482
</Label>
487483
<Label image>
@@ -496,7 +492,7 @@ class MenuBar extends React.Component<MenuProps, _MenuState> {
496492
Path
497493
</Label>
498494
</div>
499-
<div className="row1" style={{ marginLeft: "auto" }}>
495+
<div style={{ marginLeft: "auto" }}>
500496
<Button
501497
color="purple"
502498
circular

0 commit comments

Comments
 (0)