Add JSDoc comments to Chat components (#12647)

* Add JSDoc comments to Chat components

* Expand documentation comment on ChannelImage

* Update app/javascript/chat/components/ChannelImage.jsx

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

app/javascript/chat/components/ChannelButton.jsx

@@ -6,22 +6,24 @@ import { ChannelImage } from './ChannelImage';
 import { Button } from '@crayons';
 
 /**
- * Render the channel button
+ * Render a button to switch focus to a channel
+ *
  * @param {object} props
- * 
+ *
  * @component
- * 
+ *
  * @example
- * 
- * <ChannelButton 
- *  channel={channel}
-    newMessagesIndicator={newMessagesIndicator}
-    otherClassname={otherClassname}
-    handleSwitchChannel={handleSwitchChannel}
-    isUnopened={isUnopened}
+ *
+ * <ChannelButton
+ *   channel={channel}
+     newMessagesIndicator={newMessagesIndicator}
+     otherClassname={otherClassname}
+     handleSwitchChannel={handleSwitchChannel}
+     isUnopened={isUnopened}
  * />
  *
  */
+
 export function ChannelButton(props) {
   const buttonRef = createRef();
   const { isActiveChannel = false } = props;

app/javascript/chat/components/ChannelFilterButton.jsx

@@ -22,7 +22,7 @@ import { Button } from '@crayons';
  * />
  */
 
-export const ChannelFilterButton = ({ type, name, active, onClick }) => {
+export function ChannelFilterButton({ type, name, active, onClick }) {
   return (
     <Button
       data-channel-type={type}
@@ -35,7 +35,7 @@ export const ChannelFilterButton = ({ type, name, active, onClick }) => {
       {name}
     </Button>
   );
-};
+}
 
 ChannelFilterButton.propTypes = {
   type: PropTypes.string.isRequired,

app/javascript/chat/components/ChannelImage.jsx

@@ -2,9 +2,32 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 import { defaultChannelPropTypes } from '../../common-prop-types/channel-list-prop-type';
 
-export function ChannelImage(props) {
-  const { channel, newMessagesIndicator, discoverableChannel } = props;
+/**
+ * Returns an image to help users identify chat channels
+ *
+ * @param {object} channel - Contains information about the channel this image represents
+ * @param {string} newMessagesIndicator - Used to construct a CSS classname
+ * @param {boolean} discoverableChannel - Used to determine which CSS class should be applied
+ *
+ * @example
+ * <ChannelImage
+     channel={{channel_name: "Example Channel",
+               channel_type: "direct",
+               channel_modified_slug: "someslug-f7ff2c5a6a",
+               id: 1,
+               chat_channel_id: 20,
+               status: "active",
+               channel_image: "/some/path/to/image"}}
+     newMessagesIndicator="old"
+     discoverableChannel={false}
+   />
+ */
 
+export function ChannelImage({
+  channel,
+  newMessagesIndicator,
+  discoverableChannel,
+}) {
   return (
     <span
       data-channel-slug={channel.channel_modified_slug}
@@ -31,6 +54,6 @@ export function ChannelImage(props) {
 
 ChannelImage.propTypes = {
   channel: defaultChannelPropTypes,
-  discoverableChannel: PropTypes.bool,
   newMessagesIndicator: PropTypes.string,
+  discoverableChannel: PropTypes.bool,
 };

app/javascript/chat/components/CreateChatModal.jsx

@@ -18,8 +18,8 @@ import { Modal, Button } from '@crayons';
  * @example
  *
  * <CreateChatModal
- * toggleModalCreateChannel={toggleModalCreateChannel}
- * handleCreateChannelSuccess={handleCreateChannelSuccess}
+ *   toggleModalCreateChannel={toggleModalCreateChannel}
+ *   handleCreateChannelSuccess={handleCreateChannelSuccess}
  * />
  *
  */