Add comments

src/app/organisms/room/AttachmentUis/AttachmentFrame.jsx

@@ -9,27 +9,26 @@ function AttachmentFrame({
   fileSetter,
   uploadProgressRef,
 }) {
-  function attachmentFrame() {
-    let submission;
-    const fnHowToSubmit = (func) => {
-      submission = func;
-      fileSetter(submission);
-    };
+  // To enable child components to learn how to attach their result
+  let submission;
+  const fnHowToSubmit = (func) => {
+    submission = func;
+    fileSetter(submission);
+  };
 
-    // If there already is an attachment, show it
-    if (typeof attachmentOrUi === 'object') {
-      return (
-        <FileAttachedIndicator
-          attachmentOrUi={attachmentOrUi}
-          uploadProgressRef={uploadProgressRef}
-        />
-      );
-    }
-
-    const UiComponent = attachmentUis.get(attachmentOrUi).component;
-    return (<UiComponent fnHowToSubmit={fnHowToSubmit} />);
+  // If there already is an attachment, show it
+  if (typeof attachmentOrUi === 'object') {
+    return (
+      <FileAttachedIndicator
+        attachmentOrUi={attachmentOrUi}
+        uploadProgressRef={uploadProgressRef}
+      />
+    );
   }
-  return attachmentFrame();
+
+  // Show the desired UI
+  const UiComponent = attachmentUis.get(attachmentOrUi).component;
+  return (<UiComponent fnHowToSubmit={fnHowToSubmit} />);
 }
 
 AttachmentFrame.propTypes = {

src/app/organisms/room/AttachmentUis/AttachmentTypeSelector.jsx

@@ -11,6 +11,7 @@ function AttachmentTypeSelector({ alreadyHasAttachment, actOnAttaching }) {
     const list = [];
 
     attachmentUiFrameTypes.forEach((obj, key) => {
+      // Entries have to have an icon
       const icon = obj.icon ?? PlusIC;
 
       list.push(
@@ -18,10 +19,9 @@ function AttachmentTypeSelector({ alreadyHasAttachment, actOnAttaching }) {
           // This does not matter
           // eslint-disable-next-line react/no-array-index-key
           key={`attachmentUiListItem-${key}`}
-          // variant="surface"
           onClick={() => {
             toggleMenu();
-            actOnAttaching(key); // TODO: change to component
+            actOnAttaching(key);
           }}
           iconSrc={icon}
         >

src/app/organisms/room/AttachmentUis/FileAttachedIndicator.jsx

@@ -11,7 +11,6 @@ function FileAttachedIndicator({
   attachmentOrUi,
   uploadProgressRef,
 }) {
-  // If this is not a file object, how can this be reached?
   if (typeof attachmentOrUi !== 'object') return null;
 
   const fileType = attachmentOrUi.type.slice(0, attachmentOrUi.type.indexOf('/'));

src/app/organisms/room/AttachmentUis/VoiceMailRecorder.jsx

@@ -11,9 +11,18 @@ import IconButton from '../../../atoms/button/IconButton';
 import './VoiceMailRecorder.scss';
 import Timer from '../../../../util/Timer';
 
+/**
+ * @type {Timer}
+ */
 let timer;
 
+/**
+ * @type {MediaStream}
+ */
 let _stream;
+/**
+ * @type {MediaRecorder}
+ */
 let _mediaRecorder;
 
 async function init() {

src/app/organisms/room/AttachmentUis/attachmentUis.js

@@ -1,8 +1,20 @@
 import FileIC from '../../../../../public/res/ic/outlined/file.svg';
 import VoiceMailRecorder from './VoiceMailRecorder';
 
+/**
+ * @typedef {Object} AttachmentUi
+ * @property {string} fullName How should it be listed as to the user?
+ * @property {any} icon The icon to use for the attachment type.
+ * @property {React.ComponentType<{fnHowToSubmit: Function}>} component
+ *  The component for the attachment type
+ */
+
+/**
+ * @type {Map<string, AttachmentUi>} attachmentUis
+ */
 const attachmentUis = new Map();
 
+// Populate attachmentUis
 attachmentUis.set('file', {
   fullName: 'File',
   icon: FileIC,

src/app/organisms/room/RoomViewInput.jsx

@@ -35,6 +35,15 @@ let cmdCursorPos = null;
 function RoomViewInput({
   roomId, roomTimeline, viewEvent,
 }) {
+  /**
+   * @typedef attachmentOrUiType
+   * @type {string | File | null}
+   * Either contains the file object which is attached
+   * Or the name of a UI which is to be shown
+   */
+  /**
+   * @type {[attachmentOrUiType, Function]}
+   */
   const [attachmentOrUi, setAttachmentOrUi] = useState(null);
   const [isMarkdown, setIsMarkdown] = useState(settings.isMarkdown);
   const [replyTo, setReplyTo] = useState(null);

src/util/Timer.js

@@ -2,6 +2,10 @@ function nToStr(num) {
   return num.toString().padStart(2, '0');
 }
 
+/**
+ * Start a timer.
+ * Starts automatically once constructed.
+ */
 class Timer {
   constructor() {
     this.savedTime = 0;
@@ -19,12 +23,18 @@ class Timer {
     this.timeStarted = null;
   }
 
+  /**
+   * Return time in milliseconds
+   */
   get getTimeMs() {
     let time = this.savedTime;
     if (this.timeStarted) time += new Date().getTime() - this.timeStarted;
     return time;
   }
 
+  /**
+   * @return {string} formatted time (hh:mm:ss)
+   */
   get getTimeStr() {
     let time = this.getTimeMs;
     let hours = 0;
@@ -51,11 +61,6 @@ class Timer {
       ? `${nToStr(minutes)}:${nToStr(seconds)}`
       : `${nToStr(hours)}:${nToStr(minutes)}:${nToStr(seconds)}`;
   }
-
-  stop() {
-    this.pause();
-    return this.savedTime;
-  }
 }
 
 export default Timer;