From adcd33ed911d544f75abfbdb9a5492e779fd1cf3 Mon Sep 17 00:00:00 2001
From: Sev Furneaux <sevfurneaux@gmail.com>
Date: Wed, 13 Nov 2024 12:32:43 +0000
Subject: [PATCH] react/livequestions: style filter sort and like card

---
 changelog/_8467.md                            |   8 +
 .../scss/components/_live_questions.scss      |  81 -------
 .../scss/components_user_facing/_card.scss    |   4 +
 .../scss/components_user_facing/_rating.scss  |   8 +-
 meinberlin/react/livequestions/Filters.jsx    | 207 ++++++++++--------
 meinberlin/react/livequestions/LikeCard.jsx   |  52 +++++
 .../react/livequestions/QuestionBox.jsx       | 106 ++++-----
 .../react/livequestions/QuestionForm.jsx      |   4 +-
 .../react/livequestions/QuestionList.jsx      |   2 +-
 .../react/livequestions/QuestionModerator.jsx |  35 ++-
 .../react/livequestions/QuestionUser.jsx      | 134 +++++-------
 11 files changed, 287 insertions(+), 354 deletions(-)
 create mode 100644 changelog/_8467.md
 create mode 100644 meinberlin/react/livequestions/LikeCard.jsx

diff --git a/changelog/_8467.md b/changelog/_8467.md
new file mode 100644
index 0000000000..af5b431f50
--- /dev/null
+++ b/changelog/_8467.md
@@ -0,0 +1,8 @@
+### Changed
+
+- Restyled `Filters` component and added filter button
+
+### Added
+
+- Added new `LikeCard` component
+– Added `LikeCard` component to `QuestionModerator` and `QuestionUser` components
diff --git a/meinberlin/assets/scss/components/_live_questions.scss b/meinberlin/assets/scss/components/_live_questions.scss
index 93907ea1f0..0b8ca57ac9 100644
--- a/meinberlin/assets/scss/components/_live_questions.scss
+++ b/meinberlin/assets/scss/components/_live_questions.scss
@@ -1,68 +1,3 @@
-.live_questions__filters {
-    @media screen and (min-width: $breakpoint-xs) {
-        display: inline-flex;
-    }
-}
-
-.live_questions__filters--parent {
-    width: 100%;
-    justify-content: space-between;
-    margin-bottom: $spacer;
-
-    @media screen and (min-width: $breakpoint-xs) {
-        display: inline-flex;
-    }
-}
-
-.live_questions__filters--dropdown {
-    @media screen and (min-width: $breakpoint-xs) {
-        margin-right: $spacer;
-        margin-bottom: 0;
-    }
-
-    button {
-        min-width: 100%;
-    }
-}
-
-.live_questions__filters--btns {
-    width: 100%;
-    display: inline-flex;
-    justify-content: flex-end;
-
-    .switch--btn {
-        border-radius: $border-radius;
-    }
-}
-
-.live_questions__filters--screen-btn {
-    width: 100%;
-}
-
-.live-question__action-bar {
-    width: 100%;
-    display: inline-flex;
-    justify-content: space-between;
-}
-
-.live_questions__question {
-    font-size: $font-size-lg;
-    margin-bottom: 0.25 * $spacer;
-}
-
-.infobox__box {
-    background-color: $bg-tertiary;
-    padding: 0.5 * $spacer $spacer;
-    font-size: $font-size-sm;
-    margin-bottom: $spacer;
-
-    i {
-        position: absolute;
-        color: $primary;
-        line-height: 1.2rem;
-    }
-}
-
 .infobox__text {
     margin-left: 2 * $spacer;
 }
@@ -122,10 +57,6 @@
     z-index: 1;
 }
 
-.checkbox-btn {
-    display: inline-block;
-}
-
 .live_questions_infographic__footer {
     position: fixed;
     right: 0;
@@ -177,10 +108,6 @@
     }
 }
 
-.live_questions__like {
-    padding-top: 0.5 * $spacer;
-}
-
 .live_question__presentation {
     margin-top: 5 * $spacer;
 }
@@ -196,11 +123,3 @@
     font-size: 0.6rem;
     line-height: inherit;
 }
