Migrate useMediaQuery hooks

frontends/main/next.config.js

@@ -44,74 +44,14 @@ const nextConfig = {
   images: {
     remotePatterns: [
       {
-        protocol: "https",
-        hostname: "*.mit.edu",
-        port: "",
-        pathname: "**",
-      },
-      {
-        protocol: "https",
-        hostname: "i.embed.ly",
-        port: "",
-        pathname: "**",
-      },
-      {
-        protocol: "https",
-        hostname: "ol-xpro-app-production.s3.amazonaws.com",
-        port: "",
-        pathname: "**",
-      },
-      {
-        protocol: "https",
-        hostname: "*.cloudfront.net",
-        port: "",
-        pathname: "**",
-      },
-      {
-        protocol: "https",
-        hostname: "*.edx-cdn.org",
-        port: "",
-        pathname: "**",
-      },
-      {
-        protocol: "https",
-        hostname: "i.ytimg.com",
-        port: "",
-        pathname: "**",
-      },
-      {
-        protocol: "https",
-        hostname: "i1.sndcdn.com",
-        port: "",
-        pathname: "**",
-      },
-      {
-        protocol: "https",
-        hostname: "*.medium.com",
-        port: "",
-        pathname: "**",
-      },
-      {
-        protocol: "https",
-        hostname: "image.simplecastcdn.com",
-        port: "",
-        pathname: "**",
-      },
-      {
-        protocol: "https",
-        hostname: "megaphone.imgix.net",
-        port: "",
-        pathname: "**",
-      },
-      {
-        protocol: "https",
-        hostname: "artwork.captivate.fm",
+        protocol: "http",
+        hostname: "**",
         port: "",
         pathname: "**",
       },
       {
         protocol: "https",
-        hostname: "xpro-app-rc.s3.amazonaws.com",
+        hostname: "**",
         port: "",
         pathname: "**",
       },

frontends/main/src/app-pages/HomePage/HomePage.test.tsx

@@ -176,7 +176,8 @@ describe("Home Page News and Events", () => {
     let section
     await waitFor(() => {
       section = screen
-        .getByRole("heading", { name: "Stories" })!
+        .getAllByRole("heading", { name: "Stories" })!
+        .at(0)!
         .closest("section")!
     })
 
@@ -227,7 +228,8 @@ describe("Home Page News and Events", () => {
     let section
     await waitFor(() => {
       section = screen
-        .getByRole("heading", { name: "Events" })!
+        .getAllByRole("heading", { name: "Events" })!
+        .at(0)!
         .closest("section")!
     })
 
@@ -334,6 +336,8 @@ test("Headings", async () => {
       { level: 2, name: "MIT Stories & Events" },
       { level: 3, name: "Stories" },
       { level: 3, name: "Events" },
+      { level: 3, name: "Stories" },
+      { level: 3, name: "Events" },
     ])
   })
 })

frontends/main/src/app-pages/HomePage/NewsEventsSection.tsx

@@ -5,7 +5,6 @@ import {
   theme,
   Typography,
   Grid,
-  useMuiBreakpointAtLeast,
   Card,
   TypographyProps,
 } from "ol-components"
@@ -63,8 +62,8 @@ const MobileContainer = styled.section`
   width: 100%;
   margin: 0 -16px;
 
-  h4 {
-    margin: 0 16px 24px;
+  h3 {
+    margin: 0 16px 12px;
   }
 `
 
@@ -101,6 +100,7 @@ const Events = styled.div`
 
 const MobileEvents = styled(Events)`
   padding: 0 16px;
+  gap: 18px;
 `
 
 const EventCard = styled(Card)`
@@ -167,6 +167,24 @@ const Chevron = styled(RiArrowRightSLine)`
   justify-content: flex-end;
 `
 
+const AboveMdOnly = styled.div(({ theme }) => ({
+  [theme.breakpoints.down("md")]: {
+    display: "none",
+  },
+}))
+
+const BelowMdOnly = styled.div(({ theme }) => ({
+  [theme.breakpoints.up("md")]: {
+    display: "none",
+  },
+}))
+
+const AboveLgOnly = styled.div(({ theme }) => ({
+  [theme.breakpoints.down("lg")]: {
+    display: "none",
+  },
+}))
+
 const Story: React.FC<{ item: NewsFeedItem; mobile: boolean }> = ({
   item,
   mobile,
@@ -199,14 +217,11 @@ const NewsEventsSection: React.FC = () => {
     sortby: "event_date",
   })
 
-  const isAboveLg = useMuiBreakpointAtLeast("lg")
-  const isMobile = !useMuiBreakpointAtLeast("md")
-
   if (!news || !events) {
     return null
   }
 
-  const stories = news!.results?.slice(0, isAboveLg || isMobile ? 6 : 4) || []
+  const stories = news!.results?.slice(0, 6) || []
 
   const EventCards =
     events!.results?.map((item) => (
@@ -241,7 +256,7 @@ const NewsEventsSection: React.FC = () => {
         See what's happening in the world of learning with the latest news,
         insights, and upcoming events at MIT.
       </StrapLine>
-      {isMobile ? (
+      <BelowMdOnly>
         <MobileContent>
           <MobileContainer>
             <Typography component="h3" variant="h4">
@@ -251,7 +266,7 @@ const NewsEventsSection: React.FC = () => {
               {stories.map((item) => (
                 <Story
                   key={item.id}
-                  mobile={isMobile}
+                  mobile={true}
                   item={item as NewsFeedItem}
                 />
               ))}
@@ -264,17 +279,24 @@ const NewsEventsSection: React.FC = () => {
             <MobileEvents>{EventCards}</MobileEvents>
           </MobileContainer>
         </MobileContent>
-      ) : (
+      </BelowMdOnly>
+      <AboveMdOnly>
         <Container>
           <Content>
             <StoriesContainer>
               <Typography component="h3" variant="h4">
                 Stories
               </Typography>
               <Grid container columnSpacing="24px" rowSpacing="28px">
-                {stories.map((item) => (
+                {stories.map((item, index) => (
                   <Grid item key={item.id} xs={12} sm={12} md={6} lg={4} xl={4}>
-                    <Story item={item as NewsFeedItem} mobile={false} />
+                    {index >= 4 ? (
+                      <AboveLgOnly>
+                        <Story item={item as NewsFeedItem} mobile={false} />
+                      </AboveLgOnly>
+                    ) : (
+                      <Story item={item as NewsFeedItem} mobile={false} />
+                    )}
                   </Grid>
                 ))}
               </Grid>
@@ -287,7 +309,7 @@ const NewsEventsSection: React.FC = () => {
             </EventsContainer>
           </Content>
         </Container>
-      )}
+      </AboveMdOnly>
     </Section>
   )
 }

frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx

@@ -21,7 +21,6 @@ import {
 import { ListCard } from "../Card/ListCard"
 import { ActionButtonProps } from "../Button/Button"
 import { theme } from "../ThemeProvider/ThemeProvider"
-import { useMuiBreakpointAtLeast } from "../../hooks/useBreakpoint"
 
 const IMAGE_SIZES = {
   mobile: { width: 116, height: 104 },
@@ -181,7 +180,7 @@ export const Format = ({ resource }: { resource: LearningResource }) => {
   )
 }
 
-const Loading = styled.div<{ mobile?: boolean }>`
+const Loading = styled.div`
   display: flex;
   padding: 24px;
   justify-content: space-between;
@@ -194,40 +193,54 @@ const Loading = styled.div<{ mobile?: boolean }>`
     flex-grow: 0;
     margin-left: auto;
   }
-  ${({ mobile }) =>
-    mobile
-      ? `
-    padding: 0px;
-    > div {
-      padding: 12px;
-    }`
-      : ""}
 `
 
-const LoadingView = ({ isMobile }: { isMobile: boolean }) => {
-  const { width, height } = IMAGE_SIZES[isMobile ? "mobile" : "desktop"]
+const MobileLoading = styled(Loading)(({ theme }) => ({
+  [theme.breakpoints.up("md")]: {
+    display: "none",
+  },
+  padding: "0px",
+  "> div": {
+    padding: "12px",
+  },
+}))
+
+const DesktopLoading = styled(Loading)(({ theme }) => ({
+  [theme.breakpoints.down("md")]: {
+    display: "none",
+  },
+}))
+
+const LoadingView = () => {
   return (
-    <Loading mobile={isMobile}>
-      <div>
+    <>
+      <MobileLoading>
+        <div>
+          <Skeleton variant="text" width="15%" style={{ marginBottom: 4 }} />
+          <Skeleton variant="text" width="75%" style={{ marginBottom: 16 }} />
+          <Skeleton variant="text" width="20%" />
+        </div>
         <Skeleton
-          variant="text"
-          width="15%"
-          style={{ marginBottom: isMobile ? 4 : 10 }}
+          variant="rectangular"
+          width={IMAGE_SIZES.mobile.width}
+          height={IMAGE_SIZES.mobile.height}
+          style={{ borderRadius: 0 }}
         />
+      </MobileLoading>
+      <DesktopLoading>
+        <div>
+          <Skeleton variant="text" width="15%" style={{ marginBottom: 10 }} />
+          <Skeleton variant="text" width="75%" style={{ marginBottom: 51 }} />
+          <Skeleton variant="text" width="20%" />
+        </div>
         <Skeleton
-          variant="text"
-          width="75%"
-          style={{ marginBottom: isMobile ? 16 : 51 }}
+          variant="rectangular"
+          width={IMAGE_SIZES.desktop.width}
+          height={IMAGE_SIZES.desktop.height}
+          style={{ borderRadius: 4 }}
         />
-        <Skeleton variant="text" width="20%" />
-      </div>
-      <Skeleton
-        variant="rectangular"
-        width={width}
-        height={height}
-        style={{ borderRadius: 4 }}
-      />
-    </Loading>
+      </DesktopLoading>
+    </>
   )
 }
 
@@ -282,13 +295,11 @@ const LearningResourceListCard: React.FC<LearningResourceListCardProps> = ({
   inUserList,
   draggable,
 }) => {
-  const isMobile = !useMuiBreakpointAtLeast("md")
-
   if (isLoading) {
     return (
       <ListCard className={className}>
         <ListCard.Content>
-          <LoadingView isMobile={isMobile} />
+          <LoadingView />
         </ListCard.Content>
       </ListCard>
     )
@@ -302,7 +313,7 @@ const LearningResourceListCard: React.FC<LearningResourceListCardProps> = ({
       <ListCard.Image
         src={resource.image?.url || DEFAULT_RESOURCE_IMG}
         alt={resource.image?.alt ?? ""}
-        {...IMAGE_SIZES[isMobile ? "mobile" : "desktop"]}
+        {...IMAGE_SIZES["desktop"]}
       />
       <ListCard.Info>
         <Info resource={resource} />

frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCardCondensed.tsx

@@ -13,7 +13,6 @@ import {
   getLearningResourcePrices,
 } from "ol-utilities"
 import { ListCardCondensed } from "../Card/ListCardCondensed"
-import { useMuiBreakpointAtLeast } from "../../hooks/useBreakpoint"
 import {
   Certificate,
   Price,
@@ -51,13 +50,13 @@ const Info = ({ resource }: { resource: LearningResource }) => {
   )
 }
 
-const Loading = styled.div<{ mobile?: boolean }>`
+const Loading = styled.div`
   padding: 16px;
 `
 
-const LoadingView = ({ isMobile }: { isMobile: boolean }) => {
+const LoadingView = () => {
   return (
-    <Loading mobile={isMobile}>
+    <Loading>
       <Skeleton variant="text" width="6%" />
       <Skeleton variant="text" width="60%" style={{ marginBottom: 8 }} />
       <Skeleton variant="text" width="20%" />
@@ -103,13 +102,11 @@ const LearningResourceListCardCondensed: React.FC<
   inUserList,
   draggable,
 }) => {
-  const isMobile = !useMuiBreakpointAtLeast("md")
-
   if (isLoading) {
     return (
       <ListCardCondensed className={className}>
         <ListCardCondensed.Content>
-          <LoadingView isMobile={isMobile} />
+          <LoadingView />
         </ListCardCondensed.Content>
       </ListCardCondensed>
     )