perf(clock): migrate Redux clock state to ClockProvider hooks

gatsby-browser.js

@@ -1,7 +1,9 @@
+import React from "react";
 import * as Sentry from "@sentry/gatsby";
 import { RewriteFrames as RewriteFramesIntegration } from "@sentry/integrations";
 import ReduxWrapper from "./src/state/ReduxWrapper";
 import wrapThemeProvider from "./src/utils/wrapThemeProvider";
+import ClockProvider from "./src/components/ClockProvider";
 import CookieManager from "./src/utils/cookies/CookieManager";
 import KlaroProvider from "./src/utils/cookies/providers/KlaroProvider";
 import cookieServices from "./src/utils/cookies/services";
@@ -25,7 +27,11 @@ import colors from "data/colors.json";
 import marketingSettings from "data/marketing-settings.json";
 
 export const wrapRootElement = ({ element }) => {
-  return wrapThemeProvider({ element: ReduxWrapper({ element }) });
+  return wrapThemeProvider({
+    element: ReduxWrapper({
+      element: <ClockProvider>{element}</ClockProvider>,
+    }),
+  });
 };
 
 export const onClientEntry = () => {

gatsby-ssr.js

@@ -9,6 +9,7 @@ import {
 } from "./src/components/HeadComponents";
 import ReduxWrapper from "./src/state/ReduxWrapper";
 import wrapThemeProvider from "./src/utils/wrapThemeProvider";
+import ClockProvider from "./src/components/ClockProvider";
 
 // Polyfills for build environment
 import "./src/utils/buildPolyfills";
@@ -17,7 +18,11 @@ const renderToStringWithEmotion = (bodyComponent) => {
   const cache = createEmotionCache();
   const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache);
 
-  const wrappedComponent = wrapThemeProvider({ element: ReduxWrapper({ element: bodyComponent }) });
+  const wrappedComponent = wrapThemeProvider({
+    element: ReduxWrapper({
+      element: <ClockProvider>{bodyComponent}</ClockProvider>,
+    }),
+  });
 
   const html = ReactDOMServer.renderToString(wrappedComponent);
   const emotionChunks = extractCriticalToChunks(html);

package.json

@@ -89,7 +89,7 @@
     "moment-timezone": "^0.5.31",
     "my-orders-tickets-widget": "1.0.10",
     "object.assign": "^4.1.5",
-    "openstack-uicore-foundation": "4.2.30",
+    "openstack-uicore-foundation": "4.2.31",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.6.0",
     "react": "^18.2.0",

src/actions/presentation-actions.js

@@ -13,7 +13,6 @@ import { customErrorHandler } from '../utils/customErrorHandler';
 
 import { VotingPeriod } from '../model/VotingPeriod';
 
-import { getVotingPeriodPhase } from '../utils/phasesUtils';
 import { mapVotesPerTrackGroup } from '../utils/voting-utils';
 
 import { getEnvVariable, SUMMIT_API_BASE_URL, SUMMIT_ID } from '../utils/envVariables';
@@ -28,7 +27,6 @@ export const GET_PRESENTATION_DETAILS = 'GET_PRESENTATION_DETAILS';
 export const GET_PRESENTATION_DETAILS_ERROR = 'GET_PRESENTATION_DETAILS_ERROR';
 export const GET_RECOMMENDED_PRESENTATIONS = 'GET_RECOMMENDED_PRESENTATIONS';
 export const VOTING_PERIODS_CREATE = 'VOTING_PERIODS_CREATE';
-export const VOTING_PERIODS_PHASE_CHANGE = 'VOTING_PERIODS_PHASE_CHANGE';
 const PresentationsDefaultPageSize = 30;
 
 export const setInitialDataset = () => (dispatch) => Promise.resolve().then(() => {
@@ -174,25 +172,8 @@ export const getRecommendedPresentations = (trackGroups) => async (dispatch) =>
   });
 };
 
