apps/burgeting: add anchor link to back url and use useEffect to go t…

…o anchor
liqd · Dec 29, 2022 · 689391d · 689391d
1 parent 8a10006
commit 689391d
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 11 deletions.
diff --git a/meinberlin/apps/budgeting/assets/BudgetingProposalList.jsx b/meinberlin/apps/budgeting/assets/BudgetingProposalList.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import django from 'django'
 import { BudgetingProposalListItem } from './BudgetingProposalListItem'
 import { Pagination } from './Pagination'
@@ -16,6 +16,7 @@ export const BudgetingProposalList = (props) => {
     return django.interpolate(countText, [votes])
   }
   const noResults = django.gettext('Nothing to show')
+  const scrolledRef = useRef(false)
 
   const fetchProposals = () => {
     const url = props.proposals_api_url + location.search
@@ -40,9 +41,19 @@ export const BudgetingProposalList = (props) => {
       .catch(error => console.log(error))
   }
 
-  useEffect(() => {
-    fetchProposals()
-  }, [location.search])
+  const scrollToProposal = () => {
+    if (location.hash && !scrolledRef.current) {
+      const id = location.hash.replace('#', '')
+      const element = document.getElementById(id)
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' })
+        scrolledRef.current = true
+      }
+    }
+  }
+
+  useEffect(fetchProposals, [location.search])
+  useEffect(scrollToProposal)
 
   const renderList = (data) => {
     return (

diff --git a/meinberlin/apps/budgeting/assets/BudgetingProposalListItem.jsx b/meinberlin/apps/budgeting/assets/BudgetingProposalListItem.jsx
@@ -22,7 +22,7 @@ export const BudgetingProposalListItem = (props) => {
     )
 
   return (
-    <li className="list-item">
+    <li id={'proposal_' + proposal.pk} className="list-item">
       <ListItemStats
         permissions={permissions}
         positiveCount={proposal.positive_rating_count}

diff --git a/meinberlin/apps/budgeting/views.py b/meinberlin/apps/budgeting/views.py
@@ -114,10 +114,11 @@ def get_back(self):
         """
         if 'Referer' in self.request.headers:
             referer = self.request.headers['Referer']
-            match = resolve(urlparse(referer)[2])
+            parsed_url = urlparse(referer)
+            match = resolve(parsed_url.path)
             if match.url_name == 'project-detail' or \
                     match.url_name == 'module-detail':
-                return referer
+                return referer + '#proposal_{}'.format(self.object.id)
             return None
         return None
 

diff --git a/meinberlin/assets/scss/components/_list_item.scss b/meinberlin/assets/scss/components/_list_item.scss
@@ -6,6 +6,7 @@
     background-color: $body-bg;
     margin-bottom: $em-spacer;
     page-break-inside: avoid;
+    scroll-margin-top: 2 * $spacer;
 }
 
 .list-item--squashed {

diff --git a/tests/budgeting/test_views_integration.py b/tests/budgeting/test_views_integration.py
@@ -129,14 +129,18 @@ def test_detail_view_back_link(client, phase_factory, proposal_factory):
     filtered_module_referer = module_referer + filter_string
     with freeze_phase(phase):
         response = client.get(url, HTTP_referer=project_referer)
-        assert response.context['back'] == project_referer
+        assert (response.context['back'] ==
+                '{}#proposal_{}'.format(project_referer, item.id))
         response = client.get(url, HTTP_referer=module_referer)
-        assert response.context['back'] == module_referer
+        assert (response.context['back'] ==
+                '{}#proposal_{}'.format(module_referer, item.id))
 
         response = client.get(url, HTTP_referer=filtered_project_referer)
-        assert response.context['back'] == filtered_project_referer
+        assert (response.context['back'] ==
+                '{}#proposal_{}'.format(filtered_project_referer, item.id))
         response = client.get(url, HTTP_referer=filtered_module_referer)
-        assert response.context['back'] == filtered_module_referer
+        assert (response.context['back'] ==
+                '{}#proposal_{}'.format(filtered_module_referer, item.id))
 
         response = client.get(url, HTTP_referer='/')
         assert not response.context['back']