Skip to content

Commit 56be2e3

Browse files
lrussolrusso
authored
Merge pull request #6 from luisllamasbinaburo/Refactor-react
Refactor DigitalPins and AnalogPins
2 parents 331e4dc + 1941e04 commit 56be2e3

11 files changed

+184
-1402
lines changed

‎__tests__/__snapshots__/Editor.test.js.snap

+15-47
Original file line numberDiff line numberDiff line change
@@ -1350,28 +1350,6 @@ exports[`Editor Rendering 1 1`] = `
13501350
>
13511351
12
13521352
</div>
1353-
<div
1354-
style={
1355-
{
1356-
"alignItems": "center",
1357-
"backgroundColor": "red",
1358-
"borderRadius": "16px",
1359-
"color": "white",
1360-
"cursor": "default",
1361-
"display": "flex",
1362-
"float": "left",
1363-
"fontFamily": "Arial",
1364-
"fontSize": "11px",
1365-
"height": "16px",
1366-
"justifyContent": "center",
1367-
"marginLeft": "4px",
1368-
"marginTop": "4px",
1369-
"width": "16px",
1370-
}
1371-
}
1372-
>
1373-
13
1374-
</div>
13751353
</div>
13761354
</div>
13771355
</div>
@@ -1436,27 +1414,9 @@ exports[`Editor Rendering 1 1`] = `
14361414
"width": "40px",
14371415
}
14381416
}
1439-
/>
1440-
<div
1441-
style={
1442-
{
1443-
"alignItems": "center",
1444-
"backgroundColor": "black",
1445-
"borderRadius": "16px",
1446-
"color": "white",
1447-
"cursor": "default",
1448-
"display": "flex",
1449-
"float": "left",
1450-
"fontFamily": "Arial",
1451-
"fontSize": "11px",
1452-
"height": "16px",
1453-
"justifyContent": "center",
1454-
"marginLeft": "4px",
1455-
"marginTop": "4px",
1456-
"width": "40px",
1457-
}
1458-
}
1459-
/>
1417+
>
1418+
0
1419+
</div>
14601420
<div
14611421
style={
14621422
{
@@ -1476,7 +1436,9 @@ exports[`Editor Rendering 1 1`] = `
14761436
"width": "40px",
14771437
}
14781438
}
1479-
/>
1439+
>
1440+
0
1441+
</div>
14801442
<div
14811443
style={
14821444
{
@@ -1496,7 +1458,9 @@ exports[`Editor Rendering 1 1`] = `
14961458
"width": "40px",
14971459
}
14981460
}
1499-
/>
1461+
>
1462+
0
1463+
</div>
15001464
<div
15011465
style={
15021466
{
@@ -1516,7 +1480,9 @@ exports[`Editor Rendering 1 1`] = `
15161480
"width": "40px",
15171481
}
15181482
}
1519-
/>
1483+
>
1484+
0
1485+
</div>
15201486
<div
15211487
style={
15221488
{
@@ -1536,7 +1502,9 @@ exports[`Editor Rendering 1 1`] = `
15361502
"width": "40px",
15371503
}
15381504
}
1539-
/>
1505+
>
1506+
0
1507+
</div>
15401508
</div>
15411509
</div>
15421510
</div>

‎__tests__/__snapshots__/PinsAnalogBar.test.js.snap

