Add HomeConst.ts documentation

frontend/src/components/utils/DropDown.tsx

@@ -1,29 +1,3 @@
-/**
- * DropDown Component
- *
- * @remarks
- * A dropdown component that displays a button and a menu with selectable items.
- * The component uses Material-UI components for consistent styling.
- *
- * @component
- * @example
- * ```typescript
- * const menuItems = [
- *   { item: 'Price', callback: () => setSortBy('avgPrice')},
- *   { item: 'Rating', callback: () => setSortBy('avgRating')},
- *   { item: 'Date Added', callback: () => setSortBy('id')},
- * ];
- *
- * function App() {
- *   return (
- *     <DropDown menuItems={menuItems} />
- *   );
- * }
- *```
- * @param {Object} props - The props of the component.
- * @param {MenuElement[]} props.menuItems - An array of menu items, each containing an item name and a callback function.
- * @returns {JSX.Element} The rendered dropdown component.
- */
 import React, { useState } from 'react';
 import { Button, Menu, MenuItem, SvgIcon } from '@material-ui/core';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
@@ -72,6 +46,33 @@ const useStyles = makeStyles({
   },
 });
 
+/**
+ * DropDown Component
+ *
+ * @remarks
+ * A dropdown component that displays a button and a menu with selectable items.
+ * The component uses Material-UI components for consistent styling.
+ *
+ * @component
+ * @example
+ * ```typescript
+ * const menuItems = [
+ *   { item: 'Price', callback: () => setSortBy('avgPrice')},
+ *   { item: 'Rating', callback: () => setSortBy('avgRating')},
+ *   { item: 'Date Added', callback: () => setSortBy('id')},
+ * ];
+ *
+ * function App() {
+ *   return (
+ *     <DropDown menuItems={menuItems} />
+ *   );
+ * }
+ *```
+ * @param {Object} props - The props of the component.
+ * @param {MenuElement[]} props.menuItems - An array of menu items, each containing an item name and a callback function.
+ * @returns {JSX.Element} The rendered dropdown component.
+ */
+
 export default function DropDown({ menuItems, isMobile, defaultValue, className, icon }: Props) {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [selected, setSelected] = useState<string>(defaultValue ? defaultValue : menuItems[0].item);

frontend/src/components/utils/DropDownWithLabel.tsx

@@ -1,3 +1,19 @@
+import React from 'react';
+import { Typography, Grid } from '@material-ui/core';
+import DropDown from './DropDown';
+
+type MenuElement = {
+  item: string;
+  callback: () => void;
+};
+
+interface DropDownWithLabelProps {
+  label: string;
+  menuItems: MenuElement[];
+  labelStyle?: React.CSSProperties;
+  isMobile: boolean;
+}
+
 /**
  * A dropdown component with a label.
  *
@@ -20,21 +36,6 @@
  *
  * <DropDownWithLabel label="Select an item" menuItems={menuItems} isMobile={true} />
  */
-import React from 'react';
-import { Typography, Grid } from '@material-ui/core';
-import DropDown from './DropDown';
-
-type MenuElement = {
-  item: string;
-  callback: () => void;
-};
-
-interface DropDownWithLabelProps {
-  label: string;
-  menuItems: MenuElement[];
-  labelStyle?: React.CSSProperties;
-  isMobile: boolean;
-}
 
 const DropDownWithLabel: React.FC<DropDownWithLabelProps> = ({
   label,

frontend/src/constants/HomeConsts.ts

@@ -1,4 +1,14 @@
 export const loadingLength = 5;
+
+/**
+ * admins – List of CUApts' admins' email addresses.
+ *
+ * @remarks
+ * This array contains the emails of users who have access to the admin system on CUApts. Each email should be followed with a comment indicating
+ * the admin's name. This array should be updated periodically to remove old admins and add new admins.
+ *
+ * @return {string[]} – An array of admin email addresses.
+ */
 export const admins: string[] = [
   '[email protected]', // Grace
   '[email protected]', // Sophia