-export const updateVotingPeriodsPhase = () => (dispatch, getState) => {
-  const { clockState: { nowUtc }, presentationsState: { votingPeriods } } = getState();
-  if (Object.keys(votingPeriods).length) {
-    const phaseChanges = [];
-    Object.entries(votingPeriods).forEach(entry => {
-      const [trackGroupId, votingPeriod] = entry;
-      const newPhase = getVotingPeriodPhase(votingPeriod, nowUtc);
-      if (newPhase !== votingPeriod.phase) {
-        phaseChanges.push({ trackGroupId, phase: newPhase });
-      }
-    });
-    if (phaseChanges.length)
-      dispatch(createAction(VOTING_PERIODS_PHASE_CHANGE)(phaseChanges));
-  }
-};
-
 export const createVotingPeriods = () => (dispatch, getState) => {
-  const { clockState: { nowUtc },
-          userState: { attendee },
+  const { userState: { attendee },
           summitState: { summit: { track_groups: trackGroups } },
           presentationsState: { voteablePresentations: { ssrPresentations: allBuildTimePresentations } } } = getState();
 
@@ -203,7 +184,7 @@ export const createVotingPeriods = () => (dispatch, getState) => {
     const { name, begin_attendee_voting_period_date: startDate,
             end_attendee_voting_period_date: endDate,
             max_attendee_votes: maxAttendeeVotes } = trackGroup;
-    const votingPeriod = VotingPeriod({ name, startDate, endDate, maxAttendeeVotes }, nowUtc);
+    const votingPeriod = VotingPeriod({ name, startDate, endDate, maxAttendeeVotes });
     if (votesPerTrackGroup[trackGroup.id]) votingPeriod.addVotes = votesPerTrackGroup[trackGroup.id];
     votingPeriods.push({ trackGroupId: trackGroup.id, votingPeriod });
   });

src/components/AttendeeToAttendeeWidgetComponent.js

@@ -19,6 +19,7 @@ import {
   SUPABASE_KEY,
 } from "@utils/envVariables";
 import {PHASES} from "@utils/phasesUtils";
+import {useSummitPhase} from "@utils/hooks/useSummitPhase";
 
 import "attendee-to-attendee-widget/dist/index.css";
 
@@ -203,7 +204,8 @@ const mapState = ({settingState}) => ({
 
 export const AttendeesWidget = connect(mapState)(AttendeesWidgetComponent);
 
-const AccessTracker = ({user, isLoggedUser, summitPhase, chatSettings, updateChatProfileEnabled = false}) => {
+const AccessTracker = ({user, isLoggedUser, chatSettings, updateChatProfileEnabled = false}) => {
+  const summitPhase = useSummitPhase();
   const chatProps = {
     streamApiKey: getEnvVariable(STREAM_IO_API_KEY),
     apiBaseUrl: getEnvVariable(IDP_BASE_URL),
@@ -317,10 +319,9 @@ const AccessTracker = ({user, isLoggedUser, summitPhase, chatSettings, updateCha
   return <Tracker {...widgetProps} ref={trackerRef}/>;
 };
 
-const mapStateToProps = ({loggedUserState, userState, clockState, settingState}) => ({
+const mapStateToProps = ({loggedUserState, userState, settingState}) => ({
   isLoggedUser: loggedUserState.isLoggedUser,
   user: userState,
-  summitPhase: clockState.summit_phase,
   chatSettings: settingState.widgets.chat
 });
 

src/components/AuthComponent.js

@@ -21,6 +21,7 @@ import { getDefaultLocation, validateIdentityProviderButtons } from "@utils/logi
 import { userHasAccessLevel, VIRTUAL_ACCESS_LEVEL } from "@utils/authorizedGroups";
 import useSiteSettings from "@utils/useSiteSettings";
 import { PHASES } from "@utils/phasesUtils";
+import { useSummitPhase } from "@utils/hooks/useSummitPhase";
 import { getEnvVariable, TENANT_ID } from "@utils/envVariables";
 
 import styles from "../styles/auth-component.module.scss";
@@ -34,7 +35,6 @@ const AuthComponent = ({
     allowsNativeAuth,
     allowsOtpAuth,
     isLoggedUser,
-    summitPhase,
     userProfile,
     eventRedirect,
     location,
@@ -43,6 +43,7 @@ const AuthComponent = ({
     renderLoginButton = null,
     renderEnterButton = null
 }) => {
+    const summitPhase = useSummitPhase();
     const [isActive, setIsActive] = useState(false);
     const [initialEmailValue, setInitialEmailValue] = useState('');
     const [otpLogin, setOtpLogin] = useState(false);
@@ -235,7 +236,7 @@ const AuthComponent = ({
     )
 };
 
-const mapStateToProps = ({ userState, summitState, settingState, clockState, loggedUserState }) => {
+const mapStateToProps = ({ userState, summitState, settingState, loggedUserState }) => {
     return ({
         loadingProfile: userState.loading,
         loadingIDP: userState.loadingIDP,
@@ -246,7 +247,6 @@ const mapStateToProps = ({ userState, summitState, settingState, clockState, log
         colorSettings: settingState.colorSettings,
         userProfile: userState.userProfile,
         marketingPageSettings: settingState.marketingPageSettings,
-        summitPhase: clockState.summit_phase,
         isLoggedUser: loggedUserState.isLoggedUser,
         // TODO: move to site settings i/o marketing page settings
         eventRedirect: settingState.marketingPageSettings.eventRedirect

src/components/ClockProvider.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { ClockProvider as UICoreClockProvider } from "openstack-uicore-foundation/lib/components/clock-context";
+
+const ClockProvider = ({ children }) => {
+  const summit = useSelector((state) => state.summitState.summit);
+  return (
+    <UICoreClockProvider
+      timezone={summit?.time_zone_id || "UTC"}
+      now={Math.round(Date.now() / 1000)}
+    >
+      {children}
+    </UICoreClockProvider>
+  );
+};
+
+export default ClockProvider;