Prettier

Author: RoyEJohnson

src/app/layouts/default/header/menus/main-menu/dropdown/dropdown.tsx

@@ -15,7 +15,11 @@ import './dropdown.scss';
 // for ordinary website navigations, per
 // https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
 
-export function MenuItem({label, url, local = undefined}: {
+export function MenuItem({
+    label,
+    url,
+    local = undefined
+}: {
     label: string;
     url: string;
     local?: string;
@@ -37,7 +41,10 @@ export function MenuItem({label, url, local = undefined}: {
     );
 }
 
-function OptionalWrapper({isWrapper, children}: {
+function OptionalWrapper({
+    isWrapper,
+    children
+}: {
     isWrapper: boolean;
     children?: React.ReactNode;
 }) {
@@ -66,9 +73,8 @@ export default function Dropdown({
     const topRef = useRef<HTMLAnchorElement>(null);
     const dropdownRef = useRef<HTMLDivElement>(null);
     const ddId = `ddId-${label}`;
-    const {
-        closeMenu, closeDesktopMenu, openMenu, openDesktopMenu
-    } = useMenuControls({topRef, label});
+    const {closeMenu, closeDesktopMenu, openMenu, openDesktopMenu} =
+        useMenuControls({topRef, label});
     const navigateByKey = useNavigateByKey({
         topRef,
         dropdownRef,
@@ -135,7 +141,10 @@ function DropdownController({
         [openMenu, closeMenu, activeDropdown, topRef]
     );
     const closeOnBlur = React.useCallback(
-        ({currentTarget, relatedTarget}: React.FocusEvent<HTMLAnchorElement>) => {
+        ({
+            currentTarget,
+            relatedTarget
+        }: React.FocusEvent<HTMLAnchorElement>) => {
             if (currentTarget.parentNode?.contains(relatedTarget)) {
                 return;
             }
@@ -175,7 +184,13 @@ function DropdownController({
     );
 }
 
-function DropdownContents({id, label, dropdownRef, navAnalytics, children}: {
+function DropdownContents({
+    id,
+    label,
+    dropdownRef,
+    navAnalytics,
+    children
+}: {
     id: string;
     label: string;
     dropdownRef: React.RefObject<HTMLDivElement>;

src/app/layouts/default/header/menus/main-menu/dropdown/use-navigate-by-key.ts

@@ -1,14 +1,16 @@
 import useDropdownContext from '../../dropdown-context';
 import {isMobileDisplay} from '~/helpers/device';
-import { assertDefined } from '~/helpers/data';
+import {assertDefined} from '~/helpers/data';
 
 function findNext(dropdownRef: React.MutableRefObject<HTMLDivElement | null>) {
     const nextSib = document.activeElement?.nextElementSibling;
 
     if (nextSib?.matches('a')) {
         return nextSib as HTMLAnchorElement;
     }
-    const targets = Array.from(assertDefined(dropdownRef.current?.querySelectorAll('a')));
+    const targets = Array.from(
+        assertDefined(dropdownRef.current?.querySelectorAll('a'))
+    );
     const idx = targets.indexOf(document.activeElement as HTMLAnchorElement);
     const nextIdx = (idx + 1) % targets.length;
 
@@ -24,7 +26,9 @@ function findPrev(
     if (prevSib?.matches('a')) {
         return prevSib as HTMLAnchorElement;
     }
-    const targets = Array.from(assertDefined(dropdownRef.current?.querySelectorAll('a')));
+    const targets = Array.from(
+        assertDefined(dropdownRef.current?.querySelectorAll('a'))
+    );
     const idx = targets.indexOf(document.activeElement as HTMLAnchorElement);
 
     if (idx === 0) {
@@ -70,7 +74,9 @@ export default function useNavigateByKey({
             case 'ArrowDown':
                 event.preventDefault();
                 if (document.activeElement === topRef.current) {
-                    (dropdownRef.current?.firstChild as HTMLAnchorElement)?.focus();
+                    (
+                        dropdownRef.current?.firstChild as HTMLAnchorElement
+                    )?.focus();
                 } else {
                     findNext(dropdownRef).focus();
                 }

src/app/layouts/default/header/menus/main-menu/login-menu/login-menu-with-dropdown.tsx

@@ -14,14 +14,16 @@ function AccountItem() {
     const {myOpenStaxUser} = useUserContext();
     const mosIsAvailable = !myOpenStaxUser.error;
 
-    return (
-        mosIsAvailable ?
-            <MenuItem label="Account Dashboard" url="/account" /> :
-            <MenuItem label="Account Profile" url={`${settings.accountHref}/profile`} />
+    return mosIsAvailable ? (
+        <MenuItem label="Account Dashboard" url="/account" />
+    ) : (
+        <MenuItem
+            label="Account Profile"
+            url={`${settings.accountHref}/profile`}
+        />
     );
 }
 
-
 export default function LoginMenuWithDropdown() {
     const userModel = assertDefined(useUserContext().userModel);
 
@@ -30,25 +32,32 @@ export default function LoginMenuWithDropdown() {
     const label = `Hi ${userModel.first_name || userModel.username}`;
 
     return (
-        <Dropdown className="login-menu nav-menu-item rightmost dropdown" label={label} excludeWrapper>
+        <Dropdown
+            className="login-menu nav-menu-item rightmost dropdown"
+            label={label}
+            excludeWrapper
+        >
             <AccountItem />
-            {
-                userModel.instructorEligible &&
-                    <MenuItem label="Request instructor access" url={reqFacultyAccessLink} />
-            }
-            {
-                userModel.incompleteSignup &&
-                    <MenuItem label="Complete your profile" url={profileLink} />
-            }
-            {
-                userModel.pendingInstructorAccess &&
-                    <MenuItem label="Pending instructor access" url={profileLink} />
-            }
-            {
-                userModel.emailUnverified &&
-                    <MenuItem label="Verify your email address" url={profileLink} />
-            }
-            <MenuItem label="Log out" url={linkHelper.logoutLink()} local="true" />
+            {userModel.instructorEligible && (
+                <MenuItem
+                    label="Request instructor access"
+                    url={reqFacultyAccessLink}
+                />
+            )}
+            {userModel.incompleteSignup && (
+                <MenuItem label="Complete your profile" url={profileLink} />
+            )}
+            {userModel.pendingInstructorAccess && (
+                <MenuItem label="Pending instructor access" url={profileLink} />
+            )}
+            {userModel.emailUnverified && (
+                <MenuItem label="Verify your email address" url={profileLink} />
+            )}
+            <MenuItem
+                label="Log out"
+                url={linkHelper.logoutLink()}
+                local="true"
+            />
         </Dropdown>
     );
 }

src/app/layouts/default/header/menus/main-menu/login-menu/login-menu.tsx

@@ -11,8 +11,10 @@ function LoginLink() {
     return (
         <li className="login-menu nav-menu-item rightmost">
             <a
-                href={linkHelper.loginLink()} className="pardotTrackClick"
-                data-local="true" role="menuitem"
+                href={linkHelper.loginLink()}
+                className="pardotTrackClick"
+                data-local="true"
+                role="menuitem"
             >
                 Log in
             </a>
@@ -24,9 +26,9 @@ export default function LoginMenu() {
     const {userModel} = useUserContext();
     const loggedIn = Boolean(typeof userModel === 'object' && userModel.id);
 
-    return (
-        loggedIn ?
-            <JITLoad importFn={() => import('./login-menu-with-dropdown')} /> :
-            <LoginLink />
+    return loggedIn ? (
+        <JITLoad importFn={() => import('./login-menu-with-dropdown')} />
+    ) : (
+        <LoginLink />
     );
 }