basic proof of concept using axios api package

base-theme/layouts/partials/header.html

@@ -37,6 +37,9 @@
         <li class="nav-item">
           {{ partial "link.html" (dict "href" $contactUrl "class" "nav-link" "text" "Contact Us") }}
         </li>
+        <li>
+          <div id="user-menu-conatiner"></div>
+        </li>
       </ul>
     </div>
   </nav>
@@ -61,6 +64,7 @@
       {{ partial "link.html" (dict "href" $aboutUrl "class" "text-white text-decoration-none font-weight-bold pl-5 pr-3 py-2" "text" "about ocw") }}
       {{ partial "link.html" (dict "href" $zenDeskUrl "class" "text-white text-decoration-none font-weight-bold px-3 py-2" "text" "help & faqs" "target" "_blank") }}
       {{ partial "link.html" (dict "href" $contactUrl "class" "text-white text-decoration-none font-weight-bold px-3 py-2" "text" "contact us") }}
+      <div id="user-menu-container"></div>
     </div>
   </div>
 </div>

package.json

@@ -41,7 +41,11 @@
   "browserslist": "> 0.25%, not dead",
   "dependencies": {
     "@mitodl/course-search-utils": "^2.3.0",
+    "@mitodl/open-api-axios": "^2024.11.14",
+    "@mitodl/smoot-design": "^3.1.0",
+    "@remixicon/react": "^4.6.0",
     "@sentry/browser": "^7.0.0",
+    "@tanstack/react-query": "^5.66.0",
     "array-flat-polyfill": "^1.0.1",
     "bootstrap": "^4.3.1",
     "casual": "^1.6.2",
@@ -60,12 +64,13 @@
     "popper.js": "^1.16.1",
     "promise-polyfill": "^8.3.0",
     "ramda": "^0.30.0",
-    "react": "^16.13.1",
+    "react": "^19.0.0",
     "react-bootstrap": "^1.0.0-beta.15",
     "react-content-loader": "^5.1.2",
-    "react-dom": "^16.13.1",
+    "react-dom": "^19.0.0",
     "react-dotdotdot": "1.3.1",
     "react-infinite-scroller": "^1.2.4",
+    "remixicon": "^4.6.0",
     "sass": "1.77.8",
     "video.js": "^7.11.8",
     "videojs-transcript-ac": "^0.8.8",
@@ -86,7 +91,8 @@
     "@types/lodash.uppercase": "^4.3.6",
     "@types/promise-polyfill": "^6.0.4",
     "@types/ramda": "^0.27.62",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@types/react-infinite-scroller": "^1.2.2",
     "@types/serve-handler": "^6.1.1",
     "@types/sinon": "^10.0.6",

www/assets/js/components/UserMenu.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+
+import {
+  RiAccountCircleFill,
+} from "@remixicon/react"
+
+import { useUserMe } from "../hooks/user"
+
+export default function UserMenu() {
+  const { data: user } = useUserMe()
+
+  return (
+    <div className="dropdown">
+      <button
+        className="btn btn-link dropdown-toggle"
+        type="button"
+        id="userMenu"
+        data-toggle="dropdown"
+        aria-expanded="false"
+      >
+        <RiAccountCircleFill size={24} />
+      </button>
+      <ul className="dropdown-menu" aria-labelledby="userMenu">
+        {user?.is_authenticated ? (
+          <>
+            <li>
+              {user.first_name} {user.last_name}
+            </li>
+            <li>
+              <a className="dropdown-item" href="https://learn.dev.c4103.com/dashboard" target="_blank">
+                Dashboard
+              </a>
+            </li>
+            <li>
+              <a className="dropdown-item" href="https://learn.dev.c4103.com/logout" target="_blank">
+                Logout
+              </a>
+            </li>
+          </>
+        ) : (
+          <li>
+            <a className="dropdown-item" href="https://learn.dev.c4103.com/login" target="_blank">
+              Login
+            </a>
+          </li>
+        )}
+      </ul>
+    </div>
+  )
+}

www/assets/js/hooks/user.ts

@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query"
+import { User as UserApi, UsersApi } from "@mitodl/open-api-axios/v0"
+
+interface User extends Partial<UserApi> {
+  is_authenticated: boolean
+}
+
+const useUserMe = () =>
+  useQuery({
+    queryKey: ["userMe"],
+    queryFn: async (): Promise<User> => {
+      try {
+        const usersApi = new UsersApi(undefined, "https://api.learn.dev.c4103.com/".replace(/\/+$/, ""), )
+        usersApi.axios.defaults.withCredentials = true
+        const response = await usersApi.usersMeRetrieve()
+        return {
+          is_authenticated: true,
+          ...response.data,
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (error: any) {
+        if (error.response?.status === 403) {
+          return {
+            is_authenticated: false,
+          }
+        }
+        throw error
+      }
+    },
+  })
+
+export { useUserMe }

www/assets/www.tsx

@@ -2,8 +2,9 @@ import "./css/www.scss"
 import "./css/search.scss"
 
 import Popper from "popper.js"
-import ReactDOM from "react-dom"
 import React from "react"
+import ReactDOM from "react-dom/client"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { createBrowserHistory } from "history"
 
 import SearchPage from "./js/components/SearchPage"
@@ -13,6 +14,7 @@ import { setupEmailSignupForm } from "./js/mailchimp"
 import { initNotifications } from "./js/notification"
 import { initSubNav } from "./js/subnav"
 import ResourceCollection from "./js/components/ResourceCollection"
+import UserMenu from "./js/components/UserMenu"
 
 export interface OCWWindow extends Window {
   $: JQueryStatic
@@ -28,10 +30,55 @@ window.Popper = Popper
 
 const history = createBrowserHistory()
 
+type MaybeHasStatus = {
+  response?: {
+    status?: number
+  }
+}
+
+const RETRY_STATUS_CODES = [408, 429, 502, 503, 504]
+const MAX_RETRIES = 3
+const THROW_ERROR_CODES: (number | undefined)[] = [404, 403, 401]
+
+const makeQueryClient = (): QueryClient => {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        staleTime: Infinity,
+        throwOnError: (error) => {
+          const status = (error as MaybeHasStatus)?.response?.status
+          return THROW_ERROR_CODES.includes(status)
+        },
+        retry: (failureCount, error) => {
+          const status = (error as MaybeHasStatus)?.response?.status
+          /**
+           * React Query's default behavior is to retry all failed queries 3
+           * times. Many things (e.g., 403, 404) are not worth retrying. Let's
+           * just retry some explicit whitelist of status codes.
+           */
+          if (status !== undefined && RETRY_STATUS_CODES.includes(status)) {
+            return failureCount < MAX_RETRIES
+          }
+          return false
+        },
+      },
+    },
+  })
+}
+
 $(function() {
+  const userMenuContainer = document.querySelector("#user-menu-container")
+  if (userMenuContainer) {
+    const queryClient = makeQueryClient()
+    const root = ReactDOM.createRoot(userMenuContainer)
+    root.render(<QueryClientProvider client={queryClient}><UserMenu /></QueryClientProvider>)
+  }
+
   const searchPageEl = document.querySelector("#search-page")
   if (searchPageEl) {
-    ReactDOM.render(<SearchPage history={history} />, searchPageEl)
+    const root = ReactDOM.createRoot(searchPageEl)
+    root.render(<SearchPage history={history} />)
   }
 
   const courseCollectionEls = document.querySelectorAll(
@@ -44,7 +91,8 @@ $(function() {
     if (el) {
       const collectionUid = el.getAttribute("data-collectionid")
       if (collectionUid) {
-        ReactDOM.render(<CourseList uid={collectionUid} />, el)
+        const root = ReactDOM.createRoot(el)
+        root.render(<CourseList uid={collectionUid} />)
       }
     }
   })
@@ -53,7 +101,8 @@ $(function() {
     "#resource-collection-container"
   )
   if (resourceCollectionEl) {
-    ReactDOM.render(<ResourceCollection />, resourceCollectionEl)
+    const root = ReactDOM.createRoot(resourceCollectionEl)
+    root.render(<ResourceCollection />)
   }
 
   initNotifications()