fix: get onboarding working

src/app/services/base.query.js

@@ -18,8 +18,7 @@ const whiteList = [
  "getMetamaskNonce",
  "renew",
  "getInitialized",
- "createAdmin",
+ "createAdmin"
- "updateLoginConfig"
 ];
 const baseQuery = fetchBaseQuery({
  baseUrl: BASE_URL,

src/app/services/server.js

@@ -178,7 +178,7 @@ export const serverApi = createApi({
   }),
   createAdmin: builder.mutation({
    query: (data) => ({
-    url: `/admin/system/createAdmin`,
+    url: `/admin/system/create_admin`,
     method: "POST",
     body: data
    })

src/common/component/RequireInitialized.js

@@ -1,7 +1,7 @@
 import { Navigate } from "react-router-dom";
 import { useGetInitializedQuery } from "../../app/services/server";
 
-export default function RequireInitialized({ children, redirectTo = "/" }) {
+export default function RequireInitialized({ children, redirectTo = "/onboarding" }) {
  const { data } = useGetInitializedQuery();
  console.log("initialized?", data);
  return data === false ? <Navigate to={redirectTo} replace /> : children;

src/routes/onboarding/index.js

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { Navigate } from "react-router-dom";
+import { Helmet } from "react-helmet";
 import WelcomeStep from "./steps/1-welcome";
-import SpaceNameStep from "./steps/2-spaceName";
+import ServerNameStep from "./steps/2-serverName";
 import AdminCredentialsStep from "./steps/3-adminCredentials";
 import InviteRuleStep from "./steps/4-inviteRule";
 import InviteLinkStep from "./steps/5-inviteLink";
@@ -11,23 +12,28 @@ import StyledOnboardingPage from "./styled";
 export default function OnboardingPage() {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
-  spaceName: ""
+  serverName: ""
  });
- const props = { step, setStep, data, setData };
+ const props = { setStep, data, setData };
 
  return (
-  <StyledOnboardingPage>
+  <>
-   <div className="horizontalBox">
+   <Helmet>
-    <div className="verticalBox">
+    <title>Rustchat Setup</title>
-     {step === 0 && <WelcomeStep {...props} />}
+   </Helmet>
-     {step === 1 && <SpaceNameStep {...props} />}
+   <StyledOnboardingPage>
-     {step === 2 && <AdminCredentialsStep {...props} />}
+    <div className="horizontalBox">
-     {step === 3 && <InviteRuleStep {...props} />}
+     <div className="verticalBox">
-     {step === 4 && <InviteLinkStep {...props} />}
+      {step === 0 && <WelcomeStep {...props} />}
-     {step === 5 && <CompletedStep {...props} />}
+      {step === 1 && <ServerNameStep {...props} />}
-     {step === 6 && <Navigate replace to="/" />}
+      {step === 2 && <AdminCredentialsStep {...props} />}
+      {step === 3 && <InviteRuleStep {...props} />}
+      {step === 4 && <InviteLinkStep {...props} />}
+      {step === 5 && <CompletedStep {...props} />}
+      {step === 6 && <Navigate replace to="/" />}
+     </div>
     </div>
-   </div>
+   </StyledOnboardingPage>
-  </StyledOnboardingPage>
+  </>
  );
 }

src/routes/onboarding/steps/1-welcome.js

@@ -10,14 +10,14 @@ const StyledFirstStep = styled.div`
  align-items: center;
 `;
 
-export default function WelcomeStep({ step, setStep }) {
+export default function WelcomeStep({ setStep }) {
  return (
   <StyledFirstStep>
    <span className="primaryText">Welcome to your Rustchat!</span>
    <span className="secondaryText">
     Everything in this space is owned by you. Let’s set up your space!
    </span>
-   <StyledButton className="startButton" onClick={() => setStep(step + 1)}>
+   <StyledButton className="startButton" onClick={() => setStep((prev) => prev + 1)}>
     <img src={PlayIcon} alt="play icon" />
     <span>Start</span>
    </StyledButton>

src/routes/onboarding/steps/2-serverName.js

@@ -19,7 +19,7 @@ const StyledSpaceNameStep = styled.div`
  }
 `;
 
-export default function SpaceNameStep({ step, setStep, data, setData }) {
+export default function ServerNameStep({ setStep, data, setData }) {
  return (
   <StyledSpaceNameStep>
    <span className="primaryText">Create a new server</span>
@@ -29,11 +29,11 @@ export default function SpaceNameStep({ step, setStep, data, setData }) {
    <StyledInput
     className="input"
     placeholder="Enter server name"
-    value={data.spaceName}
+    value={data.serverName}
     onChange={(e) =>
      setData({
       ...data,
-      spaceName: e.target.value
+      serverName: e.target.value
      })
     }
    />
@@ -41,11 +41,11 @@ export default function SpaceNameStep({ step, setStep, data, setData }) {
     className="button"
     onClick={() => {
      // Verification for space name
-     if (data.spaceName === "") {
+     if (data.serverName === "") {
       toast.error("Please enter server name!");
       return;
      }
-     setStep(step + 1);
+     setStep((prev) => prev + 1);
     }}
    >
     Create Server

src/routes/onboarding/steps/3-adminCredentials.js

@@ -1,10 +1,17 @@
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 import toast from "react-hot-toast";
+import { useDispatch } from "react-redux";
 import StyledInput from "../../../common/component/styled/Input";
 import StyledButton from "../../../common/component/styled/Button";
-import { useCreateAdminMutation } from "../../../app/services/server";
+import {
+ useCreateAdminMutation,
+ useGetInitializedQuery,
+ useGetServerQuery,
+ useUpdateServerMutation
+} from "../../../app/services/server";
 import { useLoginMutation } from "../../../app/services/auth";
+import { setAuthData } from "../../../app/slices/auth.data";
 
 const StyledAdminCredentialsStep = styled.div`
  height: 100%;
@@ -22,13 +29,18 @@ const StyledAdminCredentialsStep = styled.div`
  }
 `;
 
-export default function AdminCredentialsStep({ step, setStep }) {
+export default function AdminCredentialsStep({ data, setStep }) {
+ const dispatch = useDispatch();
+
+ const [createAdmin, { isLoading: isSigningUp, error: signUpError }] = useCreateAdminMutation();
  const [
-  createAdmin,
+  login,
-  { isLoading: isSignUpLoading, isSuccess: isSignUpSuccess, error: signUpError }
+  { isLoading: isLoggingIn, isSuccess: isLoggedIn, error: loginError, data: loginData }
- ] = useCreateAdminMutation();
+ ] = useLoginMutation();
- const [login, { isLoading: isLoginLoading, isSuccess: isLoginSuccess, error: loginError }] =
+ const { refetch: refetchInitialized } = useGetInitializedQuery();
-  useLoginMutation();
+ const { data: serverData } = useGetServerQuery();
+ const [updateServer, { isLoading: isUpdatingServer, isSuccess: isUpdatedServer }] =
+  useUpdateServerMutation();
 
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
@@ -39,16 +51,32 @@ export default function AdminCredentialsStep({ step, setStep }) {
   if (signUpError === undefined) return;
   toast.error(`Failed to sign up: ${signUpError.data}`);
  }, [signUpError]);
-
  useEffect(() => {
   if (loginError === undefined) return;
   toast.error(`Login failed: ${loginError.data}`);
  }, [loginError]);
 
- // Increment `step` when both signing up and logging in have completed
+ // After logged in
  useEffect(() => {
-  if (isSignUpSuccess && isLoginSuccess) setStep(step + 1);
+  if (isLoggedIn && loginData) {
- }, [isSignUpSuccess, isLoginSuccess]);
+   // Update local auth data
+   dispatch(setAuthData(loginData));
+   // Update initialized state
+   refetchInitialized();
+   // Set server name
+   updateServer({
+    ...serverData,
+    name: data.serverName
+   });
+  }
+ }, [isLoggedIn, loginData]);
+
+ // After updated server
+ useEffect(() => {
+  if (isUpdatedServer) {
+   setStep((prev) => prev + 1);
+  }
+ }, [isUpdatedServer]);
 
  return (
   <StyledAdminCredentialsStep>
@@ -101,7 +129,7 @@ export default function AdminCredentialsStep({ step, setStep }) {
      });
     }}
    >
-    {!(isSignUpLoading || isLoginLoading) ? "Sign Up" : "..."}
+    {!(isSigningUp || isLoggingIn || isUpdatingServer) ? "Sign Up" : "..."}
    </StyledButton>
   </StyledAdminCredentialsStep>
  );

src/routes/onboarding/steps/4-inviteRule.js

@@ -17,11 +17,11 @@ const StyledInviteRuleStep = styled.div`
  }
 `;
 
-export default function InviteRuleStep({ step, setStep }) {
+export default function InviteRuleStep({ setStep }) {
  const { data: loginConfig } = useGetLoginConfigQuery();
  const [updateLoginConfig, { isSuccess, error }] = useUpdateLoginConfigMutation();
 
- const [value, setValue] = useState(null);
+ const [value, setValue] = useState(0);
 
  // Display error
  useEffect(() => {
@@ -31,7 +31,7 @@ export default function InviteRuleStep({ step, setStep }) {
 
  // Increment `step` when updating has completed
  useEffect(() => {
-  if (isSuccess) setStep(step + 1);
+  if (isSuccess) setStep((prev) => prev + 1);
  }, [isSuccess]);
 
  return (
@@ -41,18 +41,18 @@ export default function InviteRuleStep({ step, setStep }) {
    <StyledRadio
     options={["Everyone", "Invitation link only"]}
     value={value}
-    onChange={(v) => {
+    onChange={async (v) => {
      setValue(v);
      if (loginConfig !== undefined) {
       const whoCanSignUp = ["EveryOne", "InvitationOnly"][v];
-      updateLoginConfig({
+      await updateLoginConfig({
        ...loginConfig,
        who_can_sign_up: whoCanSignUp
       });
      }
     }}
    />
-   <StyledButton className="button border_less ghost" onClick={() => setStep(step + 1)}>
+   <StyledButton className="button border_less ghost" onClick={() => setStep((prev) => prev + 1)}>
     Skip
    </StyledButton>
   </StyledInviteRuleStep>

src/routes/onboarding/steps/5-inviteLink.js

@@ -51,7 +51,7 @@ const StyledInviteLinkStep = styled.div`
  }
 `;
 
-export default function InviteLinkStep({ step, setStep }) {
+export default function InviteLinkStep({ setStep }) {
  const { link, linkCopied, copyLink } = useInviteLink();
 
  return (
@@ -65,7 +65,7 @@ export default function InviteLinkStep({ step, setStep }) {
      {linkCopied ? "Copied" : `Copy`}
     </StyledButton>
    </div>
-   <StyledButton className="button border_less ghost" onClick={() => setStep(step + 1)}>
+   <StyledButton className="button border_less ghost" onClick={() => setStep((prev) => prev + 1)}>
     Skip
    </StyledButton>
   </StyledInviteLinkStep>

src/routes/onboarding/steps/6-completed.js

@@ -26,16 +26,16 @@ const StyledLastStep = styled.div`
  }
 `;
 
-export default function CompletedStep({ data, step, setStep }) {
+export default function CompletedStep({ data, setStep }) {
  return (
   <StyledLastStep>
-   <span className="primaryText">Welcome to {data.spaceName}</span>
+   <span className="primaryText">Welcome to {data.serverName}</span>
    <span className="secondaryText">Proudly presented by Rustchat</span>
    <span className="tip">
     More settings, including domain resolution, privileges, securities, and invites are available in{" "}
     <span className="strong">Settings</span>
    </span>
-   <StyledButton className="startButton" onClick={() => setStep(step + 1)}>
+   <StyledButton className="startButton" onClick={() => setStep((prev) => prev + 1)}>
     <img src={PlayIcon} alt="play icon" />
     <span>Start</span>
    </StyledButton>