refactor: more TS code

src/routes/onboarding/steps/adminAccount.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, FC } from "react";
 import styled from "styled-components";
 import toast from "react-hot-toast";
 import { useDispatch } from "react-redux";
@@ -62,8 +62,11 @@ const StyledWrapper = styled.div`
     margin-top: 24px;
   }
 `;
-
-export default function AdminAccount({ serverName, nextStep }) {
+type Props = {
+  serverName: string;
+  nextStep: () => void;
+};
+const AdminAccount: FC<Props> = ({ serverName, nextStep }) => {
   const dispatch = useDispatch();
 
   const [createAdmin, { isLoading: isSigningUp, error: signUpError }] = useCreateAdminMutation();
@@ -89,15 +92,13 @@ export default function AdminAccount({ serverName, nextStep }) {
 
   // After logged in
   useEffect(() => {
-    if (isLoggedIn) {
+    if (isLoggedIn && serverData) {
       dispatch(updateInitialized(true));
-      setTimeout(() => {
-        // Set server name
-        updateServer({
-          ...serverData,
-          name: serverName
-        });
-      }, 0);
+      // Set server name
+      updateServer({
+        ...serverData,
+        name: serverName
+      });
     }
   }, [isLoggedIn]);
 
@@ -163,4 +164,5 @@ export default function AdminAccount({ serverName, nextStep }) {
       </StyledButton>
     </StyledWrapper>
   );
-}
+};
+export default AdminAccount;

src/routes/onboarding/steps/donePage.tsx

@@ -57,7 +57,7 @@ const StyledWrapper = styled.div`
   }
 `;
 
-export default function DonePage({ serverName }) {
+export default function DonePage({ serverName }: { serverName: string }) {
   const navigate = useNavigate();
 
   return (

src/routes/onboarding/steps/inviteLink.tsx

@@ -73,7 +73,7 @@ const StyledWrapper = styled.div`
   }
 `;
 
-export default function InviteLink({ nextStep }) {
+export default function InviteLink({ nextStep }: { nextStep: () => void }) {
   const { link, linkCopied, copyLink } = useInviteLink();
 
   return (

src/routes/onboarding/steps/serverName.tsx

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import styled from "styled-components";
 import toast from "react-hot-toast";
 import StyledInput from "../../../common/component/styled/Input";
@@ -44,8 +45,12 @@ const StyledWrapper = styled.div`
     margin-top: 24px;
   }
 `;
-
-export default function ServerName({ serverName, setServerName, nextStep }) {
+type Props = {
+  serverName: string;
+  setServerName: (name: string) => void;
+  nextStep: () => void;
+};
+const ServerName: FC<Props> = ({ serverName, setServerName, nextStep }) => {
   return (
     <StyledWrapper>
       <span className="primaryText">Create a new server</span>
@@ -73,4 +78,5 @@ export default function ServerName({ serverName, setServerName, nextStep }) {
       </StyledButton>
     </StyledWrapper>
   );
-}
+};
+export default ServerName;

src/routes/onboarding/steps/welcomePage.tsx

@@ -43,7 +43,7 @@ const StyledWrapper = styled.div`
   }
 `;
 
-export default function WelcomePage({ nextStep }) {
+export default function WelcomePage({ nextStep }: { nextStep: () => void }) {
   return (
     <StyledWrapper>
       <span className="primaryText">Welcome to your VoceChat!</span>

src/routes/onboarding/steps/whoCanSignUp.tsx

@@ -4,6 +4,7 @@ import styled from "styled-components";
 import StyledRadio from "../../../common/component/styled/Radio";
 import StyledButton from "../../../common/component/styled/Button";
 import { useGetLoginConfigQuery, useUpdateLoginConfigMutation } from "../../../app/services/server";
+import { WhoCanSignUp } from "../../../types/server";
 
 const StyledWrapper = styled.div`
   height: 100%;
@@ -38,11 +39,11 @@ const StyledWrapper = styled.div`
   }
 `;
 
-export default function WhoCanSignUp({ nextStep }) {
+export default function SignUpSetting({ nextStep }: { nextStep: () => void }) {
   const { data: loginConfig } = useGetLoginConfigQuery();
   const [updateLoginConfig, { isSuccess, error }] = useUpdateLoginConfigMutation();
 
-  const [value, setValue] = useState(undefined);
+  const [value, setValue] = useState<WhoCanSignUp>();
 
   // Sync to `value` when `loginConfig` is fetched
   useEffect(() => {