refactor(eventsSlice): lean more heavily into parameterized selectors…

… as opposed to custom hooks

client/src/components/pages/Stats/Explore/MoodSummaryForPeriod.tsx

@@ -1,13 +1,8 @@
-import {
-  computeMeanSafe,
-  computeSecondsMeditatedInInterval,
-  computeStandardDeviation,
-} from "../../../../utils";
+import { computeMeanSafe, computeStandardDeviation } from "../../../../utils";
 import MoodSummary from "../../../shared/MoodSummary";
 import { Paper } from "eri";
 import { RootState } from "../../../../store";
 import eventsSlice from "../../../../store/eventsSlice";
-import useMoodsInPeriod from "../../../hooks/useMoodsInPeriod";
 import { useSelector } from "react-redux";
 
 interface Props {
@@ -16,15 +11,14 @@ interface Props {
 }
 
 export default function MoodSummaryForPeriod({ dateFrom, dateTo }: Props) {
-  const meditations = useSelector(eventsSlice.selectors.normalizedMeditations);
-  const moodValues = useMoodsInPeriod(dateFrom, dateTo).map(({ mood }) => mood);
+  const moodValues = useSelector((state: RootState) =>
+    eventsSlice.selectors.moodsInPeriod(state, dateFrom, dateTo),
+  ).map(({ mood }) => mood);
   const meanWeightInPeriod = useSelector((state: RootState) =>
     eventsSlice.selectors.meanWeightInPeriod(state, dateFrom, dateTo),
   );
-  const secondsMeditated = computeSecondsMeditatedInInterval(
-    meditations,
-    dateFrom,
-    dateTo,
+  const secondsMeditated = useSelector((state: RootState) =>
+    eventsSlice.selectors.secondsMeditatedInPeriod(state, dateFrom, dateTo),
   );
 
   return (

client/src/components/pages/Stats/Explore/index.tsx

@@ -14,12 +14,12 @@ import MoodCloudForPeriod from "../MoodCloudForPeriod";
 import MoodFrequencyForPeriod from "../MoodFrequencyForPeriod";
 import MoodGradientForPeriod from "../MoodGradientForPeriod";
 import MoodSummaryForPeriod from "./MoodSummaryForPeriod";
+import { RootState } from "../../../../store";
 import { TIME } from "../../../../constants";
 import WeatherForPeriod from "../WeatherForPeriod";
 import WeightChartForPeriod from "../WeightChartForPeriod";
 import { dayMonthFormatter } from "../../../../formatters/dateTimeFormatters";
 import eventsSlice from "../../../../store/eventsSlice";
-import useMoodIdsInPeriod from "../../../hooks/useMoodIdsInPeriod";
 import { useReducer } from "react";
 import { useSelector } from "react-redux";
 
@@ -165,7 +165,9 @@ export default function Explore() {
   );
 
   const dateTo = addDays(localState.displayDateTo, 1);
-  const moodIdsInPeriod = useMoodIdsInPeriod(localState.dateFrom, dateTo);
+  const moodIdsInPeriod = useSelector((state: RootState) =>
+    eventsSlice.selectors.moodIdsInPeriod(state, localState.dateFrom, dateTo),
+  );
 
   if (!eventsHasLoadedFromServer) return <Spinner />;
   if (!moods.allIds.length)

client/src/components/pages/Stats/LocationsForPeriod.tsx

@@ -1,8 +1,8 @@
 import { AppEventWithLocation, DeviceGeolocation } from "../../../types";
 import { Paper, SubHeading } from "eri";
 import LocationMap from "../../shared/LocationMap";
+import { RootState } from "../../../store";
 import eventsSlice from "../../../store/eventsSlice";
-import useEventIdsWithLocationInPeriod from "../../hooks/useEventIdsWithLocationInPeriod";
 import { useSelector } from "react-redux";
 
 interface Props {
@@ -12,9 +12,8 @@ interface Props {
 
 export default function LocationsForPeriod({ dateFrom, dateTo }: Props) {
   const eventsById = useSelector(eventsSlice.selectors.byId);
-  const eventIdsWithLocationInPeriod = useEventIdsWithLocationInPeriod(
-    dateFrom,
-    dateTo,
+  const eventIdsWithLocationInPeriod = useSelector((state: RootState) =>
+    eventsSlice.selectors.idsWithLocationInPeriod(state, dateFrom, dateTo),
   );
 
   const coordinatesToRender = new Set();

client/src/components/pages/Stats/MeditationImpactForPeriod.tsx

@@ -6,9 +6,9 @@ import {
   getNormalizedTagsFromDescription,
 } from "../../../utils";
 import { differenceInSeconds, sub } from "date-fns";
+import { RootState } from "../../../store";
 import eventsSlice from "../../../store/eventsSlice";
 import { oneDecimalPlaceFormatter } from "../../../formatters/numberFormatters";
-import useMeditationIdsInPeriod from "../../hooks/useMeditationIdsInPeriod";
 import { useSelector } from "react-redux";
 import { useState } from "react";
 
@@ -24,7 +24,9 @@ export default function MeditationImpactForPeriod({ dateFrom, dateTo }: Props) {
   const meditations = useSelector(eventsSlice.selectors.normalizedMeditations);
   const moods = useSelector(eventsSlice.selectors.normalizedMoods);
   const [shouldRemoveSharedWords, setShouldRemoveSharedWords] = useState(true);
-  const meditationIdsInPeriod = useMeditationIdsInPeriod(dateFrom, dateTo);
+  const meditationIdsInPeriod = useSelector((state: RootState) =>
+    eventsSlice.selectors.meditationIdsInPeriod(state, dateFrom, dateTo),
+  );
 
   if (!meditationIdsInPeriod.length || !moods.allIds.length) return;
 

client/src/components/pages/Stats/Month.tsx

@@ -34,10 +34,10 @@ import MoodFrequencyForPeriod from "./MoodFrequencyForPeriod";
 import MoodGradientForPeriod from "./MoodGradientForPeriod";
 import MoodSummaryForMonth from "./MoodSummaryForMonth";
 import PrevNextControls from "../../shared/PrevNextControls";
+import { RootState } from "../../../store";
 import WeatherForPeriod from "./WeatherForPeriod";
 import WeightChartForPeriod from "./WeightChartForPeriod";
 import eventsSlice from "../../../store/eventsSlice";
-import useMoodIdsInPeriod from "../../hooks/useMoodIdsInPeriod";
 import { useSelector } from "react-redux";
 import withStatsPage from "../../hocs/withStatsPage";
 
@@ -52,7 +52,9 @@ interface Props {
 }
 
 function Month({ date, nextDate, prevDate, showNext, showPrevious }: Props) {
-  const moodIdsInPeriod = useMoodIdsInPeriod(date, nextDate);
+  const moodIdsInPeriod = useSelector((state: RootState) =>
+    eventsSlice.selectors.moodIdsInPeriod(state, date, nextDate),
+  );
   const normalizedAveragesByWeek = useSelector(
     eventsSlice.selectors.normalizedAveragesByWeek,
   );

client/src/components/pages/Stats/MoodByLocationForPeriod.tsx

@@ -1,9 +1,9 @@
 import { Paper, Spinner } from "eri";
 import MoodByLocationTable from "../../shared/MoodByLocationTable";
+import { RootState } from "../../../store";
 import { captureException } from "../../../sentry";
 import eventsSlice from "../../../store/eventsSlice";
 import { integerPercentFormatter } from "../../../formatters/numberFormatters";
-import useMoodIdsWithLocationInPeriod from "../../hooks/useMoodIdsWithLocationInPeriod";
 import { useReverseGeolocationQueries } from "../../hooks/reverseGeolocationHooks";
 import { useSelector } from "react-redux";
 
@@ -14,9 +14,8 @@ interface Props {
 
 export default function MoodByLocationForPeriod({ dateFrom, dateTo }: Props) {
   const normalizedMoods = useSelector(eventsSlice.selectors.normalizedMoods);
-  const moodIdsWithLocationInPeriod = useMoodIdsWithLocationInPeriod(
-    dateFrom,
-    dateTo,
+  const moodIdsWithLocationInPeriod = useSelector((state: RootState) =>
+    eventsSlice.selectors.moodIdsWithLocationInPeriod(state, dateFrom, dateTo),
   );
   const reverseGeolocationResults = useReverseGeolocationQueries(
     moodIdsWithLocationInPeriod,

client/src/components/pages/Stats/MoodChartForPeriod/index.tsx

@@ -1,8 +1,8 @@
 import MoodChart from "../../../shared/MoodChart";
 import { Paper } from "eri";
+import { RootState } from "../../../../store";
 import computeTrendlinePoints from "./computeTrendlinePoints";
 import eventsSlice from "../../../../store/eventsSlice";
-import useEnvelopingMoodIds from "../../../hooks/useEnvelopingMoodIds";
 import { useSelector } from "react-redux";
 
 interface Props {
@@ -24,7 +24,9 @@ export default function MoodChartForPeriod({
 }: Props) {
   const moods = useSelector(eventsSlice.selectors.normalizedMoods);
   const domain: [number, number] = [dateFrom.getTime(), dateTo.getTime()];
-  const envelopingMoodIds = useEnvelopingMoodIds(dateFrom, dateTo);
+  const envelopingMoodIds = useSelector((state: RootState) =>
+    eventsSlice.selectors.envelopingMoodIds(state, dateFrom, dateTo),
+  );
 
   if (envelopingMoodIds.length < 2) return;
 

client/src/components/pages/Stats/MoodCloud.tsx

@@ -1,6 +1,8 @@
 import { Paper, SubHeading, Toggle, WordCloud } from "eri";
 import { MINIMUM_WORD_CLOUD_WORDS } from "../../../constants";
-import useMoodCloudWords from "../../hooks/useMoodCloudWords";
+import { RootState } from "../../../store";
+import eventsSlice from "../../../store/eventsSlice";
+import { useSelector } from "react-redux";
 import { useState } from "react";
 
 interface Props {
@@ -16,13 +18,20 @@ interface Props {
 
 export default function MoodCloud({ currentPeriod, previousPeriod }: Props) {
   const [filterOutPreviousPeriod, setFilterOutPreviousPeriod] = useState(false);
-  const currentPeriodWords = useMoodCloudWords(
-    currentPeriod.dateFrom,
-    currentPeriod.dateTo,
+
+  const currentPeriodWords = useSelector((state: RootState) =>
+    eventsSlice.selectors.moodCloudWords(
+      state,
+      currentPeriod.dateFrom,
+      currentPeriod.dateTo,
+    ),
   );
-  const previousPeriodWords = useMoodCloudWords(
-    previousPeriod.dateFrom,
-    previousPeriod.dateTo,
+  const previousPeriodWords = useSelector((state: RootState) =>
+    eventsSlice.selectors.moodCloudWords(
+      state,
+      previousPeriod.dateFrom,
+      previousPeriod.dateTo,
+    ),
   );
 
   if (

client/src/components/pages/Stats/MoodCloudForPeriod.tsx

@@ -1,20 +1,20 @@
 import { Paper, SubHeading, WordCloud } from "eri";
 import { MINIMUM_WORD_CLOUD_WORDS } from "../../../constants";
-import useMoodCloudWords from "../../hooks/useMoodCloudWords";
+import { RootState } from "../../../store";
+import eventsSlice from "../../../store/eventsSlice";
+import { useSelector } from "react-redux";
 
 interface Props {
   dateFrom: Date;
   dateTo: Date;
 }
 
 export default function MoodCloudForPeriod({ dateFrom, dateTo }: Props) {
-  const currentPeriodWords = useMoodCloudWords(dateFrom, dateTo);
+  const words = useSelector((state: RootState) =>
+    eventsSlice.selectors.moodCloudWords(state, dateFrom, dateTo),
+  );
 
-  if (
-    !currentPeriodWords ||
-    Object.keys(currentPeriodWords).length < MINIMUM_WORD_CLOUD_WORDS
-  )
-    return;
+  if (!words || Object.keys(words).length < MINIMUM_WORD_CLOUD_WORDS) return;
 
   return (
     <Paper>
@@ -23,7 +23,7 @@ export default function MoodCloudForPeriod({ dateFrom, dateTo }: Props) {
       </h3>
       <WordCloud
         aria-label="Word cloud displaying mood descriptions"
-        words={currentPeriodWords}
+        words={words}
       />
     </Paper>
   );

client/src/components/pages/Stats/MoodFrequencyForPeriod.tsx

@@ -1,15 +1,19 @@
 import { MOOD_INTEGERS, MOOD_RANGE } from "../../../constants";
 import MoodFrequencyChart from "../../shared/MoodFrequencyChart";
 import { Paper } from "eri";
-import useMoodsInPeriod from "../../hooks/useMoodsInPeriod";
+import { RootState } from "../../../store";
+import eventsSlice from "../../../store/eventsSlice";
+import { useSelector } from "react-redux";
 
 interface Props {
   dateFrom: Date;
   dateTo: Date;
 }
 
 export default function MoodFrequencyForPeriod({ dateFrom, dateTo }: Props) {
-  const moodsInPeriod = useMoodsInPeriod(dateFrom, dateTo);
+  const moodsInPeriod = useSelector((state: RootState) =>
+    eventsSlice.selectors.moodsInPeriod(state, dateFrom, dateTo),
+  );
 
   const moodCounter = new Map(MOOD_INTEGERS.map((n) => [MOOD_RANGE[0] + n, 0]));
 

client/src/components/pages/Stats/MoodGradientForPeriod/index.tsx

@@ -1,7 +1,7 @@
 import "./style.css";
+import { RootState } from "../../../../store";
 import eventsSlice from "../../../../store/eventsSlice";
 import { moodToColor } from "../../../../utils";
-import useEnvelopingMoodIds from "../../../hooks/useEnvelopingMoodIds";
 import { useSelector } from "react-redux";
 
 interface Props {
@@ -16,7 +16,9 @@ export default function MoodGradientForPeriod({ dateFrom, dateTo }: Props) {
   const fromTime = dateFrom.getTime();
   const toTime = dateTo.getTime();
   const timeInterval = toTime - fromTime;
-  const envelopingMoodIds = useEnvelopingMoodIds(dateFrom, dateTo);
+  const envelopingMoodIds = useSelector((state: RootState) =>
+    eventsSlice.selectors.envelopingMoodIds(state, dateFrom, dateTo),
+  );
 
   if (envelopingMoodIds.length < 2) return;