Skip to content

Commit a42bed6

Browse files
ojeytonwilliamsojeytonwilliams
authored
refactor: remove unnecessary fragments and spaces (freeCodeCamp#57077)
1 parent d981a20 commit a42bed6

File tree

1 file changed

+106
-114
lines changed
  • client/src/templates/Introduction/components

1 file changed

+106
-114
lines changed

‎client/src/templates/Introduction/components/block.tsx‎

Lines changed: 106 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -140,141 +140,133 @@ class Block extends Component<BlockProps> {
140140
* Example: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-javascript
141141
*/
142142
const LegacyChallengeListBlock = (
143-
<>
144-
{' '}
145-
<ScrollableAnchor id={block}>
146-
<div className={`block ${isExpanded ? 'open' : ''}`}>
147-
<div className='block-header'>
148-
<h3 className='big-block-title'>{blockTitle}</h3>
149-
{blockType && <BlockLabel blockType={blockType} />}
150-
{!isAudited && (
151-
<div className='block-cta-wrapper'>
152-
<Link
153-
className='block-title-translation-cta'
154-
to={t('links:help-translate-link-url')}
155-
>
156-
{t('misc.translation-pending')}
157-
</Link>
158-
</div>
159-
)}
160-
</div>
161-
<BlockIntros intros={blockIntroArr} />
162-
<button
163-
aria-expanded={isExpanded}
164-
className='map-title'
165-
onClick={() => {
166-
this.handleBlockClick();
167-
}}
168-
>
169-
<Caret />
170-
<div className='course-title'>
171-
{`${isExpanded ? collapseText : expandText}`}{' '}
172-
<span className='sr-only'>{blockTitle}</span>
173-
</div>
174-
<div className='map-title-completed course-title'>
175-
<CheckMark isCompleted={isBlockCompleted} />
176-
<span
177-
aria-hidden='true'
178-
className='map-completed-count'
179-
>{`${completedCount}/${challengesWithCompleted.length}`}</span>
180-
<span className='sr-only'>
181-
,{' '}
182-
{t('learn.challenges-completed', {
183-
completedCount,
184-
totalChallenges: challengesWithCompleted.length
185-
})}
186-
</span>
143+
<ScrollableAnchor id={block}>
144+
<div className={`block ${isExpanded ? 'open' : ''}`}>
145+
<div className='block-header'>
146+
<h3 className='big-block-title'>{blockTitle}</h3>
147+
{blockType && <BlockLabel blockType={blockType} />}
148+
{!isAudited && (
149+
<div className='block-cta-wrapper'>
150+
<Link
151+
className='block-title-translation-cta'
152+
to={t('links:help-translate-link-url')}
153+
>
154+
{t('misc.translation-pending')}
155+
</Link>
187156
</div>
188-
</button>
189-
{isExpanded && (
190-
<Challenges
191-
challengesWithCompleted={challengesWithCompleted}
192-
isProjectBlock={isProjectBlock}
193-
/>
194157
)}
195158
</div>
196-
</ScrollableAnchor>
197-
</>
198-
);
199-
200-
/**
201-
* ProjectListBlock displays a list of certification projects.
202-
* This layout is used in legacy certifications.
203-
* Example: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#javascript-algorithms-and-data-structures-projects
204-
*/
205-
const ProjectListBlock = (
206-
<>
207-
<ScrollableAnchor id={block}>
208-
<div className='block'>
209-
<div className='block-header'>
210-
<h3 className='big-block-title'>{blockTitle}</h3>
211-
{blockType && <BlockLabel blockType={blockType} />}
212-
{!isAudited && (
213-
<div className='block-cta-wrapper'>
214-
<Link
215-
className='block-title-translation-cta'
216-
to={t('links:help-translate-link-url')}
217-
>
218-
{t('misc.translation-pending')}
219-
</Link>
220-
</div>
221-
)}
159+
<BlockIntros intros={blockIntroArr} />
160+
<button
161+
aria-expanded={isExpanded}
162+
className='map-title'
163+
onClick={() => {
164+
this.handleBlockClick();
165+
}}
166+
>
167+
<Caret />
168+
<div className='course-title'>
169+
{`${isExpanded ? collapseText : expandText}`}{' '}
170+
<span className='sr-only'>{blockTitle}</span>
171+
</div>
172+
<div className='map-title-completed course-title'>
173+
<CheckMark isCompleted={isBlockCompleted} />
174+
<span
175+
aria-hidden='true'
176+
className='map-completed-count'
177+
>{`${completedCount}/${challengesWithCompleted.length}`}</span>
178+
<span className='sr-only'>
179+
,{' '}
180+
{t('learn.challenges-completed', {
181+
completedCount,
182+
totalChallenges: challengesWithCompleted.length
183+
})}
184+
</span>
222185
</div>
223-
<BlockIntros intros={blockIntroArr} />
186+
</button>
187+
{isExpanded && (
224188
<Challenges
225189
challengesWithCompleted={challengesWithCompleted}
226190
isProjectBlock={isProjectBlock}
227191
/>
228-
</div>
229-
</ScrollableAnchor>
230-
</>
192+
)}
193+
</div>
194+
</ScrollableAnchor>
231195
);
232196

233197
/**
234-
* ChallengeGridBlock displays challenges in a grid.
235-
* This layout is used for step-based blocks.
236-
* Example: https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-html-by-building-a-cat-photo-app
198+
* ProjectListBlock displays a list of certification projects.
199+
* This layout is used in legacy certifications.
200+
* Example: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#javascript-algorithms-and-data-structures-projects
237201
*/
238-
const ChallengeGridBlock = (
239-
<>
240-
{' '}
241-
<ScrollableAnchor id={block}>
242-
<div className={`block block-grid ${isExpanded ? 'open' : ''}`}>
243-
<BlockHeader
244-
blockDashed={block}
245-
blockTitle={blockTitle}
246-
blockType={blockType}
247-
completedCount={completedCount}
248-
courseCompletionStatus={courseCompletionStatus()}
249-
handleClick={this.handleBlockClick}
250-
isCompleted={isBlockCompleted}
251-
isExpanded={isExpanded}
252-
percentageCompleted={percentageCompleted}
253-
/>
202+
const ProjectListBlock = (
203+
<ScrollableAnchor id={block}>
204+
<div className='block'>
205+
<div className='block-header'>
206+
<h3 className='big-block-title'>{blockTitle}</h3>
207+
{blockType && <BlockLabel blockType={blockType} />}
254208
{!isAudited && (
255-
<div className='tags-wrapper'>
209+
<div className='block-cta-wrapper'>
256210
<Link
257-
className='cert-tag'
211+
className='block-title-translation-cta'
258212
to={t('links:help-translate-link-url')}
259213
>
260214
{t('misc.translation-pending')}
261215
</Link>
262216
</div>
263217
)}
264-
{isExpanded && (
265-
<div id={`${block}-panel`}>
266-
<BlockIntros intros={blockIntroArr} />
267-
<Challenges
268-
challengesWithCompleted={challengesWithCompleted}
269-
isProjectBlock={isProjectBlock}
270-
isGridMap={true}
271-
blockTitle={blockTitle}
272-
/>
273-
</div>
274-
)}
275218
</div>
276-
</ScrollableAnchor>
277-
</>
219+
<BlockIntros intros={blockIntroArr} />
220+
<Challenges
221+
challengesWithCompleted={challengesWithCompleted}
222+
isProjectBlock={isProjectBlock}
223+
/>
224+
</div>
225+
</ScrollableAnchor>
226+
);
227+
228+
/**
229+
* ChallengeGridBlock displays challenges in a grid.
230+
* This layout is used for step-based blocks.
231+
* Example: https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-html-by-building-a-cat-photo-app
232+
*/
233+
const ChallengeGridBlock = (
234+
<ScrollableAnchor id={block}>
235+
<div className={`block block-grid ${isExpanded ? 'open' : ''}`}>
236+
<BlockHeader
237+
blockDashed={block}
238+
blockTitle={blockTitle}
239+
blockType={blockType}
240+
completedCount={completedCount}
241+
courseCompletionStatus={courseCompletionStatus()}
242+
handleClick={this.handleBlockClick}
243+
isCompleted={isBlockCompleted}
244+
isExpanded={isExpanded}
245+
percentageCompleted={percentageCompleted}
246+
/>
247+
{!isAudited && (
248+
<div className='tags-wrapper'>
249+
<Link
250+
className='cert-tag'
251+
to={t('links:help-translate-link-url')}
252+
>
253+
{t('misc.translation-pending')}
254+
</Link>
255+
</div>
256+
)}
257+
{isExpanded && (
258+
<div id={`${block}-panel`}>
259+
<BlockIntros intros={blockIntroArr} />
260+
<Challenges
261+
challengesWithCompleted={challengesWithCompleted}
262+
isProjectBlock={isProjectBlock}
263+
isGridMap={true}
264+
blockTitle={blockTitle}
265+
/>
266+
</div>
267+
)}
268+
</div>
269+
</ScrollableAnchor>
278270
);
279271

280272
/**

0 commit comments

Comments
 (0)