Merge branch 'main' into feature/github-pull-request-tracking

Author: arkid15r

backend/.env.example

@@ -11,6 +11,7 @@ DJANGO_DB_PASSWORD=None
 DJANGO_DB_PORT=None
 DJANGO_DB_USER=None
 DJANGO_OPEN_AI_SECRET_KEY=None
+DJANGO_PUBLIC_IP_ADDRESS="127.0.0.1"
 DJANGO_RELEASE_VERSION=None
 DJANGO_SECRET_KEY=None
 DJANGO_SENTRY_DSN=None

backend/apps/common/utils.py

@@ -22,6 +22,9 @@ def get_nest_user_agent():
 
 def get_user_ip_address(request):
     """Return user's IP address."""
+    if settings.ENVIRONMENT == "Local":
+        return settings.PUBLIC_IP_ADDRESS
+
     x_forwarded_for = request.META.get("HTTP_X_FORWARDED_FOR")
     return x_forwarded_for.split(",")[0] if x_forwarded_for else request.META.get("REMOTE_ADDR")
 

backend/settings/local.py

@@ -1,5 +1,7 @@
 """OWASP Nest local configuration."""
 
+from configurations import values
+
 from settings.base import Base
 
 
@@ -13,5 +15,6 @@ class Local(Base):
     )
     DEBUG = True
     LOGGING = {}
+    PUBLIC_IP_ADDRESS = values.Value()
     SLACK_COMMANDS_ENABLED = True
     SLACK_EVENTS_ENABLED = True

backend/tests/common/utils_test.py

@@ -1,11 +1,12 @@
 from datetime import datetime, timezone
-from unittest.mock import patch
+from unittest.mock import MagicMock, patch
 
 import pytest
 from django.conf import settings
 
 from apps.common.utils import (
     get_absolute_url,
+    get_user_ip_address,
     join_values,
     natural_date,
     natural_number,
@@ -57,3 +58,24 @@ def test_natural_date(self, mock_naturaltime, value, expected_calls):
     )
     def test_natural_number(self, value, unit, expected):
         assert natural_number(value, unit=unit) == expected
+
+    @pytest.mark.parametrize(
+        ("mock_request", "expected"),
+        [
+            ({"HTTP_X_FORWARDED_FOR": "8.8.8.8"}, "8.8.8.8"),
+            ({"REMOTE_ADDR": "192.168.1.2"}, "192.168.1.2"),
+        ],
+    )
+    def test_get_user_ip_address(self, mock_request, expected):
+        request = MagicMock()
+        request.META = mock_request
+        assert get_user_ip_address(request) == expected
+
+    def test_get_user_ip_address_local(self, mocker):
+        request = MagicMock()
+        request.META = {}
+
+        mocker.patch.object(settings, "ENVIRONMENT", "Local")
+        mocker.patch.dict(settings._wrapped.__dict__, {"PUBLIC_IP_ADDRESS": "1.1.1.1"})
+
+        assert get_user_ip_address(request) == "1.1.1.1"

frontend/__tests__/unit/components/ScrollToTop.test.tsx

