Skip to content

Commit 9a3c547

Browse files
KoolThebaKoolTheba
committed
feat: refactored data handler to improve legibility
1 parent 98475bd commit 9a3c547

File tree

1 file changed

+78
-82
lines changed

1 file changed

+78
-82
lines changed

‎src/components/ProjectCompartor.tsx

Lines changed: 78 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function ProjectComparator() {
1616
const params = useParams();
1717
const { platform, org, repo, prevCommitHash, currentCommitHash } = params;
1818

19-
const [state, setState] = useState(new Set());
19+
const [state, setState] = useState([]);
2020

2121
const prevCommitQuery = useQuery({
2222
queryKey: ["prevCommit"],
@@ -48,52 +48,47 @@ function ProjectComparator() {
4848
const previousData = prevCommitQuery?.data;
4949

5050
useEffect(() => {
51-
const areEqualDetails = () =>
52-
previousData?.checks &&
53-
previousData?.score &&
54-
currentData?.checks?.forEach((e1: ScoreElement, index: number) => {
55-
if (
56-
JSON.stringify(e1.details) !==
57-
JSON.stringify(previousData?.checks[index].details) ||
58-
JSON.stringify(e1.reason) !==
59-
JSON.stringify(previousData?.checks[index].reason)
60-
) {
61-
setState(
62-
(previousState) =>
63-
new Set([
64-
...previousState,
65-
{
66-
areEqual: false,
67-
name: previousData.checks[index].name,
68-
details: e1.details,
69-
reason: e1.reason,
70-
score: e1.score,
71-
short: e1.documentation.short,
72-
url: e1.documentation.url,
73-
prevDetails: previousData.checks[index].details,
74-
prevReason: previousData.checks[index].reason,
75-
prevScore: previousData.score,
76-
},
77-
])
78-
);
79-
} else {
80-
setState(
81-
(previousState) =>
82-
new Set([
83-
...previousState,
84-
{
85-
areEqual: true,
86-
name: e1.name,
87-
details: e1.details,
88-
reason: e1.reason,
89-
score: e1.score,
90-
short: e1.documentation.short,
91-
url: e1.documentation.url,
92-
},
93-
])
94-
);
51+
const areEqualDetails = () => {
52+
let consolidatedData;
53+
54+
if (!previousData?.checks || !previousData?.score) {
55+
return;
56+
}
57+
consolidatedData = currentData?.checks?.map(
58+
(e1: ScoreElement, index: number) => {
59+
if (
60+
JSON.stringify(e1.details) !==
61+
JSON.stringify(previousData?.checks[index].details) ||
62+
JSON.stringify(e1.reason) !==
63+
JSON.stringify(previousData?.checks[index].reason)
64+
) {
65+
return {
66+
areEqual: false,
67+
name: previousData.checks[index].name,
68+
details: e1.details,
69+
reason: e1.reason,
70+
score: e1.score,
71+
short: e1.documentation.short,
72+
url: e1.documentation.url,
73+
prevDetails: previousData.checks[index].details,
74+
prevReason: previousData.checks[index].reason,
75+
prevScore: previousData.checks[index].score,
76+
};
77+
} else {
78+
return {
79+
areEqual: true,
80+
name: e1.name,
81+
details: e1.details,
82+
reason: e1.reason,
83+
score: e1.score,
84+
short: e1.documentation.short,
85+
url: e1.documentation.url,
86+
};
87+
}
9588
}
96-
});
89+
);
90+
setState(consolidatedData);
91+
};
9792
areEqualDetails();
9893
}, [currentData, previousData]);
9994

@@ -142,44 +137,45 @@ function ProjectComparator() {
142137
</a>
143138
</p>
144139
<hr />
145-
{[...state].map((element: any) => (
146-
<>
147-
<div key={element.name} className="card__wrapper">
148-
<div className="heading__wrapper">
149-
<div className="info-badge__wrapper">
150-
<h3>{element.name}</h3>
151-
{scoreChecker(element.score, element.prevScore)}
140+
{Array.isArray(state) &&
141+
state.map((element: any) => (
142+
<>
143+
<div key={element.name} className="card__wrapper">
144+
<div data-testid={element.name} className="heading__wrapper">
145+
<div className="info-badge__wrapper">
146+
<h3>{element.name}</h3>
147+
{scoreChecker(element.score, element.prevScore)}
148+
</div>
149+
<span>{element.score}/10</span>
152150
</div>
153-
<span>{element.score}/10</span>
151+
<p>
152+
Description: {element.short.toLocaleLowerCase()}{" "}
153+
<a href={`${element.url}`} target="_blank" rel="noreferrer">
154+
See documentation
155+
</a>
156+
</p>
157+
<p>
158+
Reasoning: <span>{element?.reason.toLocaleLowerCase()}</span>
159+
</p>
160+
{Array.isArray(element.details) && (
161+
<Collapsible details={element.details} />
162+
)}
163+
{(element.prevDetails || element.prevReason) && (
164+
<>
165+
<h4>Additional details / variations</h4>
166+
<p>
167+
Previous revision reasoning:{" "}
168+
<span>{element.prevReason.toLocaleLowerCase()}</span>
169+
</p>
170+
{element.prevDetails && (
171+
<Collapsible details={element.prevDetails} />
172+
)}
173+
</>
174+
)}
154175
</div>
155-
<p>
156-
Description: {element.short.toLocaleLowerCase()}{" "}
157-
<a href={`${element.url}`} target="_blank" rel="noreferrer">
158-
See documentation
159-
</a>
160-
</p>
161-
<p>
162-
Reasoning: <span>{element?.reason.toLocaleLowerCase()}</span>
163-
</p>
164-
{Array.isArray(element.details) && (
165-
<Collapsible details={element.details} />
166-
)}
167-
{(element.prevDetails || element.prevReason) && (
168-
<>
169-
<h4>Additional details / variations</h4>
170-
<p>
171-
Previous revision reasoning:{" "}
172-
<span>{element.prevReason.toLocaleLowerCase()}</span>
173-
</p>
174-
{element.prevDetails && (
175-
<Collapsible details={element.prevDetails} />
176-
)}
177-
</>
178-
)}
179-
</div>
180-
<hr />
181-
</>
182-
))}
176+
<hr />
177+
</>
178+
))}
183179
</>
184180
);
185181
}

0 commit comments

Comments
 (0)