Learning Resource cards, list view

frontends/api/src/clients.ts

@@ -25,6 +25,7 @@ import {
 import axiosInstance from "./axios"
 
 const BASE_PATH = process.env.MITOPEN_AXIOS_BASE_PATH?.replace(/\/+$/, "") ?? ""
+
 const learningResourcesApi = new LearningResourcesApi(
   undefined,
   BASE_PATH,

frontends/mit-open/.storybook/main.ts

@@ -37,7 +37,7 @@ const config = {
     PUBLIC_URL: process.env.PUBLIC_URL || "",
     EMBEDLY_KEY: process.env.EMBEDLY_KEY || "",
     APP_SETTINGS: {
-      embedlyKey: "fake-embedly-key",
+      embedlyKey: process.env.EMBEDLY_KEY || "",
     },
   }),
 }

frontends/mit-open/.storybook/preview-head.html

@@ -5,6 +5,6 @@
 <link rel="stylesheet" href="https://use.typekit.net/lbk1xay.css" />
 <script>
   window.APP_SETTINGS = {
-    embedlyKey: 'fake-embedly-key',
+    embedlyKey: null,
   }
 </script>

frontends/mit-open/src/page-components/LearningResourceCard/LearningResourceCard.tsx

@@ -1,3 +1,9 @@
+/*
+ * TODO: This has been replaced by the ol-components LearningResourceCard
+ * It is still in use by the LearningPathDetailsPage -> ListDetails -> ItemsListing
+ * though can be removed (and adjacent LearningResourceCardTemplate) once
+ * the sorting functionality has been refactored across
+ */
 import React, { useCallback } from "react"
 import * as NiceModal from "@ebay/nice-modal-react"
 

frontends/mit-open/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx

@@ -93,5 +93,14 @@ const useOpenLearningResourceDrawer = () => {
   return openLearningResourceDrawer
 }
 
+const useResourceDrawerHref = () => {
+  const [search] = useSearchParams()
+
+  return (id: number) => {
+    search.set(RESOURCE_DRAWER_QUERY_PARAM, id.toString())
+    return `?${search.toString()}`
+  }
+}
+
 export default LearningResourceDrawer
-export { useOpenLearningResourceDrawer }
+export { useOpenLearningResourceDrawer, useResourceDrawerHref }

frontends/mit-open/src/page-components/ResourceCarousel/ResourceCarousel.tsx

@@ -27,15 +27,7 @@ import {
   AddToLearningPathDialog,
   AddToUserListDialog,
 } from "../Dialogs/AddToListDialog"
