Merge pull request #472 from codeforpdx/cleanup-jsdoc

Cleaning up existing JSDoc comments; Excluding props for typedefs

Author: leekahung

src/components/Contacts/ContactListTable.jsx

@@ -8,33 +8,27 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
-
 // MUI Theme
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../../theme';
-
 // Component Imports
 import ContactListTableRow from './ContactListTableRow';
 
 // ===== MAKE CHANGES HERE FOR TABLE HEADER / COLUMN TITLES =====
 const columnTitlesArray = ['Contact', 'Pin', 'Delete'];
 
 /**
- * contactListTableProps is an object that stores the props for the
- * ContactListTable component
- *
- * @typedef {object} contactListTableProps
- * @property {Array} contacts - this list of contacts to display
- * @property {Function} deleteContact - method to delete contact
- * @memberof typedefs
+ * @typedef {import("../../typedefs.js").userListObject} userListObject
  */
 
 /**
  * ContactListTable Component - Component that generates table of contacts from data within ContactList
  *
  * @memberof Contacts
  * @name ContactListTable
- * @param {contactListTableProps} Props - Props for ContactListTable
+ * @param {object} Props - Props for ContactListTable
+ * @param {userListObject[]} Props.contacts - this list of contacts to display
+ * @param {Function} Props.deleteContact - method to delete contact
  * @returns {React.JSX.Element} The ContactListTable Component
  */
 const ContactListTable = ({ contacts, deleteContact }) => {

src/components/Contacts/ContactListTableRow.jsx

@@ -11,25 +11,16 @@ import PushPinIcon from '@mui/icons-material/PushPin';
 import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
-
 // Context Imports
 import { DocumentListContext } from '@contexts';
-
+// Custom Hook Imports
+import useNotification from '@hooks/useNotification';
 // MUI Theme
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../../theme';
 
-// Custom Hook Imports
-import useNotification from '../../hooks/useNotification';
-
 /**
- * contactListTableRowProps is an object that stores the props for the
- * ContactListTableRow component
- *
- * @typedef {object} contactListTableRowProps
- * @property {object} contact - Object containing contact information
- * @property {Function} deleteContact
- * - function to delete a chosen contact
+ * @typedef {import("../../typedefs.js").userListObject} userListObject
  */
 
 /**
@@ -38,7 +29,10 @@ import useNotification from '../../hooks/useNotification';
  *
  * @memberof Contacts
  * @name ContactListTableRow
- * @param {contactListTableRowProps} Props - Props for ContactListTableRow
+ * @param {object} Props - Props for ContactListTableRow
+ * @param {userListObject} Props.contact - contact object that store's contact
+ * information
+ * @param {Function} Props.deleteContact - method to delete contact
  * @returns {React.JSX.Element} The ContactListTableRow Component
  */
 const ContactListTableRow = ({ contact, deleteContact }) => {

src/components/Documents/DocumentTable.jsx

@@ -11,24 +11,24 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 // Context Imports
 import { DocumentListContext } from '@contexts';
-
 // Component Imports
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../../theme';
 import DocumentTableRow from './DocumentTableRow';
 import { EmptyListNotification, LoadingAnimation } from '../Notification';
 
-/**
- * @typedef {import("../../typedefs.js").documentTableProps} documentTableProps
- */
-
 /**
  * DocumentTable Component - The Document Table that shows the list of documents
  * stored on Solid
  *
  * @memberof Documents
  * @name DocumentTable
- * @param {documentTableProps} Props - Props for DocumentTable component
+ * @param {object} Props - Props for DocumentTable component
+ * @param {(modalType: string, docName: string, docType: string)
+ * => void} Props.handleAclPermissionsModal - Function for setting up the
+ * correct version of the SetAclPermissions Modal, and opening it.
+ * @param {(document: object) => void} Props.handleSelectDeleteDoc - method
+ * to delete document
  * @returns {React.JSX.Element} The DocumentTable component
  */
 const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) => {

src/components/Documents/DocumentTableRow.jsx

@@ -9,27 +9,26 @@ import IconButton from '@mui/material/IconButton';
 import ShareIcon from '@mui/icons-material/Share';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
-
 // Utility Imports
 import { getBlobFromSolid } from '@utils';
-
 // MUI Theme
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../../theme';
-
 // Constants Imports
 import DOC_TYPES from '../../constants/doc_types';
 
-/**
- * @typedef {import("../../typedefs.js").documentTableRowProps} documentTableRowProps
- */
-
 /**
  * DocumentTableRow Component - A row in the Document Table
  *
  * @memberof Documents
  * @name DocumentTableRow
- * @param {documentTableRowProps} Props - Props for DocumentTableRow
+ * @param {object} Props - Props for DocumentTableRow
+ * @param {File} Props.document - File object containing the document
+ * @param {(modalType: string, docName: string, docType: string)
+ * => void} Props.handleAclPermissionsModal - Function for setting up the
+ * correct version of the SetAclPermissions Modal, and opening it.
+ * @param {(document: object) => void} Props.handleSelectDeleteDoc - method
+ * to delete document
  * @returns {React.JSX.Element} The DocumentTableRow component
  */
 const DocumentTableRow = ({ document, handleAclPermissionsModal, handleSelectDeleteDoc }) => {

src/components/Footer/RenderCallToActionSection.jsx

@@ -5,15 +5,13 @@ import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
-/**
- * @typedef {import("../../typedefs.js").footerProps} footerProps
- */
-
 /**
  * The RenderCallToActionSection component renders information about policy,
  * terms and conditions, and the site to Code for PDX
  *
- * @param {footerProps} Props - The props for footer sub-component
+ * @param {object} Props - The props for footer sub-component
+ * @param {boolean} Props.isReallySmallScreen - Boolean for if screen is below theme
+ * breakdown of 'sm' for MUI
  * @returns {React.JSX.Element} The RenderCallToActionSection component
  */
 const RenderCallToActionSection = ({ isReallySmallScreen }) => (

src/components/Footer/RenderCompanyInfoSection.jsx

@@ -5,7 +5,6 @@ import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-
 import FacebookIcon from '@mui/icons-material/Facebook';
 import InstagramIcon from '@mui/icons-material/Instagram';
 import SvgIcon from '@mui/material/SvgIcon';
@@ -49,15 +48,13 @@ const socialLinks = [
   }
 ];
 
-/**
- * @typedef {import("../../typedefs.js").footerProps} footerProps
- */
-
 /**
  * The RenderCompanyInfoSection component renders information about policy,
  * terms and conditions, and the site to Code for PDX
  *
- * @param {footerProps} Props - The props for footer sub-component
+ * @param {object} Props - The props for footer sub-component
+ * @param {boolean} Props.isReallySmallScreen - Boolean for if screen is below theme
+ * breakdown of 'sm' for MUI
  * @returns {React.JSX.Element} The RenderCompanyInfoSection component
  */
 const RenderCompanyInfoSection = ({ isReallySmallScreen }) => (

src/components/Footer/RenderCopyrightAndLinksSection.jsx

@@ -27,15 +27,13 @@ const legalLinks = [
   }
 ];
 
-/**
- * @typedef {import("../../typedefs.js").footerProps} footerProps
- */
-
 /**
  * The RenderCopyrightAndLinksSection component renders information about policy,
  * terms and conditions, and the site to Code for PDX
  *
- * @param {footerProps} Props - The props for footer sub-component
+ * @param {object} Props - The props for footer sub-component
+ * @param {boolean} Props.isReallySmallScreen - Boolean for if screen is below theme
+ * breakdown of 'sm' for MUI
  * @returns {React.JSX.Element} The RenderCopyrightAndLinksSection component
  */
 const RenderCopyrightAndLinksSection = ({ isReallySmallScreen }) => (

src/components/Form/DocumentSelection.jsx

@@ -15,8 +15,13 @@ import DOC_TYPES from '../../constants/doc_types';
  *
  * @memberof Forms
  * @name DocumentSelection
+ * @param {object} Props - Props for DocumentSelection Component
+ * @param {string} Props.htmlForAndIdProp - String for HTML for and id
+ * @param {(event) => void} Props.handleDocType - Handler function for selecting
+ * doc type
+ * @param {string} Props.docType - The specific doc type selected
+ * @returns {React.JSX.Element} - The Document Selection Component
  */
-
 const DocumentSelection = ({ htmlForAndIdProp, handleDocType, docType }) => (
   <Box>
     <FormControl required fullWidth>

src/components/Form/FormSection.jsx

@@ -3,22 +3,19 @@ import React from 'react';
 // Material UI Imports
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-// Component Imports
-
-/**
- * @typedef {import('../../typedefs').formSectionProps} formSectionProps
- */
 
 /**
  * FormSection Component - Component that wraps section with title and MUI Box
  * component
  *
  * @memberof Forms
  * @name FormSection
- * @param {formSectionProps} formSectionProps - A React prop that consists of
+ * @param {object} Props - A React prop that consists of
  * that consist of title and children (see {@link formSectionProps})
+ * @param {string} Props.title - Title of form section
+ * @param {React.ReactElement} Props.children - JSX Element of the wrapped form
+ * @returns {React.JSX.Element} - The FormSection Component
  */
-
 const FormSection = ({ title, children }) => (
   <Box
     sx={{

src/components/Home/HomeSection.jsx

@@ -4,26 +4,23 @@ import React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
-/**
- * @typedef {object} HomeSectionParams
- * @property {string} componentImageSrc - image src
- * @property {string} componentImageAlt - image alt
- * @property {string} title - section title
- * @property {string} description - section description
- * @property {string} button - section button
- * @property {string} href - section button href
- * @property {string} label - section button aria-label
- * @property {boolean} isReallySmallScreen - screen size
- */
+
 /**
  * Represents a home section component
  *
- *  @memberof Home
+ * @memberof Home
  * @name HomeSecton
- * @param {HomeSectionParams} props - the component props
+ * @param {object} Props - the component props
+ * @param {string} Props.componentImageSrc - image src
+ * @param {string} Props.componentImageAlt - image alt
+ * @param {string} Props.title - section title
+ * @param {string} Props.description - section description
+ * @param {string} Props.button - section button
+ * @param {string} Props.href - section button href
+ * @param {string} Props.label - section button aria-label
+ * @param {boolean} Props.isReallySmallScreen - screen size
  * @returns {React.JSX.Element} - the home section component
  */
-
 const HomeSection = ({
   componentImageSrc,
   componentImageAlt,

src/components/Home/KeyFeatures.jsx

@@ -3,23 +3,19 @@ import React from 'react';
 // Material UI Imports
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-/**
- * @typedef {object} KeyFeaturesParams
- * @property {string} icon - icon
- * @property {string} title - key feature title
- * @property {string} description - key feature description
- * @property {boolean} isReallySmallScreen - screen size
- */
 
 /**
  * Represents key features section component
  *
  * @memberof Home
  * @name KeyFeatures
- * @param {KeyFeaturesParams} props - the props
+ * @param {object} Props - the props
+ * @param {string} Props.icon - icon
+ * @param {string} Props.title - key feature title
+ * @param {string} Props.description - key feature description
+ * @param {boolean} Props.isReallySmallScreen - screen size
  * @returns {React.JSX.Element} the KeyFeatures section component
  */
-
 const KeyFeatures = ({ icon, title, description, isReallySmallScreen }) => (
   <>
     <Box

src/components/Messages/MessageFolder.jsx

@@ -16,17 +16,20 @@ import { EmptyListNotification, LoadingAnimation } from '../Notification';
  * @typedef {import("../../typedefs.js").messageListObject} messageListObject
  */
 
-/**
- * @typedef {import("../../typedefs.js").messageFolderProps} messageFolderProps
- */
-
 /**
  * MessageFolder Component - The general component used for Message Folders Inbox
  * and Outbox
  *
  * @memberof Messages
  * @name MessageFolder
- * @param {messageFolderProps} Props - Component props for MessageFolder
+ * @param {object} Props - Component props for MessageFolder
+ * @param {string} Props.folderType - The name of the message box, i.e. "inbox"
+ * or "outbox"
+ * @param {() => Promise<void>} Props.handleRefresh - The handle function for
+ * message folder refresh
+ * @param {boolean} Props.loadMessages - Boolean for triggering loading message
+ * @param {messageListObject[]} Props.messageList - A list of messages from
+ * Solid Pod
  * @returns {React.JSX.Element} React component for MessageFolder
  */
 const MessageFolder = ({ folderType, handleRefresh, loadMessages, messageList }) => {

src/components/Messages/MessagePreview.jsx

@@ -19,7 +19,7 @@ import { MessageContext, SignedInUserContext } from '@contexts';
 import { NewMessageModal } from '../Modals';
 
 /**
- * @typedef {import("../../typedefs.js").messagePreviewProps} messagePreviewProps
+ * @typedef {import("../../typedefs.js").messageListObject} messageListObject
  */
 
 /**
@@ -28,7 +28,9 @@ import { NewMessageModal } from '../Modals';
  *
  * @memberof Messages
  * @name MessagePreview
- * @param {messagePreviewProps} Props - Component props for MessagePreview
+ * @param {object} Props - Component props for MessagePreview
+ * @param {messageListObject} Props.message - The message object
+ * @param {string} Props.folderType - Type of message box
  * @returns {React.JSX.Element} React component for MessagePreview
  */
 const MessagePreview = ({ message, folderType }) => {

src/components/Modals/AddContactModal.jsx

@@ -11,9 +11,10 @@ import FormControl from '@mui/material/FormControl';
 import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
+// Custom Hook Imports
+import useNotification from '@hooks/useNotification';
 // Component Imports
 import { FormSection } from '../Form';
-import useNotification from '../../hooks/useNotification';
 
 /**
  * @memberof Contcts