Skip to content

Commit d0f2a55

Browse files
GeeekyBoyGeeekyBoy
committed
refactor: Decouple UI code from algorithm code ♻️
1 parent 5898880 commit d0f2a55

22 files changed

+228
-230
lines changed

‎src/App.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ function App() {
1414
document.getElementById("splash").remove();
1515
document.body.classList.add("root");
1616
navigate("/", { replace: true });
17-
console.log("App loaded");
1817
setIsFirstLoad(false);
1918
}, []);
2019
return isFirstLoad ? null : (

‎src/components/EssentialImplicants.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import Typography from "@mui/material/Typography";
44
import Card from "@mui/material/Card";
55
import CardContent from "@mui/material/CardContent";
66

7-
export default function ({ index, essentials }) {
7+
const EssentialImplicants = ({ idx, essentials }) => {
88
return (
99
<Card
1010
className="numbered-bg"
1111
style={{
1212
backgroundColor: "#F86734",
13-
backgroundImage: `url(${numberToImage(index.toString())})`,
13+
backgroundImage: `url(${numberToImage(idx.toString())})`,
1414
color: "#FFFFFF"
1515
}}
1616
>
@@ -31,3 +31,5 @@ export default function ({ index, essentials }) {
3131
</Card>
3232
);
3333
}
34+
35+
export default EssentialImplicants;

‎src/components/FunctionNotation.jsx

+5-13
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,18 @@
11
import React from "react";
2-
import { useNavigate } from "react-router-dom";
32
import Button from "@mui/material/Button";
43
import numberToImage from "../utils/numberToImg";
54
import Typography from "@mui/material/Typography";
65
import Card from "@mui/material/Card";
76
import CardContent from "@mui/material/CardContent";
8-
import { setIsResultShown } from "./Result";
97
import varStore from "../utils/varStore";
108

11-
export default function ({ index }) {
12-
const navigate = useNavigate();
13-
const handleNewFunction = () => {
14-
setIsResultShown(false);
15-
setTimeout(() => {
16-
varStore.reset();
17-
navigate("/");
18-
}, 500);
19-
};
9+
const FunctionNotation = ({ idx, onNewFunction }) => {
2010
return (
2111
<Card
2212
className="numbered-bg"
2313
style={{
2414
backgroundColor: "#FFDE03",
25-
backgroundImage: `url(${numberToImage(index.toString())})`
15+
backgroundImage: `url(${numberToImage(idx.toString())})`
2616
}}
2717
>
2818
<CardContent align="center">
@@ -32,10 +22,12 @@ export default function ({ index }) {
3222
{varStore.initDonotCares.length > 0 && ` + Σd(${varStore.initDonotCares.join(", ")})`}
3323
</b>
3424
</Typography>
35-
<Button variant="outlined" className="new-function-btn" onClick={handleNewFunction}>
25+
<Button variant="outlined" className="new-function-btn" onClick={onNewFunction}>
3626
<Typography>New Function</Typography>
3727
</Button>
3828
</CardContent>
3929
</Card>
4030
);
4131
}
32+
33+
export default FunctionNotation;

‎src/components/Letters.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Typography from "@mui/material/Typography";
88
import varStore from "../utils/varStore";
99
import { Fade } from "@mui/material";
1010

11-
export default function () {
11+
const Letter = () => {
1212
const navigate = useNavigate();
1313
const [isShown, setIsShown] = useState(true);
1414
const [isLettersChanged, setIsLettersChanged] = useState(false);
@@ -74,3 +74,5 @@ export default function () {
7474
</Fade>
7575
);
7676
}
77+
78+
export default Letter;

‎src/components/MinimizedFunction.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import Typography from "@mui/material/Typography";
44
import Card from "@mui/material/Card";
55
import CardContent from "@mui/material/CardContent";
66

7-
export default function ({ index, minimizations }) {
7+
const MinimizedFunction = ({ idx, minimizations }) => {
88
return (
99
<Card
1010
className="numbered-bg"
1111
style={{
1212
backgroundColor: "#3DDB85",
13-
backgroundImage: `url(${numberToImage(index.toString())})`,
13+
backgroundImage: `url(${numberToImage(idx.toString())})`,
1414
color: "#FFFFFF"
1515
}}
1616
>
@@ -27,3 +27,5 @@ export default function ({ index, minimizations }) {
2727
</Card>
2828
);
2929
}
30+
31+
export default MinimizedFunction;

‎src/components/NoMinimization.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import Typography from "@mui/material/Typography";
99
import varStore from "../utils/varStore";
1010
import { Fade } from "@mui/material";
1111

12-
export default function () {
12+
const NoMinimization = () => {
1313
const navigate = useNavigate();
1414
const [isShown, setIsShown] = useState(true);
1515
const handleNewFunction = () => {
@@ -52,3 +52,5 @@ export default function () {
5252
</Fade>
5353
);
5454
}
55+
56+
export default NoMinimization;

‎src/components/PetrickMethod.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import Typography from "@mui/material/Typography";
33
import Card from "@mui/material/Card";
44
import CardContent from "@mui/material/CardContent";
55

6-
export default function ({ index, steps, mapping }) {
6+
const PetrickMethod = ({ idx, steps, mapping }) => {
77
return (
88
<Card className="petrick-card">
99
<CardContent align="center">
1010
<Typography variant="h4">
11-
<b>{index}. Applying Petrick Method</b>
11+
<b>{idx}. Applying Petrick Method</b>
1212
</Typography>
1313
{Object.entries(mapping).map(([k, v]) => (
1414
<Typography variant="h4">
@@ -22,3 +22,5 @@ export default function ({ index, steps, mapping }) {
2222
</Card>
2323
);
2424
}
25+
26+
export default PetrickMethod;

‎src/components/PrimeImplicants.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import Typography from "@mui/material/Typography";
44
import Card from "@mui/material/Card";
55
import CardContent from "@mui/material/CardContent";
66

7-
export default function ({ index, implicants }) {
7+
const PrimeImplicants = ({ idx, implicants }) => {
88
return (
99
<Card
1010
className="numbered-bg"
1111
style={{
1212
backgroundColor: "#4282F2",
13-
backgroundImage: `url(${numberToImage(index.toString())})`,
13+
backgroundImage: `url(${numberToImage(idx.toString())})`,
1414
color: "#FFFFFF"
1515
}}
1616
>
@@ -25,3 +25,5 @@ export default function ({ index, implicants }) {
2525
</Card>
2626
);
2727
}
28+
29+
export default PrimeImplicants;

‎src/components/Result.jsx

+46-19
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,61 @@
11
import { Fade } from "@mui/material";
22
import React, { useState, useEffect } from "react";
3+
import { useNavigate } from "react-router-dom";
34
import minimizeFunction from "../core/minimizeFunction";
4-
export let appendStep = () => {};
5-
export let setIsResultShown = () => {};
5+
import varStore from "../utils/varStore";
6+
import SelectionTable from "./SelectionTable";
7+
import PrimeImplicants from "./PrimeImplicants";
8+
import EssentialImplicants from "./EssentialImplicants";
9+
import PetrickMethod from "./PetrickMethod";
10+
import TabularTable from "./TabularTable";
11+
import MinimizedFunction from "./MinimizedFunction";
12+
import FunctionNotation from "./FunctionNotation";
613

7-
export default function () {
8-
const [isShown, setIsShown] = useState(true);
9-
const [children, setChildren] = useState([]);
10-
setIsResultShown = setIsShown;
11-
appendStep = (child) => {
12-
setChildren((oldChildren) => [
13-
...oldChildren,
14-
<div
15-
className="grid-item"
16-
key={"_" + Math.random().toString(36).substring(2, 9)}
17-
>
18-
{child}
19-
</div>
20-
]);
14+
const Result = () => {
15+
const [steps, setSteps] = useState(null);
16+
const navigate = useNavigate();
17+
const handleNewFunction = () => {
18+
setSteps(null);
19+
setTimeout(() => {
20+
varStore.reset();
21+
navigate("/");
22+
}, 500);
2123
};
2224
document.body.classList.remove("centering-root");
2325
document.getElementById("root").classList.remove("centered-container");
2426
useEffect(() => {
25-
minimizeFunction();
27+
setSteps(minimizeFunction());
2628
}, []);
2729
return (
2830
<div className="mansory">
29-
<Fade timeout={500} in={isShown} appear={isShown}>
30-
<div>{children}</div>
31+
<Fade timeout={500} in={steps} appear={steps}>
32+
<div>
33+
<div className="grid-item">
34+
<FunctionNotation idx={1} onNewFunction={handleNewFunction} />
35+
</div>
36+
{steps && steps.map(({ type, ...props }, index) => {
37+
return (
38+
<div className="grid-item" key={index}>
39+
{type === "selectionTable" ? (
40+
<SelectionTable idx={index + 2} {...props} />
41+
) : type === "primeImplicants" ? (
42+
<PrimeImplicants idx={index + 2} {...props} />
43+
) : type === "essentialImplicants" ? (
44+
<EssentialImplicants idx={index + 2} {...props} />
45+
) : type === "petrickMethod" ? (
46+
<PetrickMethod idx={index + 2} {...props} />
47+
) : type === "tabularTable" ? (
48+
<TabularTable idx={index + 2} {...props} />
49+
) : type === "minimizedFunction" ? (
50+
<MinimizedFunction idx={index + 2} {...props} />
51+
) : null}
52+
</div>
53+
);
54+
})}
55+
</div>
3156
</Fade>
3257
</div>
3358
);
3459
}
60+
61+
export default Result;

‎src/components/SelectionTable.jsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,20 @@ import TableRow from "@mui/material/TableRow";
99
import Paper from "@mui/material/Paper";
1010
import Toolbar from "@mui/material/Toolbar";
1111

12-
export default function ({
13-
index,
12+
const SelectionTable = ({
13+
idx,
1414
extractSingles,
1515
colDominance,
1616
rowDominance,
1717
steps,
1818
availCols,
1919
primeImplicants
20-
}) {
20+
}) => {
2121
return (
2222
<TableContainer component={Paper} className="table">
2323
<Toolbar>
2424
<Typography>
25-
{index}. {
25+
{idx}. {
2626
extractSingles ? "Finding Unique Minterms" :
2727
colDominance ? "Applying Column Dominance" :
2828
rowDominance ? "Applying Row Dominance" :
@@ -135,3 +135,5 @@ export default function ({
135135
</TableContainer>
136136
);
137137
}
138+
139+
export default SelectionTable;

‎src/components/Start.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import Typography from "@mui/material/Typography";
1111
import varStore from "../utils/varStore";
1212
import { Fade } from "@mui/material";
1313

14-
export default function () {
14+
const Start = () => {
1515
const navigate = useNavigate();
1616
const [isShown, setIsShown] = useState(true);
1717
const [isMintermsChanged, setIsMintermsChanged] = useState(false);
@@ -165,3 +165,5 @@ export default function () {
165165
</Fade>
166166
);
167167
}
168+
169+
export default Start;

‎src/components/TabularTable.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import TableRow from "@mui/material/TableRow";
99
import Paper from "@mui/material/Paper";
1010
import Typography from "@mui/material/Typography";
1111

12-
export default function ({ index, rows, primes }) {
12+
const TabularTable = ({ idx, rows, primes }) => {
1313
return (
1414
<TableContainer component={Paper} className="table">
1515
<Toolbar>
16-
<Typography>{index}. Finding Prime Implicants</Typography>
16+
<Typography>{idx}. Finding Prime Implicants</Typography>
1717
</Toolbar>
1818
<Table>
1919
<TableHead>
@@ -38,3 +38,5 @@ export default function ({ index, rows, primes }) {
3838
</TableContainer>
3939
);
4040
}
41+
42+
export default TabularTable;

‎src/core/applyColDominance.jsx ‎src/core/applyColDominance.js

+18-25
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
import React from "react";
2-
import SelectionTable from "../components/SelectionTable";
31
import cloneObj from "../utils/cloneObj";
42
import parseCols from "../utils/parseCols";
5-
import { appendStep } from "../components/Result";
6-
import varStore from "../utils/varStore";
73

84
export default function (primes) {
5+
const steps = [];
96
const colImplicants = [];
107
let dominatingCols = [];
118
const prevPrimes = cloneObj(primes);
@@ -31,28 +28,24 @@ export default function (primes) {
3128
primes[i][0] = primes[i][0].filter((x) => !dominatingCols.includes(x));
3229
}
3330
if (JSON.stringify(prevPrimes) !== JSON.stringify(primes)) {
34-
appendStep(
35-
<SelectionTable
36-
index={varStore.currentStep++}
37-
availCols={Object.keys(parseCols(prevPrimes))
38-
.map((x) => parseInt(x, 10))
39-
.sort()}
40-
primeImplicants={prevPrimes}
41-
colDominance={true}
42-
steps={dominatingCols}
43-
/>
44-
);
31+
steps.push({
32+
type: "selectionTable",
33+
availCols: Object.keys(parseCols(prevPrimes))
34+
.map((x) => parseInt(x, 10))
35+
.sort(),
36+
primeImplicants: prevPrimes,
37+
colDominance: true,
38+
steps: dominatingCols,
39+
});
4540
if (primes.length) {
46-
appendStep(
47-
<SelectionTable
48-
index={varStore.currentStep++}
49-
availCols={Object.keys(parseCols(primes))
50-
.map((x) => parseInt(x, 10))
51-
.sort()}
52-
primeImplicants={primes}
53-
/>
54-
);
41+
steps.push({
42+
type: "selectionTable",
43+
availCols: Object.keys(parseCols(primes))
44+
.map((x) => parseInt(x, 10))
45+
.sort(),
46+
primeImplicants: primes,
47+
});
5548
}
5649
}
57-
return primes;
50+
return { steps, primes };
5851
}

‎src/core/applyPetrickMethod.jsx ‎src/core/applyPetrickMethod.js

+1-6
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,5 @@ export default function (primes) {
5757
);
5858
}
5959
}
60-
return {
61-
steps,
62-
primesPetrickMapping,
63-
petrickEssentials,
64-
essentials
65-
};
60+
return { steps, primesPetrickMapping, petrickEssentials, essentials };
6661
}

0 commit comments

Comments
 (0)