From 0e1157bf764838f7325aac778d2be9722c747aee Mon Sep 17 00:00:00 2001
From: Philipp Veller <mail@vellip.de>
Date: Tue, 19 Nov 2024 17:15:08 +0100
Subject: [PATCH] react/ratings: adapt ratings buttons to have new icons, more
 modern code and tests

---
 .../comments/static/comments/Comment.jsx      |   3 +-
 .../__snapshots__/comment.jest.jsx.snap       | 100 +++++++++--
 .../static/comments_async/comment.jsx         |   4 +-
 .../ratings/static/ratings/RatingBox.jsx      |  83 +++++++++
 .../ratings/static/ratings/RatingButton.jsx   |  40 +++++
 .../ratings/__tests__/RatingBox.jest.jsx      | 161 ++++++++++++++++++
 .../ratings/__tests__/RatingButton.jest.jsx   |  37 ++++
 .../__snapshots__/RatingBox.jest.jsx.snap     |  12 ++
 .../ratings/static/ratings/rating_api.js      | 102 +++++++++++
 .../ratings/static/ratings/react_ratings.jsx  | 154 +----------------
 .../ratings/templatetags/react_ratings.py     |   2 +-
 changelog/8529.md                             |   9 +
 docs/react_ratings.md                         | 127 ++++++++++++++
 jest.config.js                                |   2 +-
 setupTests.js                                 |   2 +
 tests/ratings/test_rating_templatetags.py     |   2 +-
 16 files changed, 665 insertions(+), 175 deletions(-)
 create mode 100644 adhocracy4/ratings/static/ratings/RatingBox.jsx
 create mode 100644 adhocracy4/ratings/static/ratings/RatingButton.jsx
 create mode 100644 adhocracy4/ratings/static/ratings/__tests__/RatingBox.jest.jsx
 create mode 100644 adhocracy4/ratings/static/ratings/__tests__/RatingButton.jest.jsx
 create mode 100644 adhocracy4/ratings/static/ratings/__tests__/__snapshots__/RatingBox.jest.jsx.snap
 create mode 100644 adhocracy4/ratings/static/ratings/rating_api.js
 create mode 100644 changelog/8529.md
 create mode 100644 docs/react_ratings.md

diff --git a/adhocracy4/comments/static/comments/Comment.jsx b/adhocracy4/comments/static/comments/Comment.jsx
index 62478dbee..397b2b465 100644
--- a/adhocracy4/comments/static/comments/Comment.jsx
+++ b/adhocracy4/comments/static/comments/Comment.jsx
@@ -1,5 +1,5 @@
 const ReportModal = require('../../../reports/static/reports/react_reports').ReportModal
-const RatingBox = require('../../../ratings/static/ratings/react_ratings').RatingBox
+const RatingBox = require('../../../ratings/static/ratings/RatingBox')
 const Modal = require('../../../static/Modal')
 const CommentEditForm = require('./CommentEditForm')
 const CommentForm = require('./CommentForm')
@@ -86,6 +86,7 @@ class Comment extends React.Component {
           userRating={this.props.userRating}
           userRatingId={this.props.userRatingId}
           isReadOnly={this.props.isReadOnly}
+          isComment
         />
       )
     }
diff --git a/adhocracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap b/adhocracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap
index 6003349b8..0deddc9b8 100644
--- a/adhocracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap
+++ b/adhocracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap
@@ -71,38 +71,55 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
               >
                 <div
                   class="rating"
+                  data-testid="rating-box"
                 >
                   <button
-                    aria-label="Click to vote up"
+                    aria-pressed="false"
                     class="rating-button rating-up"
                     disabled=""
+                    type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="fa fa-chevron-up"
+                      class="fa fa-thumbs-up"
                     />
+                     
                     10
+                     
                     <span
                       class="rating__label"
                     >
                       Likes
                     </span>
+                    <span
+                      class="aural"
+                    >
+                      Click to like
+                    </span>
                   </button>
                   <button
-                    aria-label="Click to vote down"
+                    aria-pressed="false"
                     class="rating-button rating-down"
                     disabled=""
+                    type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="fa fa-chevron-down"
+                      class="fa fa-thumbs-down"
                     />
+                     
                     2
+                     
                     <span
                       class="rating__label"
                     >
                       Dislikes
                     </span>
+                    <span
+                      class="aural"
+                    >
+                      Click to dislike
+                    </span>
                   </button>
                 </div>
                 <div
@@ -345,38 +362,55 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
             >
               <div
                 class="rating"
+                data-testid="rating-box"
               >
                 <button
