diff --git a/src/components/FeaturedItems/MarkFavorite.tsx b/src/components/FeaturedItems/MarkFavorite.tsx
index d0b98d74c..12c7077f2 100644
--- a/src/components/FeaturedItems/MarkFavorite.tsx
+++ b/src/components/FeaturedItems/MarkFavorite.tsx
@@ -20,12 +20,11 @@ export function MarkFavorite({
favorite,
className,
}: MarkFavoriteType) {
- const localStorageKey = `${resourceType}-${resourceId}-favorite`;
const toast = useToast();
const [isLoading, setIsLoading] = useState(false);
const [isFavorite, setIsFavorite] = useState(
- favorite ?? localStorage.getItem(localStorageKey) === '1'
+ favorite || false
);
async function toggleFavoriteHandler(e: Event) {
@@ -82,7 +81,6 @@ export function MarkFavorite({
} = (e as CustomEvent).detail;
if (id === resourceId && type === resourceType) {
setIsFavorite(fav);
- localStorage.setItem(localStorageKey, fav ? '1' : '0');
}
};
diff --git a/src/components/FrameRenderer/renderer.ts b/src/components/FrameRenderer/renderer.ts
index aa6e0a72d..1ae399b6a 100644
--- a/src/components/FrameRenderer/renderer.ts
+++ b/src/components/FrameRenderer/renderer.ts
@@ -228,8 +228,18 @@ export class Renderer {
}
e.stopImmediatePropagation();
+ let status: ResourceProgressType = 'pending';
+ if (targetGroup.classList.contains('done')) {
+ status = 'done';
+ } else if (targetGroup.classList.contains('learning')) {
+ status = 'learning';
+ } else if (targetGroup.classList.contains('skipped')) {
+ status = 'skipped';
+ } else if (targetGroup.classList.contains('removed')) {
+ status = 'removed';
+ }
- if (targetGroup.classList.contains('removed')) {
+ if (status === 'removed') {
return;
}
@@ -263,6 +273,7 @@ export class Renderer {
topicId: groupId.replace('check:', ''),
resourceType: this.resourceType,
resourceId: this.resourceId,
+ status,
},
})
);
@@ -300,6 +311,7 @@ export class Renderer {
topicId: normalizedGroupId,
resourceId: this.resourceId,
resourceType: this.resourceType,
+ status,
},
})
);
diff --git a/src/components/TeamVersions/TeamVersions.tsx b/src/components/TeamVersions/TeamVersions.tsx
index a54896486..3e0a693cd 100644
--- a/src/components/TeamVersions/TeamVersions.tsx
+++ b/src/components/TeamVersions/TeamVersions.tsx
@@ -44,6 +44,8 @@ export function TeamVersions(props: TeamVersionsProps) {
const [selectedTeamVersion, setSelectedTeamVersion] = useState<
TeamVersionsResponse[0] | null
>(null);
+ const [shouldStartLoading, setShouldStartLoading] = useState(false);
+
let shouldShowAvatar = true;
const selectedAvatar = selectedTeamVersion
? selectedTeamVersion.team.avatar
@@ -88,6 +90,7 @@ export function TeamVersions(props: TeamVersionsProps) {
if (teamId) {
const foundVersion = response.find((v) => v.team._id === teamId) || null;
setSelectedTeamVersion(foundVersion);
+ setShouldStartLoading(true);
}
setTimeout(() => {
@@ -110,7 +113,10 @@ export function TeamVersions(props: TeamVersionsProps) {
}
useEffect(() => {
- clearResourceProgress();
+ if (!shouldStartLoading) {
+ return;
+ }
+ clearResourceProgress('removed');
if (!selectedTeamVersion) {
deleteUrlParam('t');
renderResourceProgress(resourceType, resourceId).then();
@@ -125,6 +131,7 @@ export function TeamVersions(props: TeamVersionsProps) {
});
refreshProgressCounters();
});
+ setShouldStartLoading(true);
}, [selectedTeamVersion]);
if (!teamVersions.length) {
@@ -204,6 +211,7 @@ export function TeamVersions(props: TeamVersionsProps) {
onClick={() => {
setSelectedTeamVersion(team);
setIsDropdownOpen(false);
+ setShouldStartLoading(true);
}}
>
diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx
index fae17624b..2b49b35f5 100644
--- a/src/components/TopicDetail/TopicDetail.tsx
+++ b/src/components/TopicDetail/TopicDetail.tsx
@@ -9,9 +9,9 @@ import { useToggleTopic } from '../../hooks/use-toggle-topic';
import { httpGet } from '../../lib/http';
import { isLoggedIn } from '../../lib/jwt';
import {
- isTopicDone,
refreshProgressCounters,
renderTopicProgress,
+ ResourceProgressType,
ResourceType,
updateResourceProgress as updateResourceProgressApi,
} from '../../lib/resource-progress';
@@ -35,6 +35,7 @@ export function TopicDetail() {
// Details of the currently loaded topic
const [topicId, setTopicId] = useState('');
+ const [resourceStatus, setResourceStatus] = useState('pending')
const [resourceId, setResourceId] = useState('');
const [resourceType, setResourceType] = useState('roadmap');
@@ -52,7 +53,7 @@ export function TopicDetail() {
// Toggle topic is available even if the component UI is not active
// This is used on the best practice screen where we have the checkboxes
// to mark the topic as done/undone.
- useToggleTopic(({ topicId, resourceType, resourceId }) => {
+ useToggleTopic(({ topicId, resourceType, resourceId, status }) => {
if (isGuest) {
showLoginPopup();
return;
@@ -60,18 +61,14 @@ export function TopicDetail() {
pageProgressMessage.set('Updating');
- // Toggle the topic status
- isTopicDone({ topicId, resourceId, resourceType })
- .then((oldIsDone) =>
- updateResourceProgressApi(
- {
- topicId,
- resourceId,
- resourceType,
- },
- oldIsDone ? 'pending' : 'done'
- )
- )
+ updateResourceProgressApi(
+ {
+ topicId,
+ resourceId,
+ resourceType,
+ },
+ status === 'done' ? 'pending' : 'done'
+ )
.then(({ done = [] }) => {
renderTopicProgress(
topicId,
@@ -86,10 +83,11 @@ export function TopicDetail() {
.finally(() => {
pageProgressMessage.set('');
});
+ return;
});
// Load the topic detail when the topic detail is active
- useLoadTopic(({ topicId, resourceType, resourceId }) => {
+ useLoadTopic(({ topicId, resourceType, resourceId, status }) => {
setIsLoading(true);
setIsActive(true);
sponsorHidden.set(true);
@@ -98,6 +96,7 @@ export function TopicDetail() {
setTopicId(topicId);
setResourceType(resourceType);
setResourceId(resourceId);
+ setResourceStatus(status);
const topicPartial = topicId.replaceAll(':', '/');
const topicUrl =
@@ -177,6 +176,7 @@ export function TopicDetail() {
topicId={topicId}
resourceId={resourceId}
resourceType={resourceType}
+ status={resourceStatus}
onClose={() => {
setIsActive(false);
setIsContributing(false);
@@ -206,7 +206,8 @@ export function TopicDetail() {
{/* Contribution */}
- Help others learn by submitting links to learn more about this topic{' '}
+ Help others learn by submitting links to learn more about this
+ topic{' '}