refactor: .href -> .path

update: JSdocs

Author: karpolan

package-lock.json

@@ -2,8 +2,12 @@ import clsx from 'clsx';
 import { Theme, makeStyles } from '@material-ui/core/styles';
 import MuiAlert, { AlertProps as MuiAlertProps } from '@material-ui/lab/Alert';
 
+/**
+ * Note: You can change these const to control default appearance of the AppAlert component
+ */
 const APP_ALERT_SEVERITY = 'info'; // 'error' | 'info'| 'success' | 'warning'
 const APP_ALERT_VARIANT = 'standard'; // 'filled' | 'outlined' | 'standard'
+const APP_ALERT_ELEVATION = 5;
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -18,14 +22,15 @@ const useStyles = makeStyles((theme: Theme) => ({
 const AppAlert: React.FC<MuiAlertProps> = ({
   severity = APP_ALERT_SEVERITY,
   variant = APP_ALERT_VARIANT,
+  elevation = APP_ALERT_ELEVATION,
   className,
   onClose,
   ...restOfProps
 }) => {
   const classes = useStyles();
   const classRoot = clsx(classes.root, className);
 
-  return <MuiAlert className={classRoot} severity={severity} variant={variant} onClose={onClose} {...restOfProps} />;
+  return <MuiAlert className={classRoot} severity={severity} variant={variant} elevation={elevation} onClose={onClose} {...restOfProps} />;
 };
 
 export default AppAlert;

src/components/AppAlert/AppAlert.tsx

@@ -18,6 +18,7 @@ function testButtonColor(colorName: string, expectedClassName = colorName, ignor
 
     let button = await span.closest('button'); // parent <button> element
     expect(button).toBeDefined();
+    // console.log('button.className:', button?.className)
     if (!ignoreClassName) {
       expect(button?.className?.includes(`makeStyles-${expectedClassName}`)).toBeTruthy(); // There is "makeStyles-[expectedClassName]-xxx" class
     }

src/components/AppButton/AppButton.test.tsx

@@ -4,7 +4,11 @@ import Box from '@material-ui/core/Box';
 import Button, { ButtonProps } from '@material-ui/core/Button';
 import { buttonStylesByNames, ColorName } from '../../utils/style';
 
+/**
+ * Note: You can change these const to control default appearance of the AppButton component
+ */
 const APP_BUTTON_VARIANT = 'contained'; // | 'text' | 'outlined'
+const APP_BUTTON_MARGIN = 1;
 
 const useStyles = makeStyles((theme: Theme) => ({
   box: {
@@ -31,24 +35,24 @@ interface Props extends Omit<ButtonProps, 'color'> {
 }
 
 /**
- * Application styled Material UI Button
+ * Application styled Material UI Button with Box around to specify margins using props
  * @class AppButton
  * @param {string} [color] - name of color from Material UI palette 'primary', 'secondary', 'warning', and so on
  * @param {string} [children] - content to render, overrides .label and .text
  * @param {string} [label] - text to render, alternate to .text
  * @param {string} [text] - text to render, alternate to .label
  */
 const AppButton: React.FC<Props> = ({
-  className,
   children,
+  className,
   color = 'default',
   label,
-  text,
   m = 0,
-  mt = 1,
-  mb = 1,
-  ml = 1,
-  mr = 1,
+  mt = APP_BUTTON_MARGIN,
+  mb = APP_BUTTON_MARGIN,
+  ml = APP_BUTTON_MARGIN,
+  mr = APP_BUTTON_MARGIN,
+  text,
   underline = 'none',
   ...restOfProps
 }) => {

src/components/AppButton/AppButton.tsx

@@ -35,8 +35,9 @@ const useStyles = makeStyles((theme: Theme) => ({
 }));
 
 /**
- * Renders list of Navigation Items for SideBar
- * @param {array} props.links - list of objects to render as navigation links
+ * Renders list of Navigation Items inside SideBar
+ * @param {string} [prop.className] - optional className for styling
+ * @param {array} props.items - list of objects to render as navigation links
  * @param {boolean} [props.showIcons] - icons in links are visible when true
  * @param {func} [props.afterLinkClink] - optional callback called when some link was clicked
  */
@@ -59,11 +60,11 @@ const SideBarNavigation: React.FC<Props> = ({
     <nav>
       <List className={classRoot} {...restOfProps}>
         {items.map((link) => (
-          <ListItem key={`${link.title}-${link.href}`} className={classes.item} disableGutters>
+          <ListItem key={`${link.title}-${link.path}`} className={classes.item} disableGutters>
             <Button
               className={classes.button}
               component={SideBarLink}
-              to={link.href as string}
+              to={link.path as string}
               onClick={afterLinkClick}
             >
               <div className={classes.iconOrMargin}>{showIcons && link.icon ? <AppIcon icon={link.icon} /> : null}</div>

src/components/SideBar/SideBarNavigation.tsx

@@ -1,8 +1,5 @@
 import clsx from 'clsx';
-import { Theme, makeStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
+import { makeStyles, Theme, AppBar, Toolbar, Typography } from '@material-ui/core';
 import AppIconButton from '../AppIconButton';
 
 const useStyles = makeStyles((theme: Theme) => ({

src/components/TopBar/TopBar.tsx

@@ -36,7 +36,7 @@ interface UserInfoProps {
 const UserInfo = ({ className, showAvatar = false, user, ...restOfProps }: UserInfoProps) => {
   const classes = useStyles();
 
-  const fullName = [user?.first_name || '', user?.last_name || ''].join(' ').trim();
+  const fullName = user?.name || [user?.nameFirst || '', user?.nameLast || ''].join(' ').trim();
   const srcAvatar = user?.avatar ? user?.avatar : undefined;
   const userPhoneOrEmail = user?.phone || (user?.email as string);
 

src/components/UserInfo/UserInfo.tsx

@@ -55,30 +55,30 @@ function updateDocumentTitle(title = '') {
 const SIDE_BAR_PRIVATE_ITEMS: Array<LinkToPage> = [
   {
     title: 'Home',
-    href: '/',
+    path: '/',
     icon: 'home',
   },
   {
     title: 'Profile',
-    href: '/user',
+    path: '/user',
     icon: 'account',
   },
   {
     title: 'About',
-    href: '/about',
+    path: '/about',
     icon: 'info',
   },
   {
     title: 'Dev Tools',
-    href: '/dev',
+    path: '/dev',
     icon: 'settings',
   },
 ];
 
 /**
  * Renders "Private Layout" composition
  */
-const Layout: React.FC = ({ children }) => {
+const PrivateLayout: React.FC = ({ children }) => {
   const [state] = useAppStore();
   const [openSideBar, setOpenSideBar] = useState(false);
   const theme = useTheme();
@@ -131,4 +131,4 @@ const Layout: React.FC = ({ children }) => {
   );
 };
 
-export default Layout;
+export default PrivateLayout;

src/routes/Layout/PrivateLayout.tsx

@@ -42,17 +42,17 @@ const useStyles = makeStyles((theme: Theme) => ({
 const SIDE_BAR_PUBLIC_ITEMS: Array<LinkToPage> = [
   {
     title: 'Log In',
-    href: '/auth/login',
+    path: '/auth/login',
     icon: 'login',
   },
   {
     title: 'Sign Up',
-    href: '/auth/signup',
+    path: '/auth/signup',
     icon: 'signup',
   },
   {
     title: 'About',
-    href: '/about',
+    path: '/about',
     icon: 'info',
   },
 ];

src/routes/Layout/PublicLayout.tsx

@@ -6,6 +6,6 @@ export type ObjectPropByName = Record<string, any>;
  */
 export declare interface LinkToPage {
   title?: string;
-  href?: string;
+  path?: string;
   icon?: string;
 }