-                  aria-label="Click to vote up"
+                  aria-pressed="false"
                   class="rating-button rating-up"
                   disabled=""
+                  type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="fa fa-chevron-up"
+                    class="fa fa-thumbs-up"
                   />
+                   
                   10
+                   
                   <span
                     class="rating__label"
                   >
                     Likes
                   </span>
+                  <span
+                    class="aural"
+                  >
+                    Click to like
+                  </span>
                 </button>
                 <button
-                  aria-label="Click to vote down"
+                  aria-pressed="false"
                   class="rating-button rating-down"
                   disabled=""
+                  type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="fa fa-chevron-down"
+                    class="fa fa-thumbs-down"
                   />
+                   
                   2
+                   
                   <span
                     class="rating__label"
                   >
                     Dislikes
                   </span>
+                  <span
+                    class="aural"
+                  >
+                    Click to dislike
+                  </span>
                 </button>
               </div>
               <div
@@ -681,38 +715,55 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
               >
                 <div
                   class="rating"
+                  data-testid="rating-box"
                 >
                   <button
-                    aria-label="Click to vote up"
+                    aria-pressed="false"
                     class="rating-button rating-up"
                     disabled=""
+                    type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="fa fa-chevron-up"
+                      class="fa fa-thumbs-up"
                     />
+                     
                     10
+                     
                     <span
                       class="rating__label"
                     >
                       Likes
                     </span>
+                    <span
+                      class="aural"
+                    >
+                      Click to like
+                    </span>
                   </button>
                   <button
-                    aria-label="Click to vote down"
+                    aria-pressed="false"
                     class="rating-button rating-down"
                     disabled=""
+                    type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="fa fa-chevron-down"
+                      class="fa fa-thumbs-down"
                     />
+                     
                     2
+                     
                     <span
                       class="rating__label"
                     >
                       Dislikes
                     </span>
+                    <span
+                      class="aural"
+                    >
+                      Click to dislike
+                    </span>
                   </button>
                 </div>
                 <div
@@ -960,38 +1011,55 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
             >
               <div
                 class="rating"
+                data-testid="rating-box"
               >
                 <button
-                  aria-label="Click to vote up"
+                  aria-pressed="false"
                   class="rating-button rating-up"
                   disabled=""
+                  type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="fa fa-chevron-up"
+                    class="fa fa-thumbs-up"
                   />
+                   
                   10
+                   
                   <span
                     class="rating__label"
                   >
                     Likes
                   </span>
+                  <span
+                    class="aural"
+                  >
+                    Click to like
+                  </span>
                 </button>
                 <button
-                  aria-label="Click to vote down"
+                  aria-pressed="false"
                   class="rating-button rating-down"
                   disabled=""
+                  type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="fa fa-chevron-down"
+                    class="fa fa-thumbs-down"
                   />
+                   
                   2
+                   
                   <span
                     class="rating__label"
                   >
                     Dislikes
                   </span>
+                  <span
+                    class="aural"
+                  >
+                    Click to dislike
+                  </span>
                 </button>
               </div>
               <div
diff --git a/adhocracy4/comments_async/static/comments_async/comment.jsx b/adhocracy4/comments_async/static/comments_async/comment.jsx
index 55c800828..6f64d992b 100644
--- a/adhocracy4/comments_async/static/comments_async/comment.jsx
+++ b/adhocracy4/comments_async/static/comments_async/comment.jsx
@@ -10,8 +10,7 @@ import CommentManageDropdown from './comment_manage_dropdown'
 import CommentList from './comment_list'
 import { ModeratorFeedback } from './moderator_feedback'
 import AiReport from './ai_report'
-
-import { RatingBox } from '../../../ratings/static/ratings/react_ratings'
+import RatingBox from '../../../ratings/static/ratings/RatingBox'
 
 const translated = {
   reportTitle: django.gettext('You want to report this content? Your message will be sent to the moderation. The moderation will look at the reported content. The content will be deleted if it does not meet our discussion rules (netiquette).'),
@@ -151,6 +150,7 @@ export default class Comment extends React.Component {
           userRating={this.props.userRating}
           userRatingId={this.props.userRatingId}
           isReadOnly={!this.props.has_rating_permission}
+          isComment
         />
       )
     }
