react/livequestions: style statistics

changelog/_8546.md

@@ -0,0 +1,6 @@
+### Removed
+- Removed react_questions_statistics.jsx
+
+### Changed
+
+- Style `StatisticsBox`

meinberlin/assets/scss/components_user_facing/_live_questions.scss

@@ -7,3 +7,28 @@
     margin-left: auto;
     margin-bottom: .625em;
 }
+
+.live-question__progress {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 8px;
+    position: relative;
+}
+
+.live-question__progress-bar {
+    background-color: $gray-lighter;
+    border-radius: 10px;
+    height: 100%;
+    position: absolute;
+    z-index: 0;
+}
+
+.live-question__progress-text {
+    padding: 0 0.5rem;
+    position: relative;
+    z-index: 1;
+}
+
+.live-question__progress-percentage {
+    font-weight: bold;
+}

meinberlin/react/livequestions/QuestionBox.jsx

@@ -249,7 +249,7 @@ export default class QuestionBox extends React.Component {
           : <StatisticsBox
               answeredQuestions={this.state.answeredQuestions}
               questions_api_url={this.props.questions_api_url}
-              categories={this.props.categories}
+              category_dict={this.props.category_dict}
               isModerator={this.props.isModerator}
             />}
       </div>

meinberlin/react/livequestions/StatisticsBox.jsx

@@ -1,35 +1,35 @@
 import django from 'django'
 import { updateItem } from '../contrib/helpers.js'
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import QuestionUser from './QuestionUser'
 import QuestionModerator from './QuestionModerator'
 
-export default class StatisticsBox extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = { answeredQuestions: props.answeredQuestions }
-  }
+const questionAnsweredTag = django.gettext('Questions Answered')
+const categoriesTag = django.gettext('Categories')
+const categoriesAnsweredTag = django.gettext('Affiliation Of Answered Questions')
 
