Fix reaction bugs

src/components/PreviewCard/PreviewCard.tsx

@@ -54,7 +54,6 @@ function PreviewCard({
     (async () => {
       const temp = await fetchAllReactionsToStory(storyId);
       if (temp != null) {
-        console.log(temp);
         setReactions(temp.filter(r => r != null));
         return;
       }

src/components/ReactionDisplay/ReactionDisplay.tsx

@@ -19,7 +19,7 @@ const reactionColors: Record<string, string> = {
 };
 
 function ReactionDisplay({ reactions, storyId }: ReactionDisplayProps) {
-  const { subscribe, getPubSubValue } = usePubSub();
+  const { channels, getPubSubValue } = usePubSub();
   const [reactionCount, setReactionCount] = useState(0);
 
   const cleanedReactions = reactions.filter(reaction => reaction != null);
@@ -34,7 +34,7 @@ function ReactionDisplay({ reactions, storyId }: ReactionDisplayProps) {
 
   useEffect(() => {
     setReactionCount(serverReactionCount);
-  }, []);
+  }, [reactions]);
 
   useEffect(() => {
     const value = getPubSubValue(Channel.REACTIONS, storyId);
@@ -47,7 +47,7 @@ function ReactionDisplay({ reactions, storyId }: ReactionDisplayProps) {
     } else {
       setReactionCount(serverReactionCount);
     }
-  }, [subscribe(Channel.REACTIONS, storyId)]);
+  }, [channels[Channel.REACTIONS][storyId]]);
 
   return (
     <View

src/components/SaveStoryButton/SaveStoryButton.tsx

@@ -25,7 +25,7 @@ export default function SaveStoryButton({
   const [storyIsSaved, setStoryIsSaved] = useState<boolean | null>(
     defaultState,
   );
-  const { publish, subscribe, getPubSubValue } = usePubSub();
+  const { publish, channels, getPubSubValue } = usePubSub();
 
   useEffect(() => {
     if (defaultState != null) {
@@ -41,7 +41,8 @@ export default function SaveStoryButton({
     if (getPubSubValue(Channel.SAVED_STORIES, storyId) != null) {
       setStoryIsSaved(getPubSubValue(Channel.SAVED_STORIES, storyId) ?? false);
     }
-  }, [subscribe(Channel.SAVED_STORIES, storyId)]);
+
+  }, [channels[Channel.SAVED_STORIES][storyId]]);
 
   const saveStory = async (saved: boolean) => {
     setStoryIsSaved(saved);

src/queries/reactions.tsx

@@ -54,7 +54,7 @@ export async function fetchAllReactionsToStory(
       `An error occured when trying to fetch reactions to a story', ${error}`,
     );
   } else {
-    return data.reactions;
+    return data[0].reactions;
   }
 }
 

src/utils/PubSubContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo, useState } from 'react';
+import React, { createContext, useContext, useState } from 'react';
 
 export enum Channel {
   REACTIONS = 'reactions',
@@ -11,7 +11,6 @@ type channel = Record<number, boolean | undefined>;
 export interface PubSubState {
   channels: Record<Channel, channel>;
   publish: (channel: Channel, id: number, message: boolean) => void;
-  subscribe: (channel: Channel, id: number) => ReturnType<typeof useMemo>;
   getPubSubValue: (channel: Channel, id: number) => boolean | undefined;
 }
 
@@ -46,18 +45,13 @@ export function BooleanPubSubProvider({
     setChannels({ ...channels, [channel]: thisChannel });
   };
 
-  const subscribe = (channel: Channel, id: number) => {
-    return useMemo(() => channels[channel][id], [channels[channel][id]]);
-  };
-
   const getPubSubValue = (channel: Channel, id: number) => {
     return channels[channel][id];
   };
 
   const authContextValue = {
     channels,
     publish,
-    subscribe,
     getPubSubValue,
   };