Migrate to Vite from CRA

src/pages/BugReport.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback, useRef } from "react";
+import { useEffect, useState, useCallback, useRef } from "react";
 import logo_light from "../assets/logo_light_46.png";
 import logo_dark from "../assets/logo_dark_46.png";
 import { Banner, Button, Input, Upload, Toast, Spin } from "@douyinfe/semi-ui";
@@ -59,32 +59,29 @@ function Form({ theme }) {
     }));
   };
 
-  const onSubmit = useCallback(
-    (e) => {
-      setLoading(true);
-      editor.update(() => {
-        const sendMail = async () => {
-          await axios
-            .post(`${process.env.REACT_APP_BACKEND_URL}/send_email`, {
-              subject: `[BUG REPORT]: ${data.title}`,
-              message: $generateHtmlFromNodes(editor),
-              attachments: data.attachments,
-            })
-            .then((res) => {
-              Toast.success("Bug reported!");
-              editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
-              resetForm();
-            })
-            .catch((err) => {
-              Toast.error("Oops! Something went wrong.");
-              setLoading(false);
-            });
-        };
-        sendMail();
-      });
-    },
-    [editor, data]
-  );
+  const onSubmit = useCallback(() => {
+    setLoading(true);
+    editor.update(() => {
+      const sendMail = async () => {
+        await axios
+          .post(`${import.meta.env.VITE_API_BACKEND_URL}/send_email`, {
+            subject: `[BUG REPORT]: ${data.title}`,
+            message: $generateHtmlFromNodes(editor),
+            attachments: data.attachments,
+          })
+          .then(() => {
+            Toast.success("Bug reported!");
+            editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+            resetForm();
+          })
+          .catch(() => {
+            Toast.error("Oops! Something went wrong.");
+            setLoading(false);
+          });
+      };
+      sendMail();
+    });
+  }, [editor, data]);
 
   return (
     <div className="p-5 mt-6 card-theme rounded-md">
@@ -277,7 +274,7 @@ export default function BugReport() {
             closeIcon={null}
             description={
               <div>
-                We value your feedback! If you've encountered a bug or issue
+                We value your feedback! If you&apos;ve encountered a bug or issue
                 while using our platform, please help us improve by reporting
                 it. Your input is invaluable in making our service better.
               </div>

src/pages/LandingPage.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { IconCrossStroked } from "@douyinfe/semi-icons";
 import Navbar from "../components/Navbar";

src/pages/Templates.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import logo_light from "../assets/logo_light_46.png";
 import { Link } from "react-router-dom";
 import { Tabs, TabPane } from "@douyinfe/semi-ui";
@@ -101,6 +101,7 @@ function Thumbnail({ diagram }) {
           })}
           {diagram.relationships?.map((e, i) => (
             <path
+              key={i}
               d={calcPath(e.startX, e.endX, e.startY, e.endY, zoom)}
               fill="none"
               strokeWidth={1}
@@ -115,7 +116,7 @@ function Thumbnail({ diagram }) {
             const fold = 24 * zoom;
             const h = n.height * zoom;
             return (
-              <g>
+              <g key={n.id}>
                 <path
                   d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${
                     x + w
@@ -189,7 +190,7 @@ export default function Templates() {
             </div>
             <div className="text-sm text-neutral-700">
               A compilation of database entity relationship diagrams to give you
-              a quick start or inspire your application's architecture.
+              a quick start or inspire your application&apos;s architecture.
             </div>
           </div>
           <Tabs>

src/pages/editor.jsx

@@ -1,4 +1,4 @@
-import React, { useState, createContext, useEffect } from "react";
+import { useState, createContext, useEffect } from "react";
 import Sidebar from "../components/Sidebar";
 import ControlPanel from "../components/ControlPanel";
 import Canvas from "../components/Canvas";
@@ -29,7 +29,7 @@ export const MessageContext = createContext();
 export const BotMessageContext = createContext();
 export const TypeContext = createContext();
 
-export default function Editor(props) {
+export default function Editor() {
   const [id, setId] = useState(0);
   const [title, setTitle] = useState("Untitled Diagram");
   const [state, setState] = useState(State.NONE);

src/pages/login.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import logo from "../assets/logo_light_46.png";
 import { IconEyeClosedSolid, IconEyeOpened } from "@douyinfe/semi-icons";
@@ -19,14 +19,14 @@ export default function Login() {
 
   const onSubmit = async () => {
     await axios
-      .post(`${process.env.REACT_APP_BACKEND_URL}/login`, {
+      .post(`${import.meta.env.VITE_API_BACKEND_URL}/login`, {
         email: formValues.email,
         password: formValues.password,
       })
       .then((res) => {
         console.log(res);
       })
-      .catch((err) => {});
+      .catch(() => {});
   };
 
   useEffect(() => {
@@ -90,7 +90,7 @@ export default function Login() {
             Log in
           </button>
           <div className="text-sm text-center">
-            Don't have an account?
+            Don&apos;t have an account?
             <Link
               to="/signup"
               className="ms-2 font-semibold text-indigo-700 hover:underline"

src/pages/shortcuts.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import logo_light from "../assets/logo_light_46.png";
 import logo_dark from "../assets/logo_dark_46.png";
 import { AutoComplete, Button } from "@douyinfe/semi-ui";
@@ -144,7 +144,7 @@ export default function Shortcuts() {
                 <div className="p-3 popover-theme">No shortcuts found</div>
               }
               onChange={(v) => setValue(v)}
-              onSelect={(v) => {}}
+              onSelect={() => {}}
             ></AutoComplete>
           </div>
         </div>
@@ -164,7 +164,7 @@ export default function Shortcuts() {
             <div className="p-3 popover-theme">No shortcuts found</div>
           }
           onChange={(v) => setValue(v)}
-          onSelect={(v) => {}}
+          onSelect={() => {}}
         ></AutoComplete>
       </div>
       <div className="grid sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 my-6 mx-20 sm:mx-6 gap-5 select-none">

src/pages/signup.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import logo from "../assets/logo_light_46.png";
 import ReCAPTCHA from "react-google-recaptcha";
@@ -24,7 +24,7 @@ export default function SignUp() {
 
   const onSubmit = async () => {
     await axios
-      .post(`${process.env.REACT_APP_BACKEND_URL}/signup`, {
+      .post(`${import.meta.env.VITE_API_BACKEND_URL}/signup`, {
         username: formValues.username,
         email: formValues.email,
         password: formValues.password,
@@ -32,7 +32,7 @@ export default function SignUp() {
       .then((res) => {
         console.log(res);
       })
-      .catch((err) => {});
+      .catch(() => {});
   };
 
   useEffect(() => {
@@ -109,7 +109,9 @@ export default function SignUp() {
               bordered
               style={{ marginBottom: "12px" }}
               title={
-                <div className="font-bold text-sm">Password isn't secure</div>
+                <div className="font-bold text-sm">
+                  Password isn&apos;t secure
+                </div>
               }
               description={
                 <div className="w-[236px]">
@@ -124,7 +126,7 @@ export default function SignUp() {
             ></Banner>
           )}
           <ReCAPTCHA
-            sitekey={process.env.REACT_APP_CAPTCHA_SITE_KEY}
+            sitekey={import.meta.env.VITE_API_CAPTCHA_SITE_KEY}
             onChange={() =>
               setFormValues((prev) => ({ ...prev, captcha: true }))
             }

src/pages/survey.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback, useMemo } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
 import logo_light from "../assets/logo_light_46.png";
 import logo_dark from "../assets/logo_dark_46.png";
 import {
@@ -64,12 +64,12 @@ function SurveyForm({ theme }) {
   };
 
   const onSubmit = useCallback(
-    (e) => {
+    () => {
       setLoading(true);
       editor.update(() => {
         const sendMail = async () => {
           await axios
-            .post(`${process.env.REACT_APP_BACKEND_URL}/send_email`, {
+            .post(`${import.meta.env.VITE_API_BACKEND_URL}/send_email`, {
               subject: `[SURVEY]: ${new Date().toDateString()}`,
               message: `${Object.keys(form).map(
                 (k) => `<div>${questions[k]}</div><div>${form[k]}</div>`
@@ -77,12 +77,12 @@ function SurveyForm({ theme }) {
                 editor
               )}`,
             })
-            .then((res) => {
+            .then(() => {
               Toast.success("Thanks for the feedback!");
               editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
               resetForm();
             })
-            .catch((err) => {
+            .catch(() => {
               Toast.error("Oops! Something went wrong.");
               setLoading(false);
             });