info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-10 19:26:03 +02:00
Code Issues Releases Wiki Activity

fix: progress overflows the roadmap with

Browse Source
This commit is contained in:
Kamran Ahmed
2024-03-25 15:11:05 +00:00
parent 4a00a7bc79
commit 77d67e29eb
1 changed files with 59 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/Activity/ActivityPage.tsx
View File

@@ -52,7 +52,7 @@ export function ActivityPage() {
async function loadActivity() { async function loadActivity() {
const { error, response } = await httpGet<ActivityResponse>( const { error, response } = await httpGet<ActivityResponse>(
`${import.meta.env.PUBLIC_API_URL}/v1-get-user-stats` `${import.meta.env.PUBLIC_API_URL}/v1-get-user-stats`,
); );
if (!response || error) { if (!response || error) {
@@ -79,6 +79,25 @@ export function ActivityPage() {
return null; return null;
} }
const learningRoadmapsToShow = learningRoadmaps
.sort((a, b) => {
const updatedAtA = new Date(a.updatedAt);
const updatedAtB = new Date(b.updatedAt);
return updatedAtB.getTime() - updatedAtA.getTime();
})
.filter((roadmap) => roadmap.learning > 0 || roadmap.done > 0);
const learningBestPracticesToShow = learningBestPractices
.sort((a, b) => {
const updatedAtA = new Date(a.updatedAt);
const updatedAtB = new Date(b.updatedAt);
return updatedAtB.getTime() - updatedAtA.getTime();
})
.filter((bestPractice) => bestPractice.learning > 0 || bestPractice.done > 0);
return ( return (
<> <>
<ActivityCounters <ActivityCounters
@@ -88,10 +107,10 @@ export function ActivityPage() {
/> />
<div className="mx-0 px-0 py-5 md:-mx-10 md:px-8 md:py-8"> <div className="mx-0 px-0 py-5 md:-mx-10 md:px-8 md:py-8">
{learningRoadmaps.length === 0 && {learningRoadmapsToShow.length === 0 &&
learningBestPractices.length === 0 && <EmptyActivity />} learningBestPracticesToShow.length === 0 && <EmptyActivity />}
{(learningRoadmaps.length > 0 || learningBestPractices.length > 0) && ( {(learningRoadmapsToShow.length > 0 || learningBestPracticesToShow.length > 0) && (
<> <>
<h2 className="mb-3 text-xs uppercase text-gray-400"> <h2 className="mb-3 text-xs uppercase text-gray-400">
Continue Following Continue Following
@@ -104,26 +123,38 @@ export function ActivityPage() {
return updatedAtB.getTime() - updatedAtA.getTime(); return updatedAtB.getTime() - updatedAtA.getTime();
}) })
.map((roadmap) => ( .filter((roadmap) => roadmap.learning > 0 || roadmap.done > 0)
<ResourceProgress .map((roadmap) => {
key={roadmap.id} const learningCount = roadmap.learning || 0;
isCustomResource={roadmap.isCustomResource} const doneCount = roadmap.done || 0;
doneCount={roadmap.done || 0} const totalCount = roadmap.total || 0;
learningCount={roadmap.learning || 0} const skippedCount = roadmap.skipped || 0;
totalCount={roadmap.total || 0}
skippedCount={roadmap.skipped || 0} return (
resourceId={roadmap.id} <ResourceProgress
resourceType={'roadmap'} key={roadmap.id}
updatedAt={roadmap.updatedAt} isCustomResource={roadmap.isCustomResource}
title={roadmap.title} doneCount={
onCleared={() => { doneCount > totalCount ? totalCount : doneCount
pageProgressMessage.set('Updating activity'); }
loadActivity().finally(() => { learningCount={
pageProgressMessage.set(''); learningCount > totalCount ? totalCount : learningCount
}); }
}} totalCount={totalCount}
/> skippedCount={skippedCount}
))} resourceId={roadmap.id}
resourceType={'roadmap'}
updatedAt={roadmap.updatedAt}
title={roadmap.title}
onCleared={() => {
pageProgressMessage.set('Updating activity');
loadActivity().finally(() => {
pageProgressMessage.set('');
});
}}
/>
);
})}
{learningBestPractices {learningBestPractices
.sort((a, b) => { .sort((a, b) => {
@@ -132,6 +163,10 @@ export function ActivityPage() {
return updatedAtB.getTime() - updatedAtA.getTime(); return updatedAtB.getTime() - updatedAtA.getTime();
}) })
.filter(
(bestPractice) =>
bestPractice.learning > 0 || bestPractice.done > 0,
)
.map((bestPractice) => ( .map((bestPractice) => (
<ResourceProgress <ResourceProgress
isCustomResource={bestPractice.isCustomResource} isCustomResource={bestPractice.isCustomResource}