+15-25
Original file line numberDiff line numberDiff line change
@@ -62,27 +62,9 @@ exports[`PinsAnalogBar Rendering 1 1`] = `
6262
"width": "40px",
6363
}
6464
}
65-
/>
66-
<div
67-
style={
68-
{
69-
"alignItems": "center",
70-
"backgroundColor": "black",
71-
"borderRadius": "16px",
72-
"color": "white",
73-
"cursor": "default",
74-
"display": "flex",
75-
"float": "left",
76-
"fontFamily": "Arial",
77-
"fontSize": "11px",
78-
"height": "16px",
79-
"justifyContent": "center",
80-
"marginLeft": "4px",
81-
"marginTop": "4px",
82-
"width": "40px",
83-
}
84-
}
85-
/>
65+
>
66+
0
67+
</div>
8668
<div
8769
style={
8870
{
@@ -102,7 +84,9 @@ exports[`PinsAnalogBar Rendering 1 1`] = `
10284
"width": "40px",
10385
}
10486
}
105-
/>
87+
>
88+
0
89+
</div>
10690
<div
10791
style={
10892
{
@@ -122,7 +106,9 @@ exports[`PinsAnalogBar Rendering 1 1`] = `
122106
"width": "40px",
123107
}
124108
}
125-
/>
109+
>
110+
0
111+
</div>
126112
<div
127113
style={
128114
{
@@ -142,7 +128,9 @@ exports[`PinsAnalogBar Rendering 1 1`] = `
142128
"width": "40px",
143129
}
144130
}
145-
/>
131+
>
132+
0
133+
</div>
146134
<div
147135
style={
148136
{
@@ -162,7 +150,9 @@ exports[`PinsAnalogBar Rendering 1 1`] = `
162150
"width": "40px",
163151
}
164152
}
165-
/>
153+
>
154+
0
155+
</div>
166156
</div>
167157
</div>
168158
</div>

‎__tests__/__snapshots__/PinsDigitalBar.test.js.snap

-22
Original file line numberDiff line numberDiff line change
@@ -329,28 +329,6 @@ exports[`PinsDigitalBar Rendering 1 1`] = `
329329
>
330330
12
331331
</div>
332-
<div
333-
style={
334-
{
335-
"alignItems": "center",
336-
"backgroundColor": "red",
337-
"borderRadius": "16px",
338-
"color": "white",
339-
"cursor": "default",
340-
"display": "flex",
341-
"float": "left",
342-
"fontFamily": "Arial",
343-
"fontSize": "11px",
344-
"height": "16px",
345-
"justifyContent": "center",
346-
"marginLeft": "4px",
347-
"marginTop": "4px",
348-
"width": "16px",
349-
}
350-
}
351-
>
352-
13
353-
</div>
354332
</div>
355333
</div>
356334
</div>

‎src/components/PinsAnalogBar.tsx

+10-33
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,7 @@ import { useSimulatorContext } from "../contexts/SimulatorContext"
55
import { isMega, isNano } from "../../src/utils/service"
66

77
const PinsAnalogBar = () => {
8-
const {
9-
analogPin0,
10-
analogPin1,
11-
analogPin2,
12-
analogPin3,
13-
analogPin4,
14-
analogPin5,
15-
analogPin6,
16-
analogPin7,
17-
analogPin8,
18-
analogPin9,
19-
analogPin10,
20-
analogPin11,
21-
analogPin12,
22-
analogPin13,
23-
analogPin14,
24-
boardType,
25-
} = useSimulatorContext()
8+
const { analogPins, boardType } = useSimulatorContext()
269

2710
const isMegaBoard = isMega(boardType)
2811
const isNanoBoard = isNano(boardType)
@@ -32,27 +15,21 @@ const PinsAnalogBar = () => {
3215
<div style={styles.noScrollbar}>
3316
<div style={{ width: isMegaBoard ? "850px" : "550px", ...styles.wrapper }}>
3417
<PinsAnalogLabel />
35-
<PinsAnalogItem value={analogPin0} />
36-
<PinsAnalogItem value={analogPin1} />
37-
<PinsAnalogItem value={analogPin2} />
38-
<PinsAnalogItem value={analogPin3} />
39-
<PinsAnalogItem value={analogPin4} />
40-
<PinsAnalogItem value={analogPin5} />
18+
{analogPins.slice(0, 6).map((pin, index) => (
19+
<PinsAnalogItem key={index} gpio_analog={pin} />
20+
))}
4121
{(isMegaBoard || isNanoBoard) && (
4222
<>
43-
<PinsAnalogItem value={analogPin6} />
44-
<PinsAnalogItem value={analogPin7} />
23+
{analogPins.slice(6, 8).map((pin, index) => (
24+
<PinsAnalogItem key={index} gpio_analog={pin} />
25+
))}
4526
</>
4627
)}
4728
{isMegaBoard && (
4829
<>
49-
<PinsAnalogItem value={analogPin8} />
50-
<PinsAnalogItem value={analogPin9} />
51-
<PinsAnalogItem value={analogPin10} />
52-
<PinsAnalogItem value={analogPin11} />
53-
<PinsAnalogItem value={analogPin12} />
54-
<PinsAnalogItem value={analogPin13} />
55-
<PinsAnalogItem value={analogPin14} />
30+
{analogPins.slice(8, 14).map((pin, index) => (
31+
<PinsAnalogItem key={index} gpio_analog={pin} />
32+
))}
5633
</>
5734
)}
5835
</div>

‎src/components/PinsAnalogItem.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React from "react"
22

3+
import { Gpio_analog } from "../utils/interfaces"
4+
35
interface PinsAnalogItemProps {
4-
value: number
6+
gpio_analog: Gpio_analog
57
}
68

7-
const PinsAnalogItem = ({ value }: PinsAnalogItemProps) => {
8-
return <div style={styles.container}>{value}</div>
9+
const PinsAnalogItem = ({ gpio_analog }: PinsAnalogItemProps) => {
10+
return <div style={styles.container}>{gpio_analog.duty}</div>
911
}
1012

1113
const styles: { [key: string]: React.CSSProperties } = {

0 commit comments

Comments
 (0)