-
-.live_questions__select > .select2-container {
-    min-width: 100%;
-
-    @media screen and (min-width: $breakpoint-xs) {
-        min-width: 15rem;
-    }
-}
diff --git a/meinberlin/assets/scss/components_user_facing/_card.scss b/meinberlin/assets/scss/components_user_facing/_card.scss
index ae3c2cd5ea..2ea267005e 100644
--- a/meinberlin/assets/scss/components_user_facing/_card.scss
+++ b/meinberlin/assets/scss/components_user_facing/_card.scss
@@ -30,3 +30,7 @@
 .card__link--hover {
     text-decoration: underline !important; // BO overide
 }
+
+.card__pill {
+    margin-bottom: 0.3em;
+}
\ No newline at end of file
diff --git a/meinberlin/assets/scss/components_user_facing/_rating.scss b/meinberlin/assets/scss/components_user_facing/_rating.scss
index cf9e4b9ba0..9a8d50bee5 100644
--- a/meinberlin/assets/scss/components_user_facing/_rating.scss
+++ b/meinberlin/assets/scss/components_user_facing/_rating.scss
@@ -20,11 +20,11 @@
     i {
         margin-right: 0.4em;
         margin-bottom: 0.4em;
-        display: block;
+        display: inline;
+    }
 
-        @media screen and (min-width: $breakpoint-palm) {
-            display: inline;
-        }
+    &--active {
+        font-weight: bold;
     }
 
     .fa-chevron-up:before {
diff --git a/meinberlin/react/livequestions/Filters.jsx b/meinberlin/react/livequestions/Filters.jsx
index db1316ad6f..483ad96dea 100644
--- a/meinberlin/react/livequestions/Filters.jsx
+++ b/meinberlin/react/livequestions/Filters.jsx
@@ -1,103 +1,124 @@
-import React from 'react'
+import React, { useState } from 'react'
 import django from 'django'
 
-export default class Filter extends React.Component {
-  selectCategory (e) {
+const allTag = django.gettext('all')
+const onlyShowMarkedText = django.gettext('only show marked questions')
+const displayNotHiddenText = django.gettext('display only questions which are not hidden')
+const orderLikesText = django.gettext('order by likes')
+const questionsText = django.gettext('Questions')
+const filterText = django.gettext('Filter')
+const affiliationText = django.gettext('Affiliation')
+
+const Filter = ({
+  categories,
+  isModerator,
+  displayOnShortlist,
+  toggleDisplayOnShortlist,
+  displayNotHiddenOnly,
+  toggledisplayNotHiddenOnly,
+  orderedByLikes,
+  toggleOrdering,
+  setCategories
+}) => {
+  const [category, setCategory] = useState(null)
+
+  const selectCategory = (e) => {
     e.preventDefault()
-    const category = e.target.getAttribute('data-value')
-    this.props.setCategories(category)
+    setCategory(e.target.value)
   }
 
-  getButtonClass () {
-    if (this.props.currentCategory === '-1') {
-      return 'btn btn--light btn--select live_questions__filters--dropdown dropdown-toggle'
-    } else {
-      return 'btn btn--light btn--select live_questions__filters--dropdown dropdown-toggle'
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    if (category) {
+      setCategories(category)
     }
   }
 
-  render () {
-    const allTag = django.gettext('all')
-    const onlyShowMarkedText = django.gettext('only show marked questions')
-    const displayNotHiddenText = django.gettext('display only questions which are not hidden')
-    const orderLikesText = django.gettext('order by likes')
-    return (
-      <div className="live_questions__filters">
-        {this.props.categories.length > 0
-          ? <div className="dropdown live_questions__filters--dropdown">
-            <button
-              className={this.getButtonClass()} type="button" id="dropdownMenuButton"
-              data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+  return (
+    <>
+      <h2 id="filter-form-heading">{questionsText}</h2>
+      <form className="form panel--heavy" onSubmit={handleSubmit} aria-labelledby="filter-form-heading">
+        {categories.length > 0 && (
+          <div className="form-group">
+            <label htmlFor="filterCategorySelect">{affiliationText}*</label>
+            <select
+              id="filterCategorySelect"
+              className="form-control"
+              onChange={selectCategory}
             >
-              {this.props.currentCategoryName}
-              <i className="fa fa-caret-down" aria-label={onlyShowMarkedText} />
-            </button>
-            <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
-              <button className="dropdown-item" data-value={-1} onClick={this.selectCategory.bind(this)} href="#">{allTag}</button>
-              {this.props.categories.map((category, index) => {
-                return <button className="dropdown-item" key={index} data-value={category} onClick={this.selectCategory.bind(this)} href="#">{category}</button>
-              })}
-            </div>
-          </div> // eslint-disable-line react/jsx-closing-tag-location
-          : ''}
-        {this.props.isModerator &&
-          <div className="live_questions__filters--btns">
-            <div className="checkbox-btn u-spacer-right">
-              <label
-                htmlFor="markedCheck"
-                className={'btn switch--btn' + (this.props.displayOnShortlist ? ' active' : '')}
-                title={onlyShowMarkedText}
-              >
-                <input
-                  className="radio__input"
-                  type="checkbox"
-                  id="markedCheck"
-                  name="markedCheck"
-                  checked={this.props.displayOnShortlist}
-                  onChange={this.props.toggleDisplayOnShortlist} // eslint-disable-line react/jsx-handler-names
-                />
-                <span className="visually-hidden">{onlyShowMarkedText}</span>
-                <i className="far fa-list-alt" aria-hidden="true" />
-              </label>
-            </div>
-            <div className="checkbox-btn u-spacer-right">
-              <label
-                htmlFor="displayNotHiddenOnly"
-                className={'btn switch--btn' + (this.props.displayNotHiddenOnly ? ' active' : '')}
-                title={displayNotHiddenText}
-              >
-                <input
-                  className="radio__input"
-                  type="checkbox"
-                  id="displayNotHiddenOnly"
-                  name="displayNotHiddenOnly"
-                  checked={this.props.displayNotHiddenOnly}
-                  onChange={this.props.toggledisplayNotHiddenOnly} // eslint-disable-line react/jsx-handler-names
-                />
-                <span className="visually-hidden">{displayNotHiddenText}</span>
-                <i className="far fa-eye" aria-hidden="true" />
-              </label>
-            </div>
-            <div className="checkbox-btn">
-              <label
-                htmlFor="orderedByLikes"
-                className={'btn switch--btn' + (this.props.orderedByLikes ? ' active' : '')}
-                title={orderLikesText}
-              >
-                <input
-                  className="radio__input"
-                  type="checkbox"
-                  id="orderedByLikes"
-                  name="orderedByLikes"
-                  checked={this.props.orderedByLikes}
-                  onChange={this.props.toggleOrdering} // eslint-disable-line react/jsx-handler-names
-                />
-                <span className="visually-hidden">{orderLikesText}</span>
-                <i className="far fa-thumbs-up" aria-hidden="true" />
-              </label>
-            </div>
-          </div>}
-      </div>
-    )
-  }
+              <option value={-1}>{allTag}</option>
+              {categories.map((cat) => (
+                <option key={cat} value={cat}>{cat}</option>
+              ))}
+            </select>
+          </div>
+        )}
+        <div className="form-actions">
+          <div className="form-actions__right">
+            <button type="submit" className="button">{filterText}</button>
+          </div>
+        </div>
+      </form>
+      {isModerator && (
+        <div className="block">
+          <div className="checkbox-btn u-spacer-right">
+            <label
+              htmlFor="markedCheck"
+              className={'btn switch--btn' + (displayOnShortlist ? ' active' : '')}
+              title={onlyShowMarkedText}
+            >
+              <input
+                className="radio__input"
+                type="checkbox"
+                id="markedCheck"
+                name="markedCheck"
+                checked={displayOnShortlist}
+                onChange={toggleDisplayOnShortlist}
+              />
+              <span className="visually-hidden">{onlyShowMarkedText}</span>
+              <i className="far fa-list-alt" aria-hidden="true" />
+            </label>
+          </div>
+          <div className="checkbox-btn u-spacer-right">
+            <label
+              htmlFor="displayNotHiddenOnly"
+              className={'btn switch--btn' + (displayNotHiddenOnly ? ' active' : '')}
+              title={displayNotHiddenText}
+            >
+              <input
+                className="radio__input"
+                type="checkbox"
+                id="displayNotHiddenOnly"
+                name="displayNotHiddenOnly"
+                checked={displayNotHiddenOnly}
+                onChange={toggledisplayNotHiddenOnly}
+              />
+              <span className="visually-hidden">{displayNotHiddenText}</span>
+              <i className="far fa-eye" aria-hidden="true" />
+            </label>
+          </div>
+          <div className="checkbox-btn">
+            <label
+              htmlFor="orderedByLikes"
+              className={'btn switch--btn' + (orderedByLikes ? ' active' : '')}
+              title={orderLikesText}
+            >
+              <input
+                className="radio__input"
+                type="checkbox"
+                id="orderedByLikes"
+                name="orderedByLikes"
+                checked={orderedByLikes}
+                onChange={toggleOrdering}
+              />
+              <span className="visually-hidden">{orderLikesText}</span>
+              <i className="far fa-thumbs-up" aria-hidden="true" />
+            </label>
+          </div>
+        </div>
+      )}
+    </>
+  )
 }
+
+export default Filter
diff --git a/meinberlin/react/livequestions/LikeCard.jsx b/meinberlin/react/livequestions/LikeCard.jsx
new file mode 100644
index 0000000000..d5e5bb8dff
--- /dev/null
+++ b/meinberlin/react/livequestions/LikeCard.jsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import django from 'django'
+import { Pill } from '../contrib/Pill'
+import { classNames } from '../contrib/helpers'
+
+const likedTag = django.gettext('Liked')
+const likesTag = django.gettext('Likes')
+const addLikeTag = django.gettext('add like')
+const undoLikeTag = django.gettext('undo like')
+
+export default function LikeCard ({
+  title,
+  category,
+  likes,
+  onLikeClick
+}) {
+  const likeText = likes.session_like ? likedTag : likesTag
+
+  return (
+    <article className="modul-card card">
+      <header className="card__header">
+        <h3 className="title">{title}</h3>
+        {category && (
+          <div className="card__status status">
+            <Pill pillClass="card__pill pill pill--label">{category}</Pill>
+          </div>
+        )}
+      </header>
+      {onLikeClick
+        ? (
+          <button
+            type="button"
+            className={classNames(
+              'rating-button',
+              likes.session_like && 'rating-button--active'
+            )}
+            onClick={onLikeClick}
+            aria-label={likes.session_like ? addLikeTag : undoLikeTag}
+          >
+            <i className="far fa-thumbs-up" aria-hidden="true" />
+            {likeText} ({likes.count})
+          </button>
+          )
+        : (
+          <span className="rating-button">
+            <i className="far fa-thumbs-up" aria-hidden="true" />
+            {likeText} ({likes.count})
+          </span>
+          )}
+    </article>
+  )
+}
diff --git a/meinberlin/react/livequestions/QuestionBox.jsx b/meinberlin/react/livequestions/QuestionBox.jsx
index 5a30e88640..87397e6f00 100644
--- a/meinberlin/react/livequestions/QuestionBox.jsx
+++ b/meinberlin/react/livequestions/QuestionBox.jsx
@@ -3,11 +3,10 @@ import { updateItem } from '../contrib/helpers.js'
 import React from 'react'
 import QuestionForm from './QuestionForm'
 import QuestionList from './QuestionList'
-import InfoBox from './InfoBox'
 import Filters from './Filters'
+import InfoBox from './InfoBox'
 import StatisticsBox from './StatisticsBox'
 
-const selectAffiliationStr = django.gettext('select affiliation')
 const informationStr = django.gettext('Information')
 const questionsStr = django.gettext('Questions')
 const statisticsStr = django.gettext('Statistics')
@@ -24,7 +23,6 @@ export default class QuestionBox extends React.Component {
       filteredQuestions: [],
       answeredQuestions: [],
       category: '-1',
-      categoryName: selectAffiliationStr,
       displayNotHiddenOnly: false,
       displayOnShortlist: false,
       orderedByLikes: false,
@@ -52,10 +50,8 @@ export default class QuestionBox extends React.Component {
   }
 
   setCategory (category) {
-    const newName = (category === '-1') ? selectAffiliationStr : category
     this.setState({
       filterChanged: true,
-      categoryName: newName,
       category
     })
   }
@@ -237,68 +233,46 @@ export default class QuestionBox extends React.Component {
           aria-hidden="true"
         >
           {this.props.hasAskQuestionsPermission &&
-            <div className="container">
-              <div className="offset-lg-2 col-lg-8">
-                <QuestionForm
-                  restartPolling={this.restartPolling}
-                  category_dict={this.props.category_dict}
-                  questions_api_url={this.props.questions_api_url}
-                  privatePolicyLabel={this.props.privatePolicyLabel}
-                />
-              </div>
+            <QuestionForm
+              restartPolling={this.restartPolling}
+              category_dict={this.props.category_dict}
+              questions_api_url={this.props.questions_api_url}
+              privatePolicyLabel={this.props.privatePolicyLabel}
+            />}
+          <InfoBox
+            isModerator={this.props.isModerator}
+          />
+          <Filters
+            categories={this.props.categories}
+            currentCategory={this.state.category}
+            setCategories={this.setCategory.bind(this)}
+            orderedByLikes={this.state.orderedByLikes}
+            toggleOrdering={this.toggleOrdering.bind(this)}
+            displayOnShortlist={this.state.displayOnShortlist}
+            displayNotHiddenOnly={this.state.displayNotHiddenOnly}
+            toggleDisplayOnShortlist={this.toggleDisplayOnShortlist.bind(this)}
+            toggledisplayNotHiddenOnly={this.toggledisplayNotHiddenOnly.bind(this)}
+            isModerator={this.props.isModerator}
+          />
+          {this.props.isModerator &&
+            <div className="block">
+              <a className="btn btn--light" rel="noopener noreferrer" href={this.props.present_url} target="_blank">
+                <span className="fa-stack fa-1x">
+                  <i className="fas fa-tv fa-stack-2x" aria-label="hidden"> </i>
+                  <i className="fas fa-arrow-up fa-stack-1x" aria-label="hidden"> </i>
+                </span>
+                {displayStr}
+              </a>
             </div>}
-          <div>
-            <div className="container">
-              <div className="offset-lg-2 col-lg-8">
-                <InfoBox
-                  isModerator={this.props.isModerator}
-                />
-                <div className="live_questions__filters--parent">
-                  <Filters
-                    categories={this.props.categories}
-                    currentCategory={this.state.category}
-                    currentCategoryName={this.state.categoryName}
-                    setCategories={this.setCategory.bind(this)}
-                    orderedByLikes={this.state.orderedByLikes}
-                    toggleOrdering={this.toggleOrdering.bind(this)}
-                    displayOnShortlist={this.state.displayOnShortlist}
-                    displayNotHiddenOnly={this.state.displayNotHiddenOnly}
-                    toggleDisplayOnShortlist={this.toggleDisplayOnShortlist.bind(this)}
-                    toggledisplayNotHiddenOnly={this.toggledisplayNotHiddenOnly.bind(this)}
-                    isModerator={this.props.isModerator}
-                  />
-                  {this.props.isModerator &&
-                    <div>
-                      <a className="btn btn--light live_questions__filters--screen-btn" rel="noopener noreferrer" href={this.props.present_url} target="_blank">
-                        <span className="fa-stack fa-1x">
-                          <i className="fas fa-tv fa-stack-2x" aria-label="hidden"> </i>
-                          <i className="fas fa-arrow-up fa-stack-1x" aria-label="hidden"> </i>
-                        </span>
-                        {displayStr}
-                      </a>
-                    </div>}
-                </div>
-              </div>
-            </div>
-            <div className="module-content--light u-spacer-bottom">
-              <div className="container">
-                <div className="offset-lg-2 col-lg-8">
-                  <QuestionList
-                    questions={this.state.filteredQuestions}
-                    removeFromList={this.removeFromList.bind(this)}
-                    updateQuestion={this.updateQuestion.bind(this)}
-                    handleLike={this.handleLike.bind(this)}
-                    isModerator={this.props.isModerator}
-                    togglePollingPaused={this.togglePollingPaused.bind(this)}
-                    hasLikingPermission={this.props.hasLikingPermission}
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="live_questions__anchor">
-              <span id="question-list-end" />
-            </div>
-          </div>
+          <QuestionList
+            questions={this.state.filteredQuestions}
+            removeFromList={this.removeFromList.bind(this)}
+            updateQuestion={this.updateQuestion.bind(this)}
+            handleLike={this.handleLike.bind(this)}
+            isModerator={this.props.isModerator}
+            togglePollingPaused={this.togglePollingPaused.bind(this)}
+            hasLikingPermission={this.props.hasLikingPermission}
+          />
         </div>
         <div
           className="tabpanel module-content--light"
diff --git a/meinberlin/react/livequestions/QuestionForm.jsx b/meinberlin/react/livequestions/QuestionForm.jsx
index a73b52971c..8f6d445e87 100644
--- a/meinberlin/react/livequestions/QuestionForm.jsx
+++ b/meinberlin/react/livequestions/QuestionForm.jsx
@@ -66,8 +66,8 @@ export default class QuestionForm extends React.Component {
   render () {
     return (
       <>
-        <h2 id="form-heading">{askQuestionStr}</h2>
-        <form id="id-comment-form" className="form--base panel--heavy" action="" onSubmit={this.addQuestion.bind(this)} aria-labelledby="form-heading">
+        <h2 id="question-form-heading">{askQuestionStr}</h2>
+        <form id="id-comment-form" className="form--base panel--heavy" action="" onSubmit={this.addQuestion.bind(this)} aria-labelledby="question-form-heading">
           <div className="form-group">
             {Object.keys(this.props.category_dict).length > 0
               ? <CategorySelect
diff --git a/meinberlin/react/livequestions/QuestionList.jsx b/meinberlin/react/livequestions/QuestionList.jsx
index fea65bacd9..0b4f154a3e 100644
--- a/meinberlin/react/livequestions/QuestionList.jsx
+++ b/meinberlin/react/livequestions/QuestionList.jsx
@@ -7,7 +7,7 @@ const QuestionList = (props) => {
     return (
       <div>
         {
-          props.questions.map((question, index) => {
+          props.questions.map((question) => {
             return (
               <QuestionModerator
                 key={question.id}
diff --git a/meinberlin/react/livequestions/QuestionModerator.jsx b/meinberlin/react/livequestions/QuestionModerator.jsx
index 28ca4b0f1a..150fb82516 100644
--- a/meinberlin/react/livequestions/QuestionModerator.jsx
+++ b/meinberlin/react/livequestions/QuestionModerator.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import django from 'django'
+import LikeCard from './LikeCard'
 
 export default class QuestionModerator extends React.Component {
   constructor (props) {
@@ -101,29 +102,19 @@ export default class QuestionModerator extends React.Component {
     const removeLiveText = django.gettext('remove from live list')
     const addShortlistText = django.gettext('added to shortlist')
     const removeShortlistText = django.gettext('remove from shortlist')
-    const supportStr = django.gettext('Support count')
 
     return (
-      <div className="list-item">
-        <div>
-          <p className={this.props.is_hidden ? 'u-muted u-text-decoration-line-through live_questions__question' : 'live_questions__question'}>{this.props.children}</p>
-        </div>
-        {this.props.category &&
-          <div>
-            <span className="label label--big">{this.props.category}</span>
-          </div>}
-        <div className="live-question__action-bar">
-          <div className="live_questions__like">
-            <span
-              className="rating-button rating-up is-read-only"
-              title={supportStr}
-            >
-              <i className="far fa-thumbs-up" aria-hidden="true" />
-              {this.state.likes}
-              <span className="visually-hidden">{supportStr}</span>
-            </span>
-          </div>
-          <div>
+      <>
+        <LikeCard
+          title={this.props.children}
+          category={this.props.category}
+          likes={{
+            count: this.state.likes,
+            session_like: this.state.session_like
+          }}
+        />
+        <div className="list-item mb-2">
+          <div className="live-question__action-bar">
             {this.props.displayIsOnShortlist &&
               <button
                 type="button"
@@ -168,7 +159,7 @@ export default class QuestionModerator extends React.Component {
               </button>}
           </div>
         </div>
-      </div>
+      </>
     )
   }
 }
diff --git a/meinberlin/react/livequestions/QuestionUser.jsx b/meinberlin/react/livequestions/QuestionUser.jsx
index ac19cf9aa4..ee0ba0def4 100644
--- a/meinberlin/react/livequestions/QuestionUser.jsx
+++ b/meinberlin/react/livequestions/QuestionUser.jsx
@@ -1,97 +1,61 @@
-import React from 'react'
+import React, { useEffect, useState, useCallback } from 'react'
+import LikeCard from './LikeCard'
 import django from 'django'
 
-export default class QuestionUser extends React.Component {
-  constructor (props) {
-    super(props)
+const shortlistText = django.gettext('on shortlist')
 
-    this.state = {
-      is_on_shortlist: this.props.is_on_shortlist,
-      is_live: this.props.is_live,
-      likes: this.props.likes.count,
-      session_like: this.props.likes.session_like
-    }
-  }
+const QuestionUser = ({ is_on_shortlist: onShortList, likes, handleLike, id, children, category, hasLikingPermission }) => {
+  const [isOnShortlist, setIsOnShortlist] = useState(onShortList)
+  const [likeCount, setLikeCount] = useState(likes.count)
+  const [sessionLike, setSessionLike] = useState(likes.session_like)
 
-  componentDidUpdate (prevProps) {
-    if (this.props.is_on_shortlist !== prevProps.is_on_shortlist) {
-      this.setState({
-        is_on_shortlist: this.props.is_on_shortlist
-      })
-    }
-    if (this.props.likes !== prevProps.likes) {
-      this.setState({
-        likes: this.props.likes.count,
-        session_like: this.props.likes.session_like
-      })
-    }
-  }
+  useEffect(() => {
+    setIsOnShortlist(onShortList)
+  }, [onShortList])
 
-  handleErrors (response) {
+  useEffect(() => {
+    setLikeCount(likes.count)
+    setSessionLike(likes.session_like)
+  }, [likes])
+
+  const handleErrors = (response) => {
     if (!response.ok) {
-      throw Error(response.statusText)
+      throw new Error(response.statusText)
     }
     return response
   }
 
-  handleLike () {
-    const value = !this.state.session_like
-    this.props.handleLike(this.props.id, value)
-      .then(this.handleErrors)
-      .then((response) => this.setState(
-        {
-          session_like: value,
-          likes: value ? this.state.likes + 1 : this.state.likes - 1
-        }
-      ))
-      .catch((response) => { console.log(response.message) })
-  }
-
-  render () {
-    const shortlistText = django.gettext('on shortlist')
-    const likesTag = django.gettext('likes')
-    const addLikeTag = django.gettext('add like')
-    const undoLikeTag = django.gettext('undo like')
+  const handleLikeClick = useCallback(() => {
+    const newSessionLike = !sessionLike
+    handleLike(id, newSessionLike)
+      .then(handleErrors)
+      .then(() => {
+        setSessionLike(newSessionLike)
+        setLikeCount((prevLikes) => prevLikes + (newSessionLike ? 1 : -1))
+      })
+      .catch((error) => {
+        console.log(error.message)
+      })
+  }, [sessionLike, handleLike, id])
 
-    return (
-      <div className="list-item">
-        <div>
-          <p className="live_questions__question">
-            {this.props.is_on_shortlist &&
-              <>
-                <i className="far fa-list-alt u-primary u-icon-spacing" aria-hidden="true" />
-                <span className="visually-hidden">{shortlistText}</span>
-              </>}
-            {this.props.children}
-          </p>
-        </div>
-        {this.props.category &&
-          <div>
-            <span className="label label--big u-spacer-bottom-half">{this.props.category}</span>
-          </div>}
-        <div className="live-question__action-bar">
-          {this.props.hasLikingPermission
-            ? (
-              <button
-                type="button"
-                className={'rating-button rating-up ' + (this.state.session_like ? 'u-success ' : 'u-muted')}
-                onClick={this.handleLike.bind(this)}
-                aria-label={this.state.session_like ? addLikeTag : undoLikeTag}
-              >
-                <i className="far fa-thumbs-up" />
-                {this.state.likes}
-                <span className="visually-hidden">{likesTag}</span>
-              </button>
-              )
-            : (
-              <span className="rating-button rating-up is-read-only u-muted">
-                <i className="far fa-thumbs-up u-muted" aria-hidden="true" />
-                {this.state.likes}
-                <span className="visually-hidden">{likesTag}</span>
-              </span>
-              )}
-        </div>
-      </div>
-    )
-  }
+  return (
+    <>
+      {isOnShortlist &&
+        <>
+          <i className="far fa-list-alt u-primary u-icon-spacing" aria-hidden="true" />
+          <span className="visually-hidden">{shortlistText}</span>
+        </>}
+      <LikeCard
+        title={children}
+        category={category}
+        likes={{
+          count: likeCount,
+          session_like: sessionLike
+        }}
+        {...(hasLikingPermission && { onLikeClick: handleLikeClick })}
+      />
+    </>
+  )
 }
+
+export default QuestionUser