try to implement shoutbox composing idk if it works

Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>

packages/pl-api/lib/client.ts

@@ -2775,6 +2775,7 @@ class PlApiClient {
       onMessages: (messages: Array<ShoutMessage>) => void;
       onMessage: (message: ShoutMessage) => void;
     }) => {
+      let counter = 0;
       if (this.#shoutSocket) return this.#shoutSocket;
 
       const path = buildFullPath('/socket/websocket', this.baseURL, { token, vsn: '2.0.0' });
@@ -2798,7 +2799,8 @@ class PlApiClient {
 
       this.#shoutSocket = {
         message: (text: string) => {
-          ws.send(JSON.stringify({ type: 'message', text }));
+          // guess this is meant to be incremented on each call but idk
+          ws.send(JSON.stringify(['3', `${++counter}`, 'chat:public', 'new_msg', { 'text': text }]));
         },
         close: () => {
           ws.close();

packages/pl-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pl-api",
-  "version": "1.0.0-rc.35",
+  "version": "1.0.0-rc.36",
   "type": "module",
   "homepage": "https://github.com/mkljczk/pl-fe/tree/develop/packages/pl-api",
   "repository": {

packages/pl-fe/src/actions/shoutbox.ts

@@ -27,6 +27,14 @@ const importShoutboxMessage = (message: ShoutMessage) => (dispatch: AppDispatch)
   });
 };
 
+const createShoutboxMessage = (message: string) => (dispatch: AppDispatch, getState: () => RootState) => {
+  const socket = getState().shoutbox.socket;
+
+  if (!socket) return;
+
+  socket.message(message);
+};
+
 const connectShoutbox = () => (dispatch: AppDispatch, getState: () => RootState) => {
   const state = getState();
   const token = getMeToken(state);
@@ -70,5 +78,6 @@ export {
   importShoutboxMessages,
   importShoutboxMessage,
   connectShoutbox,
+  createShoutboxMessage,
   type ShoutboxAction,
 };

packages/pl-fe/src/features/chats/components/shoutbox-composer.tsx

@@ -102,22 +102,6 @@ const ShoutboxComposer = React.forwardRef<HTMLTextAreaElement | null, IShoutboxC
           />
         </Stack>
       </HStack>
-
-      <HStack alignItems='center' className='h-5' space={1}>
-        {errorMessage && (
-          <>
-            <Text theme='danger' size='xs'>
-              {errorMessage}
-            </Text>
-
-            <button onClick={onSubmit} className='flex hover:underline'>
-              <Text theme='primary' size='xs' tag='span'>
-                {intl.formatMessage(messages.retry)}
-              </Text>
-            </button>
-          </>
-        )}
-      </HStack>
     </div>
   );
 });

packages/pl-fe/src/features/chats/components/shoutbox.tsx

@@ -1,7 +1,9 @@
 import clsx from 'clsx';
 import React, { MutableRefObject, useEffect, useState } from 'react';
 
+import { createShoutboxMessage } from 'pl-fe/actions/shoutbox';
 import Stack from 'pl-fe/components/ui/stack';
+import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 
 import { clearNativeInputValue } from './chat';
 import ShoutboxComposer from './shoutbox-composer';
@@ -15,6 +17,8 @@ interface ChatInterface {
 }
 
 const Shoutbox: React.FC<ChatInterface> = ({ inputRef, className }) => {
+  const dispatch = useAppDispatch();
+
   const [content, setContent] = useState<string>('');
   const [resetContentKey, setResetContentKey] = useState<number>(fileKeyGen());
   const [errorMessage] = useState<string>();
@@ -22,17 +26,7 @@ const Shoutbox: React.FC<ChatInterface> = ({ inputRef, className }) => {
   const isSubmitDisabled = content.length === 0;
 
   const submitMessage = () => {
-    // dispatch(shoutboxmess)
-    // createChatMessage.mutate({ chatId: chat.id, content, mediaId: attachment?.id }, {
-    //   onSuccess: () => {
-    //     setErrorMessage(undefined);
-    //   },
-    //   onError: (error: { response: PlfeResponse }, _variables, context) => {
-    //     const message = error.response?.json?.error;
-    //     setErrorMessage(message || intl.formatMessage(messages.failedToSend));
-    //     setContent(context.prevContent as string);
-    //   },
-    // });
+    dispatch(createShoutboxMessage(content));
 
     clearState();
   };