feat: initially get votation data from websocket

backend/controllers/votation.ts

@@ -311,9 +311,39 @@ export async function activateVotationStatus(
         },
       });
 
+      // Add votaton and options to an element for sending to participants.
+      const optionList: LimitedOptionType[] = [];
+
+      for (const optionID of vote.options) {
+        const id = optionID;
+        const option = await Option.findById(id);
+        if (option) {
+          const newOption: LimitedOptionType = {
+            _id: id,
+            title: option.title,
+          };
+          optionList.push(newOption);
+        }
+      }
+
+      const votationResponse: LimitedVoteResponseType = {
+        _id: voteId,
+        title: vote.title,
+        caseNumber: vote.caseNumber,
+        voteText: vote.voteText,
+        options: optionList,
+      };
+
       // Notify all active participants to fetch the activated votation.
       assembly.participants.forEach((member) => {
-        notifyOne(member, JSON.stringify({ status: "update", group: group }));
+        notifyOne(
+          member,
+          JSON.stringify({
+            status: "update",
+            group: group,
+            votation: votationResponse,
+          })
+        );
       });
 
       await Votation.findByIdAndUpdate(voteId, {

frontend/src/components/VotationBox.tsx

@@ -8,22 +8,27 @@ import { getCurrentVotationByGroup, submitVote } from "../services/votation";
 export function VotationBox(state: {
   groupSlug: string;
   userHasVoted: () => void;
+  currentVotation: LimitedVoteType | undefined;
 }) {
   const [currentVotation, setCurrentVotation] = useState<
     LimitedVoteType | undefined
-  >();
+  >(state.currentVotation);
   const matches = useMediaQuery("(min-width: 501px)");
   const [chosenOption, setChosenOption] = useState<string>();
   const { classes } = useStyles();
 
   useEffect(() => {
-    const fetch = async () => {
-      const currentVotationData = await getCurrentVotationByGroup(
-        state.groupSlug
-      );
-      setCurrentVotation(currentVotationData);
-    };
-    fetch().catch(console.error);
+    // The current votation are initially set by websocket/state from parent component/assemblyPage.
+    // Undefined if page is reloaded, and in that case the votation will be fetched again.
+    if (!currentVotation) {
+      const fetch = async () => {
+        const currentVotationData = await getCurrentVotationByGroup(
+          state.groupSlug
+        );
+        setCurrentVotation(currentVotationData);
+      };
+      fetch().catch(console.error);
+    }
   }, []);
 
   function submit(voteId: string) {

frontend/src/pages/AssemblyPage.tsx

@@ -9,10 +9,14 @@ import { checkedInState, checkedInType } from "../utils/Context";
 import { Box, Image, Text } from "@mantine/core";
 import Arrow from "../assets/Arrow.svg";
 import { getCurrentVotationByGroup } from "../services/votation";
+import { LimitedVoteType } from "../types/votes";
 
 export function AssemblyLobby() {
   const [kickedOut, setKickedOut] = useState<boolean>(false);
   const [activeVotation, setActiveVotation] = useState<boolean>(false);
+  const [currentVotation, setCurrentVotation] = useState<
+    LimitedVoteType | undefined
+  >(undefined);
   const [voted, setVoted] = useState<boolean>(false);
   const { lastMessage } = useWebSocket(import.meta.env.VITE_SOCKET_URL);
   const { checkedIn, setCheckedIn, groupSlug, setGroupSlug, groupName } =
@@ -53,6 +57,7 @@ export function AssemblyLobby() {
           setCheckedIn(true);
         }
         if (decodedMessage.status == "update") {
+          setCurrentVotation(decodedMessage.votation);
           setCheckedIn(true);
           setActiveVotation(true);
         }
@@ -111,6 +116,7 @@ export function AssemblyLobby() {
       ) : checkedIn && groupSlug && activeVotation ? (
         <VotationBox
           groupSlug={groupSlug}
+          currentVotation={currentVotation}
           userHasVoted={() => userHasVoted()}
         />
       ) : checkedIn && groupSlug && !activeVotation ? (