Skip to main content

​
useRoomMessage

Hook for creating, updating, and deleting messages in cricket discussion rooms. Supports real-time messaging with validation and error handling. Parameters:
​
roomId
string
required
The ID of the room to manage messages for
Returns:
​
handleCreateRoomMessage
function
Async function to create a new message in the room
​
handleUpdateRoomMessage
function
Async function to update an existing message
​
handleDeleteRoomMessage
function
Function to delete a message with confirmation dialog
Usage Example: 
import useRoomMessage from '@/hooks/useRoomMessage';

function RoomDiscussion({ roomId, userId, username }: Props) {
  const [messageContent, setMessageContent] = useState<string>("");
  const [editMessageContent, setEditMessageContent] = useState<string>("");
  const [editRoomMessageId, setEditRoomMessageId] = useState<string>("");
  const [isEditModalVisible, setIsEditModalVisible] = useState<boolean>(false);

  const {
    handleCreateRoomMessage,
    handleUpdateRoomMessage,
    handleDeleteRoomMessage,
  } = useRoomMessage(roomId);

  return (
    <View>
      {/* Send Message */}
      <TextInput
        value={messageContent}
        onChangeText={setMessageContent}
        placeholder="Comment"
      />
      
      <Pressable
        onPress={() =>
          handleCreateRoomMessage({
            messageContent,
            userId,
            username,
            setMessageContent,
          })
        }
      >
        <Ionicons name="send-outline" size={18} color="white" />
      </Pressable>

      {/* Edit Message */}
      <Pressable
        onPress={() =>
          handleUpdateRoomMessage({
            editMessageContent,
            editRoomMessageId,
            setIsEditModalVisible,
            setEditMessageContent,
            setEditRoomMessageId,
          })
        }
      >
        <Text>Save</Text>
      </Pressable>

      {/* Delete Message */}
      <Pressable onPress={() => handleDeleteRoomMessage(messageId)}>
        <Ionicons name="trash-outline" size={18} color="black" />
      </Pressable>
    </View>
  );
}
Creating Messages: The handleCreateRoomMessage function:
  1. Validates message content using CreateRoomMessageSchema
  2. Sends the message to the room via the API
  3. Clears the input field
  4. Real-time updates are handled by Appwrite subscriptions
const { handleCreateRoomMessage } = useRoomMessage(roomId);

await handleCreateRoomMessage({
  messageContent: "What a six!",
  userId: "user-123",
  username: "CricketFan",
  setMessageContent,
});
Updating Messages: The handleUpdateRoomMessage function:
  1. Validates the updated content using UpdateRoomMessageSchema
  2. Updates the message via the API
  3. Closes the edit modal and clears edit state
  4. Shows success toast: “Message updated successfully”
const { handleUpdateRoomMessage } = useRoomMessage(roomId);

await handleUpdateRoomMessage({
  editMessageContent: "Updated message",
  editRoomMessageId: "msg-123",
  setIsEditModalVisible,
  setEditMessageContent,
  setEditRoomMessageId,
});
Deleting Messages: The handleDeleteRoomMessage function:
  1. Shows a confirmation dialog: “Are you sure you want to delete this message? This action cannot be undone.”
  2. Deletes the message if confirmed
  3. Shows success toast: “Message deleted successfully”
const { handleDeleteRoomMessage } = useRoomMessage(roomId);

handleDeleteRoomMessage("msg-123");
Validation: Messages are validated using Zod schemas:
  • CreateRoomMessageSchema: Validates roomId and content
  • UpdateRoomMessageSchema: Validates roomId, roomMessageId, and content
Error Handling: The hook displays specific error toasts for each operation:
OperationError Message
Create”Error sending message. Please try again later.”
Update”Error updating message. Please try again later.”
Delete”Error deleting message. Please try again later.”
Validation errors display the specific validation message from the schema. Real-time Updates: While the hook handles mutations, real-time message updates are managed by Appwrite subscriptions in the room component: 
// In the room component
useEffect(() => {
  const unsubscribe = client.subscribe(
    `databases.${DATABASE_ID}.tables.${TABLE_ID}.rows`,
    (res) => {
      if (res.events.includes("databases.*.tables.*.rows.*.create")) {
        // Add new message to state
      }
      if (res.events.includes("databases.*.tables.*.rows.*.update")) {
        // Update message in state
      }
      if (res.events.includes("databases.*.tables.*.rows.*.delete")) {
        // Remove message from state
      }
    }
  );

  return () => unsubscribe();
}, [roomId]);
Source: /workspace/source/hooks/useRoomMessage.ts:11

Build docs developers (and LLMs) love

Get started for freeTalk to us