Joining a server should now take you to the customize page by default if it exists.

Author: SupertigerDev

src/chat-api/useJoinServer.ts

@@ -0,0 +1,56 @@
+import RouterEndpoints from "@/common/RouterEndpoints";
+import { createEffect, createSignal } from "solid-js";
+import { useNavigate } from "solid-navigator";
+import useStore from "./store/useStore";
+import {
+  joinPublicServer,
+  joinServerByInviteCode,
+} from "./services/ServerService";
+
+export const useJoinServer = () => {
+  const [serverId, setServerId] = createSignal<string | null>(null);
+  const [joining, setJoining] = createSignal(false);
+
+  const navigate = useNavigate();
+  const store = useStore();
+
+  const cachedServer = () => {
+    return store.servers.get(serverId()!);
+  };
+
+  createEffect(() => {
+    if (joining() && cachedServer()) {
+      navigate(
+        RouterEndpoints.SERVER_MESSAGES(
+          cachedServer()!.id,
+          cachedServer()!._count?.welcomeQuestions
+            ? "welcome"
+            : cachedServer()!.defaultChannelId
+        )
+      );
+    }
+  });
+
+  const joinByInviteCode = async (code: string, serverId: string) => {
+    if (joining()) return;
+    setServerId(serverId);
+    setJoining(true);
+
+    await joinServerByInviteCode(code).catch((err) => {
+      alert(err.message);
+      setJoining(false);
+    });
+  };
+  const joinPublicById = async (serverId: string) => {
+    if (joining()) return;
+    setServerId(serverId);
+    setJoining(true);
+
+    await joinPublicServer(serverId).catch((err) => {
+      alert(err.message);
+      setJoining(false);
+    });
+  };
+
+  return { joining, joinPublicById, joinByInviteCode };
+};

src/components/explore/ExploreServers.tsx

@@ -1,9 +1,7 @@
 import { RawPublicServer } from "@/chat-api/RawData";
 import {
   BumpPublicServer,
-  getPublicServer,
   getPublicServers,
-  joinPublicServer,
   PublicServerFilter,
   PublicServerSort,
 } from "@/chat-api/services/ServerService";
@@ -33,6 +31,7 @@ import { Skeleton } from "../ui/skeleton/Skeleton";
 import { classNames, cn } from "@/common/classNames";
 import { MetaTitle } from "@/common/MetaTitle";
 import Input from "../ui/input/Input";
