├── src
    ├── vite-env.d.ts
    ├── index.css
    ├── lib
    │   └── react-query.ts
    ├── main.tsx
    ├── http
    │   ├── create-message-reaction.ts
    │   ├── remove-message-reaction.ts
    │   ├── create-room.ts
    │   ├── create-message.ts
    │   └── get-room-messages.ts
    ├── app.tsx
    ├── components
    │   ├── messages.tsx
    │   ├── create-message-form.tsx
    │   └── message.tsx
    ├── pages
    │   ├── room.tsx
    │   └── create-room.tsx
    ├── assets
    │   └── ama-logo.svg
    └── hooks
    │   └── use-messages-web-sockets.ts
├── public
    └── icon.png
├── postcss.config.js
├── tsconfig.json
├── vite.config.ts
├── tailwind.config.js
├── .gitignore
├── tsconfig.node.json
├── index.html
├── .eslintrc.cjs
├── tsconfig.app.json
└── package.json


/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;


--------------------------------------------------------------------------------
/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-education/semana-tech-01-go-react-web/HEAD/public/icon.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/lib/react-query.ts:
--------------------------------------------------------------------------------
1 | import { QueryClient } from "@tanstack/react-query";
2 | 
3 | export const queryClient = new QueryClient()


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     {
 5 |       "path": "./tsconfig.app.json"
 6 |     },
 7 |     {
 8 |       "path": "./tsconfig.node.json"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     './src/**/*.tsx',
 5 |     './index.html'
 6 |   ],
 7 |   theme: {
 8 |     extend: {},
 9 |   },
10 |   plugins: [],
11 | }
12 | 
13 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import { App } from './app'
 4 | import './index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')!).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/src/http/create-message-reaction.ts:
--------------------------------------------------------------------------------
 1 | interface CreateMessageReactionRequest {
 2 |   roomId: string
 3 |   messageId: string
 4 | }
 5 | 
 6 | export async function createMessageReaction({ messageId, roomId }: CreateMessageReactionRequest) {
 7 |   await fetch(`${import.meta.env.VITE_APP_API_URL}/rooms/${roomId}/messages/${messageId}/react`, {
 8 |     method: 'PATCH',
 9 |   })
10 | }


--------------------------------------------------------------------------------
/src/http/remove-message-reaction.ts:
--------------------------------------------------------------------------------
 1 | interface RemoveMessageReactionRequest {
 2 |   roomId: string
 3 |   messageId: string
 4 | }
 5 | 
 6 | export async function removeMessageReaction({ messageId, roomId }: RemoveMessageReactionRequest) {
 7 |   await fetch(`${import.meta.env.VITE_APP_API_URL}/rooms/${roomId}/messages/${messageId}/react`, {
 8 |     method: 'DELETE',
 9 |   })
10 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | .env


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 5 |     "skipLibCheck": true,
 6 |     "module": "ESNext",
 7 |     "moduleResolution": "bundler",
 8 |     "allowSyntheticDefaultImports": true,
 9 |     "strict": true,
10 |     "noEmit": true
11 |   },
12 |   "include": ["vite.config.ts"]
13 | }
14 | 


