chore: rename onboarding files

src/routes/onboarding/index.tsx

@@ -2,12 +2,12 @@ import React, { useState } from "react";
 import { Helmet } from "react-helmet";
 import { useWizard, Wizard } from 'react-use-wizard';
 
-import WelcomePage from "./steps/welcomePage";
-import ServerName from "./steps/serverName";
-import AdminAccount from "./steps/adminAccount";
-import WhoCanSignUp from "./steps/whoCanSignUp";
-import InviteLink from "./steps/inviteLink";
-import DonePage from "./steps/donePage";
+import WelcomePage from "./steps/welcome-page";
+import ServerName from "./steps/server-name";
+import AdminAccount from "./steps/admin-account";
+import WhoCanSignUp from "./steps/who-can-sign-up";
+import InviteLink from "./steps/invite-link";
+import DonePage from "./steps/done-page";
 import steps from "./steps";
 import StyledOnboardingPage from "./styled";
 import { useTranslation } from "react-i18next";

src/routes/onboarding/steps/UpdateFrontendURL.tsx

@@ -0,0 +1,53 @@
+import { useState, useEffect, ChangeEvent } from 'react';
+import { toast } from "react-hot-toast";
+import StyledInput from "../../../common/component/styled/Input";
+import StyledButton from "../../../common/component/styled/Button";
+import { useGetFrontendUrlQuery, useUpdateFrontendUrlMutation } from "../../../app/services/server";
+import InfoIcon from '../../../assets/icons/info.svg';
+import { useTranslation } from 'react-i18next';
+
+
+type Props = {
+    refreshInviteLink: () => void
+}
+
+const UpdateFrontendURL = ({ refreshInviteLink }: Props) => {
+    const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
+    const { t: ct } = useTranslation();
+    const [updateUrl, { isSuccess, isLoading }] = useUpdateFrontendUrlMutation();
+    const { data, isSuccess: getUrlSuccess } = useGetFrontendUrlQuery();
+    const [frontUrl, setFrontUrl] = useState(location.origin);
+    const handleUpdateUrl = (evt: ChangeEvent<HTMLInputElement>) => {
+        setFrontUrl(evt.target.value);
+    };
+    const updateFrontUrl = () => {
+        updateUrl(frontUrl);
+    };
+    useEffect(() => {
+        if (getUrlSuccess && data) {
+            setFrontUrl(data);
+        }
+    }, [getUrlSuccess]);
+    useEffect(() => {
+        if (isSuccess) {
+            refreshInviteLink();
+            toast.success("Update Successfully!");
+        }
+    }, [isSuccess]);
+    return (
+        <div className="absolute left-1/2 -translate-x-1/2 bottom-8 border-2 border-solid border-[#67E3F9] bg-[#F5FEFF] rounded-lg px-2 py-3 flex justify-start gap-4">
+            <InfoIcon />
+            <div className="flex flex-col items-start gap-2">
+                <span className="text-sm text-[#0E7090] mb-1">{t("update_domain_tip")}</span>
+                <div className="w-[400px] rounded flex gap-2">
+                    <StyledInput type={"url"} className="!shadow-none !bg-transparent" placeholder="Frontend URL" value={frontUrl} onChange={handleUpdateUrl} />
+                    <StyledButton disabled={!frontUrl || isLoading} onClick={updateFrontUrl} className="small ">
+                        {ct("action.update")}
+                    </StyledButton>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default UpdateFrontendURL;

src/routes/onboarding/steps/invite-link.tsx

@@ -1,33 +1,18 @@
+
+import { useTranslation } from "react-i18next";
+import { useWizard } from "react-use-wizard";
 import StyledInput from "../../../common/component/styled/Input";
 import StyledButton from "../../../common/component/styled/Button";
 import useInviteLink from "../../../common/hook/useInviteLink";
-import { useTranslation } from "react-i18next";
-import { useWizard } from "react-use-wizard";
-import { ChangeEvent, useState, useEffect } from "react";
-import { useUpdateFrontendUrlMutation } from "../../../app/services/server";
-import { toast } from "react-hot-toast";
-import InfoIcon from '../../../assets/icons/info.svg';
 import ServerVersionChecker from "../../../common/component/ServerVersionChecker";
+import UpdateFrontendURL from "./UpdateFrontendURL";
 
 export default function InviteLink() {
-  const [updateUrl, { isSuccess, isLoading }] = useUpdateFrontendUrlMutation();
   const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
   const { t: ct } = useTranslation();
   const { nextStep } = useWizard();
   const { link, linkCopied, copyLink, generateNewLink } = useInviteLink();
-  const [frontUrl, setFrontUrl] = useState(location.origin);
-  const handleUpdateUrl = (evt: ChangeEvent<HTMLInputElement>) => {
-    setFrontUrl(evt.target.value);
-  };
-  const updateFrontUrl = () => {
-    updateUrl(frontUrl);
-  };
-  useEffect(() => {
-    if (isSuccess) {
-      generateNewLink();
-      toast.success("Update Successfully!");
-    }
-  }, [isSuccess]);
+
   return (
     <div className="h-full flex flex-col items-center justify-center relative">
       <span className="text-2xl mb-2 font-bold">{t("invite_title")}</span>
@@ -42,19 +27,8 @@ export default function InviteLink() {
       <StyledButton className="w-32 h-11 mt-6" onClick={nextStep}>
         {t("done")}
       </StyledButton>
-      <ServerVersionChecker version="0.3.2" empty={true}>
-        <div className="absolute left-1/2 -translate-x-1/2 bottom-8 border-2 border-solid border-[#67E3F9] bg-[#F5FEFF] rounded-lg px-2 py-3 flex justify-start gap-4">
-          <InfoIcon />
-          <div className="flex flex-col items-start gap-2">
-            <span className="text-sm text-[#0E7090] mb-1">{t("update_domain_tip")}</span>
-            <div className="w-[400px] rounded flex gap-2">
-              <StyledInput type={"url"} className="!shadow-none !bg-transparent" placeholder="Frontend URL" value={frontUrl} onChange={handleUpdateUrl} />
-              <StyledButton disabled={!frontUrl || isLoading} onClick={updateFrontUrl} className="small ">
-                {ct("action.update")}
-              </StyledButton>
-            </div>
-          </div>
-        </div>
+      <ServerVersionChecker version="0.3.3" empty={true}>
+        <UpdateFrontendURL refreshInviteLink={generateNewLink} />
       </ServerVersionChecker>
     </div>
   );