feat: rework session picker and context

src/components/FileUpload.tsx

@@ -4,8 +4,10 @@ import { ChangeEvent, createRef, useContext, useState } from "react";
 import { db } from "../firebase";
 import { UserContext } from "../provider/UserContext";
 import { BaseLoadingSpinner } from "./base/BaseLoadingSpinner";
+import { SessionContext } from "../provider/SessionContext";
 
 export const FileUpload = () => {
+  const { fetchSnapshot } = useContext(SessionContext);
   const formRef = createRef<HTMLFormElement>();
   const inputRef = createRef<HTMLInputElement>();
   const [csvFile, setCsvFile] = useState<unknown[] | null>(null);
@@ -24,6 +26,7 @@ export const FileUpload = () => {
     setIsUploading(false);
     formRef.current?.reset();
     setCsvFile(null);
+    fetchSnapshot();
   };
 
   const [error, setError] = useState<string>("");

src/components/SessionPicker.tsx

@@ -1,48 +1,26 @@
 import { Listbox, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
-import { collection, getDocs } from "firebase/firestore";
 import { Fragment, useContext, useEffect, useState } from "react";
-import { db } from "../firebase";
 import { SessionContext } from "../provider/SessionContext";
-import { UserContext } from "../provider/UserContext";
-import { Session, Sessions } from "../types/Sessions";
-import { reduceSessionToDefinedValues } from "../utils";
+import { Sessions } from "../types/Sessions";
 import { BaseLabel } from "./base/BaseLabel";
-import { filterResultsWithMissingCells } from "../utils/filterResultsWithMissingCells";
-
-const filterSessions = (sessions: Sessions) =>
-  filterResultsWithMissingCells(sessions);
 
 export const SessionPicker = () => {
   const [selected, setSelected] = useState<string[]>([]);
-  const { sessions, setSessions } = useContext(SessionContext);
-  const { user } = useContext(UserContext);
-  const uuid = user?.isAnonymous ? "6U4S2ruwXMPrULj50b9uLpsaRk53" : user?.uid;
-
+  const { sessions, setSessions, fetchSnapshot } = useContext(SessionContext);
   useEffect(() => {
-    async function fetchSnapshot() {
-      if (uuid) {
-        const querySnapshot = await getDocs(
-          collection(db, "r10data", uuid, "data"),
-        );
-        const fetchedSessions = querySnapshot.docs.reduce((acc, curr) => {
-          const data = reduceSessionToDefinedValues(curr.data() as Session);
-          acc[curr.id] = { ...data, selected: true };
-          return acc;
-        }, {} as Sessions);
-
-        setSessions(filterSessions(fetchedSessions));
-        setSelected([Object.keys(fetchedSessions)?.[0]]);
-        return querySnapshot;
+    const _ = async () => await fetchSnapshot();
+    _().then((fetchedSessions) => {
+      if (fetchedSessions) {
+        setSessions(fetchedSessions);
+        setSelected(Object.keys(fetchedSessions));
       }
-    }
-    if (uuid) {
-      fetchSnapshot();
-    }
-  }, [uuid, setSessions]);
+    });
+  }, [fetchSnapshot, setSessions]);
 
   const writeSelected = (value: string[]) => {
-    if (value.includes("All")) {
+    const setAll = value.includes("All") && !selected.includes("All");
+    if (setAll) {
       setSelected([...Object.keys(sessions!), "All"]);
       return setSessions(
         Object.keys(sessions!).reduce((acc, curr) => {
@@ -51,7 +29,7 @@ export const SessionPicker = () => {
         }, {} as Sessions),
       );
     } else {
-      setSelected(value);
+      setSelected(value.filter((v) => v !== "All"));
 
       setSessions(
         Object.keys(sessions!).reduce((acc, curr) => {

src/provider/SessionContext.tsx

@@ -1,29 +1,59 @@
+import { collection, getDocs } from "firebase/firestore";
 import React, {
   PropsWithChildren,
   createContext,
+  useCallback,
+  useContext,
   useMemo,
   useState,
 } from "react";
-import { Sessions } from "../types/Sessions";
+import { db } from "../firebase";
+import { Session, Sessions } from "../types/Sessions";
+import { reduceSessionToDefinedValues } from "../utils";
+import { UserContext } from "./UserContext";
+import { filterResultsWithMissingCells } from "../utils/filterResultsWithMissingCells";
+import { translateSessionsToEnglish } from "../utils/csvLocalization";
 
 export interface SessionContextInterface {
   sessions: Sessions;
   setSessions: (sessions: Sessions) => void;
+  fetchSnapshot: () => Promise<Sessions | undefined>;
 }
 
 const SessionContext = createContext<SessionContextInterface>({
   sessions: {},
   setSessions: () => {},
+  fetchSnapshot: () => Promise.resolve(undefined),
 });
 
 const SessionProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const [sessions, setSessions] = useState<Sessions>({});
+
+  const { user } = useContext(UserContext);
+  const uuid = user?.isAnonymous ? "6U4S2ruwXMPrULj50b9uLpsaRk53" : user?.uid;
+
+  const fetchSnapshot = useCallback(async () => {
+    if (uuid) {
+      const querySnapshot = await getDocs(
+        collection(db, "r10data", uuid, "data"),
+      );
+      const sessionResult = querySnapshot.docs.reduce((acc, curr) => {
+        const data = reduceSessionToDefinedValues(curr.data() as Session);
+        acc[curr.id] = { ...data, selected: true };
+        return acc;
+      }, {} as Sessions);
+      setSessions(filterResultsWithMissingCells(sessionResult));
+      return sessionResult;
+    }
+  }, [uuid]);
+
   const memoizedValue = useMemo(
     () => ({
-      sessions,
+      sessions: translateSessionsToEnglish(sessions),
       setSessions,
+      fetchSnapshot,
     }),
-    [sessions, setSessions],
+    [sessions, setSessions, fetchSnapshot],
   );
 
   return (

src/utils/calculateAverages.ts

@@ -1,5 +1,5 @@
 import { Sessions } from "../types/Sessions";
-import { translateToEnglish } from "./csvLocalization";
+import { translateSwingsToEnglish } from "./csvLocalization";
 
 export type AveragedSwing = {
   Abflugrichtung: number;
@@ -37,7 +37,7 @@ export const calculateAverages: (input: Sessions) => AveragedSwing[] = (
   if (input) {
     const sessions = Object.keys(input).map((key) => ({
       ...input[key],
-      results: translateToEnglish(input[key].results),
+      results: translateSwingsToEnglish(input[key].results),
     }));
     // This will hold all averages for each club
     const clubs: { [key: string]: object } = {};

src/utils/csvLocalization.ts

@@ -2,6 +2,7 @@
 // 14.02.24 13:33:18	Aron Schüler		Eisen 9	113.42900776786246	-3.3086297512054443	-4.047730445861816	-1.0483050346374512	2.9994254112243652	128.24671443709485	1.1306341910312527	22.974985122680664	-1.3675819635391235	4863.04638671875	-644.055908203125	4905.51025390625	Berechnet	7.544279098510742	14.848843574523926	88.6080322265625	1.0706405639648438	1.655823826789856	96.77474212646484	1.2754888534545898	2.154283046722412			1.2277452	12.777778	101.169624	72
 
 import { GolfSwingData } from "../types/GolfSwingData";
+import { Sessions } from "../types/Sessions";
 
 // The club names are localized in the CSV files.
 export const clubNameLocalizationDE: { [key: string]: string } = {
@@ -49,7 +50,7 @@ export const spinrateMeasure: { [key: string]: string } = {
   Gemessen: "Measured",
 };
 
-export const translateToEnglish: (
+export const translateSwingsToEnglish: (
   results: GolfSwingData[],
 ) => GolfSwingData[] = (results) =>
   results.map((swing) => {
@@ -76,3 +77,14 @@ export const translateToEnglish: (
   });
 
 export const translateHeader = (header: string) => header;
+
+export const translateSessionsToEnglish = (sessions: Sessions) => {
+  const newSessions: Sessions = {};
+  Object.keys(sessions).forEach((key) => {
+    newSessions[key] = {
+      ...sessions[key],
+      results: translateSwingsToEnglish(sessions[key].results),
+    };
+  });
+  return newSessions;
+};

src/utils/getAllDataFromSession.ts

@@ -1,13 +1,13 @@
 import { GolfSwingData } from "../types/GolfSwingData";
 import { Sessions } from "../types/Sessions";
-import { translateToEnglish } from "./csvLocalization";
+import { translateSwingsToEnglish } from "./csvLocalization";
 
 export const getAllDataFromSession = (sessions: Sessions) =>
   Object.values(sessions)
     .filter((session) => session.selected)
     ?.reduce((acc, curr) => {
       if (curr.results.length > 0) {
-        acc.push(...translateToEnglish(curr.results));
+        acc.push(...translateSwingsToEnglish(curr.results));
       }
       return acc;
     }, [] as GolfSwingData[]);