-import { useOpenLearningResourceDrawer } from "../LearningResourceDrawer/LearningResourceDrawer"
-
-const LearningResourceCardStyled = styled(LearningResourceCard)({
-  boxShadow: "none",
-  ":hover": {
-    boxShadow:
-      "0 2px 4px 0 rgb(37 38 43 / 10%), 0 2px 4px 0 rgb(37 38 43 / 10%)",
-  },
-})
+import { useResourceDrawerHref } from "../LearningResourceDrawer/LearningResourceDrawer"
 
 const StyledCarousel = styled(Carousel)({
   /**
@@ -272,6 +264,7 @@ const ResourceCarousel: React.FC<ResourceCarouselProps> = ({
   const { data: user } = useUserMe()
   const [tab, setTab] = React.useState("0")
   const [ref, setRef] = React.useState<HTMLDivElement | null>(null)
+  const getDrawerHref = useResourceDrawerHref()
 
   const showAddToLearningPathDialog =
     user?.is_authenticated && user?.is_learning_path_editor
@@ -286,8 +279,6 @@ const ResourceCarousel: React.FC<ResourceCarouselProps> = ({
       }
     : null
 
-  const openLRDrawer = useOpenLearningResourceDrawer()
-
   return (
     <MobileOverflow className={className}>
       <TabContext value={tab}>
@@ -314,21 +305,21 @@ const ResourceCarousel: React.FC<ResourceCarouselProps> = ({
             <StyledCarousel arrowsContainer={ref}>
               {isLoading || childrenLoading
                 ? Array.from({ length: 6 }).map((_, index) => (
-                    <LearningResourceCardStyled
+                    <LearningResourceCard
                       isLoading
                       key={index}
                       resource={null}
                       {...tabConfig.cardProps}
                     />
                   ))
                 : resources.map((resource) => (
-                    <LearningResourceCardStyled
+                    <LearningResourceCard
                       key={resource.id}
                       resource={resource}
                       {...tabConfig.cardProps}
+                      href={getDrawerHref(resource.id)}
                       onAddToLearningPathClick={showAddToLearningPathDialog}
                       onAddToUserListClick={showAddToUserListDialog}
-                      onActivate={() => openLRDrawer(resource.id)}
                     />
                   ))}
             </StyledCarousel>

frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx

@@ -5,23 +5,21 @@ import {
   MuiCard,
   CardContent,
   PlainList,
-  Skeleton,
   Container,
   Typography,
   Button,
   SimpleSelect,
   truncateText,
   css,
+  LearningResourceListCard,
 } from "ol-components"
-
 import TuneIcon from "@mui/icons-material/Tune"
-
+import * as NiceModal from "@ebay/nice-modal-react"
 import {
   LearningResourcesSearchApiLearningResourcesSearchRetrieveRequest as LRSearchRequest,
   ResourceTypeEnum,
 } from "api"
 import { useLearningResourcesSearch } from "api/hooks/learningResources"
-
 import { GridColumn, GridContainer } from "@/components/GridLayout/GridLayout"
 import {
   AvailableFacets,
@@ -33,13 +31,16 @@ import type {
   BooleanFacets,
   FacetManifest,
 } from "@mitodl/course-search-utils"
-import LearningResourceCard from "@/page-components/LearningResourceCard/LearningResourceCard"
 import _ from "lodash"
-
 import { ResourceTypeTabs } from "./ResourceTypeTabs"
 import ProfessionalToggle from "./ProfessionalToggle"
-
 import type { TabConfig } from "./ResourceTypeTabs"
+import { useUserMe } from "api/hooks/user"
+import {
+  AddToLearningPathDialog,
+  AddToUserListDialog,
+} from "../Dialogs/AddToListDialog"
+import { useResourceDrawerHref } from "@/page-components/LearningResourceDrawer/LearningResourceDrawer"
 
 export const StyledDropdown = styled(SimpleSelect)`
   margin: 8px;
@@ -201,10 +202,7 @@ export const FacetsTitleContainer = styled.div`
 const PaginationContainer = styled.div`
   display: flex;
   justify-content: end;
-`
-
-const StyledSkeleton = styled(Skeleton)`
-  border-radius: 4px;
+  margin-top: 16px;
 `
 
 const PAGE_SIZE = 10
@@ -293,6 +291,24 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
     },
     { keepPreviousData: true },
   )
+
+  const { data: user } = useUserMe()
+
+  const getDrawerHref = useResourceDrawerHref()
+
+  const showAddToLearningPathDialog =
+    user?.is_authenticated && user?.is_learning_path_editor
+      ? (resourceId: number) => {
+          NiceModal.show(AddToLearningPathDialog, { resourceId })
+        }
+      : null
+
+  const showAddToUserListDialog = user?.is_authenticated
+    ? (resourceId: number) => {
+        NiceModal.show(AddToUserListDialog, { resourceId })
+      }
+    : null
+
   return (
     <Container>
       <GridContainer>
@@ -357,17 +373,19 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
                     .fill(null)
                     .map((a, index) => (
                       <li key={index}>
-                        <StyledSkeleton variant="rectangular" height={162} />
+                        <LearningResourceListCard isLoading={isLoading} />
                       </li>
                     ))}
                 </PlainList>
               ) : data && data.count > 0 ? (
                 <PlainList itemSpacing={3}>
                   {data.results.map((resource) => (
                     <li key={resource.id}>
-                      <LearningResourceCard
-                        variant="row-reverse"
+                      <LearningResourceListCard
                         resource={resource}
+                        href={getDrawerHref(resource.id)}
+                        onAddToLearningPathClick={showAddToLearningPathDialog}
+                        onAddToUserListClick={showAddToUserListDialog}
                       />
                     </li>
                   ))}

frontends/mit-open/src/pages/HomePage/NewsEventsSection.tsx

@@ -7,7 +7,6 @@ import {
   Grid,
   useMuiBreakpointAtLeast,
   Card,
-  CardLinkContainer,
 } from "ol-components"
 import {
   useNewsEventsList,
@@ -81,7 +80,6 @@ const StoryCard = styled(Card)<{ mobile: boolean }>`
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  overflow: hidden;
   ${({ mobile }) => (mobile ? "width: 274px" : "")}
 `
 
@@ -105,15 +103,18 @@ const MobileEvents = styled(Events)`
   padding: 0 16px;
 `
 
-const EventCard = styled(CardLinkContainer)`
+const EventCard = styled(Card)`
   display: flex;
   align-items: center;
   gap: 16px;
   flex: 1 0 0;
   align-self: stretch;
-  padding: 16px;
   justify-content: space-between;
   overflow: visible;
+
+  > a {
+    padding: 16px;
+  }
 `
 
 const EventDate = styled.div`
@@ -173,7 +174,7 @@ const Story: React.FC<{ item: NewsFeedItem; mobile: boolean }> = ({
   mobile,
 }) => {
   return (
-    <StoryCard mobile={mobile} href={item.url} link>
+    <StoryCard mobile={mobile} href={item.url}>
       <Card.Image src={item.image?.url} alt={item.image?.alt} />
       <Card.Title>{item.title}</Card.Title>
       <Card.Footer>
@@ -208,22 +209,24 @@ const NewsEventsSection: React.FC = () => {
   const EventCards =
     events!.results?.map((item) => (
       <EventCard key={item.id} href={item.url}>
-        <EventDate>
-          <EventDay>
-            {formatDate(
-              (item as EventFeedItem).event_details?.event_datetime,
-              "D",
-            )}
-          </EventDay>
-          <EventMonth>
-            {formatDate(
-              (item as EventFeedItem).event_details?.event_datetime,
-              "MMM",
-            )}
-          </EventMonth>
-        </EventDate>
-        <EventTitle>{item.title}</EventTitle>
-        <Chevron />
+        <Card.Content>
+          <EventDate>
+            <EventDay>
+              {formatDate(
+                (item as EventFeedItem).event_details?.event_datetime,
+                "D",
+              )}
+            </EventDay>
+            <EventMonth>
+              {formatDate(
+                (item as EventFeedItem).event_details?.event_datetime,
+                "MMM",
+              )}
+            </EventMonth>
+          </EventDate>
+          <EventTitle>{item.title}</EventTitle>
+          <Chevron />
+        </Card.Content>
       </EventCard>
     )) || []
 

frontends/mit-open/src/pages/LearningPathListingPage/LearningPathListingPage.test.tsx

@@ -2,33 +2,16 @@ import React from "react"
 import { faker } from "@faker-js/faker/locale/en"
 import { factories, urls } from "api/test-utils"
 import { manageListDialogs } from "@/page-components/ManageListDialogs/ManageListDialogs"
-import LearningResourceCardTemplate from "@/page-components/LearningResourceCardTemplate/LearningResourceCardTemplate"
 import LearningPathListingPage from "./LearningPathListingPage"
 import {
   screen,
   renderWithProviders,
   setMockResponse,
   user,
-  expectProps,
   waitFor,
 } from "../../test-utils"
 import type { User } from "../../types/settings"
 
-jest.mock(
-  "../../page-components/LearningResourceCardTemplate/LearningResourceCardTemplate",
-  () => {
-    const actual = jest.requireActual(
-      "../../page-components/LearningResourceCardTemplate/LearningResourceCardTemplate",
-    )
-    return {
-      __esModule: true,
-      ...actual,
-      default: jest.fn(actual.default),
-    }
-  },
-)
-const spyLRCardTemplate = jest.mocked(LearningResourceCardTemplate)
-
 /**
  * Set up the mock API responses for lists pages.
  */
@@ -67,10 +50,6 @@ describe("LearningPathListingPage", () => {
     // for sanity
     expect(headings.length).toBeGreaterThan(0)
     expect(titles.length).toBe(headings.length)
-
-    paths.results.forEach((resource) => {
-      expectProps(spyLRCardTemplate, { resource })
-    })
   })
 
   it.each([