@conorheffron/ironoc-frontend 9.1.5 → 9.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conorheffron/ironoc-frontend",
-  "version": "9.1.5",
+  "version": "9.1.6",
   "private": false,
   "license": "GPL-3.0-or-later",
   "dependencies": {

package/src/App.test.js

@@ -9,6 +9,11 @@ import AppNavBar from './AppNavbar';
 import About from './components/About';
 import Footer from './Footer';
 import { Router, useLocation, MemoryRouter } from 'react-router';
+import { trackClickOut } from './utils/activityTracker';
+
+jest.mock('./utils/activityTracker', () => ({
+  trackClickOut: jest.fn(),
+}));
 
 describe('AppNavBar', () => {
   test('renders AppNavBar component correctly', () => {
@@ -79,6 +84,13 @@ describe('AppNavBar', () => {
     fireEvent.click(toggler);
     await waitFor(() => expect(collapse).not.toHaveClass('show'));
   });
+
+  test('tracks click-outs for GitHub project links', () => {
+    render(<AppNavBar />);
+    const githubProjectLink = screen.getByText('iRonoc-DB');
+    fireEvent.click(githubProjectLink);
+    expect(trackClickOut).toHaveBeenCalledWith('github', 'https://github.com/conorheffron/ironoc-db');
+  });
 });
 
 describe('Footer Component', () => {

package/src/AppNavbar.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import "bootstrap/dist/css/bootstrap.min.css";
 import {Navbar, NavbarText, Container, Collapse, NavbarBrand, NavbarToggler, Nav, UncontrolledDropdown, DropdownToggle, DropdownItem, DropdownMenu } from "reactstrap";
 import logo from './img/robot-logo.png';
+import { trackClickOut } from './utils/activityTracker';
 import "@fontsource/montserrat/700.css";
 import "@fontsource/open-sans/400-italic.css";
 
@@ -34,6 +35,10 @@ class AppNavBar extends Component {
         this.setState({ isOpen: !this.state.isOpen });
     };
 
+    handleGitHubClick = (target) => {
+        trackClickOut('github', target);
+    };
+
     render() {
         const { color, light, dark, fixed, container, expand, className, isOpen } = this.state;
 
@@ -76,12 +81,12 @@ class AppNavBar extends Component {
                                 <UncontrolledDropdown inNavbar nav>
                                     <DropdownToggle caret nav>GitHub Projects</DropdownToggle>
                                     <DropdownMenu end>
-                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc">iRonoc</DropdownItem>
+                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc" onClick={() => this.handleGitHubClick('https://github.com/conorheffron/ironoc')}>iRonoc</DropdownItem>
                                         <DropdownItem divider />
-                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc-db">iRonoc-DB</DropdownItem>
-                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/booking-sys">Booking System Sample</DropdownItem>
-                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/nba-stats">NBA Stats Analysis</DropdownItem>
-                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc-pytest">PyTest GitHub Client Package</DropdownItem>
+                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc-db" onClick={() => this.handleGitHubClick('https://github.com/conorheffron/ironoc-db')}>iRonoc-DB</DropdownItem>
+                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/booking-sys" onClick={() => this.handleGitHubClick('https://github.com/conorheffron/booking-sys')}>Booking System Sample</DropdownItem>
+                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/nba-stats" onClick={() => this.handleGitHubClick('https://github.com/conorheffron/nba-stats')}>NBA Stats Analysis</DropdownItem>
+                                        <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc-pytest" onClick={() => this.handleGitHubClick('https://github.com/conorheffron/ironoc-pytest')}>PyTest GitHub Client Package</DropdownItem>
                                     </DropdownMenu>
                                 </UncontrolledDropdown>
                                 <UncontrolledDropdown inNavbar nav>

package/src/components/Donate.js

@@ -8,6 +8,7 @@ import AppNavbar from '../AppNavbar';
 import red from '../img/red-bg.png';
 import { Container } from 'reactstrap';
 import LoadingSpinner from '.././LoadingSpinner';
+import { trackClickOut } from '../utils/activityTracker';
 
 // Define the GraphQL query to fetch donate items
 export const GET_DONATE_ITEMS = gql`
@@ -78,6 +79,58 @@ class Donate extends Component {
             );
         }
 
+    return (
+        <div className="App">
+            <AppNavbar />
+            <Container>
+                <Carousel className="App-header">
+                    {donateItems.map((item, index) => (
+                        <Carousel.Item key={index} interval={500}>
+                            <img className="d-block w-100" src={red} alt={item.alt} />
+
+                            <Carousel.Caption>
+                                <h1 className="mb-3">
+                                    <span style={{ textDecoration: 'underline' }}>{item.name}</span>
+                                </h1>
+
+                                <p>
+                                    <b>Contact & Help by Phone: </b>
+                                    <span dangerouslySetInnerHTML={{ __html: item.phone }} />
+                                </p>
+
+                                <p>
+                                    <b>Home page: </b>
+                                    <a
+                                        href={item.link}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        onClick={() => trackClickOut('charity', item.link)}
+                                    >
+                                        {item.link}
+                                    </a>
+                                </p>
+
+                                <p className="overview-text">
+                                    <b>Overview:</b> Founded in {item.founded}, {item.overview}
+                                </p>
+
+                                <p>
+                                    <a
+                                        href={item.donate}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        onClick={() => trackClickOut('charity', item.donate)}
+                                    >
+                                        Donate here
+                                    </a>
+                                </p>
+                            </Carousel.Caption>
+                        </Carousel.Item>
+                    ))}
+                </Carousel>
+            </Container>
+        </div>
+    );
         return (
             <div className="App">
                 <AppNavbar />

package/src/components/RepoIssues.js

@@ -6,7 +6,6 @@ import { useParams, useNavigate } from 'react-router';
 import {
   MaterialReactTable,
   useMaterialReactTable,
-  type MRT_ColumnDef,
 } from 'material-react-table';
 import { darken, lighten, useTheme } from '@mui/material';
 
@@ -126,7 +125,13 @@ const RepoIssues = () => {
     data: repoIssueList,
     enableFacetedValues: true,
     enableStickyHeader: true,
-    initialState: { showColumnFilters: true },
+    initialState: {
+      showColumnFilters: true,
+      columnVisibility: {
+        state: false,
+        body: false,
+      },
+    },
     muiTablePaperProps: {
       elevation: 0,
       sx: {

package/src/components/__tests__/Donate.test.js

@@ -1,8 +1,13 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import Donate, { GET_DONATE_ITEMS } from '../Donate';
 import '@testing-library/jest-dom';
+import { trackClickOut } from '../../utils/activityTracker';
+
+jest.mock('../../utils/activityTracker', () => ({
+    trackClickOut: jest.fn(),
+}));
 
 // Mock data for testing
 const mockDonateItems = [
@@ -94,4 +99,27 @@ describe('Donate Component', () => {
             });
         });
     });
+
+    it('tracks charity click-outs for donate and homepage links', async () => {
+        render(
+            <MockedProvider mocks={mocks}>
+                <Donate />
+            </MockedProvider>
+        );
+
+        await waitFor(() => {
+            expect(screen.getByText('Item 1')).toBeInTheDocument();
+        });
+
+        const donateLink = document.querySelector('a[href="https://example.com/donate1"]');
+        const homepageLink = document.querySelector('a[href="https://example.com/home1"]');
+        expect(donateLink).toBeInTheDocument();
+        expect(homepageLink).toBeInTheDocument();
+
+        fireEvent.click(donateLink);
+        fireEvent.click(homepageLink);
+
+        expect(trackClickOut).toHaveBeenCalledWith('charity', 'https://example.com/donate1');
+        expect(trackClickOut).toHaveBeenCalledWith('charity', 'https://example.com/home1');
+    });
 });

package/src/components/__tests__/RepoIssues.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import RepoIssues from '../RepoIssues';
+import { useMaterialReactTable } from 'material-react-table';
 
 // Mock react-router
 jest.mock('react-router', () => ({
@@ -10,7 +11,11 @@ jest.mock('react-router', () => ({
 
 // Mock react-bootstrap
 jest.mock('react-bootstrap', () => ({
-  Container: ({ children, ...props }) => <div data-testid="container" {...props}>{children}</div>,
+  Container: ({ children, fluid, ...props }) => (
+    <div data-testid="container" data-fluid={fluid ? 'true' : undefined} {...props}>
+      {children}
+    </div>
+  ),
   InputGroup: ({ children, ...props }) => <div data-testid="input-group" {...props}>{children}</div>,
   Form: {
     Control: ({ ...props }) => <input data-testid="form-control" {...props} />,
@@ -50,14 +55,23 @@ import { useParams, useNavigate } from 'react-router';
 
 describe('RepoIssues', () => {
   const mockNavigate = jest.fn();
+  const mockIssuesResponse = [];
 
   beforeEach(() => {
     jest.clearAllMocks();
     useNavigate.mockReturnValue(mockNavigate);
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve(mockIssuesResponse),
+      })
+    );
+    window.fetch = global.fetch;
   });
 
   it('shows loading spinner and navbar initially', () => {
     useParams.mockReturnValue({ id: 'user', repo: 'repo' });
+    global.fetch = jest.fn(() => new Promise(() => {}));
+    window.fetch = global.fetch;
     render(<RepoIssues />);
     expect(screen.getByTestId('navbar')).toBeInTheDocument();
     expect(screen.getByTestId('spinner')).toBeInTheDocument();
@@ -78,6 +92,7 @@ describe('RepoIssues', () => {
         ]),
       })
     );
+    window.fetch = global.fetch;
     render(<RepoIssues />);
     await waitFor(() =>
       expect(screen.queryByTestId('spinner')).not.toBeInTheDocument()
@@ -85,9 +100,30 @@ describe('RepoIssues', () => {
     expect(screen.getByTestId('mrt-table')).toBeInTheDocument();
   });
 
+  it('hides state and description columns by default', async () => {
+    useParams.mockReturnValue({ id: 'user', repo: 'repo' });
+    render(<RepoIssues />);
+    await waitFor(() =>
+      expect(screen.queryByTestId('spinner')).not.toBeInTheDocument()
+    );
+
+    expect(useMaterialReactTable).toHaveBeenCalledWith(
+      expect.objectContaining({
+        initialState: expect.objectContaining({
+          showColumnFilters: true,
+          columnVisibility: {
+            state: false,
+            body: false,
+          },
+        }),
+      })
+    );
+  });
+
   it('navigates on form submit', async () => {
     useParams.mockReturnValue({ id: 'user', repo: 'repo' });
     global.fetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve([]) }));
+    window.fetch = global.fetch;
     render(<RepoIssues />);
     await waitFor(() => expect(screen.queryByTestId('spinner')).not.toBeInTheDocument());
     const input = screen.getByTestId('form-control');

package/src/utils/activityTracker.js

@@ -0,0 +1,24 @@
+export const trackClickOut = (category, target) => {
+  if (!category || !target) {
+    return;
+  }
+
+  const payload = JSON.stringify({ category, target });
+
+  try {
+    if (typeof navigator !== 'undefined' && navigator.sendBeacon) {
+      const blob = new Blob([payload], { type: 'application/json' });
+      navigator.sendBeacon('/api/activity/click-out', blob);
+      return;
+    }
+
+    fetch('/api/activity/click-out', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: payload,
+      keepalive: true
+    }).catch(() => null);
+  } catch {
+    // no-op to avoid blocking navigation
+  }
+};