diff --git a/package.json b/package.json index 340e218..89fab91 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,8 @@ "scwp": "1.x", "sequelize": "^6.2.4", "socket.io-redis": "^5.3.0", - "source-map-support": "^0.5.11" + "source-map-support": "^0.5.11", + "uuid": "8.2.0" }, "devDependencies": { "@neutrinojs/airbnb": "^9.1.0", diff --git a/src/client/chat--message.jsx b/src/client/chat--message.jsx index 9e53942..50f702c 100644 --- a/src/client/chat--message.jsx +++ b/src/client/chat--message.jsx @@ -6,7 +6,7 @@ import React from 'react'; import ReactMarkdown from 'react-markdown'; export default function PlayersChatMessageSpace(props) { - const {message: {owner, text, timestamp}, isShort} = props; + const {message: {owner, message, timestamp}, isShort} = props; const ownerMap = { 1: 'cha0s', 2: 'BabeHasHiccups', @@ -38,7 +38,7 @@ export default function PlayersChatMessageSpace(props) { }
- +
{isShort && $messageTime}
@@ -49,7 +49,7 @@ export default function PlayersChatMessageSpace(props) { PlayersChatMessageSpace.propTypes = { isShort: PropTypes.bool.isRequired, message: PropTypes.shape({ - text: PropTypes.string, + message: PropTypes.string, timestamp: PropTypes.number, owner: PropTypes.string, }).isRequired, diff --git a/src/client/chat--message.scss b/src/client/chat--message.scss index 57dddfc..14a8454 100644 --- a/src/client/chat--message.scss +++ b/src/client/chat--message.scss @@ -63,12 +63,6 @@ header { margin: 0; } -.chat--messageMarkdown { - h1, h2, h3, h4, h5, h6 { - line-height: 1rem; - } -} - .chat--messageMarkdown { display: inline; } diff --git a/src/client/chat--messages.jsx b/src/client/chat--messages.jsx index 2966b11..ea7fc55 100644 --- a/src/client/chat--messages.jsx +++ b/src/client/chat--messages.jsx @@ -1,38 +1,18 @@ import './chat--messages.scss'; -import React, {useLayoutEffect, useRef, useState} from 'react'; +import React, {useLayoutEffect, useRef} from 'react'; +import {useSelector} from 'react-redux'; + +import {channelMessagesSelector} from '~/common/state/chat'; + +import useChannel from '~/client/hooks/useChannel'; import ChatMessage from './chat--message'; +import ChatSubmitMessage from './chat--submitMessage'; -export default function PlayersChatSpace() { - const [$form, $messages] = [useRef(null), useRef(null)]; - const [text, setText] = useState(''); - const messages = [ - { - key: 1, - owner: 1, - text: 'Hi!', - timestamp: Date.now(), - }, - { - key: 2, - owner: 2, - text: 'Yo.', - timestamp: Date.now(), - }, - { - key: 3, - owner: 2, - text: 'How have you been?', - timestamp: Date.now(), - }, - { - key: 4, - owner: 1, - text: 'Not too bad.', - timestamp: Date.now(), - }, - ]; +export default function ChatMessages() { + const channel = useChannel(); + const $messages = useRef(null); const {current} = $messages; const isAtTheBottom = !current ? true @@ -44,6 +24,7 @@ export default function PlayersChatSpace() { ), current.offsetHeight) ); const heightWatch = current && current.scrollHeight; + const messages = useSelector((state) => channelMessagesSelector(state, channel)); const messageCount = messages && messages.length; useLayoutEffect(() => { if (isAtTheBottom) { @@ -61,8 +42,8 @@ export default function PlayersChatSpace() { {messages && messages.map((message) => { const $message = ( ); @@ -70,34 +51,7 @@ export default function PlayersChatSpace() { return $message; })} -
{ - event.preventDefault(); - const trimmed = text.slice(0, 1000).trim(); - if (trimmed) { - // socket.send(new ActionPacket(chat({owner: playerId, text: trimmed}, {game: id}))); - } - setText(''); - }} - ref={$form} - > -