--------------------------------------------------------------------------------
/src/http/create-room.ts:
--------------------------------------------------------------------------------
 1 | interface CreateRoomRequest {
 2 |   theme: string
 3 | }
 4 | 
 5 | export async function createRoom({ theme }: CreateRoomRequest) {
 6 |   const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/rooms`, {
 7 |     method: 'POST',
 8 |     body: JSON.stringify({
 9 |       theme,
10 |     })
11 |   })
12 | 
13 |   const data: { id: string } = await response.json()
14 | 
15 |   return { roomId: data.id }
16 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="pt">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 | 
 6 |     <link rel="shortcut icon" href="/icon.png" type="image/png" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>AMA | Ask my anything</title>
 9 |   </head>
10 |   <body class="bg-zinc-950 text-zinc-50 antialiased">
11 |     <div id="root"></div>
12 |     <script type="module" src="/src/main.tsx"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/http/create-message.ts:
--------------------------------------------------------------------------------
 1 | interface CreateMessageRequest {
 2 |   roomId: string
 3 |   message: string
 4 | }
 5 | 
 6 | export async function createMessage({ roomId, message }: CreateMessageRequest) {
 7 |   const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/rooms/${roomId}/messages`, {
 8 |     method: 'POST',
 9 |     body: JSON.stringify({
10 |       message,
11 |     })
12 |   })
13 | 
14 |   const data: { id: string } = await response.json()
15 | 
16 |   return { messageId: data.id }
17 | }


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:@typescript-eslint/recommended',
 7 |     'plugin:react-hooks/recommended',
 8 |   ],
 9 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
10 |   parser: '@typescript-eslint/parser',
11 |   plugins: ['react-refresh'],
12 |   rules: {
13 |     'react-refresh/only-export-components': [
14 |       'warn',
15 |       { allowConstantExport: true },
16 |     ],
17 |   },
18 | }
19 | 


--------------------------------------------------------------------------------
/src/app.tsx:
--------------------------------------------------------------------------------
 1 | import { Toaster } from 'sonner'
 2 | import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 3 | import { CreateRoom } from './pages/create-room'
 4 | import { Room } from './pages/room'
 5 | import { QueryClientProvider } from '@tanstack/react-query'
 6 | import { queryClient } from './lib/react-query'
 7 | 
 8 | const router = createBrowserRouter([
 9 |   {
10 |     path: '/',
11 |     element: <CreateRoom />
12 |   },
13 |   {
14 |     path: '/room/:roomId',
15 |     element: <Room />
16 |   }
17 | ])
18 | 
19 | export function App() {
20 |   return (
21 |     <QueryClientProvider client={queryClient}>
22 |       <RouterProvider router={router} />
23 |       <Toaster invert richColors />
24 |     </QueryClientProvider>
25 |   )
26 | }
27 | 
28 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 5 |     "target": "ES2020",
 6 |     "useDefineForClassFields": true,
 7 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 8 |     "module": "ESNext",
 9 |     "skipLibCheck": true,
10 | 
11 |     /* Bundler mode */
12 |     "moduleResolution": "bundler",
13 |     "allowImportingTsExtensions": true,
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "moduleDetection": "force",
17 |     "noEmit": true,
18 |     "jsx": "react-jsx",
19 | 
20 |     /* Linting */
21 |     "strict": true,
22 |     "noUnusedLocals": true,
23 |     "noUnusedParameters": true,
24 |     "noFallthroughCasesInSwitch": true
25 |   },
26 |   "include": ["src"]
27 | }
28 | 


