convert from functional to class components

3 files changed, 74 insertions, 54 deletions

diff --git a/src/client/views/nodes/PhysicsSimulationApp.tsx b/src/client/views/nodes/PhysicsSimulationApp.tsx
index 2a314a723..414d61809 100644
--- a/src/client/views/nodes/PhysicsSimulationApp.tsx
+++ b/src/client/views/nodes/PhysicsSimulationApp.tsx
@@ -329,9 +329,7 @@ export default class App extends React.Component<{}, IState> {
 
   render () { 
     return (
-     <div><p>Hello world!</p></div>
-    );
-  }
+      <p>Hello world!</p>
     // <div>
     //   <div className="mechanicsSimulationContainer">
     //     <div
@@ -560,4 +558,6 @@ export default class App extends React.Component<{}, IState> {
     //     </div>
     //   </div>
     // </div>
+    );
+  }
 }
diff --git a/src/client/views/nodes/PhysicsSimulationWall.tsx b/src/client/views/nodes/PhysicsSimulationWall.tsx
index c2d3567f1..a31704d2f 100644
--- a/src/client/views/nodes/PhysicsSimulationWall.tsx
+++ b/src/client/views/nodes/PhysicsSimulationWall.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { useState, useEffect } from "react";
 
 export interface Force {
@@ -11,24 +12,25 @@ export interface IWallProps {
   angleInDegrees: number;
 }
 
-export const Wall = (props: IWallProps) => {
-  const { length, xPos, yPos, angleInDegrees } = props;
+export default class App extends React.Component<IWallProps, {}> {
 
-  let wallStyle = {
-    width: length + "%",
-    height: 0.5 + "vw",
+  constructor(props: any) {
+      super(props)
+  }
+
+  wallStyle = {
+    width: this.props.angleInDegrees == 0 ? this.props.length + "%" : 0.5 + "vw",
+    height: this.props.angleInDegrees == 0 ? 0.5 + "vw" : this.props.length + "%",
     position: "absolute" as "absolute",
-    left: xPos + "%",
-    top: yPos + "%",
+    left: this.props.xPos + "%",
+    top: this.props.yPos + "%",
     backgroundColor: "#6c7b8b",
     zIndex: -1000,
     margin: 0,
     padding: 0,
   };
-  if (angleInDegrees != 0) {
-    wallStyle.width = 0.5 + "vw";
-    wallStyle.height = length + "%";
-  }
 
-  return <div style={wallStyle}></div>;
+  render () {
+    return (<div style={this.wallStyle}></div>);
+  }
 };
diff --git a/src/client/views/nodes/PhysicsSimulationWedge.tsx b/src/client/views/nodes/PhysicsSimulationWedge.tsx
index 0dc7751f3..bf0cadce2 100644
--- a/src/client/views/nodes/PhysicsSimulationWedge.tsx
+++ b/src/client/views/nodes/PhysicsSimulationWedge.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { useState, useEffect, useCallback } from "react";
 import "./PhysicsSimulationBox.scss";
 
@@ -7,58 +8,75 @@ export interface IWedgeProps {
   startLeft: number;
 }
 
-export const Wedge = (props: IWedgeProps) => {
-  const { startHeight, startWidth, startLeft } = props;
+interface IState {
+  angleInRadians: number, 
+  left: number,
+  coordinates: string,
+}
+
+export default class Wedge extends React.Component<IWedgeProps, IState> {
 
-  const [angleInRadians, setAngleInRadians] = useState(
-    Math.atan(startHeight / startWidth)
-  );
-  const [left, setLeft] = useState(startLeft);
-  const [coordinates, setCoordinates] = useState("");
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      angleInRadians: Math.atan(this.props.startHeight / this.props.startWidth),
+      left: this.props.startLeft,
+      coordinates: "",
+    }
+  }
 
-  const color = "#deb887";
+  color = "#deb887";
 
-  useEffect(() => {
+  updateCoordinates() {
     const coordinatePair1 =
-      Math.round(left) + "," + Math.round(window.innerHeight * 0.8) + " ";
+      Math.round(this.state.left) + "," + Math.round(window.innerHeight * 0.8) + " ";
     const coordinatePair2 =
-      Math.round(left + startWidth) +
+      Math.round(this.state.left + this.props.startWidth) +
       "," +
       Math.round(window.innerHeight * 0.8) +
       " ";
     const coordinatePair3 =
-      Math.round(left) +
+      Math.round(this.state.left) +
       "," +
-      Math.round(window.innerHeight * 0.8 - startHeight);
+      Math.round(window.innerHeight * 0.8 - this.props.startHeight);
     const coord = coordinatePair1 + coordinatePair2 + coordinatePair3;
-    setCoordinates(coord);
-  }, [left, startWidth, startHeight]);
+    this.setState({coordinates: coord}); 
+  }
 
-  useEffect(() => {
-    setAngleInRadians(Math.atan(startHeight / startWidth));
-  }, [startWidth, startHeight]);
+  componentDidMount() {
+    this.updateCoordinates()
+  }
 
-  return (
-    <div>
-      <div style={{ position: "absolute", left: "0", top: "0", zIndex: -5 }}>
-        <svg
-          width={window.innerWidth * 0.7 + "px"}
-          height={window.innerHeight * 0.8 + "px"}
+  componentDidUpdate(prevProps: Readonly<IWedgeProps>, prevState: Readonly<IState>, snapshot?: any): void {
+    this.updateCoordinates();
+    if (prevProps.startHeight != this.props.startHeight || prevProps.startWidth != this.props.startWidth) {
+      this.setState({angleInRadians: Math.atan(this.props.startHeight / this.props.startWidth)});
+    } 
+  }
+  
+  render() {
+    return (
+      <div>
+        <div style={{ position: "absolute", left: "0", top: "0", zIndex: -5 }}>
+          <svg
+            width={window.innerWidth * 0.7 + "px"}
+            height={window.innerHeight * 0.8 + "px"}
+          >
+            <polygon points={this.state.coordinates} style={{ fill: "burlywood" }} />
+          </svg>
+        </div>
+
+        <p
+          style={{
+            position: "absolute",
+            zIndex: 500,
+            left: Math.round(this.state.left + this.props.startWidth - 80) + "px",
+            top: Math.round(window.innerHeight * 0.8 - 40) + "px",
+          }}
         >
-          <polygon points={coordinates} style={{ fill: "burlywood" }} />
-        </svg>
+          {Math.round(((this.state.angleInRadians * 180) / Math.PI) * 100) / 100}°
+        </p>
       </div>
-
-      <p
-        style={{
-          position: "absolute",
-          zIndex: 500,
-          left: Math.round(left + startWidth - 80) + "px",
-          top: Math.round(window.innerHeight * 0.8 - 40) + "px",
-        }}
-      >
-        {Math.round(((angleInRadians * 180) / Math.PI) * 100) / 100}°
-      </p>
-    </div>
-  );
+    );
+  }
 };