This repository has no description
fix alt text tools for when 0 images
author
damedotblog
date
(Feb 20, 2025, 6:02 PM -0500)
commit
1f920b97
1f920b97b698176c9baef5a05050f9daa75fc9b9
parent
1269a5be
1269a5be1c6ed805b92cff82628e922c2578853f
+48
-43
+5
-1
src/components/AltTextRating/AltTextRatingTool.js
+5
-1
src/components/AltTextRating/AltTextRatingTool.js
···
260
260
<p><strong>{analysisResult.postsWithImages}</strong> contain images</p>
261
261
<p><strong>{analysisResult.repliesWithImages}</strong> are replies</p>
262
262
<p><strong>{analysisResult.postsWithAltText}</strong> posts have alt text</p>
263
-
<h2>Score: {analysisResult.altTextPercentage.toFixed(2)}% {analysisResult.emoji}</h2>
263
+
{analysisResult.postsWithImages > 0 ? (
264
+
<h2>Score: {analysisResult.altTextPercentage.toFixed(2)}% {analysisResult.emoji}</h2>
265
+
) : (
266
+
<h2>No images found!</h2>
267
+
)}
264
268
</div>
265
269
);
266
270
+42
-42
src/components/UserProfile/components/AltTextCard.js
+42
-42
src/components/UserProfile/components/AltTextCard.js
···
21
21
imagePostsReplies,
22
22
} = postStats;
23
23
24
-
// If there are no images, display the "No images found!" message
25
-
if (postsWithImages === 0) {
26
-
return (
27
-
<div className="alt-text-card">
28
-
<h2>No images found!</h2>
29
-
<p className="disclaimer">Last 90 Days</p>
30
-
</div>
31
-
);
32
-
}
33
-
34
24
// Calculate emoji based on percentage
35
25
let emoji = emojis[0];
36
26
if (altTextPercentage >= 0.75) {
···
70
60
<li>
71
61
<strong>{imagePostsAltText}</strong> posts have alt text
72
62
</li>
73
-
<h2>
74
-
<strong>
75
-
{(altTextPercentage * 100).toFixed(0)}% {emoji}
76
-
</strong>
77
-
</h2>
78
-
<p className="disclaimer">Last 90 Days</p>
63
+
{postsWithImages > 0 ? (
64
+
<>
65
+
<h2>
66
+
<strong>
67
+
{(altTextPercentage * 100).toFixed(0)}% {emoji}
68
+
</strong>
69
+
</h2>
70
+
<p className="disclaimer">Last 90 Days</p>
71
+
</>
72
+
) : (
73
+
<h2>
74
+
<strong>No images found!</strong>
75
+
</h2>
76
+
)}
79
77
</ul>
80
-
<div style={{ width: '50%', height: 300 }}>
81
-
<ResponsiveContainer>
82
-
<RadialBarChart
83
-
cx="50%"
84
-
cy="50%"
85
-
innerRadius="30%"
86
-
outerRadius="100%"
87
-
barSize={30}
88
-
data={data}
89
-
startAngle={180}
90
-
endAngle={-180}
91
-
>
92
-
<RadialBar
93
-
minAngle={15}
94
-
label={{
95
-
position: 'insideStart',
96
-
fill: '#fff',
97
-
formatter: (value) => value ? `${value}` : ''
98
-
}}
99
-
background={{ fill: '#eee' }}
100
-
clockWise
101
-
dataKey="images"
102
-
/>
103
-
</RadialBarChart>
104
-
</ResponsiveContainer>
105
-
</div>
78
+
{postsWithImages > 0 && (
79
+
<div style={{ width: '50%', height: 300 }}>
80
+
<ResponsiveContainer>
81
+
<RadialBarChart
82
+
cx="50%"
83
+
cy="50%"
84
+
innerRadius="30%"
85
+
outerRadius="100%"
86
+
barSize={30}
87
+
data={data}
88
+
startAngle={180}
89
+
endAngle={-180}
90
+
>
91
+
<RadialBar
92
+
minAngle={15}
93
+
label={{
94
+
position: 'insideStart',
95
+
fill: '#fff',
96
+
formatter: (value) => value ? `${value}` : ''
97
+
}}
98
+
background={{ fill: '#eee' }}
99
+
clockWise
100
+
dataKey="images"
101
+
/>
102
+
</RadialBarChart>
103
+
</ResponsiveContainer>
104
+
</div>
105
+
)}
106
106
</div>
107
107
);
108
108
};