fix: empty buttons in profile update (#7717)

* Empty buttons in profile update

* fix: filtering in one call

---------

Co-authored-by: Arik Chakma <arikchangma@gmail.com>

src/components/RoadCard/RoadmapSelect.tsx

@@ -16,7 +16,7 @@ export function RoadmapSelect(props: RoadmapSelectProps) {
 
   const fetchProgress = async () => {
     const { response, error } = await httpGet<UserProgressResponse>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-get-user-all-progress`
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-user-all-progress`,
     );
 
     if (error || !response) {
@@ -34,16 +34,21 @@ export function RoadmapSelect(props: RoadmapSelectProps) {
 
   const canSelectMore = selectedRoadmaps.length < 4;
   const allProgress =
-    progressList?.filter((progress) => progress.resourceType === 'roadmap') ||
-    [];
+    progressList?.filter(
+      (progress) =>
+        progress.resourceType === 'roadmap' &&
+        progress.resourceId &&
+        progress.resourceTitle,
+    ) || [];
 
   return (
     <div className="flex flex-wrap gap-1">
       {allProgress?.length === 0 && (
-        <p className={'text-sm italic text-gray-400'}>
+        <p className="text-sm italic text-gray-400">
           No progress tracked so far.
         </p>
       )}
+
       {allProgress?.map((progress) => {
         const isSelected = selectedRoadmaps.includes(progress.resourceId);
         const canSelect = isSelected || canSelectMore;
@@ -58,8 +63,8 @@ export function RoadmapSelect(props: RoadmapSelectProps) {
               if (isSelected) {
                 setSelectedRoadmaps(
                   selectedRoadmaps.filter(
-                    (roadmap) => roadmap !== progress.resourceId
-                  )
+                    (roadmap) => roadmap !== progress.resourceId,
+                  ),
                 );
               } else if (selectedRoadmaps.length < 4) {
                 setSelectedRoadmaps([...selectedRoadmaps, progress.resourceId]);

src/components/UpdateProfile/UpdatePublicProfileForm.tsx

@@ -186,9 +186,11 @@ export function UpdatePublicProfileForm() {
   }, []);
 
   const publicCustomRoadmaps = profileRoadmaps.filter(
-    (r) => r.isCustomResource,
+    (r) => r.isCustomResource && r.id && r.title,
+  );
+  const publicRoadmaps = profileRoadmaps.filter(
+    (r) => !r.isCustomResource && r.id && r.title,
   );
-  const publicRoadmaps = profileRoadmaps.filter((r) => !r.isCustomResource);
 
   return (
     <div>
@@ -622,7 +624,7 @@ export function UpdatePublicProfileForm() {
               )}
             </button>
             <a
-              className='flex shrink-0 flex-row items-center gap-1 rounded-lg border border-black py-1.5 pl-2.5 pr-3.5 text-xs uppercase text-black transition-colors hover:bg-black hover:text-white'
+              className="flex shrink-0 flex-row items-center gap-1 rounded-lg border border-black py-1.5 pl-2.5 pr-3.5 text-xs uppercase text-black transition-colors hover:bg-black hover:text-white"
               href={publicProfileUrl}
               target="_blank"
             >