chore: migrate from preact to react (#4435)

src/components/TeamProgress/GroupRoadmapItem.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useState } from 'react';
 import type { GroupByRoadmap, TeamMember } from './TeamProgressPage';
 import { getUrlParams } from '../../lib/browser';
 import ExternalLinkIcon from '../../icons/external-link.svg';

src/components/TeamProgress/MemberProgressItem.tsx

@@ -1,5 +1,5 @@
 import type { TeamMember } from './TeamProgressPage';
-import { useState } from 'preact/hooks';
+import { useState } from 'react';
 
 type MemberProgressItemProps = {
   member: TeamMember;
@@ -29,7 +29,7 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
                 : '/images/default-avatar.png'
             }
             alt={member.name || ''}
-            className="h-8 w-8 rounded-full"
+            className="min-w-[32px] min-h-[32px] h-8 w-8 rounded-full"
           />
           <div className="inline-grid w-full">
             {!isMyProgress && (

src/components/TeamProgress/MemberProgressModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'react';
 import { wireframeJSONToSVG } from 'roadmap-renderer';
 import { Spinner } from '../ReactIcons/Spinner';
 import '../FrameRenderer/FrameRenderer.css';
@@ -16,7 +16,7 @@ import CloseIcon from '../../icons/close.svg';
 import { useToast } from '../../hooks/use-toast';
 import { useAuth } from '../../hooks/use-auth';
 import { pageProgressMessage } from '../../stores/page';
-import { useStore } from '@nanostores/preact';
+import { useStore } from '@nanostores/react';
 import { $currentTeam } from '../../stores/team';
 
 export type ProgressMapProps = {
@@ -277,14 +277,14 @@ export function MemberProgressModal(props: ProgressMapProps) {
   const progressPercentage = Math.round((memberDone / memberTotal) * 100);
 
   return (
-    <div class="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+    <div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
       <div
         id={currentTeam?.type === 'company' ? 'customized-roadmap' : 'original-roadmap'}
-        class="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto"
+        className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto"
       >
         <div
           ref={popupBodyEl}
-          class="popup-body relative rounded-lg bg-white pt-[1px] shadow"
+          className="popup-body relative rounded-lg bg-white pt-[1px] shadow"
         >
           {isCurrentUser && (
             <div className="sticky top-1 mx-1 mb-0 mt-1 rounded-xl bg-gray-900 p-4 text-gray-300">
@@ -344,11 +344,11 @@ export function MemberProgressModal(props: ProgressMapProps) {
               </div>
             )}
             <p
-              class={`-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden ${
+              className={`-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden ${
                 isLoading ? 'striped-loader' : ''
               }`}
             >
-              <span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+              <span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
                 <span>{progressPercentage}</span>% Done
               </span>
 
@@ -357,18 +357,18 @@ export function MemberProgressModal(props: ProgressMapProps) {
               </span>
             </p>
             <p
-              class={`-mx-4 mb-3 hidden items-center justify-center border-b border-t py-2 text-sm sm:flex ${
+              className={`-mx-4 mb-3 hidden items-center justify-center border-b border-t py-2 text-sm sm:flex ${
                 isLoading ? 'striped-loader' : ''
               }`}
             >
-              <span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+              <span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
                 <span>{progressPercentage}</span>% Done
               </span>
 
               <span>
                 <span>{memberDone}</span> completed
               </span>
-              <span class="mx-1.5 text-gray-400">·</span>
+              <span className="mx-1.5 text-gray-400">·</span>
               <span>
                 <span data-progress-learning="">{memberLearning}</span> in
                 progress
@@ -376,7 +376,7 @@ export function MemberProgressModal(props: ProgressMapProps) {
 
               {memberSkipped > 0 && (
                 <>
-                  <span class="mx-1.5 text-gray-400">·</span>
+                  <span className="mx-1.5 text-gray-400">·</span>
                   <span>
                     <span data-progress-skipped="">{memberSkipped}</span>{' '}
                     skipped
@@ -384,7 +384,7 @@ export function MemberProgressModal(props: ProgressMapProps) {
                 </>
               )}
 
-              <span class="mx-1.5 text-gray-400">·</span>
+              <span className="mx-1.5 text-gray-400">·</span>
               <span>
                 <span data-progress-total="">{memberTotal}</span> Total
               </span>
@@ -398,7 +398,7 @@ export function MemberProgressModal(props: ProgressMapProps) {
           ></div>
 
           {isLoading && (
-            <div class="flex w-full justify-center">
+            <div className="flex w-full justify-center">
               <Spinner
                 isDualRing={false}
                 className="mb-4 mt-2 h-4 w-4 animate-spin fill-blue-600 text-gray-200 sm:h-8 sm:w-8"
@@ -414,7 +414,7 @@ export function MemberProgressModal(props: ProgressMapProps) {
             onClick={onClose}
           >
             <img alt={'close'} src={CloseIcon} className="h-4 w-4" />
-            <span class="sr-only">Close modal</span>
+            <span className="sr-only">Close modal</span>
           </button>
         </div>
       </div>

src/components/TeamProgress/TeamProgressPage.tsx

@@ -1,10 +1,9 @@
-import { useEffect, useState } from 'preact/hooks';
-import { useTeamId } from '../../hooks/use-team-id';
+import { useEffect, useState } from 'react';
 import { httpGet } from '../../lib/http';
 import { pageProgressMessage } from '../../stores/page';
 import { MemberProgressItem } from './MemberProgressItem';
 import { useToast } from '../../hooks/use-toast';
-import { useStore } from '@nanostores/preact';
+import { useStore } from '@nanostores/react';
 import { $currentTeam } from '../../stores/team';
 import { GroupRoadmapItem } from './GroupRoadmapItem';
 import { getUrlParams, setUrlParams } from '../../lib/browser';
@@ -49,8 +48,7 @@ const groupingTypes = [
 ] as const;
 
 export function TeamProgressPage() {
-  const { teamId } = useTeamId();
-  const { gb: groupBy } = getUrlParams();
+  const { t: teamId, gb: groupBy } = getUrlParams();
 
   const [isLoading, setIsLoading] = useState(true);
   const toast = useToast();
@@ -100,15 +98,6 @@ export function TeamProgressPage() {
     });
   }, [teamId]);
 
-  if (isLoading) {
-    return null;
-  }
-
-  if (!teamId) {
-    window.location.href = '/';
-    return;
-  }
-
   useEffect(() => {
     if (!selectedGrouping) {
       return;
@@ -145,6 +134,15 @@ export function TeamProgressPage() {
     });
   }
 
+  if (!teamId) {
+    window.location.href = '/';
+    return;
+  }
+
+  if (isLoading) {
+    return null;
+  }
+
   return (
     <div>
       {showMemberProgress && (
@@ -170,6 +168,7 @@ export function TeamProgressPage() {
       <div className="flex items-center gap-2">
         {groupingTypes.map((grouping) => (
           <button
+            key={grouping.value}
             className={`rounded-md border p-1 px-2 text-sm ${
               selectedGrouping === grouping.value
                 ? ' border-gray-400 bg-gray-200 '
@@ -205,6 +204,7 @@ export function TeamProgressPage() {
           <div className="grid gap-4 sm:grid-cols-2">
             {teamMembers.map((member) => (
               <MemberProgressItem
+                key={member._id}
                 member={member}
                 isMyProgress={member?.email === user?.email}
                 onShowResourceProgress={(resourceId) => {