Join page

src/app/chat/page.tsx

@@ -5,7 +5,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { getCookie } from 'cookies-next';
 import styles from "./styles.module.css";
 import Markdown from "react-markdown";
-import { Conditional } from "@/components/utility/Conditional";
+import { Conditional, ConditionalNull } from "@/components/utility/Conditional";
 
 type MessageType = {
   channel: string,
@@ -84,6 +84,8 @@ export default function Home() {
   const socketObject = useMemo(() => io(socketLocation), []);
   const socket = socketObject;
 
+  const token = getCookie('token');
+
   const [ connected, setConnected ] = useState(false);
   const [ error, _setError ] = useState("");
   const [ whoami, _setWhoAmI ] = useState<{[key:string]:any}>({});
@@ -108,8 +110,6 @@ export default function Home() {
   const messagesRef = useRef(messages);
   const setMessages = (x:any) => {messagesRef.current = x;_setMessages(x);};
 
-  const [ isLoading, setIsLoading ] = useState(false);
-
   /* SECT: LHUA; Lord help us all these ones */
   const [ textBox, setTextBox ] = useState<React.ReactNode>(null);
   let Message = useRef<(message:MessageType) => React.ReactNode>(() => <></>);
@@ -166,8 +166,6 @@ export default function Home() {
 
     function onConnect() {
       setConnected(true);
-
-      const token = getCookie('token');
       if (token != null)
         socket.emit('SIG_CHAT_JOIN', { token }, joinChatRes);
 
@@ -363,6 +361,32 @@ export default function Home() {
     }
   }
 
+  let [ messageLayout, setMessageLayout ] = useState<React.ReactNode>();
+  useEffect(() => {
+    if (messages.length > 0)
+      setMessageLayout(messages.map(Message.current));
+    else if (whoami.admin || channels.find(x => x.name == channel)?.writable)
+      setMessageLayout(
+        <div style={{textAlign: "center"}}>
+          <h1>This channel is empty.</h1>
+          <p>Use the bar below to post something.</p>
+        </div>
+      );
+    else if (token == null)
+      setMessageLayout(<>
+        <h2>Join abtmtr.link Chat</h2>
+        <p>If you'd like to participate in the chat, you should join!</p>
+        <p><small>To join with the Fediverse, enter your instance domain.<br />
+        To join with GitHub, enter "github.com".<br />
+        To join with Discord, enter "discord.com".</small></p>
+        <form action="/jams/oauth/login">
+          <input name="instance" placeholder="Domain (e.g. &quot;social.besties.house&quot; or &quot;woem.men&quot;)" type="text" />
+          <input type="submit" />
+        </form>
+        <p><small>Tested on Discord, GitHub, Mastodon, GoToSocial, Pleroma, and Misskey</small></p>
+      </>);
+  }, [messages]);
+
   return (
     <ChatLayout 
       title="Chat" 
@@ -378,15 +402,7 @@ export default function Home() {
       }} 
       footerChildren={textBox}
     >
-      {messages.length > 0 && !isLoading ? 
+      {messageLayout}
-        messages.map(Message.current) 
-      : (whoami.admin || channels.find(x => x.name == channel)?.writable ?
-          <div style={{textAlign: "center"}}>
-            <h1>This channel is empty.</h1>
-            <p>Use the bar below to post something.</p>
-          </div>
-        : <></>)
-      }
     </ChatLayout>
   )
 }