reorganize js files

webroot/js/standalone-chat-app.js

@@ -0,0 +1,75 @@
+import { h, Component, Fragment } from 'https://unpkg.com/preact?module';
+import htm from 'https://unpkg.com/htm?module';
+const html = htm.bind(h);
+
+import UsernameForm from './components/chat/username.js';
+import Chat from './components/chat.js';
+import Websocket from './utils/websocket.js';
+
+import { getLocalStorage, generateAvatar, generateUsername } from './utils/helpers.js';
+import { KEY_USERNAME, KEY_AVATAR } from '../utils/constants.js';
+
+export default class StandaloneChat extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      websocket: new Websocket(),
+      chatEnabled: true, // always true for standalone chat
+      username: getLocalStorage(KEY_USERNAME) || generateUsername(),
+      userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`),
+    };
+
+    this.websocket = null;
+    this.handleUsernameChange = this.handleUsernameChange.bind(this);
+  }
+
+  handleUsernameChange(newName, newAvatar) {
+    this.setState({
+      username: newName,
+      userAvatarImage: newAvatar,
+    });
+  }
+
+  handleChatToggle() {
+    return;
+  }
+
+  render(props, state) {
+    const { messagesOnly } = props;
+    const { username, userAvatarImage, websocket } = state;
+
+
+    if (messagesOnly) {
+      return (
+      html`
+        <${Chat}
+          websocket=${websocket}
+          username=${username}
+          userAvatarImage=${userAvatarImage}
+          messagesOnly
+        />
+      `);
+    }
+
+    // not needed for standalone, just messages only. remove later.
+    return (
+      html`
+        <${Fragment}>
+          <${UsernameForm}
+            username=${username}
+            userAvatarImage=${userAvatarImage}
+            handleUsernameChange=${this.handleUsernameChange}
+            handleChatToggle=${this.handleChatToggle}
+          />
+
+          <${Chat}
+            websocket=${websocket}
+            username=${username}
+            userAvatarImage=${userAvatarImage}
+          />
+        </${Fragment}>
+    `);
+  }
+
+}