Final Commit for v0.1.0

components/chatDataManager.js

@@ -0,0 +1,14 @@
+// var event = {
+//     type: "event",
+//     data: {
+//         id: "encryptionInitialized"
+//     }
+// }
+// var textMsg = {
+//     type: "msg.text",
+//     data: {
+//         text: "Hello"
+//     }
+// }
+
+

components/chatView.module.css

@@ -19,19 +19,6 @@
 
 .chatViewMsgs {}
 
-.chatViewMsgs>p {
-    margin: 12px;
-    padding: 0;
-}
-
-.chatViewMsgs>p>p {
-    margin: 0;
-    padding: 8px;
-    background-color: var(--color-blue-theme-text);
-    display: inline-block;
-    border-radius: 8px;
-}
-
 .chatViewInputBar {
     background-color: var(--color-blue-theme-text-opacity-8);
     position: sticky;

components/chatView.tsx

@@ -1,11 +1,19 @@
 import styles from './chatView.module.css'
+import { msgMgr, msgMgrEvents } from '../messages/manager'
 
 export default function ChatView(props: {
     username: string,
     signedIn: boolean | object,
 }) {
     const centerAndGrey = { display: 'grid', placeItems: 'center', color: 'grey', height: '100%' }
 
+    const [msgs, setMsgs] = React.useState(msgMgr.get(props.username))
+    msgMgrEvents.on('add', (username) => {
+        if (username == props.username) {
+            setMsgs(msgMgr.get(props.username))
+        }
+    })
+
     if (props.username) {
         return (
             <div className={styles.chatView}>
@@ -14,15 +22,17 @@ export default function ChatView(props: {
                 </div>
                 <div className={styles.chatViewMsgs}>
                     {(() => {
-                        var items = []
-                        for (let i = 0; i < 64; i++) {
-                            items.push(<p><p>hello by {props.username}, {i + 1}</p></p>)
-                        }
-                        return items
+                        var msgList = []
+                        msgs.forEach(element => {
+                            msgList.push(<p>{JSON.stringify(element)}</p>)
+                        });
+                        return ""
                     })()}
                 </div>
                 <div className={styles.chatViewInputBar}>
-                    <textarea className={styles.chatViewInputBarTextArea}></textarea>
+                    <textarea className={styles.chatViewInputBarTextArea} onKeyDown={(ev) => {
+
+                    }}></textarea>
                 </div>
             </div>
         )

messages/manager.js

@@ -0,0 +1,20 @@
+import eventManager from '../socket/eventManager'
+
+var events = new eventManager()
+
+class manager {
+    messages = {};
+
+    add = (username, type, data) => {
+        if (!this.messages[username]) { this.messages[username] = [] }
+        this.messages[username].push({ type, data })
+        events.trigger('add', { username })
+    };
+
+    get = username => this.messages[username];
+}
+
+var msgMgr = new manager()
+
+export default msgMgr
+export { msgMgr, events as msgMgrEvents }