convert from functional to class components

1 files changed, 14 insertions, 12 deletions

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>);
+  }
 };