@@ -0,0 +1,50 @@
+import { render, fireEvent, waitFor } from '@testing-library/react'
+import ScrollToTop from 'components/ScrollToTop'
+
+describe('ScrollToTop component test', () => {
+  beforeEach(() => {
+    window.scrollTo = jest.fn()
+    Object.defineProperty(window, 'scrollY', { value: 0, writable: true })
+    Object.defineProperty(window, 'innerHeight', { value: 1000, writable: true })
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('Initially, the button should be hidden', () => {
+    const { getByLabelText } = render(<ScrollToTop />)
+    const button = getByLabelText(/scroll to top/i)
+
+    expect(button).toHaveClass('opacity-0')
+    expect(button).toHaveClass('pointer-events-none')
+  })
+
+  test('The button should become visible after scrolling past the threshold', async () => {
+    const { getByLabelText } = render(<ScrollToTop />)
+    const button = getByLabelText(/scroll to top/i)
+
+    Object.defineProperty(window, 'scrollY', { value: 400, writable: true })
+    window.dispatchEvent(new Event('scroll'))
+
+    await waitFor(() => {
+      expect(button).toHaveClass('opacity-100')
+      expect(button).toHaveClass('pointer-events-auto')
+    })
+  })
+
+  test('Clicking the button should call window.scrollTo with smooth behavior', async () => {
+    const { getByLabelText } = render(<ScrollToTop />)
+    const button = getByLabelText(/scroll to top/i)
+
+    Object.defineProperty(window, 'scrollY', { value: 400, writable: true })
+    window.dispatchEvent(new Event('scroll'))
+
+    await waitFor(() => {
+      expect(button).toHaveClass('opacity-100')
+    })
+
+    fireEvent.click(button)
+    expect(window.scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' })
+  })
+})

frontend/src/App.tsx

@@ -18,6 +18,7 @@ import { ErrorDisplay, ERROR_CONFIGS } from 'wrappers/ErrorWrapper'
 
 import Footer from 'components/Footer'
 import Header from 'components/Header'
+import ScrollToTop from 'components/ScrollToTop'
 import { Toaster } from 'components/ui/toaster'
 
 function App() {
@@ -50,6 +51,7 @@ function App() {
         <Route path="*" element={<ErrorDisplay {...ERROR_CONFIGS['404']} />} />
       </Routes>
       <Footer />
+      <ScrollToTop />
     </main>
   )
 }

frontend/src/components/ScrollToTop.tsx

@@ -0,0 +1,41 @@
+import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useState, useEffect, useCallback } from 'react'
+
+export default function ScrollToTop() {
+  const [isVisible, setIsVisible] = useState(false)
+
+  const handleScroll = useCallback(() => {
+    const scrollThreshold = window.innerHeight * 0.3
+    setIsVisible(window.scrollY > scrollThreshold)
+  }, [])
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  useEffect(() => {
+    let scrollTimeout: ReturnType<typeof setTimeout> | null = null
+    const throttledScroll = () => {
+      if (!scrollTimeout) {
+        scrollTimeout = setTimeout(() => {
+          handleScroll()
+          scrollTimeout = null
+        }, 100)
+      }
+    }
+
+    window.addEventListener('scroll', throttledScroll)
+    return () => window.removeEventListener('scroll', throttledScroll)
+  }, [handleScroll])
+
+  return (
+    <button
+      onClick={scrollToTop}
+      aria-label="Scroll to top"
+      className={`duration-400 fixed bottom-4 right-4 z-50 flex h-11 w-11 items-center justify-center rounded-full bg-owasp-blue bg-opacity-70 text-white shadow-lg transition-all hover:scale-105 hover:bg-opacity-100 active:scale-100 dark:bg-opacity-30 dark:text-slate-300 hover:dark:bg-opacity-50 ${isVisible ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'} `}
+    >
+      <FontAwesomeIcon icon={faArrowUp} className="text-xl" />
+    </button>
+  )
+}

frontend/src/pages/Chapters.tsx

@@ -32,8 +32,8 @@ const ChaptersPage = () => {
       const searchParams = {
         indexName: 'chapters',
         query: '',
-        currentPage: 1,
-        hitsPerPage: 1000,
+        currentPage,
+        hitsPerPage: currentPage === 1 ? 1000 : 25,
       }
       const data: AlgoliaResponseType<ChapterTypeAlgolia> = await fetchAlgoliaData(
         searchParams.indexName,
@@ -44,7 +44,7 @@ const ChaptersPage = () => {
       setGeoLocData(data.hits)
     }
     fetchData()
-  }, [])
+  }, [currentPage])
 
   const navigate = useNavigate()
   const renderChapterCard = (chapter: ChapterTypeAlgolia) => {