From c04e0db001e79eacbcd9044f684fe175e56cec89 Mon Sep 17 00:00:00 2001
From: Nadeen <nadeen@ualberta.ca>
Date: Mon, 9 Aug 2021 15:16:33 -0600
Subject: [PATCH] remove fingerprint loading messages

---
 src/main.js | 432 +++++++++++++++++++++++++++-------------------------
 1 file changed, 222 insertions(+), 210 deletions(-)

diff --git a/src/main.js b/src/main.js
index 1479f19e..24310d1a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,218 +9,230 @@ import Footer from "./components/Layout/footer";
 import Forum from "./components/Forum/forum";
 import Game from "./components/Game/game";
 import Error400 from "./components/Error/error";
-import { RLAPI, SERVER, PROJECT_ID, USER_ID, REDIRECT, CSS_PATH } from "./utils/constants";
+import {
+  RLAPI,
+  SERVER,
+  PROJECT_ID,
+  USER_ID,
+  REDIRECT,
+  CSS_PATH,
+} from "./utils/constants";
 
 class Main extends React.Component {
-	state = {
-		formContent: "", //html body content
-		isLoading: SERVER ? false : true, //used to wait for http requests finished
-		isGame: SERVER ? true : false, //if current page is the game page
-		isWait: false, //if the websocket server has been resolved
-		is400Error: false, //if there are any error occur
-		ifRedirect: SERVER && REDIRECT ? true : false, //if redirect to another url after game ends
-		loadingMessages: [
-			"Waiting for the crime scene to be swept...",
-			"Bagging evidence...",
-			"Dusting for fingerprints...",
-			"Interviewing witnesses...",
-			"Adjusting microscope...",
-		],
-		loadingMessageIndex: 0,
-	};
-
-	loadingMessageInterval;
-	iterations = 0;
-
-	componentDidMount() {
-		if (!SERVER) this.fetchFormData(); //if server is not specified, load the form data
-		//if css file is specified, apply the css to the page
-
-		this.loadingMessageInterval = setInterval(() => {
-			const i = this.state.loadingMessageIndex;
-			const length = this.state.loadingMessages.length;
-			this.setState({
-				loadingMessageIndex: (i + 1) % length,
-			});
-			this.iterations++;
-		}, 5000);
-	}
-
-	componentDidUpdate(prevState) {
-		//always scroll the page to the top when moving to next page
-		if (prevState.formContent !== this.state.formContent && prevState.formContent) {
-			window.scrollTo(0, 0);
-		}
-
-		if (this.iterations >= 10) {
-			clearInterval(this.loadingMessageInterval);
-		}
-	}
-
-	//send GET requests to api endpoint
-	//fetch html content of each page
-	fetchFormData = () => {
-		axios
-			.get(RLAPI, {
-				params: {
-					projectId: PROJECT_ID,
-					userId: USER_ID,
-				},
-			})
-			.then((res) => {
-				//"show_game_page" means the next page will be the game page
-				if (res.data.page === "show_game_page") {
-					this.setState({
-						isGame: true,
-						isWait: false,
-					});
-					if (this.wait) clearInterval(this.wait);
-
-					//"wait" means the websocket's ip address has not been resolved yet
-				} else if (res.data.page !== "wait") {
-					this.setState({
-						formContent: res.data.page,
-						isLoading: false,
-					});
-				}
-			})
-			.catch((error) => {
-				//projectId does not exist error
-				if (error.response) {
-					if (error.response.status === 400) {
-						this.setState({
-							isLoading: false,
-							is400Error: true,
-						});
-					}
-				}
-			});
-	};
-
-	gameEndHandler = () => {
-		//fetch the content of next page if redirect url is not specified
-		if (!this.state.ifRedirect) {
-			//change the game status
-			this.setState({
-				isGame: false,
-			});
-			this.fetchFormData();
-			//if redirect url is specified
-		} else {
-			window.open(REDIRECT, "_self"); //to open new page
-		}
-	};
-
-	//submit the form content and fetch the next page
-	handleSubmit = (event) => {
-		this.setState({
-			isLoading: true,
-		});
-
-		//collect the user's input from the form
-		const form = event.target;
-		const data = {};
-		for (let element of form.elements) {
-			if (element.tagName === "BUTTON") {
-				continue;
-			}
-			data[element.name] = element.value;
-		}
-
-		//submit the user's input by sending the POST requests
-		axios
-			.post(RLAPI, data, {
-				params: {
-					projectId: PROJECT_ID,
-					userId: USER_ID,
-				},
-			})
-			.then((res) => {
-				//"show_game_page" means the websocket's DNS has been resolved
-				//ready to go to the game page
-				if (res.data.page === "show_game_page") {
-					this.setState({
-						isGame: true,
-					});
-				} else if (res.data.page === "wait") {
-					//we check if the websocket's DNS has been resolved periodically
-					//for every 30 seconds
-					this.wait = setInterval(() => {
-						if (!this.state.isGame) this.fetchFormData();
-					}, 30000);
-					this.setState({
-						isWait: true,
-					});
-				} else {
-					this.setState({
-						formContent: res.data.page,
-						isLoading: false,
-					});
-				}
-			})
-			.catch((error) => {
-				//projectId does not exist error
-				if (error.response) {
-					if (error.response.status === 400) {
-						this.setState({
-							isLoading: false,
-							is400Error: true,
-						});
-					}
-				}
-			});
-	};
-
-	render() {
-		const {
-			isLoading,
-			formContent,
-			isGame,
-			isWait,
-			is400Error,
-			loadingMessages,
-			loadingMessageIndex: i,
-		} = this.state;
-
-		let preGame;
-		if (is400Error) {
-			preGame = (
-				<div className="errorPage">
-					<Error400 />
-				</div>
-			);
-		} else {
-			preGame = (
-				<div className="forumContainer">
-					{isLoading ? (
-						<Spin
-							className="Loader"
-							size="large"
-							tip={isWait ? loadingMessages[i] : "Loading next step, please wait ..."}
-						/>
-					) : (
-						<Forum content={formContent} action={this.handleSubmit} is400Error={is400Error} />
-					)}
-				</div>
-			);
-		}
-
-		return (
-			<div>
-				<BackTop />
-				{CSS_PATH ? (
-					<Helmet>
-						<link rel="stylesheet" href={CSS_PATH} />
-					</Helmet>
-				) : null}
-				<div className="main">
-					<Header />
-					{!isGame ? preGame : <Game action={this.gameEndHandler} />}
-					<Footer />
-				</div>
-			</div>
-		);
-	}
+  state = {
+    formContent: "", //html body content
+    isLoading: SERVER ? false : true, //used to wait for http requests finished
+    isGame: SERVER ? true : false, //if current page is the game page
+    isWait: false, //if the websocket server has been resolved
+    is400Error: false, //if there are any error occur
+    ifRedirect: SERVER && REDIRECT ? true : false, //if redirect to another url after game ends
+    loadingMessages: ["Waiting for the robot to wakeup..."],
+    loadingMessageIndex: 0,
+  };
+
+  loadingMessageInterval;
+  iterations = 0;
+
+  componentDidMount() {
+    if (!SERVER) this.fetchFormData(); //if server is not specified, load the form data
+    //if css file is specified, apply the css to the page
+
+    this.loadingMessageInterval = setInterval(() => {
+      const i = this.state.loadingMessageIndex;
+      const length = this.state.loadingMessages.length;
+      this.setState({
+        loadingMessageIndex: (i + 1) % length,
+      });
+      this.iterations++;
+    }, 5000);
+  }
+
+  componentDidUpdate(prevState) {
+    //always scroll the page to the top when moving to next page
+    if (
+      prevState.formContent !== this.state.formContent &&
+      prevState.formContent
+    ) {
+      window.scrollTo(0, 0);
+    }
+
+    if (this.iterations >= 10) {
+      clearInterval(this.loadingMessageInterval);
+    }
+  }
+
+  //send GET requests to api endpoint
+  //fetch html content of each page
+  fetchFormData = () => {
+    axios
+      .get(RLAPI, {
+        params: {
+          projectId: PROJECT_ID,
+          userId: USER_ID,
+        },
+      })
+      .then((res) => {
+        //"show_game_page" means the next page will be the game page
+        if (res.data.page === "show_game_page") {
+          this.setState({
+            isGame: true,
+            isWait: false,
+          });
+          if (this.wait) clearInterval(this.wait);
+
+          //"wait" means the websocket's ip address has not been resolved yet
+        } else if (res.data.page !== "wait") {
+          this.setState({
+            formContent: res.data.page,
+            isLoading: false,
+          });
+        }
+      })
+      .catch((error) => {
+        //projectId does not exist error
+        if (error.response) {
+          if (error.response.status === 400) {
+            this.setState({
+              isLoading: false,
+              is400Error: true,
+            });
+          }
+        }
+      });
+  };
+
+  gameEndHandler = () => {
+    //fetch the content of next page if redirect url is not specified
+    if (!this.state.ifRedirect) {
+      //change the game status
+      this.setState({
+        isGame: false,
+      });
+      this.fetchFormData();
+      //if redirect url is specified
+    } else {
+      window.open(REDIRECT, "_self"); //to open new page
+    }
+  };
+
+  //submit the form content and fetch the next page
+  handleSubmit = (event) => {
+    this.setState({
+      isLoading: true,
+    });
+
+    //collect the user's input from the form
+    const form = event.target;
+    const data = {};
+    for (let element of form.elements) {
+      if (element.tagName === "BUTTON") {
+        continue;
+      }
+      data[element.name] = element.value;
+    }
+
+    //submit the user's input by sending the POST requests
+    axios
+      .post(RLAPI, data, {
+        params: {
+          projectId: PROJECT_ID,
+          userId: USER_ID,
+        },
+      })
+      .then((res) => {
+        //"show_game_page" means the websocket's DNS has been resolved
+        //ready to go to the game page
+        if (res.data.page === "show_game_page") {
+          this.setState({
+            isGame: true,
+          });
+        } else if (res.data.page === "wait") {
+          //we check if the websocket's DNS has been resolved periodically
+          //for every 30 seconds
+          this.wait = setInterval(() => {
+            if (!this.state.isGame) this.fetchFormData();
+          }, 30000);
+          this.setState({
+            isWait: true,
+          });
+        } else {
+          this.setState({
+            formContent: res.data.page,
+            isLoading: false,
+          });
+        }
+      })
+      .catch((error) => {
+        //projectId does not exist error
+        if (error.response) {
+          if (error.response.status === 400) {
+            this.setState({
+              isLoading: false,
+              is400Error: true,
+            });
+          }
+        }
+      });
+  };
+
+  render() {
+    const {
+      isLoading,
+      formContent,
+      isGame,
+      isWait,
+      is400Error,
+      loadingMessages,
+      loadingMessageIndex: i,
+    } = this.state;
+
+    let preGame;
+    if (is400Error) {
+      preGame = (
+        <div className="errorPage">
+          <Error400 />
+        </div>
+      );
+    } else {
+      preGame = (
+        <div className="forumContainer">
+          {isLoading ? (
+            <Spin
+              className="Loader"
+              size="large"
+              tip={
+                isWait
+                  ? loadingMessages[i]
+                  : "Loading next step, please wait ..."
+              }
+            />
+          ) : (
+            <Forum
+              content={formContent}
+              action={this.handleSubmit}
+              is400Error={is400Error}
+            />
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <BackTop />
+        {CSS_PATH ? (
+          <Helmet>
+            <link rel="stylesheet" href={CSS_PATH} />
+          </Helmet>
+        ) : null}
+        <div className="main">
+          <Header />
+          {!isGame ? preGame : <Game action={this.gameEndHandler} />}
+          <Footer />
+        </div>
+      </div>
+    );
+  }
 }
 
 export default Main;