Add moderator like

liqd · Nov 19, 2024 · 3cfc4a4 · 3cfc4a4
1 parent 1a8fc6f
commit 3cfc4a4
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 80 deletions.
diff --git a/meinberlin/react/livequestions/QuestionBox.jsx b/meinberlin/react/livequestions/QuestionBox.jsx
@@ -251,6 +251,8 @@ export default class QuestionBox extends React.Component {
               questions_api_url={this.props.questions_api_url}
               category_dict={this.props.category_dict}
               isModerator={this.props.isModerator}
+              handleLike={this.handleLike.bind(this)}
+              hasLikingPermission={this.props.hasLikingPermission}
             />}
       </div>
     )

diff --git a/meinberlin/react/livequestions/QuestionModerator.jsx b/meinberlin/react/livequestions/QuestionModerator.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import django from 'django'
 import LikeCard from './LikeCard'
 import { classNames } from '../contrib/helpers'
@@ -37,7 +37,7 @@ const QuestionModerator = (props) => {
 
   useEffect(() => {
     setLikeCount(props.likes.count)
-    setSessionLike(props.session_like)
+    setSessionLike(props.likes.session_like)
   }, [props.likes])
 
   const toggleIsOnShortList = () => {
@@ -83,87 +83,106 @@ const QuestionModerator = (props) => {
       .then(() => props.togglePollingPaused())
   }
 
+  const handleErrors = (response) => {
+    if (!response.ok) {
+      throw new Error(response.statusText)
+    }
+    return response
+  }
+
+  const handleLikeClick = useCallback(() => {
+    const newSessionLike = !sessionLike
+    props.handleLike(props.id, newSessionLike)
+      .then(handleErrors)
+      .then(() => {
+        setSessionLike(newSessionLike)
+        setLikeCount((prevLikes) => prevLikes + (newSessionLike ? 1 : -1))
+      })
+      .catch((error) => {
+        console.log(error.message)
+      })
+  }, [sessionLike, props.handleLike, props.id])
+
   return (
-    <>
-      <LikeCard
-        title={props.children}
-        category={props.category}
-        isOnShortlist={isOnShortlist}
-        likes={{
-          count: likeCount,
-          session_like: sessionLike
-        }}
-      >
-        <div className="functions">
-          {props.displayIsHidden && (
-            <button
-              type="button"
-              className={classNames(
-                'cardbutton card__button card__button--hidden',
-                isHidden && 'card__button--active'
-              )}
-              onClick={toggleIshidden}
-              aria-label={isHidden ? undoHiddenText : hiddenText}
-              title={isHidden ? undoHiddenText : hiddenText}
-            >
-              <i
-                className={classNames(
-                  'fas fa-eye',
-                  isHidden && 'fa-eye-slash'
-                )}
-                aria-hidden="true"
-              />
-            </button>
-          )}
-          {props.displayIsOnShortlist && (
-            <button
-              type="button"
-              className={classNames(
-                'cardbutton card__button card__button--shortlist',
-                isOnShortlist && 'card__button--active'
-              )}
-              onClick={toggleIsOnShortList}
-              aria-label={
-                isOnShortlist ? removeBookmarkText : addBookmarkText
-              }
-              title={
-                isOnShortlist ? removeBookmarkText : addBookmarkText
-              }
-            >
-              <i className="fas fa-bookmark" aria-hidden="true" />
-            </button>
-          )}
-          {props.displayIsAnswered && (
-            <button
-              type="button"
-              className={classNames(
-                'cardbutton card__button card__button--answered',
-                isAnswered && 'card__button--active'
-              )}
-              onClick={toggleIsAnswered}
-              aria-label={doneText}
-              title={doneText}
-            >
-              <i className="fas fa-check" aria-hidden="true" />
-            </button>
-          )}
-          {props.displayIsLive && (
-            <button
-              type="button"
+    <LikeCard
+      title={props.children}
+      category={props.category}
+      isOnShortlist={isOnShortlist}
+      likes={{
+        count: likeCount,
+        session_like: sessionLike
+      }}
+      onLikeClick={handleLikeClick}
+    >
+      <div className="functions">
+        {props.displayIsHidden && (
+          <button
+            type="button"
+            className={classNames(
+              'cardbutton card__button card__button--hidden',
+              isHidden && 'card__button--active'
+            )}
+            onClick={toggleIshidden}
+            aria-label={isHidden ? undoHiddenText : hiddenText}
+            title={isHidden ? undoHiddenText : hiddenText}
+          >
+            <i
               className={classNames(
-                'cardbutton card__button card__button--live',
-                isLive && 'card__button--active'
+                'fas fa-eye',
+                isHidden && 'fa-eye-slash'
               )}
-              onClick={toggleIslive}
-              aria-label={isLive ? removeLiveText : addLiveText}
-              title={isLive ? removeLiveText : addLiveText}
-            >
-              <i className="fas fa-tv" aria-hidden="true" />
-            </button>
-          )}
-        </div>
-      </LikeCard>
-    </>
+              aria-hidden="true"
+            />
+          </button>
+        )}
+        {props.displayIsOnShortlist && (
+          <button
+            type="button"
+            className={classNames(
+              'cardbutton card__button card__button--shortlist',
+              isOnShortlist && 'card__button--active'
+            )}
+            onClick={toggleIsOnShortList}
+            aria-label={
+              isOnShortlist ? removeBookmarkText : addBookmarkText
+            }
+            title={
+              isOnShortlist ? removeBookmarkText : addBookmarkText
+            }
+          >
+            <i className="fas fa-bookmark" aria-hidden="true" />
+          </button>
+        )}
+        {props.displayIsAnswered && (
+          <button
+            type="button"
+            className={classNames(
+              'cardbutton card__button card__button--answered',
+              isAnswered && 'card__button--active'
+            )}
+            onClick={toggleIsAnswered}
+            aria-label={doneText}
+            title={doneText}
+          >
+            <i className="fas fa-check" aria-hidden="true" />
+          </button>
+        )}
+        {props.displayIsLive && (
+          <button
+            type="button"
+            className={classNames(
+              'cardbutton card__button card__button--live',
+              isLive && 'card__button--active'
+            )}
+            onClick={toggleIslive}
+            aria-label={isLive ? removeLiveText : addLiveText}
+            title={isLive ? removeLiveText : addLiveText}
+          >
+            <i className="fas fa-tv" aria-hidden="true" />
+          </button>
+        )}
+      </div>
+    </LikeCard>
   )
 }
 

diff --git a/meinberlin/react/livequestions/StatisticsBox.jsx b/meinberlin/react/livequestions/StatisticsBox.jsx
@@ -92,6 +92,8 @@ function StatisticsBox (props) {
             is_hidden={question.is_hidden}
             category={question.category}
             likes={question.likes}
+            handleLike={props.handleLike.bind(this)}
+            hasLikingPermission={props.hasLikingPermission}
           >
             {question.text}
           </QuestionModerator>
@@ -106,6 +108,8 @@ function StatisticsBox (props) {
             is_hidden={question.is_hidden}
             category={question.category}
             likes={question.likes}
+            handleLike={props.handleLike.bind(this)}
+            hasLikingPermission={props.hasLikingPermission}
           >
             {question.text}
           </QuestionUser>