Update BigOModals.js

Author: luciankt

src/modals/BigOModals.js

@@ -2,62 +2,59 @@ import React, { useState } from 'react';
 import timeComplexities from '../time_complexities.json';
 
 const applyEquationClass = (text, force) => {
-    const regex = /\$(.*?)\$/g;
-    return text.split(regex).map((part, index) => 
-        index % 2 === 1 || force ? <span key={index} className="equation">{part}</span> : part
-    );
+	const regex = /\$(.*?)\$/g;
+	return text.split(regex).map((part, index) =>
+		index % 2 === 1 || force ? (
+			<span key={index} className="equation">
+				{part}
+			</span>
+		) : (
+			part
+		),
+	);
 };
 
-const renderRows = (data) => {
+const renderRows = data => {
 	if (!data) {
 		return null;
 	}
-    return Object.keys(data).map((operation) => {
-        const operationData = data[operation];
-        return (
-            <ul key={operation}>  
-				<h4>{data[operation].name}</h4>
+	return Object.keys(data).map(operation => {
+		const operationData = data[operation];
+		return (
+			<ul key={operation}>
+				<h4>{operation}</h4>
 				<table>
 					<tbody>
-						{
-							Object.keys(operationData).map((complexity) => {
-								if (complexity === 'name') return null;
-								return (
-									<tr key={complexity}>
-										<td>{complexity[0].toUpperCase() + complexity.slice(1)}</td>
-                                        <ToggleBlurCell text={operationData[complexity].big_o} />
-										<td>{applyEquationClass(operationData[complexity].explanation)}</td>
-									</tr>
-								)
-							})
-						}
+						{Object.keys(operationData).map(complexity => (
+							<tr key={complexity}>
+								<td style={{ width: '13%' }}>{complexity[0].toUpperCase() + complexity.slice(1)}</td>
+								<ToggleBlurCell text={operationData[complexity].big_o} />
+								<td>{applyEquationClass(operationData[complexity].explanation)}</td>
+							</tr>
+						))}
 					</tbody>
 				</table>
-            </ul>
-        );
-    });
+			</ul>
+		);
+	});
 };
 
 const ToggleBlurCell = ({ text }) => {
-    const [isBlurred, setIsBlurred] = useState(true);
+	const [isBlurred, setIsBlurred] = useState(true);
 
-    const handleMouseEnter = () => {
-        setIsBlurred(false);
-    };
+	const handleMouseEnter = () => {
+		setIsBlurred(false);
+	};
 
-    return (
-        <td 
-            className={isBlurred ? 'blur' : ''} 
-            onMouseEnter={handleMouseEnter}
-        >
-            {applyEquationClass(text, true)}
-        </td>
-    );
+	return (
+		<td style={{ width: '10%' }} className={isBlurred ? 'blur' : ''} onMouseEnter={handleMouseEnter}>
+			{applyEquationClass(text, true)}
+		</td>
+	);
 };
 
-
-const Modals = (page) => {
-    return renderRows(timeComplexities[page]);
+const Modals = page => {
+	return renderRows(timeComplexities[page]);
 };
 
 export default Modals;