--------------------------------------------------------------------------------
/src/http/get-room-messages.ts:
--------------------------------------------------------------------------------
 1 | interface GetRoomMessagesRequest {
 2 |   roomId: string
 3 | }
 4 | 
 5 | export interface GetRoomMessagesResponse {
 6 |   messages: {
 7 |     id: string;
 8 |     text: string;
 9 |     amountOfReactions: number;
10 |     answered: boolean;
11 |   }[]
12 | }
13 | 
14 | export async function getRoomMessages({ roomId }: GetRoomMessagesRequest): Promise<GetRoomMessagesResponse> {
15 |   const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/rooms/${roomId}/messages`)
16 | 
17 |   const data: Array<{
18 |     id: string
19 |     room_id: string
20 |     message: string
21 |     reaction_count: number
22 |     answered: boolean
23 |   }> = await response.json()
24 | 
25 |   return {
26 |     messages: data.map(item => {
27 |       return {
28 |         id: item.id,
29 |         text: item.message,
30 |         amountOfReactions: item.reaction_count,
31 |         answered: item.answered,
32 |       }
33 |     })
34 |   }
35 | }


--------------------------------------------------------------------------------
/src/components/messages.tsx:
--------------------------------------------------------------------------------
 1 | import { useParams } from "react-router-dom";
 2 | import { Message } from "./message";
 3 | import { getRoomMessages } from "../http/get-room-messages";
 4 | import { useSuspenseQuery } from "@tanstack/react-query";
 5 | import { useMessagesWebSockets } from "../hooks/use-messages-web-sockets";
 6 | 
 7 | export function Messages() {
 8 |   const { roomId } = useParams()
 9 | 
10 |   if (!roomId) {
11 |     throw new Error('Messages components must be used within room page')
12 |   }
13 | 
14 |   const { data } = useSuspenseQuery({
15 |     queryKey: ['messages', roomId],
16 |     queryFn: () => getRoomMessages({ roomId }),
17 |   })
18 | 
19 |   useMessagesWebSockets({ roomId })
20 | 
21 |   const sortedMessages = data.messages.sort((a, b) => {
22 |     return b.amountOfReactions - a.amountOfReactions
23 |   })
24 | 
25 |   return (
26 |     <ol className="list-decimal list-outside px-3 space-y-8">
27 |       {sortedMessages.map(message => {
28 |         return (
29 |           <Message 
30 |             key={message.id}
31 |             id={message.id}
32 |             text={message.text}
33 |             amountOfReactions={message.amountOfReactions} 
34 |             answered={message.answered} 
35 |           />
36 |         )
37 |       })}
38 |     </ol>
39 |   )
40 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "web",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc -b && vite build",
 9 |     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@tanstack/react-query": "5.51.17",
14 |     "lucide-react": "0.417.0",
15 |     "react": "19.0.0-rc-3208e73e-20240730",
16 |     "react-dom": "19.0.0-rc-3208e73e-20240730",
17 |     "react-router-dom": "6.25.1",
18 |     "sonner": "1.5.0"
19 |   },
20 |   "devDependencies": {
21 |     "@types/react": "npm:types-react@rc",
22 |     "@types/react-dom": "npm:types-react-dom@rc",
23 |     "@typescript-eslint/eslint-plugin": "^7.15.0",
24 |     "@typescript-eslint/parser": "^7.15.0",
25 |     "@vitejs/plugin-react": "^4.3.1",
26 |     "autoprefixer": "10.4.19",
27 |     "eslint": "^8.57.0",
28 |     "eslint-plugin-react-hooks": "^4.6.2",
29 |     "eslint-plugin-react-refresh": "^0.4.7",
30 |     "postcss": "8.4.40",
31 |     "tailwindcss": "3.4.7",
32 |     "typescript": "^5.2.2",
33 |     "vite": "^5.3.4"
34 |   },
35 |   "overrides": {
36 |     "@types/react": "npm:types-react@rc",
37 |     "@types/react-dom": "npm:types-react-dom@rc"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/create-message-form.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRight } from "lucide-react";
 2 | import { useParams } from "react-router-dom";
 3 | import { createMessage } from "../http/create-message";
 4 | import { toast } from "sonner";
 5 | 
 6 | export function CreateMessageForm() {
 7 |   const { roomId } = useParams()
 8 | 
 9 |   if (!roomId) {
10 |     throw new Error('Messages components must be used within room page')
11 |   }
12 | 
13 |   async function createMessageAction(data: FormData) {
14 |     const message = data.get('message')?.toString()
15 | 
16 |     if (!message || !roomId) {
17 |       return
18 |     }
19 | 
20 |     try {
21 |       await createMessage({ message, roomId })
22 |     } catch {
23 |       toast.error('Falha ao enviar pergunta, tente novamente!')
24 |     }
25 |   }
26 | 
27 |   return (
28 |     <form 
29 |       action={createMessageAction}
30 |       className="flex items-center gap-2 bg-zinc-900 p-2 rounded-xl border border-zinc-800 ring-orange-400 ring-offset-2 ring-offset-zinc-950 focus-within:ring-1"
31 |     >
32 |       <input 
33 |         type="text" 
34 |         name="message"
35 |         placeholder="Qual a sua pergunta?"
36 |         autoComplete="off"
37 |         className="flex-1 text-sm bg-transparent mx-2 outline-none text-zinc-100 placeholder:text-zinc-500"
38 |         required
39 |       />
40 | 
41 |       <button 
42 |         type="submit" 
43 |         className="bg-orange-400 text-orange-950 px-3 py-1.5 gap-1.5 flex items-center rounded-lg font-medium text-sm transition-colors hover:bg-orange-500"
44 |       >
45 |         Criar pergunta
46 |         <ArrowRight className="size-4" />
47 |       </button>
48 |     </form>
49 |   )
50 | }


--------------------------------------------------------------------------------
/src/pages/room.tsx:
--------------------------------------------------------------------------------
 1 | import { useParams } from "react-router-dom"
 2 | import { Share2 } from "lucide-react"
 3 | import { toast } from "sonner"
 4 | 
 5 | import amaLogo from '../assets/ama-logo.svg'
 6 | import { Messages } from "../components/messages"
 7 | import { Suspense } from "react"
 8 | import { CreateMessageForm } from "../components/create-message-form"
 9 | 
10 | export function Room() {
11 |   const { roomId } = useParams()
12 | 
13 |   function handleShareRoom() {
14 |     const url = window.location.href.toString()
15 | 
16 |     if (navigator.share !== undefined && navigator.canShare()) {
17 |       navigator.share({ url })
18 |     } else {
19 |       navigator.clipboard.writeText(url)
20 | 
21 |       toast.info('O link da sala foi copiado para área de transferência!')
22 |     }
23 |   }
24 | 
25 |   return (
26 |     <div className="mx-auto max-w-[640px] flex flex-col gap-6 py-10 px-4">
27 |       <div className="flex items-center gap-3 px-3">
28 |         <img src={amaLogo} alt="AMA" className="h-5" />
29 | 
30 |         <span className="text-sm text-zinc-500 truncate">
31 |           Código da sala: <span className="text-zinc-300">{roomId}</span>
32 |         </span>
33 | 
34 |         <button 
35 |           type="submit" 
36 |           onClick={handleShareRoom}
37 |           className="ml-auto bg-zinc-800 text-zinc-300 px-3 py-1.5 gap-1.5 flex items-center rounded-lg font-medium text-sm transition-colors hover:bg-zinc-700"
38 |         >
39 |           Compartilhar
40 |           <Share2 className="size-4" />
41 |         </button>
42 |       </div>
43 | 
44 |       <div className="h-px w-full bg-zinc-900" />
45 | 
46 |       <CreateMessageForm />
47 | 
48 |       <Suspense fallback={<p>Carregando...</p>}>
49 |         <Messages />
50 |       </Suspense>
51 |     </div>
52 |   )
53 | }


--------------------------------------------------------------------------------
/src/pages/create-room.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowRight } from 'lucide-react'
 2 | import { toast } from 'sonner'
 3 | import { useNavigate } from 'react-router-dom'
 4 | 
 5 | import amaLogo from '../assets/ama-logo.svg'
 6 | import { createRoom } from '../http/create-room'
 7 | 
 8 | export function CreateRoom() {
 9 |   const navigate = useNavigate()
10 | 
11 |   async function handleCreateRoom(data: FormData) {
12 |     const theme = data.get('theme')?.toString()
13 | 
14 |     if (!theme) {
15 |       return
16 |     }
17 | 
18 |     try {
19 |       const { roomId } = await createRoom({ theme })
20 | 
21 |       navigate(`/room/${roomId}`)
22 |     } catch {
23 |       toast.error('Falha ao criar sala!')
24 |     }
25 |   }
26 | 
27 |   return (
28 |     <main className="h-screen flex items-center justify-center px-4">
29 |       <div className="max-w-[450px] flex flex-col gap-6">
30 |         <img src={amaLogo} alt="AMA" className="h-10" />
31 | 
32 |         <p className="leading-relaxed text-zinc-300 text-center">
33 |           Crie uma sala pública de AMA (Ask me anything) e priorize as perguntas mais importantes para a comunidade.
34 |         </p>
35 | 
36 |         <form 
37 |           action={handleCreateRoom}
38 |           className="flex items-center gap-2 bg-zinc-900 p-2 rounded-xl border border-zinc-800 ring-orange-400 ring-offset-2 ring-offset-zinc-950 focus-within:ring-1"
39 |         >
40 |           <input 
41 |             type="text" 
42 |             name="theme"
43 |             placeholder="Nome da sala"
44 |             autoComplete="off"
45 |             className="flex-1 text-sm bg-transparent mx-2 outline-none text-zinc-100 placeholder:text-zinc-500"
46 |             required
47 |           />
48 | 
49 |           <button 
50 |             type="submit" 
51 |             className="bg-orange-400 text-orange-950 px-3 py-1.5 gap-1.5 flex items-center rounded-lg font-medium text-sm transition-colors hover:bg-orange-500"
52 |           >
53 |             Criar sala
54 |             <ArrowRight className="size-4" />
55 |           </button>
56 |         </form>
57 |       </div>
58 |     </main>
59 |   )
60 | }


--------------------------------------------------------------------------------
/src/components/message.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowUp } from "lucide-react";
 2 | import { useState } from "react";
 3 | import { useParams } from "react-router-dom";
 4 | import { createMessageReaction } from "../http/create-message-reaction";
 5 | import { toast } from "sonner";
 6 | import { removeMessageReaction } from "../http/remove-message-reaction";
 7 | 
 8 | interface MessageProps {
 9 |   id: string
10 |   text: string
11 |   amountOfReactions: number
12 |   answered?: boolean
13 | }
14 | 
15 | export function Message({ 
16 |   id: messageId, 
17 |   text, 
18 |   amountOfReactions, 
19 |   answered = false,
20 | }: MessageProps) {
21 |   const { roomId } = useParams()
22 |   const [hasReacted, setHasReacted] = useState(false)
23 | 
24 |   if (!roomId) {
25 |     throw new Error('Messages components must be used within room page')
26 |   }
27 | 
28 |   async function createMessageReactionAction() {
29 |     if (!roomId) {
30 |       return
31 |     }
32 | 
33 |     try {
34 |       await createMessageReaction({ messageId, roomId })
35 |     } catch {
36 |       toast.error('Falha ao reagir mensagem, tente novamente!')
37 |     }
38 | 
39 |     setHasReacted(true)
40 |   }
41 | 
42 |   async function removeMessageReactionAction() {
43 |     if (!roomId) {
44 |       return
45 |     }
46 | 
47 |     try {
48 |       await removeMessageReaction({ messageId, roomId })
49 |     } catch {
50 |       toast.error('Falha ao remover reação, tente novamente!')
51 |     }
52 | 
53 |     setHasReacted(false)
54 |   }
55 | 
56 |   return (
57 |     <li data-answered={answered} className="ml-4 leading-relaxed text-zinc-100 data-[answered=true]:opacity-50 data-[answered=true]:pointer-events-none">
58 |       {text}
59 | 
60 |       {hasReacted ? (
61 |         <button 
62 |           type="button" 
63 |           onClick={removeMessageReactionAction} 
64 |           className="mt-3 flex items-center gap-2 text-orange-400 text-sm font-medium hover:text-orange-500"
65 |         >
66 |           <ArrowUp className="size-4" />
67 |           Curtir pergunta ({amountOfReactions})
68 |         </button>
69 |       ) : (
70 |         <button 
71 |           type="button" 
72 |           onClick={createMessageReactionAction} 
73 |           className="mt-3 flex items-center gap-2 text-zinc-400 text-sm font-medium hover:text-zinc-300"
74 |         >
75 |           <ArrowUp className="size-4" />
76 |           Curtir pergunta ({amountOfReactions})
77 |         </button>
78 |       )}
79 |     </li>
80 |   )
81 | }


--------------------------------------------------------------------------------
/src/assets/ama-logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="54" height="41" viewBox="0 0 54 41" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_5_337)">
 3 | <path d="M19.9718 18.7251C20.8072 16.9892 21.6451 15.2543 22.477 13.5167C23.3315 11.7305 24.1573 9.93037 25.0413 8.15979C25.4946 7.25062 25.6821 6.32147 25.6283 5.31592C25.4676 2.34179 23.0015 0.198688 20.0604 0.570345C17.5899 0.882953 15.8445 2.29664 14.7044 4.45016C13.9619 5.85169 13.3254 7.3088 12.6481 8.74419C12.0211 10.0736 11.3412 11.3788 10.7811 12.7395C10.7134 12.8663 10.6405 12.9913 10.5788 13.1207C8.95497 16.516 7.3242 19.9078 5.71339 23.3083C4.16598 26.5733 2.64201 29.8496 1.10155 33.1181C0.683001 34.0064 0.542327 34.933 0.623953 35.9047C0.857541 38.666 3.21774 40.6954 5.97043 40.4488C8.57463 40.2152 10.3747 38.7485 11.4697 36.4778C13.1769 32.9375 14.8502 29.379 16.5557 25.8378C17.6967 23.4681 18.8334 21.0966 19.9718 18.726V18.7251Z" fill="#FB923C" style="fill:#FB923C;fill:color(display-p3 0.9843 0.5725 0.2353);fill-opacity:1;"/>
 4 | <path d="M52.708 32.5849C51.6851 30.5009 50.6969 28.3986 49.6939 26.305C49.3032 25.4896 48.9098 24.6751 48.5182 23.8605C47.8652 22.4807 47.2165 21.0983 46.5592 19.7202C44.6939 15.8135 42.8244 11.9094 40.9565 8.00435C40.4103 6.86159 39.8511 5.72404 39.3214 4.57347C38.6311 3.07469 37.5804 1.91283 36.1207 1.1452C34.0132 0.0363057 31.6026 0.381044 29.938 1.99966C28.3662 3.5271 27.9789 5.85517 28.9515 7.87844C31.5132 13.211 34.0679 18.5462 36.6312 23.877C37.464 25.6086 38.3141 27.3314 39.1564 29.0585C39.166 29.1002 39.1677 29.1462 39.186 29.1844C40.3886 31.7313 41.56 34.2939 42.8079 36.8182C43.5859 38.3925 44.8407 39.5153 46.5062 40.1214C49.3084 41.1417 52.2269 39.8183 53.1109 37.1282C53.625 35.5634 53.4314 34.0568 52.7089 32.5849H52.708Z" fill="#FB923C" style="fill:#FB923C;fill:color(display-p3 0.9843 0.5725 0.2353);fill-opacity:1;"/>
 5 | <path d="M27.1924 12.2072C27.1472 12.1152 27.1403 11.9719 26.9544 11.9745C26.179 13.5618 25.3914 15.1535 24.622 16.753C23.7649 18.5358 22.9244 20.3263 22.076 22.1134C22.0465 22.1629 22.0117 22.2098 21.9874 22.2619C20.2698 25.8882 18.5479 29.5118 16.8381 33.1424C16.4577 33.9509 16.2841 34.8114 16.3058 35.711C16.3761 38.6435 18.903 40.8369 21.7981 40.4575C24.042 40.164 25.6145 38.8831 26.7781 37.0179C27.0994 36.503 27.3096 35.9333 27.5666 35.3871C28.1753 34.0924 28.7736 32.7933 29.3754 31.496C30.5963 29.0837 31.6175 26.5776 32.8106 24.1523C32.9009 23.9682 32.8454 23.8276 32.7672 23.666C30.9081 19.847 29.0524 16.0262 27.1932 12.2081L27.1924 12.2072Z" fill="#FB923C" style="fill:#FB923C;fill:color(display-p3 0.9843 0.5725 0.2353);fill-opacity:1;"/>
 6 | </g>
 7 | <defs>
 8 | <clipPath id="clip0_5_337">
 9 | <rect width="52.7987" height="40" fill="white" style="fill:white;fill-opacity:1;" transform="translate(0.600586 0.5)"/>
10 | </clipPath>
11 | </defs>
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/src/hooks/use-messages-web-sockets.ts:
--------------------------------------------------------------------------------
 1 | import { useQueryClient } from "@tanstack/react-query"
 2 | import { useEffect } from "react"
 3 | import type { GetRoomMessagesResponse } from "../http/get-room-messages"
 4 | 
 5 | interface useMessagesWebSocketsParams {
 6 |   roomId: string
 7 | }
 8 | 
 9 | type WebhookMessage =
10 |   | { kind: "message_created"; value: { id: string, message: string } }
11 |   | { kind: "message_answered"; value: { id: string } }
12 |   | { kind: "message_reaction_increased"; value: { id: string; count: number } }
13 |   | { kind: "message_reaction_decreased"; value: { id: string; count: number } };
14 | 
15 | export function useMessagesWebSockets({
16 |   roomId,
17 | }: useMessagesWebSocketsParams) {
18 |   const queryClient = useQueryClient()
19 | 
20 |   useEffect(() => {
21 |     const ws = new WebSocket(`ws://localhost:8080/subscribe/${roomId}`)
22 | 
23 |     ws.onopen = () => {
24 |       console.log('Websocket connected!')
25 |     }
26 | 
27 |     ws.onclose = () => {
28 |       console.log('Websocket connection closed!')
29 |     }
30 | 
31 |     ws.onmessage = (event) => {
32 |       const data: WebhookMessage = JSON.parse(event.data)
33 | 
34 |       switch(data.kind) {
35 |         case 'message_created':
36 |           queryClient.setQueryData<GetRoomMessagesResponse>(['messages', roomId], state => {
37 |             return {
38 |               messages: [
39 |                 ...(state?.messages ?? []),
40 |                 {
41 |                   id: data.value.id,
42 |                   text: data.value.message,
43 |                   amountOfReactions: 0,
44 |                   answered: false,
45 |                 }
46 |               ],
47 |             }
48 |           })
49 | 
50 |           break;
51 |         case 'message_answered':
52 |           queryClient.setQueryData<GetRoomMessagesResponse>(['messages', roomId], state => {
53 |             if (!state) {
54 |               return undefined
55 |             }
56 | 
57 |             return {
58 |               messages: state.messages.map(item => {
59 |                 if (item.id === data.value.id) {
60 |                   return { ...item, answered: true }
61 |                 }
62 | 
63 |                 return item
64 |               }),
65 |             }
66 |           })
67 | 
68 |           break;
69 |         case 'message_reaction_increased':
70 |         case 'message_reaction_decreased':
71 |           queryClient.setQueryData<GetRoomMessagesResponse>(['messages', roomId], state => {
72 |             if (!state) {
73 |               return undefined
74 |             }
75 | 
76 |             return {
77 |               messages: state.messages.map(item => {
78 |                 if (item.id === data.value.id) {
79 |                   return { ...item, amountOfReactions: data.value.count }
80 |                 }
81 | 
82 |                 return item
83 |               }),
84 |             }
85 |           })
86 | 
87 |           break;
88 |       }
89 |     }
90 | 
91 |     return () => {
92 |       ws.close()
93 |     }
94 |   }, [roomId, queryClient])
95 | }


--------------------------------------------------------------------------------