feat: share UI configuration between elections

src/App.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { WahlkabineElectionWrapperMinimal } from "./wahlkabine-data/types";
-import { useLocalStorage } from "@uidotdev/usehooks";
 import { Blend } from "lucide-react";
 import clsx from "clsx";
 import { Details } from "./components/details";
@@ -9,6 +8,7 @@ import { AnswersPerQuestionPage } from "./pages/answers-per-question-page";
 import { VennPage } from "./pages/venn-page";
 
 import "./index.css";
+import { useVersionendLocalStorage } from "./hooks/use-versionend-local-storage";
 
 function App() {
   const [data, setData] = useState<WahlkabineElectionWrapperMinimal[] | null>(
@@ -18,18 +18,17 @@ function App() {
   const isLoading = !data && !error;
   const isError = !!error;
 
-  const [selectedElectionId, setSelectedElectionId] = useLocalStorage<
+  const [selectedElectionId, setSelectedElectionId] = useVersionendLocalStorage<
     string | null
   >("selected-election-id", data?.[0]?._id);
 
   const selectedElection = data?.find(
     (election) => election._id === selectedElectionId
   );
 
-  const [selectedPartyId, setSelectedPartyId] = useLocalStorage<string | null>(
-    "selected-party-id",
-    null
-  );
+  const [selectedPartyId, setSelectedPartyId] = useVersionendLocalStorage<
+    string | null
+  >("selected-party-id", null);
 
   const parties = selectedElection?.election.parties;
 
@@ -48,17 +47,16 @@ function App() {
     parties?.[0] ??
     null;
 
-  const [selectedQuestionIdx, setSelectedQuestionIdx] = useLocalStorage<
-    number | null
-  >("selected-question-index", null);
+  const [selectedQuestionIdx, setSelectedQuestionIdx] =
+    useVersionendLocalStorage<number | null>("selected-question-index", null);
 
   const selectedQuestion =
     selectedQuestionIdx !== null
       ? selectedElection?.election.questions?.at(selectedQuestionIdx)
       : null;
 
   useEffect(() => {
-    fetch("/data-minimal-latest.json")
+    fetch("/data-minimal.json")
       .then((response) => response.json())
       .then((data) => {
         setData(data);

src/components/election-venn-controller.tsx

@@ -1,14 +1,15 @@
 import { useCallback, useId, useMemo } from "react";
 import { WahlkabineElectionWrapperMinimal } from "../wahlkabine-data/types";
 import { ChartVenn } from "./venn-diagramm";
-import { useLocalStorage } from "@uidotdev/usehooks";
 import clsx from "clsx";
 import { Details } from "./details";
 import { PartiesFilter } from "./parties-filter";
-import { buildElectionVennData } from "../utils";
+import { buildElectionVennData, getRandomString } from "../utils";
+import { useVersionendLocalStorage } from "../hooks/use-versionend-local-storage";
 
 export const ElectionVennController = ({
   election,
+  isSingleMode,
   defaultSelectedParties,
   filteredParties,
   showEmbedCode = false,
@@ -19,6 +20,7 @@ export const ElectionVennController = ({
   resetToDefault = false,
 }: {
   election: WahlkabineElectionWrapperMinimal;
+  isSingleMode?: boolean;
   defaultSelectedParties?: string[];
   showEmbedCode?: boolean;
   sourcePath?: string;
@@ -32,38 +34,45 @@ export const ElectionVennController = ({
   const id = useId();
   const parties = filteredParties
     ? election?.election.parties.filter((party) =>
-        filteredParties.includes(party._id)
+        filteredParties.includes(party.abbreviation)
       )
     : election?.election.parties;
-  const randomParties = parties
-    .map((party) => party._id)
-    .sort(() => Math.random() - 0.5)
-    .slice(0, 3);
 
-  const [selectedParties, setSelectedParties] = useLocalStorage<string[]>(
-    `selected-parties-${id}-${election._id}-${filteredParties?.join("-")}`,
+  const randomParties = getRandomString(
+    parties.map((party) => party.abbreviation),
+    3
+  );
+
+  const [selectedParties, setSelectedParties] = useVersionendLocalStorage<
+    string[]
+  >(
+    isSingleMode
+      ? `selected-parties`
+      : `selected-parties-${id}-${election._id}-${filteredParties?.join("-")}`,
     defaultSelectedParties ?? randomParties ?? []
   );
 
   const filteredSelectedParties = filteredParties
     ? selectedParties.filter((party) => filteredParties.includes(party))
     : selectedParties;
 
-  const partyForId = useCallback(
-    (partyId: string) => {
-      return election?.election.parties.find((party) => party._id === partyId);
+  const partyForAbbreviation = useCallback(
+    (partyAbbreviation: string) => {
+      return election?.election.parties.find(
+        (party) => party.abbreviation === partyAbbreviation
+      );
     },
     [election]
   );
 
   const vennData = useMemo(() => {
     return buildElectionVennData({
-      partyForId,
+      partyForAbbreviation,
       filteredSelectedParties,
       election,
       filteredTopics,
     });
-  }, [election, filteredSelectedParties, partyForId, filteredTopics]);
+  }, [election, filteredSelectedParties, partyForAbbreviation, filteredTopics]);
 
   const defaultPartiesAreSelected = defaultSelectedParties
     ? selectedParties.every((party) => defaultSelectedParties.includes(party))
@@ -79,7 +88,7 @@ export const ElectionVennController = ({
         breakPoint === "laptop" && "xl:w-[1200px]"
       )}
     >
-      {filteredSelectedParties.length === 0 ? (
+      {vennData.rows.length === 0 ? (
         <p className="flex items-center min-h-[350px] md:min-h-[500px] justify-center h-full w-full font-semibold">
           Bitte wähle mindestens 1 Partei aus.
         </p>
@@ -91,7 +100,7 @@ export const ElectionVennController = ({
         </p>
       ) : null}
 
-      {filteredSelectedParties.length > 0 && hasTopics ? (
+      {vennData.rows.length > 0 && hasTopics ? (
         <ChartVenn
           data={vennData.rows}
           label={`${election?.title}`}
@@ -103,13 +112,7 @@ export const ElectionVennController = ({
       ) : null}
 
       <PartiesFilter
-        parties={
-          filteredParties
-            ? election?.election.parties.filter((party) =>
-                filteredParties.includes(party._id)
-              )
-            : election?.election.parties
-        }
+        parties={parties}
         selectedParties={filteredSelectedParties}
         setSelectedParties={setSelectedParties}
         maxSelected={4}

src/components/parties-filter.tsx

@@ -21,8 +21,8 @@ export const PartiesFilter = ({
   const id = useId();
 
   parties.sort((a, b) => {
-    const isSelectedA = selectedParties.includes(a._id);
-    const isSelectedB = selectedParties.includes(b._id);
+    const isSelectedA = selectedParties.includes(a.abbreviation);
+    const isSelectedB = selectedParties.includes(b.abbreviation);
 
     if (isSelectedA && !isSelectedB) {
       return -1;
@@ -38,7 +38,7 @@ export const PartiesFilter = ({
   return (
     <aside className="flex flex-row gap-3 flex-wrap max-w-[700px] w-full">
       {parties.map((party) => {
-        const isSelected = selectedParties.includes(party._id);
+        const isSelected = selectedParties.includes(party.abbreviation);
 
         const isDisabled =
           maxSelected !== undefined
@@ -57,8 +57,8 @@ export const PartiesFilter = ({
             whileHover={{
               opacity: isSelected ? 0.9 : 1,
             }}
-            layoutId={`${id}-checkbox-${party._id}`}
-            key={`${id}-checkbox-${party._id}`}
+            layoutId={`${id}-checkbox-${party.abbreviation}`}
+            key={`${id}-checkbox-${party.abbreviation}`}
             className={clsx(
               "flex flex-row gap-2 transition-opacity items-center px-2 py-1 text-white font-semibold rounded-sm shadow-md",
               isDisabled && "opacity-50 cursor-not-allowed",
@@ -67,19 +67,19 @@ export const PartiesFilter = ({
           >
             <input
               type="checkbox"
-              value={party._id}
+              value={party.abbreviation}
               className="disabled:opacity-50 disabled:cursor-not-allowed"
               disabled={isDisabled}
               checked={isSelected}
               onChange={() => {
                 if (isSelected) {
                   setSelectedParties(
                     selectedParties.filter(
-                      (selectedParty) => selectedParty !== party._id
+                      (selectedParty) => selectedParty !== party.abbreviation
                     )
                   );
                 } else {
-                  setSelectedParties([...selectedParties, party._id]);
+                  setSelectedParties([...selectedParties, party.abbreviation]);
                 }
               }}
             />

src/components/venn-diagramm.tsx

@@ -4,11 +4,12 @@ import { Chart, ChartConfiguration, registerables } from "chart.js";
 import { combineColors, rgbaString } from "../utils/colors";
 import { VennDetails } from "./venn-details";
 import { getPartyColorByAbbreviation } from "../utils/partiesWithColors";
-import { useLocalStorage, useMediaQuery } from "@uidotdev/usehooks";
+import { useMediaQuery } from "@uidotdev/usehooks";
 import clsx from "clsx";
 import { useShare } from "../hooks/use-share";
 import { ShareIcon } from "lucide-react";
 import { createPortal } from "react-dom";
+import { useVersionendLocalStorage } from "../hooks/use-versionend-local-storage";
 
 Chart.register(...registerables);
 
@@ -61,7 +62,10 @@ export const ChartVenn = ({
     ? 115
     : 100;
 
-  const [scale, setScale] = useLocalStorage(`scale-${id}`, defaultScale);
+  const [scale, setScale] = useVersionendLocalStorage(
+    `scale-${id}`,
+    defaultScale
+  );
 
   useEffect(() => {
     const handleClickOutside = () => {

src/hooks/use-versionend-local-storage.ts

@@ -0,0 +1,15 @@
+import { useLocalStorage } from "@uidotdev/usehooks";
+
+// Update this value when you want to reset the local storage
+const VERSION = "v1.1-test";
+
+type UseLocalStorageType = typeof useLocalStorage;
+
+export const useVersionendLocalStorage: UseLocalStorageType = (
+  key,
+  initialValue
+) => {
+  const [value, setValue] = useLocalStorage(`${VERSION}-${key}`, initialValue);
+
+  return [value, setValue];
+};