chore: migrate from preact to react (#4435)

src/components/UpdateProfile/UpdateProfileForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { FormEvent, useEffect, useState } from 'react';
 import { httpGet, httpPost } from '../../lib/http';
 import { pageProgressMessage } from '../../stores/page';
 import UploadProfilePicture from './UploadProfilePicture';
@@ -16,7 +16,7 @@ export function UpdateProfileForm() {
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
 
-  const handleSubmit = async (e: Event) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError('');
@@ -97,7 +97,7 @@ export function UpdateProfileForm() {
       <form className="mt-4 space-y-4" onSubmit={handleSubmit}>
         <div className="flex w-full flex-col">
           <label
-            for="name"
+            htmlFor="name"
             className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
           >
             Name
@@ -115,7 +115,7 @@ export function UpdateProfileForm() {
         </div>
         <div className="flex w-full flex-col">
           <label
-            for="email"
+            htmlFor="email"
             className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
           >
             Email
@@ -133,7 +133,10 @@ export function UpdateProfileForm() {
         </div>
 
         <div className="flex w-full flex-col">
-          <label for="github" className="text-sm leading-none text-slate-500">
+          <label
+            htmlFor="github"
+            className="text-sm leading-none text-slate-500"
+          >
             Github
           </label>
           <input
@@ -147,7 +150,10 @@ export function UpdateProfileForm() {
           />
         </div>
         <div className="flex w-full flex-col">
-          <label for="twitter" className="text-sm leading-none text-slate-500">
+          <label
+            htmlFor="twitter"
+            className="text-sm leading-none text-slate-500"
+          >
             Twitter
           </label>
           <input
@@ -162,7 +168,10 @@ export function UpdateProfileForm() {
         </div>
 
         <div className="flex w-full flex-col">
-          <label for="linkedin" className="text-sm leading-none text-slate-500">
+          <label
+            htmlFor="linkedin"
+            className="text-sm leading-none text-slate-500"
+          >
             LinkedIn
           </label>
           <input
@@ -177,7 +186,10 @@ export function UpdateProfileForm() {
         </div>
 
         <div className="flex w-full flex-col">
-          <label for="website" className="text-sm leading-none text-slate-500">
+          <label
+            htmlFor="website"
+            className="text-sm leading-none text-slate-500"
+          >
             Website
           </label>
           <input

src/components/UpdateProfile/UploadProfilePicture.tsx

@@ -1,5 +1,5 @@
 import Cookies from 'js-cookie';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { ChangeEvent, FormEvent, useEffect, useRef, useState } from 'react';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
 interface PreviewFile extends File {
@@ -60,7 +60,7 @@ export default function UploadProfilePicture(props: UploadProfilePictureProps) {
 
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const onImageChange = async (e: Event) => {
+  const onImageChange = async (e: ChangeEvent<HTMLInputElement>) => {
     setError('');
 
     const file = (e.target as HTMLInputElement).files?.[0];
@@ -81,7 +81,7 @@ export default function UploadProfilePicture(props: UploadProfilePictureProps) {
     );
   };
 
-  const handleSubmit = async (e: Event) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setError('');
     setIsLoading(true);