diff --git a/adhocracy4/ratings/static/ratings/RatingBox.jsx b/adhocracy4/ratings/static/ratings/RatingBox.jsx
new file mode 100644
index 000000000..ff286c003
--- /dev/null
+++ b/adhocracy4/ratings/static/ratings/RatingBox.jsx
@@ -0,0 +1,83 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import django from 'django'
+
+import { createOrModifyRating } from './rating_api'
+import RatingButton from './RatingButton'
+import config from '../../../static/config'
+
+const translations = {
+  likes: django.gettext('Likes'),
+  dislikes: django.gettext('Dislikes')
+}
+
+export const getRedirectUrl = (id) => config.getLoginUrl() + (id ? encodeURIComponent('?comment=' + id) : '')
+
+const RatingBox = ({
+  positiveRatings,
+  negativeRatings,
+  userHasRating,
+  userRating,
+  userRatingId,
+  isReadOnly,
+  contentType,
+  objectId,
+  authenticatedAs,
+  isComment,
+  render
+}) => {
+  const [ratings, setRatings] = useState({ negative: negativeRatings, positive: positiveRatings })
+  const [userRatingData, setUserRatingData] = useState({ userHasRating, userRating, userRatingId })
+
+  const clickHandler = useCallback(async (number) => {
+    if (!authenticatedAs) {
+      const redirectId = isComment ? objectId : null
+      window.location.href = getRedirectUrl(redirectId)
+    }
+
+    if (isReadOnly) {
+      return null
+    }
+
+    const [ratings, newUserRatingData] = await createOrModifyRating(number, objectId, contentType, userRatingData.userRatingId)
+
+    setRatings(ratings)
+    setUserRatingData({ ...userRatingData, ...newUserRatingData })
+  }, [authenticatedAs, objectId, contentType, userRatingData, isComment, isReadOnly])
+
+  const customChildren = useMemo(() => {
+    if (render && typeof render === 'function') {
+      return render({ ratings, userRatingData, isReadOnly, clickHandler })
+    }
+    return null
+  }, [clickHandler, isReadOnly, ratings, render, userRatingData])
+
+  // return either custom html from the render prop or the default
+  return customChildren ?? (
+    <div className="rating" data-testid="rating-box">
+      <RatingButton
+        isReadOnly={isReadOnly}
+        onClick={clickHandler}
+        active={userRatingData.userRating === 1}
+        rating={1}
+        authenticatedAs={authenticatedAs}
+      >
+        <i className="fa fa-thumbs-up" aria-hidden="true" />{' '}
+        {ratings.positive}{' '}
+        <span className="rating__label">{translations.likes}</span>
+      </RatingButton>
+      <RatingButton
+        isReadOnly={isReadOnly}
+        onClick={clickHandler}
+        active={userRatingData.userRating === -1}
+        rating={-1}
+        authenticatedAs={authenticatedAs}
+      >
+        <i className="fa fa-thumbs-down" aria-hidden="true" />{' '}
+        {ratings.negative}{' '}
+        <span className="rating__label">{translations.dislikes}</span>
+      </RatingButton>
+    </div>
+  )
+}
+
+export default RatingBox
diff --git a/adhocracy4/ratings/static/ratings/RatingButton.jsx b/adhocracy4/ratings/static/ratings/RatingButton.jsx
new file mode 100644
index 000000000..bf410e331
--- /dev/null
+++ b/adhocracy4/ratings/static/ratings/RatingButton.jsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import django from 'django'
+
+const translations = {
+  upvote: django.gettext('Click to like'),
+  downvote: django.gettext('Click to dislike')
+}
+
+const RatingButton = ({
+  rating,
+  active,
+  onClick,
+  authenticatedAs,
+  isReadOnly,
+  children
+}) => {
+  const onClickWrapper = () => {
+    onClick(active ? 0 : rating)
+  }
+
+  const type = rating === -1 ? 'down' : 'up'
+  const cssClasses = active
+    ? 'rating-button rating-' + type + ' is-selected'
+    : 'rating-button rating-' + type
+
+  return (
+    <button
+      aria-pressed={active}
+      className={cssClasses}
+      disabled={authenticatedAs !== null && isReadOnly}
+      onClick={onClickWrapper}
+      type="button"
+    >
+      {children}
+      <span className="aural">{type === 'up' ? translations.upvote : translations.downvote}</span>
+    </button>
+  )
+}
+
+export default RatingButton
diff --git a/adhocracy4/ratings/static/ratings/__tests__/RatingBox.jest.jsx b/adhocracy4/ratings/static/ratings/__tests__/RatingBox.jest.jsx
new file mode 100644
index 000000000..672e0224e
--- /dev/null
+++ b/adhocracy4/ratings/static/ratings/__tests__/RatingBox.jest.jsx
@@ -0,0 +1,161 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import RatingBox from '../RatingBox'
+import { createOrModifyRating } from '../rating_api'
+
+jest.mock('../../../../static/config', () => {
+  return {
+    getLoginUrl: jest.fn().mockReturnValue('/login')
+  }
+})
+
+jest.mock('../rating_api')
+
+const getData = ({ pos = 1, neg = 0, id = 2, userRating = null } = {}) => {
+  const mockData = {
+    meta_info: {
+      positive_ratings_on_same_object: pos,
+      negative_ratings_on_same_object: neg,
+      user_rating_on_same_object_value: userRating,
+      user_rating_on_same_object_id: 2
+    },
+    id
+  }
+
+  return [{
+    positive: mockData.meta_info.positive_ratings_on_same_object,
+    negative: mockData.meta_info.negative_ratings_on_same_object
+  }, {
+    userRating,
+    userHasRating: userRating !== null,
+    userRatingId: userRating !== null ? 2 : null
+  }, mockData]
+}
+
+const props = {
+  positiveRatings: 1,
+  negativeRatings: 0,
+  userHasRating: false,
+  userRating: null,
+  userRatingId: null,
+  authenticatedAs: 'someone',
+  contentType: 14,
+  objectId: 10
+}
+
+describe('RatingBox', () => {
+  const originalWindow = { ...window }
+  const originalLocation = window.location
+
+  beforeAll(() => {
+    delete window.location
+    window.location = { href: '' }
+  })
+
+  beforeEach(() => {
+    createOrModifyRating.mockClear()
+    window.adhocracy4 = { getCurrentPath: jest.fn(() => '') }
+    window.location.href = ''
+  })
+
+  afterAll(() => {
+    window.location = originalLocation
+    Object.assign(window, originalWindow)
+  })
+
+  test('component renders', () => {
+    render(<RatingBox />)
+    const ratings = screen.getByTestId('rating-box')
+    const buttons = screen.getAllByRole('button')
+
+    expect(ratings).toBeTruthy()
+    expect(buttons).toHaveLength(2)
+    expect(buttons[0]).toHaveAccessibleName(/like/i)
+    expect(buttons[1]).toHaveAccessibleName(/dislike/i)
+  })
+  test('updates on click', async () => {
+    render(<RatingBox {...props} />)
+    const button = screen.getByRole('button', { name: /1 like/i })
+    expect(screen.getByRole('button', { name: /0 dislike/i })).toBeInTheDocument()
+
+    createOrModifyRating.mockReturnValue(getData({ pos: 2, userRating: 1 }))
+    fireEvent.click(button)
+    await waitFor(() => expect(createOrModifyRating).toHaveBeenCalledTimes(1))
+    expect(createOrModifyRating).toHaveBeenCalledWith(1, 10, 14, null)
+    expect(screen.getByRole('button', { name: /0 dislike/i })).toBeInTheDocument()
+    expect(button).toHaveAccessibleName(/2 likes/i)
+  })
+  test('redirects when not logged in', async () => {
+    render(<RatingBox {...props} authenticatedAs={null} />)
+
+    const button = screen.getByRole('button', { name: /1 like/i })
+    fireEvent.click(button)
+
+    await waitFor(() => expect(window.location.href).toEqual('/login'))
+  })
+
+  test('redirects when not logged in and readonly', async () => {
+    render(<RatingBox {...props} authenticatedAs={null} isReadOnly />)
+
+    const button = screen.getByRole('button', { name: /1 like/i })
+    fireEvent.click(button)
+
+    await waitFor(() => expect(window.location.href).toEqual('/login'))
+  })
+
+  test('redirects to login and specific comment in next parameter', async () => {
+    const testProps = {
+      ...props,
+      authenticatedAs: null,
+      isReadOnly: true,
+      isComment: true,
+      objectId: 2
+    }
+
+    render(<RatingBox {...testProps} />)
+
+    const button = screen.getByRole('button', { name: /1 like/i })
+    expect(button).toBeInTheDocument()
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      expect(window.location.href).toEqual('/login%3Fcomment%3D2')
+    })
+  })
+})
+
+describe('RatingBox custom render', () => {
+  beforeEach(() => {
+    createOrModifyRating.mockClear()
+  })
+  test('component renders with custom children', async () => {
+    render(
+      <RatingBox
+        {...props} render={
+        ({ ratings, userRatingData, isReadOnly, clickHandler }) => (
+          <>
+            <div data-testid="custom-rating-box">
+              {JSON.stringify({ ratings, userRatingData, isReadOnly })}
+              <button onClick={() => {
+                clickHandler(-1)
+              }}
+              >
+                dislike
+              </button>
+            </div>
+          </>
+        )
+      }
+      />
+    )
+
+    const ratings = screen.getByTestId('custom-rating-box')
+    expect(ratings).toMatchSnapshot()
+
+    const button = screen.getByRole('button', { name: /dislike/ })
+    createOrModifyRating.mockReturnValue(getData())
+    fireEvent.click(button)
+    await waitFor(() => expect(createOrModifyRating).toHaveBeenCalledTimes(1))
+    expect(createOrModifyRating).toHaveBeenCalledWith(-1, 10, 14, null)
+  })
+})
diff --git a/adhocracy4/ratings/static/ratings/__tests__/RatingButton.jest.jsx b/adhocracy4/ratings/static/ratings/__tests__/RatingButton.jest.jsx
new file mode 100644
index 000000000..141e10a2b
--- /dev/null
+++ b/adhocracy4/ratings/static/ratings/__tests__/RatingButton.jest.jsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import RatingButton from '../RatingButton'
+
+const props = {
+  rating: -1,
+  active: false,
+  onClick: jest.fn(),
+  authenticatedAs: 'someone',
+  isReadOnly: false,
+  children: <span>Children</span>
+}
+
+describe('RatingButton', () => {
+  beforeEach(() => {
+    props.onClick.mockClear()
+  })
+
+  test('component renders', () => {
+    render(<RatingButton {...props} />)
+
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+
+    const children = screen.getByText('Children')
+    expect(children).toBeInTheDocument()
+  })
+
+  test('updates on click', () => {
+    render(<RatingButton {...props} />)
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    expect(props.onClick).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/adhocracy4/ratings/static/ratings/__tests__/__snapshots__/RatingBox.jest.jsx.snap b/adhocracy4/ratings/static/ratings/__tests__/__snapshots__/RatingBox.jest.jsx.snap
new file mode 100644
index 000000000..048bb2c28
--- /dev/null
+++ b/adhocracy4/ratings/static/ratings/__tests__/__snapshots__/RatingBox.jest.jsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RatingBox custom render component renders with custom children 1`] = `
+<div
+  data-testid="custom-rating-box"
+>
+  {"ratings":{"negative":0,"positive":1},"userRatingData":{"userHasRating":false,"userRating":null,"userRatingId":null}}
+  <button>
+    dislike
+  </button>
+</div>
+`;
diff --git a/adhocracy4/ratings/static/ratings/rating_api.js b/adhocracy4/ratings/static/ratings/rating_api.js
new file mode 100644
index 000000000..5da30b3cd
--- /dev/null
+++ b/adhocracy4/ratings/static/ratings/rating_api.js
@@ -0,0 +1,102 @@
+import api from '../../../static/api'
+
+/**
+ * @param {number} number - the rating value, can be -1, 0 or 1
+ * @param {string} objectId - the object to be rated
+ * @param {string} contentTypeId - the content type id of the object
+
+ * @returns {Promise<Array>} - an array with the rating data (number of negative
+ *    and positive ratings) and the user rating data (value and id and userHasRating)
+ *    and the complete response data from the API.
+ */
+export async function createRating (number, objectId, contentTypeId) {
+  try {
+    const data = await api.rating.add({
+      urlReplaces: {
+        objectPk: objectId,
+        contentTypeId
+      },
+      value: number
+    })
+
+    return [{
+      positive: data.meta_info.positive_ratings_on_same_object,
+      negative: data.meta_info.negative_ratings_on_same_object
+    }, {
+      userRating: data.meta_info.user_rating_on_same_object_value,
+      userHasRating: true,
+      userRatingId: data.id
+    }, data]
+  } catch (error) {
+    // if the server responds with a 400 and an array with a single integer
+    // the user has voted in the meantime. This handles the case and instead
+    // uses the returned ID to modify the rating.
+    if (error.status === 400 &&
+        error.responseJSON.length === 1 &&
+        Number.isInteger(parseInt(error.responseJSON[0]))
+    ) {
+      const userRatingId = parseInt(error.responseJSON[0])
+      const [ratings, userState, data] = (await modifyRating(number, userRatingId))[0]
+      return [
+        ratings,
+        {
+          ...userState,
+          userHasRating: true,
+          userRatingId
+        },
+        data
+      ]
+    }
+  }
+}
+
+/**
+ * @param {number} number - the rating value, can be -1, 0 or 1
+ * @param {number} id - the id of the users rating
+ * @param {string} objectId - the object to be rated
+ * @param {string} contentTypeId - the content type id of the object
+
+ * @returns {Promise<Array>} - an array with the rating data (number of negative
+ * and positive ratings) and the user rating data (value)
+ * and the complete response data from the API.
+ */
+export async function modifyRating (number, id, objectId, contentTypeId) {
+  const data = await api.rating.change({
+    urlReplaces: {
+      objectPk: objectId,
+      contentTypeId
+    },
+    value: number
+  }, id)
+  return [
+    {
+      positive: data.meta_info.positive_ratings_on_same_object,
+      negative: data.meta_info.negative_ratings_on_same_object
+    },
+    {
+      userRating: data.meta_info.user_rating_on_same_object_value,
+      userHasRating: number !== 0
+    },
+    data
+  ]
+}
+
+/**
+ * Helper function to easily create OR modify a rating
+ *
+ * @param {number} number - the rating value, can be -1, 0 or 1
+ * @param {string} objectId - the object to be rated
+ * @param {string} contentTypeId - the content type id of the object
+ * @param {number} [id] - the id of the users rating
+
+ * @returns {Promise<Array>} - an array with the rating data (number of negative
+ * and positive ratings) and the user rating data (value)
+ * and the complete response data from the API.
+ */
+export async function createOrModifyRating (number, objectId, contentTypeId, id) {
+  if (id) {
+    return await modifyRating(number, id, objectId, contentTypeId)
+  } else {
+    return await createRating(number, objectId, contentTypeId)
+  }
+}
diff --git a/adhocracy4/ratings/static/ratings/react_ratings.jsx b/adhocracy4/ratings/static/ratings/react_ratings.jsx
index c09873a84..980a650f6 100644
--- a/adhocracy4/ratings/static/ratings/react_ratings.jsx
+++ b/adhocracy4/ratings/static/ratings/react_ratings.jsx
@@ -1,158 +1,6 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import django from 'django'
-
-import api from '../../../static/api'
-import config from '../../../static/config'
-
-const translations = {
-  upvote: django.gettext('Click to vote up'),
-  downvote: django.gettext('Click to vote down'),
-  likes: django.gettext('Likes'),
-  dislikes: django.gettext('Dislikes')
-}
-
-class RatingBox extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      positiveRatings: this.props.positiveRatings,
-      negativeRatings: this.props.negativeRatings,
-      userHasRating: this.props.userRating !== null,
-      userRating: this.props.userRating,
-      userRatingId: this.props.userRatingId
-    }
-  }
-
-  handleRatingCreate (number) {
-    api.rating.add({
-      urlReplaces: {
-        objectPk: this.props.objectId,
-        contentTypeId: this.props.contentType
-      },
-      value: number
-    })
-      .done(function (data) {
-        this.setState({
-          positiveRatings: data.meta_info.positive_ratings_on_same_object,
-          negativeRatings: data.meta_info.negative_ratings_on_same_object,
-          userRating: data.meta_info.user_rating_on_same_object_value,
-          userHasRating: true,
-          userRatingId: data.id
-        })
-      }.bind(this))
-      .fail(function (jqXhr) {
-        if (jqXhr.status === 400 &&
-           jqXhr.responseJSON.length === 1 &&
-           Number.isInteger(parseInt(jqXhr.responseJSON[0]))) {
-          this.setState({
-            userHasRating: true,
-            userRatingId: jqXhr.responseJSON[0]
-          })
-          this.handleRatingModify(number, this.state.userRatingId)
-        }
-      }.bind(this))
-  }
-
-  handleRatingModify (number, id) {
-    api.rating.change({
-      urlReplaces: {
-        objectPk: this.props.objectId,
-        contentTypeId: this.props.contentType
-      },
-      value: number
-    }, id)
-      .done(function (data) {
-        this.setState({
-          positiveRatings: data.meta_info.positive_ratings_on_same_object,
-          negativeRatings: data.meta_info.negative_ratings_on_same_object,
-          userRating: data.meta_info.user_rating_on_same_object_value
-        })
-      }.bind(this))
-  }
-
-  ratingUp (e) {
-    e.preventDefault()
-    if (this.props.authenticatedAs === null) {
-      window.location.href = config.getLoginUrl()
-      return
-    }
-    if (this.props.isReadOnly) {
-      return
-    }
-    if (this.state.userHasRating) {
-      let number
-      if (this.state.userRating === 1) {
-        number = 0
-      } else {
-        number = 1
-      }
-      this.handleRatingModify(number, this.state.userRatingId)
-    } else {
-      this.handleRatingCreate(1)
-    }
-  }
-
-  ratingDown (e) {
-    e.preventDefault()
-    if (this.props.authenticatedAs === null) {
-      window.location.href = config.getLoginUrl()
-      return
-    }
-    if (this.props.isReadOnly) {
-      return
-    }
-    if (this.state.userHasRating) {
-      let number
-      if (this.state.userRating === -1) {
-        number = 0
-      } else {
-        number = -1
-      }
-      this.handleRatingModify(number, this.state.userRatingId)
-    } else {
-      this.handleRatingCreate(-1)
-    }
-  }
-
-  render () {
-    const getRatingClasses = ratingType => {
-      const valueForRatingType = ratingType === 'up' ? 1 : -1
-      const cssClasses = this.state.userRating === valueForRatingType
-        ? 'rating-button rating-' + ratingType + ' is-selected'
-        : 'rating-button rating-' + ratingType
-      return cssClasses
-    }
-
-    return (
-      <div className="rating">
-        <button
-          aria-label={translations.upvote}
-          className={getRatingClasses('up')}
-          disabled={this.props.isReadOnly}
-          onClick={this.ratingUp.bind(this)}
-        >
-          <i className="fa fa-chevron-up" aria-hidden="true" />
-          {this.state.positiveRatings}
-          <span className="rating__label">{translations.likes}</span>
-        </button>
-        <button
-          aria-label={translations.downvote}
-          className={getRatingClasses('down')}
-          disabled={this.props.isReadOnly}
-          onClick={this.ratingDown.bind(this)}
-        >
-          <i className="fa fa-chevron-down" aria-hidden="true" />
-          {this.state.negativeRatings}
-          <span className="rating__label">{translations.dislikes}</span>
-        </button>
-      </div>
-    )
-  }
-}
-
-module.exports.RatingBox = RatingBox
+import RatingBox from './RatingBox'
 
 module.exports.renderRatings = function (el) {
   const props = JSON.parse(el.getAttribute('data-attributes'))
diff --git a/adhocracy4/ratings/templatetags/react_ratings.py b/adhocracy4/ratings/templatetags/react_ratings.py
index 08ef8c8a5..047d0a550 100644
--- a/adhocracy4/ratings/templatetags/react_ratings.py
+++ b/adhocracy4/ratings/templatetags/react_ratings.py
@@ -33,7 +33,7 @@ def react_ratings(context, obj):
         user_rating_id = user_rating.pk
     else:
         user_rating_value = None
-        user_rating_id = -1
+        user_rating_id = None
 
     attributes = {
         "contentType": contenttype.pk,
diff --git a/changelog/8529.md b/changelog/8529.md
new file mode 100644
index 000000000..c368c0c74
--- /dev/null
+++ b/changelog/8529.md
@@ -0,0 +1,9 @@
+### Changed
+- Ratings are now functional components
+- RatingBox has been split into RatingBox and RatingButton
+- redirect when logged out now goes back to specific comment if the object was a comment
+
+### Added
+- RatingBox takes an optional render function to customize rendering
+- added `jest-dom` to tests, allowing for nicer matchers like `toBeInTheDocument`
+- added a rating_api file to allow for more modular api calls
diff --git a/docs/react_ratings.md b/docs/react_ratings.md
new file mode 100644
index 000000000..00a0e9085
--- /dev/null
+++ b/docs/react_ratings.md
@@ -0,0 +1,127 @@
+# Ratings Component Documentation
+This document is there to provide a documentation about the slightly reworked 
+ratings component which allows for more customization in other projects
+
+
+## Code List
+
+* **RatingBox**:
+  Main component for displaying Ratings. This is used both in customized rendering
+  as well as default rendering (= the rendering that is used in adhocracy4). It
+  is also responsible for all the event handler logic.
+* **RatingButton**:
+  Button component responsible for displaying accessible rating options and 
+  passing the selected rating to the parent component.
+* **rating_api**:
+  API helper for modifying or creating ratings. Functions return an appropriate
+  state. 
+
+Patterns used:
+- [Render prop](https://react.dev/reference/react/Children#calling-a-render-prop-to-customize-rendering)
+
+## RatingBox
+
+The `RatingBox` component is the main component for ratings. You use this if you
+just want the default a4 `RatingBox` but also if you want to customize it. It is
+also responsible for redirecting if the user is not authenticated.
+
+### Props
+
+* **positiveRatings**: Number of initial positive ratings
+* **negativeRatings**: Number of initial negative ratings
+* **userHasRating**: Boolean if the user initially has already rated
+* **userRating**: Value of the initial user rating (-1, null or 1)
+* **userRatingId**: Id of the user rating object
+* **isReadOnly**: Boolean if the rating box should be read only
+* **contentType**: ID of the content type to be rated
+* **objectId**: ID of the object to be rated
+* **authenticatedAs**: Currently authenticated user or null
+* **isComment**: Boolean if the rating is for a comment
+* **render**: This prop is used to provide custom rendering
+
+### Custom Rendering
+If your project needs something that's different than what a4 provides you with
+styling-wise, you can use the `render` prop to provide your own rendering. To do
+so, you pass a function to the `render` prop. The function will receive the
+following props:
+
+* **ratings**: An object with the following keys, representing the number of rates
+    * **positive**: Number of positive ratings
+    * **negative**: Number of negative ratings
+* **userRatingData**: An object with the following keys, representing the user state
+    * **userHasRating**: Boolean if the user has already rated
+    * **userRating**: Value of the user rating (-1, null or 1)
+    * **userRatingId**: Id of the user rating object or null
+* **isReadOnly**: Boolean if the rating box should be read only
+* **clickHandler**: Add this function to the element that should trigger the rating
+    and pass the rating value to it (-1, 0 or 1)
+
+Here an example if you would want to set the number of ratings in parentheses instead:
+
+```jsx
+<RatingBox {...otherProps} render={({ ratings, userRatingData, isReadOnly, clickHandler }) => (
+  <>
+    <button onClick={() => clickHandler(-1)}>dislike ({ratings.negative})</button>
+    <button onClick={() => clickHandler(-1)}>like ({ratings.positive})</button>
+  </>
+)} />
+```
+
+## RatingButton
+
+The `RatingButton` component is a button component that is used to display
+accessible rating options and pass the selected rating to the provided click handler.
+
+### Props
+
+* **rating**: The value of the rating for this button (-1 or 1)
+* **active**: Whether the user has selected this rating
+* **onClick**: Function to be called when a rating is selected
+* **authenticatedAs**: Currently authenticated user or null
+* **isReadOnly**: Boolean if the rating button should be read only
+* **children**: The content you want to render inside the button
+
+The last two props are only used to redirect to a specific comment if the user
+is not authenticated.
+
+### Styling
+You can style the rating buttons with the following classes:
+
+* **rating-button**: The base class for the rating button
+* **rating-down**: The class for the down rating button
+* **rating-up**: The class for the up rating button
+* **is-selected**: The class for the selected rating button
+* **.rating-button[disabled]**: The selector for a disabled rating button
+  * The button will only be disabled if **both** of the following are true:
+    * The user is not authenticated
+    * The rating is read only
+
+## RatingApi
+
+This is a set of functions made to help communicating with the ratings api. There
+is also a convenience function called createOrModifyRating that allows you to
+create or modify a rating in one go.
+
+### createRating
+A function that creates a rating, given the following parameters:
+
+* **number**: Value of the rating (-1, 0 or 1)
+* **objectId**: ID of the object to be rated
+* **contentType**: ID of the content type to be rated
+
+### modifyRating
+A function that modifies a rating, given the following parameters:
+
+* **number**: Value of the rating (-1, 0 or 1)
+* **id**: ID of the rating to be modified
+* **objectId**: ID of the object to be rated
+* **contentType**: ID of the content type to be rated
+
+### createOrModifyRating
+A convenience function that allows you to create or modify a rating in one go,
+given the following parameters:
+
+* **number**: Value of the rating (-1, 0 or 1)
+* **objectId**: ID of the object to be rated
+* **contentType**: ID of the content type to be rated
+* **id (optional)**: ID of the rating to be modified
diff --git a/jest.config.js b/jest.config.js
index fc57f69fc..e099a3133 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -54,7 +54,7 @@ const config = {
       esModules +
       ').+\\.(js|jsx|mjs|cjs|ts|tsx)$'
   ],
-  setupFiles: ['<rootDir>/setupTests.js'],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
   coverageReporters: ['lcov']
 }
 
diff --git a/setupTests.js b/setupTests.js
index 47fc61ff2..eb5f4b941 100644
--- a/setupTests.js
+++ b/setupTests.js
@@ -1,3 +1,5 @@
+import '@testing-library/jest-dom'
+
 if (typeof window.URL.createObjectURL === 'undefined') {
   window.URL.createObjectURL = () => {}
 }
diff --git a/tests/ratings/test_rating_templatetags.py b/tests/ratings/test_rating_templatetags.py
index c88e622e0..fe3b1d4ac 100644
--- a/tests/ratings/test_rating_templatetags.py
+++ b/tests/ratings/test_rating_templatetags.py
@@ -48,7 +48,7 @@ def test_react_rating_anonymous(rf, question):
         "positiveRatings": 0,
         "style": "ideas",
         "userRating": None,
-        "userRatingId": -1,
+        "userRatingId": None,
     }