Prepare restructure.

equations/src/App.js

@@ -2,36 +2,20 @@ import logo from './logo.svg';
 import {useEffect,useState} from 'react';
 import './App.css';
 
-function Equation(p) {
-	const {data,id,equationParts,setEquationParts,field,operator} = p
+function Equation() {
 	
-	function updateEquation(field,operator) {
-		var eq = [...equationParts]
-		eq[id].field=field
-		eq[id].operator=operator
-		setEquationParts(eq)
-	}
-	return <><div style={{display:"inline-block",border:"1px solid black"}}>
-	<select onChange={(ev)=>{
-		updateEquation(ev.currentTarget.value,operator)
-	}}>
-	{Object.keys(data).map((key)=><option key={key} value={key}>{key}</option>)}
-	</select><br/>
-	{data[field]}</div>{operator!=="disabled"&&<div style={{display:"inline-block",border:"1px solid black"}}>
-	<select onChange={(ev)=>{updateEquation(field,ev.currentTarget.value)}}>
-	{["+","-","×","÷","()"].map((key)=><option key={key} value={key}>{key}</option>)}
-	</select><br/> </div>}</>
-}
-
-function EquationBuilder(p) {
-	const {data} = p
-	const [equationParts,setEquationParts] = useState([])
-	const [equation,setEquation] = useState([])
+	const [equation,setEquation]=useState([[6],"+"])
 	
 	function SolveEquation(eq) {
 		var newEq = [...eq]
+		//Parenthesis.
+		for (var i=0;i<newEq.length;i++) {
+			if (Array.isArray(newEq[i])) {
+				newEq.splice(i,1,SolveEquation(newEq[i]))
+			}
+		}
 		//Multiplication and Division first.
-		for (var i=0;i<newEq.length-1;i++) {
+		for (i=0;i<newEq.length-1;i++) {
 			if (newEq[i]==="×") {
 				var product = Number(newEq[i-1])*Number(newEq[i+1])
 				newEq.splice(i-1,3,product)
@@ -43,7 +27,7 @@ function EquationBuilder(p) {
 				i--
 			}
 		}
-		for (var i=0;i<newEq.length-1;i++) {
+		for (i=0;i<newEq.length-1;i++) {
 			if (newEq[i]==="+") {
 				var sum = Number(newEq[i-1])+Number(newEq[i+1])
 				newEq.splice(i-1,3,sum)
@@ -55,26 +39,12 @@ function EquationBuilder(p) {
 				i--
 			}
 		}
-		return newEq.slice(0,-1)
+		return Number(newEq[0])
 	}
 	
-	useEffect(()=>{
-		var newEq = []
-		for (var i=0;i<equationParts.length;i++) {
-			newEq.push(data[equationParts[i].field])
-			newEq.push(equationParts[i].operator)
-		}
-		setEquation(newEq)
-	},[equationParts])
 	return <>
-		<button onClick={()=>{
-			setEquationParts([...equationParts,{field:Object.keys(data)[0],operator:"+"}])}}>+</button>
-		<br/><br/>
-		{equationParts.map((eq,i)=><Equation key={i} equationParts={equationParts} setEquationParts={setEquationParts} id={i} data={data} field={equationParts[i].field} operator={i!==equationParts.length-1?equationParts[i].operator:"disabled"}/>)}
-		<br/><br/>
-		{equation.slice(0,-1)}
-		<br/><h1>{SolveEquation(equation)}</h1>
-		</>
+		<h1>{SolveEquation(equation)}</h1>
+	</>
 }
 
 function App() {
@@ -87,7 +57,8 @@ function App() {
 	
   return (
     <div className="App">
-        <EquationBuilder data={fieldData}/>
+		<hr/>
+		<Equation/>
     </div>
   );
 }