+import { useJoinServer } from "@/chat-api/useJoinServer";
 
 const Container = styled("div")`
   display: flex;
@@ -324,10 +323,9 @@ function PublicServerItem(props: {
 }) {
   const [t] = useTransContext();
   const server = props.publicServer.server!;
-  const [joinClicked, setJoinClicked] = createSignal(false);
+  const { joinPublicById, joining: joinClicked } = useJoinServer();
   const [hovered, setHovered] = createSignal(false);
   const store = useStore();
-  const navigate = useNavigate();
 
   const { createPortal } = useCustomPortal();
 
@@ -337,11 +335,7 @@ function PublicServerItem(props: {
 
   const joinServerClick = async () => {
     if (joinClicked()) return;
-    setJoinClicked(true);
-    await joinPublicServer(props.publicServer.serverId).catch((err) => {
-      alert(err.message);
-      setJoinClicked(false);
-    });
+    await joinPublicById(props.publicServer.serverId);
   };
 
   const bumpClick = () => {
@@ -368,17 +362,6 @@ function PublicServerItem(props: {
     ));
   };
 
-  createEffect(() => {
-    if (joinClicked() && cacheServer()) {
-      navigate(
-        RouterEndpoints.SERVER_MESSAGES(
-          cacheServer()!.id,
-          cacheServer()!.defaultChannelId
-        )
-      );
-    }
-  });
-
   const bumpedUnder24Hours = () => {
     const millisecondsSinceLastBump =
       new Date().getTime() - props.publicServer.bumpedAt;

src/components/markup/Emoji.tsx

@@ -5,18 +5,15 @@ import LegacyModal from "../ui/legacy-modal/LegacyModal";
 import { css, styled } from "solid-styled-components";
 import Text from "../ui/Text";
 import { Show, createEffect, createSignal, onMount } from "solid-js";
-import {
-  joinPublicServer,
-  joinServerByInviteCode,
-  publicServerByEmojiId,
-} from "@/chat-api/services/ServerService";
+import { publicServerByEmojiId } from "@/chat-api/services/ServerService";
 import { RawPublicServer } from "@/chat-api/RawData";
 import Avatar from "../ui/Avatar";
 import Button from "../ui/Button";
 import useStore from "@/chat-api/store/useStore";
 import { ServerVerifiedIcon } from "../servers/ServerVerifiedIcon";
 import { useNavigate } from "solid-navigator";
 import RouterEndpoints from "@/common/RouterEndpoints";
+import { useJoinServer } from "@/chat-api/useJoinServer";
 
 export function Emoji(props: {
   clickable?: boolean;
@@ -187,7 +184,7 @@ function PublicServer(props: {
   close: () => void;
 }) {
   const [hovered, setHovered] = createSignal(false);
-  const [joining, setJoining] = createSignal(false);
+  const { joinPublicById, joining } = useJoinServer();
   const navigate = useNavigate();
   const { servers } = useStore();
 
@@ -200,32 +197,15 @@ function PublicServer(props: {
   const server = () => props.publicServer?.server! || servers.get(serverId()!);
   const isInServer = () => servers.get(serverId()!);
 
-  createEffect(() => {
-    if (joining() && isInServer()) {
-      props.close();
-      navigate(
-        RouterEndpoints.SERVER_MESSAGES(
-          server()!.id,
-          server()!.defaultChannelId
-        )
-      );
-    }
-  });
-
   const joinOrVisitServer = () => {
     if (isInServer())
       return navigate(
         RouterEndpoints.SERVER_MESSAGES(server().id, server().defaultChannelId)
       );
 
     if (joining()) return;
-    setJoining(true);
 
-    joinPublicServer(serverId()!)
-      .catch((err) => {
-        alert(err.message);
-      })
-      .finally(() => setJoining(false));
+    joinPublicById(serverId()!);
   };
 
   return (

src/components/message-pane/message-item/MessageItem.tsx

@@ -57,7 +57,6 @@ import { DangerousLinkModal } from "@/components/ui/DangerousLinkModal";
 import { useResizeObserver } from "@/common/useResizeObserver";
 import {
   ServerWithMemberCount,
-  joinServerByInviteCode,
   serverDetailsByInviteCode,
 } from "@/chat-api/services/ServerService";
 import { ServerVerifiedIcon } from "@/components/servers/ServerVerifiedIcon";
@@ -88,6 +87,7 @@ import { ImagePreviewModal } from "@/components/ui/ImagePreviewModal";
 import { ButtonsEmbed } from "./ButtonsEmbed";
 import { Tooltip } from "@/components/ui/Tooltip";
 import { getSystemMessage } from "@/common/SystemMessage";
+import { useJoinServer } from "@/chat-api/useJoinServer";
 
 const DeleteMessageModal = lazy(
   () => import("../message-delete-modal/MessageDeleteModal")
@@ -1132,9 +1132,10 @@ function ServerInviteEmbed(props: { code: string }) {
   const [invite, setInvite] = createSignal<
     ServerWithMemberCount | null | false
   >(null);
-  const [joining, setJoining] = createSignal(false);
   const [hovered, setHovered] = createSignal(false);
 
+  const { joinByInviteCode, joining } = useJoinServer();
+
   onMount(async () => {
     if (inviteCache.has(props.code))
       return setInvite(inviteCache.get(props.code)!);
@@ -1149,17 +1150,6 @@ function ServerInviteEmbed(props: { code: string }) {
     return servers.get(_invite.id);
   };
 
-  createEffect(() => {
-    if (joining() && cachedServer()) {
-      navigate(
-        RouterEndpoints.SERVER_MESSAGES(
-          cachedServer()!.id,
-          cachedServer()!.defaultChannelId
-        )
-      );
-    }
-  });
-
   const joinOrVisitServer = () => {
     const _invite = invite();
     if (!_invite) return;
@@ -1169,13 +1159,8 @@ function ServerInviteEmbed(props: { code: string }) {
       );
 
     if (joining()) return;
-    setJoining(true);
 
-    joinServerByInviteCode(props.code)
-      .catch((err) => {
-        alert(err.message);
-      })
-      .finally(() => setJoining(false));
+    joinByInviteCode(props.code, _invite.id);
   };
 
   return (

src/components/moderation-pane/ServerPage.tsx

@@ -29,9 +29,9 @@ import DeleteServersModal from "./DeleteServersModal";
 import { formatTimestamp } from "@/common/date";
 import UndoServerDeleteModal from "./UndoServerDeleteModal";
 import { useModerationServerDeletedListener } from "@/common/GlobalEvents";
-import { joinPublicServer } from "@/chat-api/services/ServerService";
 import useStore from "@/chat-api/store/useStore";
 import RouterEndpoints from "@/common/RouterEndpoints";
+import { useJoinServer } from "@/chat-api/useJoinServer";
 
 export default function ServerPage() {
   const params = useParams<{ serverId: string }>();
@@ -253,8 +253,7 @@ const ServerBannerDetails = styled(FlexColumn)`
 const PublicServerBlock = (props: {
   server: RawServer & { publicServer: RawPublicServer };
 }) => {
-  const [joinClicked, setJoinClicked] = createSignal(false);
-  const navigate = useNavigate();
+  const { joinPublicById, joining: joinClicked } = useJoinServer();
   const store = useStore();
   const [isPinned, setIsPinned] = createSignal(
     !!props.server.publicServer.pinnedAt
@@ -263,12 +262,8 @@ const PublicServerBlock = (props: {
   const cacheServer = () => store.servers.get(props.server.id);
 
   const onClick = async () => {
-    setJoinClicked(true);
     if (cacheServer()) return;
-    await joinPublicServer(props.server.id).catch((err) => {
-      alert(err.message);
-      setJoinClicked(false);
-    });
+    await joinPublicById(props.server.id);
   };
   const onPinClicked = async () => {
     if (isPinned())
@@ -280,17 +275,6 @@ const PublicServerBlock = (props: {
       .catch((err) => alert(err.message));
   };
 
-  createEffect(() => {
-    if (joinClicked() && cacheServer()) {
-      navigate(
-        RouterEndpoints.SERVER_MESSAGES(
-          cacheServer()!.id,
-          cacheServer()!.defaultChannelId
-        )
-      );
-    }
-  });
-
   return (
     <>
       <SettingsBlock icon="public" label="Public Server">

src/components/servers/explore-pane/ExploreServerPane.tsx

@@ -1,6 +1,5 @@
 import styles from "./styles.module.scss";
 import {
-  joinServerByInviteCode,
   serverDetailsByInviteCode,
   ServerWithMemberCount,
 } from "@/chat-api/services/ServerService";
@@ -25,6 +24,7 @@ import { avatarUrl, bannerUrl } from "@/chat-api/store/useServers";
 import { Banner } from "@/components/ui/Banner";
 import { useWindowProperties } from "@/common/useWindowProperties";
 import { MetaTitle } from "@/common/MetaTitle";
+import { useJoinServer } from "@/chat-api/useJoinServer";
 
 export default function ExploreServerPane() {
   const params = useParams();
@@ -84,31 +84,17 @@ const ServerPage = (props: {
   inviteCode?: string;
 }) => {
   const { servers } = useStore();
-  const navigate = useNavigate();
-  const [joinClicked, setJoinClicked] = createSignal(false);
   const { server } = props;
   const { width } = useWindowProperties();
+  const { joinByInviteCode, joining: joinClicked } = useJoinServer();
 
   const cacheServer = () => servers.get(server.id);
 
-  createEffect(() => {
-    if (joinClicked() && cacheServer()) {
-      navigate(
-        RouterEndpoints.SERVER_MESSAGES(
-          cacheServer()!.id,
-          cacheServer()!.defaultChannelId
-        )
-      );
-    }
-  });
-
   const joinServerClick = () => {
     if (joinClicked()) return;
     if (!props.inviteCode) return;
-    setJoinClicked(true);
-    joinServerByInviteCode(props.inviteCode).catch((err) => {
-      alert(err.message);
-    });
+
+    joinByInviteCode(props.inviteCode, server.id);
   };
 
   const isLoggedIn = getStorageString(StorageKeys.USER_TOKEN, null);
@@ -152,7 +138,6 @@ const ServerPage = (props: {
         </Match>
         <Match when={!cacheServer()}>
           <Button
-            margin={0}
             class={styles.joinButton}
             iconName="login"
             label="Join Server"