fix: monthly date offsets (#476)

* fix: next occurrence date in monthly schedule

* fix: console warning on home page

* chore: remove unused type

* chore: add comment about timezone use in monthly schedule

* Update HomeButtons.test.tsx

* test: update homelink mock in homebutton.test

Co-authored-by: Jeremiah Tabb <51095001+jollyjerr@users.noreply.github.com>

Author: jacobvenable

packages/web/src/components/HomeButtons.tsx

@@ -15,7 +15,7 @@ import {
 import Box from "@material-ui/core/Box";
 import Grid from "@material-ui/core/Grid";
 import HomeButton from "./HomeButton";
-import { HomeRouterLink } from "./HomeLink";
+import HomeLink from "./HomeLink";
 import React from "react";
 import { THomeButtonRouterLink } from "../webTypes";
 import { colors } from "@upswyng/common";
@@ -139,7 +139,7 @@ const HomeButtons = () => {
           <Grid item xs={6} key={button.text}>
             <Box
               alignContent="stretch"
-              component={HomeRouterLink}
+              component={HomeLink}
               display="flex"
               height="100%"
               {...button}
@@ -158,7 +158,7 @@ const HomeButtons = () => {
       <Grid item xs={12}>
         <Box
           alignContent="stretch"
-          component={HomeRouterLink}
+          component={HomeLink}
           display="flex"
           height="100%"
           {...coordinatedEntryButton}

packages/web/src/components/HomeLink.tsx

@@ -1,29 +1,20 @@
-import { THomeButtonAnchor, THomeButtonRouterLink } from "../webTypes";
-
 import { Link } from "react-router-dom";
 import React from "react";
+import { THomeButtonRouterLink } from "../webTypes";
 
 interface HomeLinkPropsBase {
   children: React.ReactElement | React.ReactElement[];
 }
 
-type HomeRouterLinkProps = HomeLinkPropsBase & THomeButtonRouterLink;
-type HomeAnchorProps = HomeLinkPropsBase &
-  THomeButtonAnchor &
-  React.HTMLProps<HTMLAnchorElement>;
+type HomeLink = HomeLinkPropsBase & THomeButtonRouterLink;
 
-export const HomeRouterLink = (props: HomeRouterLinkProps) => {
-  const { children, linkProps, ...rest } = props;
+const HomeLink = (props: HomeLink) => {
+  const { children, linkProps } = props;
   return (
-    <Link {...linkProps} {...rest}>
+    <Link style={{ textDecoration: "none" }} {...linkProps}>
       {children}
     </Link>
   );
 };
 
-export const HomeAnchorLink = (props: HomeAnchorProps) => {
-  const { children, ...rest } = props;
-  return <a {...rest}>{children}</a>;
-};
-
-export default HomeRouterLink;
+export default HomeLink;

packages/web/src/components/MonthlySchedule.tsx

@@ -40,14 +40,23 @@ const MonthlySchedule = ({ items }: { items: TScheduleItem[] }) => {
           return null;
         }
 
-        const nextOccurenceDate = items[0].recurrenceRule
-          .all()[0]
-          .toLocaleString(undefined, { month: "short", day: "numeric" });
+        const nextOccurrenceDate = items[0].recurrenceRule.all()[0];
+        const nextOccurenceDateString = new Date(
+          nextOccurrenceDate
+        ).toLocaleString(undefined, {
+          month: "short",
+          day: "numeric",
+          // the rrule date is UTC-based
+          timeZone: "UTC",
+        });
+
         return (
           <Grid item xs={12} key={rRuleText}>
             <Grid container spacing={6}>
               <Grid item xs={6}>
-                <Typography component="h3">{nextOccurenceDate}</Typography>
+                <Typography component="h3">
+                  {nextOccurenceDateString}
+                </Typography>
                 <Typography variant="caption">repeats {rRuleText}</Typography>
               </Grid>
               <Grid item xs={6}>

packages/web/src/components/__tests__/HomeButtons.test.tsx

@@ -3,13 +3,14 @@ import HomeButtons, { routerLinkButtons } from "../HomeButtons";
 import React from "react";
 import { render } from "@testing-library/react";
 
-jest.mock("../HomeLink", () => ({
-  HomeRouterLink: ({ children }: { children: React.ReactChildren }) => (
+jest.mock(
+  "../HomeLink",
+  () => ({ children }: { children: React.ReactChildren }) => (
     <div>{children}</div>
-  ),
-}));
+  )
+);
+
 jest.mock("react-i18next", () => ({
-  // this mock makes sure any components using the translate hook can use it without a warning being shown
   useTranslation: () => {
     return {
       t: (str: string) => str,
@@ -24,6 +25,7 @@ describe("<HomeButtons/>", () => {
   const routerLinkTexts = routerLinkButtons.map(
     ({ translationKey }) => translationKey
   );
+
   it.each(routerLinkTexts)("renders the %s button", text => {
     const { getByText } = render(<HomeButtons />);
     expect(getByText(text)).toBeInTheDocument();

packages/web/src/webTypes.ts

@@ -54,11 +54,6 @@ interface THomeButtonBase {
   text: string;
   translationKey: string;
 }
-export interface THomeButtonAnchor extends THomeButtonBase {
-  href: string;
-  target: string;
-  rel: string;
-}
 
 export interface THomeButtonRouterLink extends THomeButtonBase {
   linkProps: LinkProps;