chore: migrate from preact to react (#4435)

src/components/TopicDetail/ContributionForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'react';
 import { httpPost } from '../../lib/http';
 import { useToast } from '../../hooks/use-toast';
 
@@ -157,7 +157,7 @@ export function ContributionForm(props: ContributionFormProps) {
     <div>
       <div className="mb-2 mt-2 rounded-md border bg-gray-100 p-3">
         <h1 className="mb-2 text-2xl font-bold">Guidelines</h1>
-        <ul class="flex flex-col gap-1 text-sm text-gray-700">
+        <ul className="flex flex-col gap-1 text-sm text-gray-700">
           <li>Content should only be in English.</li>
           <li>Do not add things you have not evaluated personally.</li>
           <li>It should strictly be relevant to the topic.</li>

src/components/TopicDetail/TopicDetail.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'preact/hooks';
+import { useMemo, useRef, useState } from 'react';
 import CloseIcon from '../../icons/close.svg';
 import SpinnerIcon from '../../icons/spinner.svg';
 
@@ -147,7 +147,7 @@ export function TopicDetail() {
         {isLoading && (
           <div className="flex w-full justify-center">
             <img
-              src={SpinnerIcon}
+              src={SpinnerIcon as any}
               alt="Loading"
               className="h-6 w-6 animate-spin fill-blue-600 text-gray-200 sm:h-12 sm:w-12"
             />
@@ -192,7 +192,7 @@ export function TopicDetail() {
                   setIsContributing(false);
                 }}
               >
-                <img alt="Close" class="h-5 w-5" src={CloseIcon} />
+                <img alt="Close" className="h-5 w-5" src={CloseIcon as any} />
               </button>
             </div>
 
@@ -205,7 +205,7 @@ export function TopicDetail() {
 
             {/* Contribution */}
             <div className="mt-8 flex-1 border-t">
-              <p class="mb-2 mt-2 text-sm leading-relaxed text-gray-400">
+              <p className="mb-2 mt-2 text-sm leading-relaxed text-gray-400">
                 Help others learn by submitting links to learn more about this topic{' '}
               </p>
               <button
@@ -229,7 +229,7 @@ export function TopicDetail() {
           </>
         )}
       </div>
-      <div class="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div>
+      <div className="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div>
     </div>
   );
 }

src/components/TopicDetail/TopicProgressButton.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import DownIcon from '../../icons/down.svg';
@@ -165,7 +165,7 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
   if (isUpdatingProgress) {
     return (
       <button className="inline-flex cursor-default items-center rounded-md border border-gray-300 bg-white p-1 px-2 text-sm text-black">
-        <img alt="Check" class="h-4 w-4 animate-spin" src={SpinnerIcon} />
+        <img alt="Check" className="h-4 w-4 animate-spin" src={SpinnerIcon} />
         <span className="ml-2">Updating Status..</span>
       </button>
     );
@@ -174,9 +174,9 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
   return (
     <div className="relative inline-flex rounded-md border border-gray-300">
       <span className="inline-flex cursor-default items-center  p-1 px-2 text-sm text-black">
-        <span class="flex h-2 w-2">
+        <span className="flex h-2 w-2">
           <span
-            class={`relative inline-flex h-2 w-2 rounded-full ${statusColors[progress]}`}
+            className={`relative inline-flex h-2 w-2 rounded-full ${statusColors[progress]}`}
           ></span>
         </span>
         <span className="ml-2 capitalize">
@@ -189,7 +189,7 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
         onClick={() => setShowChangeStatus(true)}
       >
         <span className="mr-0.5">Update Status</span>
-        <img alt="Check" class="h-4 w-4" src={DownIcon} />
+        <img alt="Check" className="h-4 w-4" src={DownIcon} />
       </button>
 
       {showChangeStatus && (
@@ -199,59 +199,59 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
         >
           {allowMarkingDone && (
             <button
-              class="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
+              className="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
               onClick={() => handleUpdateResourceProgress('done')}
             >
               <span>
                 <span
-                  class={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['done']}`}
+                  className={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['done']}`}
                 ></span>
                 Done
               </span>
-              <span class="text-xs text-gray-500">D</span>
+              <span className="text-xs text-gray-500">D</span>
             </button>
           )}
           {allowMarkingLearning && (
             <button
-              class="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
+              className="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
               onClick={() => handleUpdateResourceProgress('learning')}
             >
               <span>
                 <span
-                  class={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['learning']}`}
+                  className={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['learning']}`}
                 ></span>
                 In Progress
               </span>
 
-              <span class="text-xs text-gray-500">L</span>
+              <span className="text-xs text-gray-500">L</span>
             </button>
           )}
           {allowMarkingPending && (
             <button
-              class="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
+              className="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
               onClick={() => handleUpdateResourceProgress('pending')}
             >
               <span>
                 <span
-                  class={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['pending']}`}
+                  className={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['pending']}`}
                 ></span>
                 Reset
               </span>
-              <span class="text-xs text-gray-500">R</span>
+              <span className="text-xs text-gray-500">R</span>
             </button>
           )}
           {allowMarkingSkipped && (
             <button
-              class="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
+              className="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
               onClick={() => handleUpdateResourceProgress('skipped')}
             >
               <span>
                 <span
-                  class={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['skipped']}`}
+                  className={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['skipped']}`}
                 ></span>
                 Skip
               </span>
-              <span class="text-xs text-gray-500">S</span>
+              <span className="text-xs text-gray-500">S</span>
             </button>
           )}
         </div>