-  UNSAFE_componentWillReceiveProps (props) {
-    this.setState({ answeredQuestions: props.answeredQuestions })
-  }
+function StatisticsBox (props) {
+  const [answeredQuestions, setAnsweredQuestions] = useState(props.answeredQuestions)
 
-  updateQuestion (data, id) {
-    const url = this.props.questions_api_url + id + '/'
+  useEffect(() => {
+    setAnsweredQuestions(props.answeredQuestions)
+  }, [props.answeredQuestions])
+
+  const updateQuestion = (data, id) => {
+    const url = props.questions_api_url + id + '/'
     return updateItem(data, url, 'PATCH')
   }
 
-  removeFromList (id, data) {
-    this.updateQuestion(data, id)
-      .then(response => this.setState(prevState => ({
-        answeredQuestions: prevState.answeredQuestions.filter(question => question.id !== id)
-      })))
+  const removeFromList = (id, data) => {
+    updateQuestion(data, id)
+      .then(() => setAnsweredQuestions(prevQuestions => prevQuestions.filter(question => question.id !== id)
+      ))
   }
 
-  countCategory (category) {
+  const countCategory = (category) => {
     let countPerCategory = 0
     let answeredQuestions = 0
-    this.props.answeredQuestions.forEach(function (question) {
+    props.answeredQuestions.forEach(function (question) {
       if (question.is_answered && !question.is_hidden) {
         answeredQuestions++
         if (question.category === category) {
@@ -40,86 +40,78 @@ export default class StatisticsBox extends React.Component {
     return Math.round(countPerCategory * 100 / answeredQuestions) || 0
   }
 
-  render () {
-    const questionAnsweredTag = django.gettext('Questions Answered')
-    const categoriesAnsweredTag = django.gettext('Affiliation Of Answered Questions')
-
-    return (
-      <div className="module-content--light">
-        <div className="container">
-          <div className="offset-lg-2 col-lg-8">
-            {this.props.categories.length > 0 &&
-              <div>
-                <h3>{categoriesAnsweredTag}</h3>
-                <div className="list-item">
-                  {this.props.categories.map((category, index) => {
-                    const countPerCategory = this.countCategory(category)
-                    const style = { width: countPerCategory + '%' }
-                    return (
-                      <div key={index} className="u-spacer-bottom-half">
-                        <div className="progress">
-                          <div
-                            className="progress-bar" style={style} role="progressbar" aria-valuenow="25" aria-valuemin="0"
-                            aria-valuemax="100"
-                          />
-                          <span className="progress-bar__stats">&nbsp;{category}&nbsp;{countPerCategory}%</span>
-                        </div>
-                      </div>
-                    )
-                  })}
+  return (
+    <div className="container">
+      {Object.keys(props.category_dict).length > 0 && (
+        <>
+          <h2>{categoriesAnsweredTag}</h2>
+          <div className="modul-card card">
+            <h3>{categoriesTag}</h3>
+            {Object.keys(props.category_dict).map((id) => {
+              const countPerCategory = countCategory(props.category_dict[id])
+              const style = { width: countPerCategory + '%' }
+              return (
+                <div className="live-question__progress" key={id}>
+                  <div
+                    className="live-question__progress-bar"
+                    style={style}
+                    role="progressbar"
+                    aria-valuenow={countPerCategory}
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                  />
+                  <div className="live-question__progress-text">
+                    <span className="live-question__progress-percentage">
+                      {countPerCategory}%
+                    </span>{' '}
+                    <span>{props.category_dict[id]}</span>
+                  </div>
                 </div>
-              </div>}
-            <h3>{questionAnsweredTag}</h3>
-            {this.props.isModerator
-              ? (
-                <div className="list-group">
-                  {this.state.answeredQuestions.map((question, index) => {
-                    return (
-                      <QuestionModerator
-                        updateQuestion={this.updateQuestion.bind(this)}
-                        displayIsOnShortlist={false}
-                        displayIsLive={false}
-                        displayIsHidden={false}
-                        displayIsAnswered={question.is_answered}
-                        removeFromList={this.removeFromList.bind(this)}
-                        key={question.id}
-                        id={question.id}
-                        is_answered={question.is_answered}
-                        is_on_shortlist={question.is_on_shortlist}
-                        is_live={question.is_live}
-                        is_hidden={question.is_hidden}
-                        category={question.category}
-                        likes={question.likes}
-                      >
-                        {question.text}
-                      </QuestionModerator>
-                    )
-                  })}
-                </div>
-                )
-              : (
-                <div className="list-group">
-                  {this.state.answeredQuestions.map((question, index) => {
-                    return (
-                      <QuestionUser
-                        key={question.id}
-                        id={question.id}
-                        is_answered={question.is_answered}
-                        is_on_shortlist={question.is_on_shortlist}
-                        is_live={question.is_live}
-                        is_hidden={question.is_hidden}
-                        category={question.category}
-                        likes={question.likes}
-                      >
-                        {question.text}
-                      </QuestionUser>
-                    )
-                  })}
-                </div>
-                )}
+              )
+            })}
           </div>
-        </div>
-      </div>
-    )
-  }
+        </>
+      )}
+      <h2>
+        {questionAnsweredTag} ({answeredQuestions.length})
+      </h2>
+      {props.isModerator
+        ? answeredQuestions.map((question) => (
+          <QuestionModerator
+            updateQuestion={updateQuestion}
+            displayIsOnShortlist={false}
+            displayIsLive={false}
+            displayIsHidden={false}
+            displayIsAnswered={question.is_answered}
+            removeFromList={removeFromList}
+            key={question.id}
+            id={question.id}
+            is_answered={question.is_answered}
+            is_on_shortlist={question.is_on_shortlist}
+            is_live={question.is_live}
+            is_hidden={question.is_hidden}
+            category={question.category}
+            likes={question.likes}
+          >
+            {question.text}
+          </QuestionModerator>
+        ))
+        : answeredQuestions.map((question) => (
+          <QuestionUser
+            key={question.id}
+            id={question.id}
+            is_answered={question.is_answered}
+            is_on_shortlist={question.is_on_shortlist}
+            is_live={question.is_live}
+            is_hidden={question.is_hidden}
+            category={question.category}
+            likes={question.likes}
+          >
+            {question.text}
+          </QuestionUser>
+        ))}
+    </div>
+  )
 }
+
+export default StatisticsBox