separate machine into multiple components

src/components/App/App.js

@@ -14,7 +14,6 @@ function App() {
 
       <Switch>
         <Route exact path="/" component={Machine} />
-        <Route exact path="/machine" component={Machine} />
         <Route exact path="/about" component={About} />
         <Route exact path="/instructions" component={Instructions} />
       </Switch>

src/components/Machine/Machine.js

@@ -3,17 +3,15 @@ import { func, shape, string } from 'prop-types';
 import { Link } from 'react-router-dom';
 import queryString from 'query-string';
 
+import Spinner from '../Spinner';
 import Table from '../Table';
 
 import styles from './Machine.module.css';
 
-import bottom from './bottom.svg';
-import top from './top.svg';
-
 const rotation = 45;
 
-const mod = (a, b) => {
-  const jsResult = a % b;
+const mod = (a) => {
+  const jsResult = a % 360;
 
   if (jsResult < 0) {
     return jsResult + 360;
@@ -22,29 +20,22 @@ const mod = (a, b) => {
   return jsResult;
 };
 
-const fromQuery = ({
-  x = 'X',
-  y = 'Y',
-  z = 'Z',
-  ba = 0,
-  sa = 0,
-}) => ({
-  x,
-  y,
-  z,
-  ba: Number(ba) % 360,
-  sa: Number(sa) % 360,
-});
-
-const nearestAngle = (prevAngle, angle) => {
-  const firstPossibility = prevAngle + mod(angle - prevAngle, 360);
-  const secondPossibility = prevAngle - mod(prevAngle - angle, 360);
-
-  if (Math.abs(prevAngle - firstPossibility) < Math.abs(prevAngle - secondPossibility)) {
-    return firstPossibility;
-  }
-
-  return secondPossibility;
+const fromQuery = (search) => {
+  const {
+    x = 'X',
+    y = 'Y',
+    z = 'Z',
+    ba = 0,
+    sa = 0,
+  } = queryString.parse(search);
+
+  return {
+    x,
+    y,
+    z,
+    ba: Number(ba),
+    sa: Number(sa),
+  };
 };
 
 class Machine extends Component {
@@ -53,34 +44,6 @@ class Machine extends Component {
     location: shape({ search: string }).isRequired,
   };
 
-  static getDerivedStateFromProps(
-    { location: { search } },
-    { bottomAngle: prevBottomAngle, topAngle: prevTopAngle },
-  ) {
-    const {
-      x, y, z, ba, sa,
-    } = fromQuery(queryString.parse(search));
-
-    const bottomAngle = Number(ba) % 360;
-    const topAngle = Number(sa) % 360;
-
-    return {
-      x,
-      y,
-      z,
-      bottomAngle: nearestAngle(prevBottomAngle, bottomAngle),
-      topAngle: nearestAngle(prevTopAngle, topAngle),
-    };
-  }
-
-  state = {
-    bottomAngle: 0,
-    topAngle: 0,
-    x: 'X',
-    y: 'Y',
-    z: 'Z',
-  };
-
   constructor(props) {
     super(props);
 
@@ -91,37 +54,41 @@ class Machine extends Component {
 
   rotateBottomLink(angle) {
     const { location: { search } } = this.props;
-    const query = fromQuery(queryString.parse(search));
+    const query = fromQuery(search);
 
-    query.ba = mod(query.ba + angle, 360);
+    query.ba = mod(query.ba + angle);
 
     return `./?${queryString.stringify(query)}`;
   }
 
   rotateTopLink(angle) {
     const { location: { search } } = this.props;
-    const query = fromQuery(queryString.parse(search));
+    const query = fromQuery(search);
 
-    query.sa = mod(query.sa + angle, 360);
+    query.sa = mod(query.sa + angle);
 
     return `./?${queryString.stringify(query)}`;
   }
 
   updateInput(event) {
     const { history, location: { search } } = this.props;
     const { target: { value, name } } = event;
-    const query = fromQuery(queryString.parse(search));
+    const query = fromQuery(search);
 
     query[name] = value;
 
     history.push({ search: queryString.stringify(query) });
   }
 
   render() {
+    const { location: { search } } = this.props;
     const {
-      bottomAngle, topAngle, x, y, z,
-    } = this.state;
-    const { location } = this.props;
+      x = 'X',
+      y = 'Y',
+      z = 'Z',
+      ba: bottomAngle = 0,
+      sa: topAngle = 0,
+    } = fromQuery(search);
     const { rotateBottomLink, rotateTopLink, updateInput } = this;
 
     return (
@@ -182,21 +149,8 @@ class Machine extends Component {
         </div>
 
         <div className="row">
-          <div className={`col-12 col-lg-6 text-center ${styles.wrapper}`}>
-            <img
-              src={bottom}
-              className={styles.image}
-              alt="baseboard"
-              style={{ transform: `rotate(${bottomAngle}deg)` }}
-            />
-
-            <img
-              src={top}
-              className={styles.image}
-              alt="spinner"
-              style={{ transform: `rotate(${topAngle}deg)` }}
-            />
-          </div>
+          <Spinner bottomAngle={bottomAngle} topAngle={topAngle} />
+
           <div className={`col-12 col-lg-6 text-center ${styles.wrapper}`}>
             <div className={styles.inputTable}>
               <div className="input-group mb-1">
@@ -221,7 +175,13 @@ class Machine extends Component {
               </div>
 
 
-              <Table location={location} />
+              <Table
+                x={x}
+                y={y}
+                z={z}
+                bottomAngle={bottomAngle}
+                topAngle={topAngle}
+              />
             </div>
           </div>
         </div>

src/components/Machine/Machine.module.css

@@ -11,16 +11,6 @@
   z-index: 100;
 }
 
-.image {
-  left: 0;
-  margin-left: auto;
-  margin-right: auto;
-  position: absolute;
-  right: 0;
-  height: 50vh;
-  transition: transform 0.8s ease-in-out;
-}
-
 .inputTable {
   margin-top: 50vh;
   margin-left: 10vh;
@@ -29,28 +19,13 @@
 }
 
 @media (min-width: 768px) {
-  .image {
-    height: 65vh;
-  }
-
   .inputTable {
     margin-top: 65vh;
   }
 }
 
 @media (min-width: 992px) {
-  .image {
-    height: unset;
-    max-width: 100%;
-  }
-
   .inputTable {
     margin-top: 30px;
   }
 }
-
-@media (min-width: 1200px) {
-  .image {
-    max-width: 85%;
-  }
-}

src/components/Spinner/Spinner.js

@@ -0,0 +1,75 @@
+/* eslint-disable react/no-unused-prop-types */
+import React, { Component } from 'react';
+import { number } from 'prop-types';
+
+import styles from './Spinner.module.css';
+
+import bottom from './bottom.svg';
+import top from './top.svg';
+
+const mod = (a) => {
+  const jsResult = a % 360;
+
+  if (jsResult < 0) {
+    return jsResult + 360;
+  }
+
+  return jsResult;
+};
+
+const nearestAngle = (prevAngle, angle) => {
+  const firstPossibility = prevAngle + mod(angle - prevAngle);
+  const secondPossibility = prevAngle - mod(prevAngle - angle);
+
+  if (Math.abs(prevAngle - firstPossibility) < Math.abs(prevAngle - secondPossibility)) {
+    return firstPossibility;
+  }
+
+  return secondPossibility;
+};
+
+class Spinner extends Component {
+  static propTypes = {
+    bottomAngle: number.isRequired,
+    topAngle: number.isRequired,
+  };
+
+  state = {
+    topAngle: 0,
+    bottomAngle: 0,
+  }
+
+  static getDerivedStateFromProps(
+    { bottomAngle, topAngle },
+    { bottomAngle: prevBottomAngle, topAngle: prevTopAngle },
+  ) {
+    return {
+      bottomAngle: nearestAngle(prevBottomAngle, bottomAngle),
+      topAngle: nearestAngle(prevTopAngle, topAngle),
+    };
+  }
+
+  render() {
+    const { bottomAngle, topAngle } = this.state;
+
+    return (
+      <div className={`col-12 col-lg-6 text-center ${styles.wrapper}`}>
+        <img
+          src={bottom}
+          className={styles.image}
+          alt="baseboard"
+          style={{ transform: `rotate(${bottomAngle}deg)` }}
+        />
+
+        <img
+          src={top}
+          className={styles.image}
+          alt="spinner"
+          style={{ transform: `rotate(${topAngle}deg)` }}
+        />
+      </div>
+    );
+  }
+}
+
+export default Spinner;

src/components/Spinner/Spinner.module.css

@@ -0,0 +1,32 @@
+.wrapper {
+  position: relative;
+}
+
+.image {
+  left: 0;
+  margin-left: auto;
+  margin-right: auto;
+  position: absolute;
+  right: 0;
+  height: 50vh;
+  transition: transform 0.8s ease-in-out;
+}
+
+@media (min-width: 768px) {
+  .image {
+    height: 65vh;
+  }
+}
+
+@media (min-width: 992px) {
+  .image {
+    height: unset;
+    max-width: 100%;
+  }
+}
+
+@media (min-width: 1200px) {
+  .image {
+    max-width: 85%;
+  }
+}

src/components/Spinner/index.js

@@ -0,0 +1,3 @@
+import Spinner from './Spinner';
+
+export default Spinner;