Add real time messaging

src/components/CommunityBar/CommunityBar.tsx

@@ -1,5 +1,6 @@
 import type { Component } from "solid-js";
 import { ICommunityBarProps } from "./types";
+import { SettingsIcon } from "../icons";
 
 const CommunityBar: Component<ICommunityBarProps> = (
     props: ICommunityBarProps,
@@ -8,9 +9,17 @@ const CommunityBar: Component<ICommunityBarProps> = (
         <div
             class={`absolute w-full top-0 z-10 bg-cover bg-top bg-no-repeat bg-[url('${props.avatar}')]`}
         >
-            <div class="flex flex-col justify-center bg-stone-800/25 backdrop-blur-md h-16 w-full shadow-bar px-5">
-                <h2 class="text-sm font-bold">{props.name}</h2>
-                <p class="text-xs">{props.description}</p>
+            <div class="flex flex-row justify-between items-center bg-stone-800/25 backdrop-blur-md h-16 shadow-bar pl-5 pr-3">
+                <div class="flex flex-col justify-center">
+                    <h2 class="text-sm font-bold">{props.name}</h2>
+                    <p class="text-xs">{props.description}</p>
+                </div>
+                <div
+                    class="bg-stone-950/25 cursor-pointer rounded-full w-10 h-10 p-2 hover:bg-stone-950/75"
+                    onClick={props.onSettingsClick}
+                >
+                    <SettingsIcon />
+                </div>
             </div>
         </div>
     );

src/components/CommunityBar/types.ts

@@ -3,6 +3,7 @@ interface ICommunityBarProps {
     name?: string;
     description?: string;
     avatar?: string;
+    onSettingsClick?: () => void;
 }
 
 export { type ICommunityBarProps };

src/components/CommunityModal/CommunityModal.tsx

@@ -5,14 +5,19 @@ import { CommunityActionTypes } from "../../store/community";
 import { InviteActionTypes } from "../../store/invite";
 
 const CommunityModal: Component<ICommunityModalProps> = (props) => {
-    const [getCommunityName, setCommunityName] = createSignal<string>("");
-    const [getInviteId, setInviteId] = createSignal<string>("");
+    const [getCommunityName, setCommunityName] = createSignal("");
+    const [getInviteId, setInviteId] = createSignal("");
 
     const onCreateCommunity = () => {
+        const communityName = getCommunityName();
+        if (!communityName || communityName.trim().length < 1) {
+            return;
+        }
+
         dispatch({
             type: CommunityActionTypes.CREATE_COMMUNITY_START,
             payload: {
-                name: getCommunityName(),
+                name: communityName,
             },
         });
 
@@ -22,9 +27,14 @@ const CommunityModal: Component<ICommunityModalProps> = (props) => {
     };
 
     const onJoinCommunity = () => {
+        const inviteId = getInviteId();
+        if (!inviteId || inviteId.trim().length < 1) {
+            return;
+        }
+
         dispatch({
             type: InviteActionTypes.ACCEPT_INVITE_START,
-            payload: getInviteId(),
+            payload: inviteId,
         });
 
         setInviteId("");
@@ -32,6 +42,12 @@ const CommunityModal: Component<ICommunityModalProps> = (props) => {
         props.onClose?.();
     };
 
+    const handleEnter = (e: KeyboardEvent, callback: () => void) => {
+        if (e.key === "Enter") {
+            callback();
+        }
+    };
+
     const createCommunityHtml = () => (
         <>
             <h3 class="text-lg font-bold text-center mb-6">
@@ -44,6 +60,7 @@ const CommunityModal: Component<ICommunityModalProps> = (props) => {
                         placeholder="Enter name of the new community"
                         value={getCommunityName()}
                         onInput={(e) => setCommunityName(e.currentTarget.value)}
+                        onKeyDown={(e) => handleEnter(e, onCreateCommunity)}
                     />
                 </label>
                 <button
@@ -68,6 +85,7 @@ const CommunityModal: Component<ICommunityModalProps> = (props) => {
                         placeholder="Enter invite ID"
                         value={getInviteId()}
                         onInput={(e) => setInviteId(e.currentTarget.value)}
+                        onKeyDown={(e) => handleEnter(e, onJoinCommunity)}
                     />
                 </label>
                 <button

src/components/CommunitySettingsModal/CommunitySettingsModal.tsx

@@ -0,0 +1,26 @@
+import type { Component } from "solid-js";
+import { ICommunitySettingsModalProps } from "./types";
+
+const CommunitySettingsModal: Component<ICommunitySettingsModalProps> = (
+    props,
+) => {
+    return (
+        <div>
+            <dialog ref={props.dialogRef} class="modal bg-[#00000050]">
+                <div class="modal-box bg-stone-950 rounded-3xl">
+                    <h3 class="text-lg font-bold text-center">
+                        Community Settings
+                    </h3>
+                    <p class="py-4 text-center">Not implemented yet</p>
+                </div>
+                <form
+                    onClick={props.onClose}
+                    method="dialog"
+                    class="modal-backdrop"
+                ></form>
+            </dialog>
+        </div>
+    );
+};
+
+export default CommunitySettingsModal;

src/components/CommunitySettingsModal/index.ts

@@ -0,0 +1,2 @@
+export * from "./CommunitySettingsModal";
+export * from "./types";

src/components/CommunitySettingsModal/types.ts

@@ -0,0 +1,6 @@
+interface ICommunitySettingsModalProps {
+    dialogRef?: (element: HTMLDialogElement) => void;
+    onClose?: () => void;
+}
+
+export { type ICommunitySettingsModalProps };

src/components/MessageBar/MessageBar.tsx

@@ -1,13 +1,31 @@
 import type { Component } from "solid-js";
+import { IMessageBarProps } from "./types";
+
+const MessageBar: Component<IMessageBarProps> = (props: IMessageBarProps) => {
+    const handleEnter = (e: KeyboardEvent) => {
+        if (e.key === "Enter") {
+            props.onSend?.();
+        }
+    };
 
-const MessageBar: Component = () => {
     return (
         <div class="absolute w-full bottom-0 p-4 z-10">
             <div class="bg-stone-800/25 backdrop-blur-lg h-16 shadow-bar p-2 flex flex-row gap-2 rounded-full">
                 <label class="bg-stone-800/50 backdrop-blur-lg input w-full h-full rounded-full focus:border-none outline-none">
-                    <input type="text" placeholder="Send a message..." />
+                    <input
+                        type="text"
+                        placeholder="Send a message..."
+                        value={props.text}
+                        onInput={(e) =>
+                            props.onChangeText?.(e.currentTarget.value)
+                        }
+                        onKeyDown={handleEnter}
+                    />
                 </label>
-                <button class="bg-stone-950/50 backdrop-blur-lg btn btn-neutral h-full rounded-full">
+                <button
+                    class="bg-stone-950/50 backdrop-blur-lg btn btn-neutral h-full rounded-full"
+                    onClick={props.onSend}
+                >
                     Send
                 </button>
             </div>

src/components/MessageBar/index.ts

@@ -1 +1,2 @@
 export * from "./MessageBar";
+export * from "./types";

src/components/MessageBar/types.ts

@@ -0,0 +1,7 @@
+interface IMessageBarProps {
+    text: string;
+    onChangeText?: (text: string) => void;
+    onSend?: () => void;
+}
+
+export { type IMessageBarProps };