@conorheffron/ironoc-frontend 7.3.8 → 7.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conorheffron/ironoc-frontend",
-  "version": "7.3.8",
+  "version": "7.3.9",
   "private": false,
   "dependencies": {
     "@apollo/client": "^3.13.8",
@@ -10,6 +10,7 @@
     "axios": "^1.8.2",
     "bootstrap": "5.1",
     "history": "^5.3.0",
+    "material-react-table": "^3.2.1",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.5",
     "react-bootstrap-carousel": "^4.1.1",

package/src/App.css

@@ -98,6 +98,10 @@ p a {
     color: yellow;
 }
 
+footer p a {
+    color: blue;
+}
+
 .carousel-caption h3, h5 {
     background-color:yellow;
     width: 50%;

package/src/App.test.js

@@ -96,7 +96,8 @@ describe('Footer Component', () => {
   test('fetches and displays the version', async () => {
     render(<Footer />);
     await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
-    await waitFor(() => expect(screen.getByText('© 2025 by Conor Heffron | 2.2.0')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('© 2025 by Conor Heffron |')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('2.2.0')).toBeInTheDocument());
   });
 
   test('handles fetch error', async () => {

package/src/Footer.js

@@ -29,7 +29,9 @@ class Footer extends Component {
         return (
             <div className="App">
                 <Container>
-                    <footer><p className="ft">© 2025 by Conor Heffron | {version}</p></footer>
+                    <footer><p className="ft">
+                    © 2025 by Conor Heffron | <a href="https://github.com/conorheffron/ironoc"
+                    target="_blank" rel="noreferrer">{version}</a></p></footer>
                 </Container>
             </div>
           );

package/src/components/CoffeeCarousel.js

@@ -2,13 +2,26 @@ import React, { Component } from 'react';
 import { Carousel } from 'react-bootstrap';
 import '.././App.css';
 
+// Helper function to validate URLs
+function isValidUrl(url) {
+    try {
+        const parsed = new URL(url);
+        return parsed.protocol === "http:" || parsed.protocol === "https:";
+    } catch (e) {
+        return false;
+    }
+}
+
 class CoffeeCarousel extends Component {
     render() {
         const { items } = this.props;
 
+        // Only include items with a valid http/https URL
+        const validItems = items.filter(item => isValidUrl(item.image));
+
         return (
             <Carousel className="App-header">
-                {items.map((item, index) => (
+                {validItems.map((item, index) => (
                     <Carousel.Item key={index}>
                         <img src={item.image} alt={item.title} />
                         <Carousel.Caption>

package/src/components/RepoIssues.js

@@ -1,124 +1,177 @@
-import React, { Component } from 'react';
-import { Button, Container, InputGroup, Table } from 'reactstrap';
-import '.././App.css';
-import Form from 'react-bootstrap/Form';
-import AppNavbar from '.././AppNavbar';
-import LoadingSpinner from '.././LoadingSpinner';
+import React, { useState, useEffect, useMemo } from 'react';
+import { Container, InputGroup, Form, Button } from 'react-bootstrap';
+import AppNavbar from '../AppNavbar';
+import LoadingSpinner from '../LoadingSpinner';
 import { useParams, useNavigate } from 'react-router';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { darken, lighten, useTheme } from '@mui/material';
 
-// Helper function to inject `params` and `navigate` into class-based components
-function withRouter(Component) {
-    return (props) => {
-        const params = useParams();
-        const navigate = useNavigate();
-        return <Component {...props} params={params} navigate={navigate} />;
-    };
-}
+const RepoIssues = () => {
+    const params = useParams();
+    const navigate = useNavigate();
+    const { id = '', repo = '' } = params;
 
-class RepoIssues extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            repoIssueList: [],
-            isLoading: true,
-            value: ''
-        };
+    const [repoIssueList, setRepoIssueList] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [value, setValue] = useState('');
 
-        this.handleChange = this.handleChange.bind(this);
-        this.onSubmit = this.onSubmit.bind(this);
-    }
+    useEffect(() => {
+        const fetchIssues = async () => {
+            if (id && repo) {
+                const response = await fetch(`/api/get-repo-issue/${id}/${repo}/`);
+                const body = await response.json();
+                setRepoIssueList(body);
+            }
+            setIsLoading(false);
+        };
+        fetchIssues();
+    }, [id, repo]);
 
-    handleChange(event) {
-        this.setState({ value: event.target.value });
-    }
+    const handleChange = event => setValue(event.target.value);
 
-    onSubmit(event) {
+    const onSubmit = event => {
         event.preventDefault();
-        const { value } = this.state;
-        const { id } = this.props.params;
-        this.props.navigate(`/issues/${id}/${value}`, {
+        navigate(`/issues/${id}/${value}`, {
             replace: true,
             state: {
                 id: id,
                 repo: value
             }
         });
-        this.props.navigate(0)
-    }
+        navigate(0);
+    };
 
-    async componentDidMount() {
-        const { id, repo } = this.props.params;
-        if (id && repo) {
-            const response = await fetch(`/api/get-repo-issue/${id}/${repo}/`);
-            const body = await response.json();
-            this.setState({ repoIssueList: body, isLoading: false });
-        } else {
-            this.setState({ isLoading: false });
-        }
-    }
+    const projectLink = `/projects/${id}/`;
 
-    render() {
-        const { repoIssueList = [], isLoading = true, value = '' } = this.state;
-        const { id = '', repo = '' } = this.props.params;
+    const issueTags = ['enhancement', 'bug', 'java', 'javascript', 'release', 'ui', 'frontend', 'infra', 'dependencies', 'python-code']
 
-        if (isLoading) {
-            return (
-                <div className="App">
-                    <AppNavbar />
-                    <Container>
-                        <br /><br /><br />
-                        <LoadingSpinner />
-                    </Container>
-                </div>
-            );
-        }
+    // MaterialReactTable columns
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'number',
+            header: 'Issue No.',
+            Cell: ({ cell }) => {
+                const issueLink = `https://github.com/${id}/${repo}/issues/${cell.getValue()}/`;
+                return (
+                    <a href={issueLink} target="_blank" rel="noreferrer">
+                        <b><i>{cell.getValue()}</i></b>
+                    </a>
+                );
+            },
+            size: 40,
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+            filterVariant: 'multi-select',
+            size: 40,
+        },
+        {
+            accessorKey: 'labels',
+            header: 'Labels',
+            filterVariant: 'multi-select',
+            filterSelectOptions: issueTags,
+            Cell: ({ cell }) => <b>{cell.getValue().join(', ')}</b>,
+            size: 100,
+        },
+        {
+            accessorKey: 'title',
+            header: 'Title',
+            size: 150,
+            Cell: ({ cell }) => <b>{cell.getValue()}</b>,
+        },
+        {
+            accessorKey: 'body',
+            header: 'Description',
+            size: 200,
+        },
+    ], [id, repo]);
 
-        const repoList = repoIssueList.map(issue => {
-            const issueLink = `https://github.com/${id}/${repo}/issues/${issue.number}/`;
-            return (
-                <tr key={issue.number}>
-                    <td className="table-info">
-                        <a href={issueLink} target="_blank" rel="noreferrer"><b><i>{issue.number}</i></b></a>
-                    </td>
-                    <td><b>{issue.title}</b></td>
-                    <td>{issue.body}</td>
-                </tr>
-            );
-        });
+    const theme = useTheme();
+
+    //light or dark green
+    const baseBackgroundColor =
+    theme.palette.mode === 'dark'
+      ? 'rgba(3, 44, 43, 1)'
+      : 'rgba(244, 255, 233, 1)';
 
-        const projectLink = `/projects/${id}/`;
+    const table = useMaterialReactTable({
+        columns,
+        data: repoIssueList,
+        enableFacetedValues: true,
+        enableStickyHeader: true,
+        initialState: { showColumnFilters: true },
+        muiTablePaperProps: {
+            elevation: 0,
+            sx: {
+              borderRadius: '0',
+            },
+          },
+          muiTableBodyProps: {
+            sx: (theme) => ({
+              '& tr:nth-of-type(odd):not([data-selected="true"]):not([data-pinned="true"]) > td':
+                {
+                  backgroundColor: darken(baseBackgroundColor, 0.1),
+                },
+              '& tr:nth-of-type(odd):not([data-selected="true"]):not([data-pinned="true"]):hover > td':
+                {
+                  backgroundColor: darken(baseBackgroundColor, 0.2),
+                },
+              '& tr:nth-of-type(even):not([data-selected="true"]):not([data-pinned="true"]) > td':
+                {
+                  backgroundColor: lighten(baseBackgroundColor, 0.1),
+                },
+              '& tr:nth-of-type(even):not([data-selected="true"]):not([data-pinned="true"]):hover > td':
+                {
+                  backgroundColor: darken(baseBackgroundColor, 0.2),
+                },
+            }),
+          },
+          mrtTheme: (theme) => ({
+            baseBackgroundColor: baseBackgroundColor,
+            draggingBorderColor: theme.palette.secondary.main,
+          }),
+    });
 
+    if (isLoading) {
         return (
-            <div>
-                <AppNavbar /><br /><br />
-                <Container fluid>
-                    <br />
-                    <InputGroup className="mb-3">
-                        <Form.Control
-                            placeholder="Enter Project Name... Example: ironoc-db"
-                            aria-label="Enter Project Name..."
-                            aria-describedby="basic-addon2"
-                            type="text"
-                            value={value}
-                            onChange={this.handleChange}
-                        />
-                        <Button color="primary" variant="outline-secondary" id="button-addon2" onClick={this.onSubmit}>Search Issues</Button>
-                    </InputGroup>
-                    <h3 className="table-headers">Issues for project <b>{repo}</b> and account <a href={projectLink}><b>{id}</b></a></h3>
-                    <Table striped hover bordered>
-                        <thead>
-                            <tr className="table-secondary">
-                                <th width="3%">Issue No.</th>
-                                <th width="27%">Title</th>
-                                <th width="70%">Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>{repoList}</tbody>
-                    </Table>
+            <div className="App">
+                <AppNavbar />
+                <Container>
+                    <br /><br /><br />
+                    <LoadingSpinner />
                 </Container>
             </div>
         );
     }
-}
 
-export default withRouter(RepoIssues);
+    return (
+        <div>
+            <AppNavbar /><br /><br />
+            <Container fluid>
+                <br />
+                <InputGroup className="mb-3">
+                    <Form.Control
+                        placeholder="Enter Project Name... Example: ironoc-db"
+                        aria-label="Enter Project Name..."
+                        aria-describedby="basic-addon2"
+                        type="text"
+                        value={value}
+                        onChange={handleChange}
+                    />
+                    <Button color="primary" variant="outline-secondary" id="button-addon2" onClick={onSubmit}>Search Issues</Button>
+                </InputGroup>
+                <h3 className="table-headers">
+                    Issues for project <b>{repo}</b> and account <a href={projectLink}><b>{id}</b></a>
+                </h3>
+                <MaterialReactTable table={table} />
+            </Container>
+        </div>
+    );
+};
+
+export default RepoIssues;

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

@@ -40,12 +40,12 @@ describe('CoffeeCarousel', () => {
   test('does not render ingredients if item.ingredients is null or an empty array', () => {
       const mockItems = [
           {
-              image: 'image1.jpg',
+              image: 'http://image1.jpg',
               title: 'Coffee with no ingredients',
               ingredients: [],
           },
           {
-              image: 'image2.jpg',
+              image: 'https://image2.jpg',
               title: 'Coffee with null ingredients',
               ingredients: null,
           },

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

@@ -1,121 +1,106 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { MemoryRouter } from 'react-router';
 import RepoIssues from '../RepoIssues';
 
+// Mock react-router
 jest.mock('react-router', () => ({
-    ...jest.requireActual('react-router'),
-    useParams: jest.fn(),
-    useNavigate: jest.fn(),
+  useParams: jest.fn(),
+  useNavigate: jest.fn(),
 }));
 
-describe('RepoIssues Component', () => {
-    const mockNavigate = jest.fn();
-    const mockParams = { id: 'testUser', repo: 'testRepo' };
-
-    beforeEach(() => {
-        require('react-router').useNavigate.mockReturnValue(mockNavigate);
-        require('react-router').useParams.mockReturnValue(mockParams);
-
-        global.fetch = jest.fn(() =>
-            Promise.resolve({
-                json: () =>
-                    Promise.resolve([
-                        {
-                            number: 1,
-                            title: 'Test Issue Title',
-                            body: 'Test issue body description',
-                        },
-                    ]),
-            })
-        );
-    });
-
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    test('renders loading spinner initially', () => {
-        render(
-            <MemoryRouter>
-                <RepoIssues />
-            </MemoryRouter>
-        );
-
-        expect(screen.getByText(/loading/i)).toBeInTheDocument();
-    });
-
-    test('fetches and displays repo issues', async () => {
-        render(
-            <MemoryRouter>
-                <RepoIssues />
-            </MemoryRouter>
-        );
-
-        await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
-
-        expect(screen.getByText(/Test Issue Title/i)).toBeInTheDocument();
-        expect(screen.getByText(/Test issue body description/i)).toBeInTheDocument();
-        expect(screen.getByText(/1/i)).toBeInTheDocument();
-    });
-
-    test('handles input change', async () => {
-        render(
-            <MemoryRouter>
-                <RepoIssues />
-            </MemoryRouter>
-        );
-
-        await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
-
-        const input = screen.getByPlaceholderText(/Enter Project Name/i);
-        fireEvent.change(input, { target: { value: 'newRepo' } });
-
-        expect(input.value).toBe('newRepo');
-    });
-
-    test('navigates on form submission', async () => {
-        render(
-            <MemoryRouter>
-                <RepoIssues />
-            </MemoryRouter>
-        );
-
-        await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
-
-        const input = screen.getByPlaceholderText(/Enter Project Name/i);
-        const button = screen.getByText(/Search Issues/i);
-
-        fireEvent.change(input, { target: { value: 'newRepo' } });
-        fireEvent.click(button);
-
-        expect(mockNavigate).toHaveBeenCalledWith('/issues/testUser/newRepo', {
-            replace: true,
-            state: {
-                id: 'testUser',
-                repo: 'newRepo',
-            },
-        });
-    });
-
-    test('displays table headers correctly', async () => {
-        render(
-            <MemoryRouter>
-                <RepoIssues />
-            </MemoryRouter>
-        );
+// Mock react-bootstrap
+jest.mock('react-bootstrap', () => ({
+  Container: ({ children, ...props }) => <div data-testid="container" {...props}>{children}</div>,
+  InputGroup: ({ children, ...props }) => <div data-testid="input-group" {...props}>{children}</div>,
+  Form: {
+    Control: ({ ...props }) => <input data-testid="form-control" {...props} />,
+  },
+  Button: ({ children, ...props }) => <button {...props}>{children}</button>,
+}));
 
-        // Wait for the loading spinner to disappear
-        await waitFor(() => expect(screen.queryByText(/loading/i)).not.toBeInTheDocument());
+// Mock AppNavbar and LoadingSpinner
+jest.mock('../../AppNavbar', () => () => <div data-testid="navbar">Navbar</div>);
+jest.mock('../../LoadingSpinner', () => () => <div data-testid="spinner">Loading...</div>);
+
+// Mock MaterialReactTable and useMaterialReactTable
+jest.mock('material-react-table', () => ({
+  MaterialReactTable: ({ table }) => (
+    <div data-testid="mrt-table">
+      {table && table.data && table.data.map((issue, idx) => (
+        <div key={idx} data-testid="mrt-row">{issue.title}</div>
+      ))}
+    </div>
+  ),
+  useMaterialReactTable: jest.fn((opts) => opts),
+}));
 
-        // Use getByRole for specific headers
-        const issueNoHeader = screen.getByRole('columnheader', { name: /Issue No./i });
-        const titleHeader = screen.getByRole('columnheader', { name: /Title/i });
-        const descriptionHeader = screen.getByRole('columnheader', { name: /Description/i });
+// Mock @mui/material theme functions
+jest.mock('@mui/material', () => ({
+  useTheme: () => ({
+    palette: {
+      mode: 'light',
+      secondary: { main: '#00ff00' }
+    }
+  }),
+  darken: (color, amount) => color + '-darken' + amount,
+  lighten: (color, amount) => color + '-lighten' + amount,
+}));
 
-        // Assert that headers are in the document
-        expect(issueNoHeader).toBeInTheDocument();
-        expect(titleHeader).toBeInTheDocument();
-        expect(descriptionHeader).toBeInTheDocument();
+import { useParams, useNavigate } from 'react-router';
+
+describe('RepoIssues', () => {
+  const mockNavigate = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useNavigate.mockReturnValue(mockNavigate);
+  });
+
+  it('shows loading spinner and navbar initially', () => {
+    useParams.mockReturnValue({ id: 'user', repo: 'repo' });
+    render(<RepoIssues />);
+    expect(screen.getByTestId('navbar')).toBeInTheDocument();
+    expect(screen.getByTestId('spinner')).toBeInTheDocument();
+  });
+
+  it('fetches and displays issues in the table after loading', async () => {
+    useParams.mockReturnValue({ id: 'user', repo: 'repo' });
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve([
+          {
+            number: 1,
+            state: 'open',
+            labels: ['bug'],
+            title: 'Test Issue',
+            body: 'Body here',
+          },
+        ]),
+      })
+    );
+    render(<RepoIssues />);
+    await waitFor(() =>
+      expect(screen.queryByTestId('spinner')).not.toBeInTheDocument()
+    );
+    expect(screen.getByTestId('mrt-table')).toBeInTheDocument();
+  });
+
+  it('navigates on form submit', async () => {
+    useParams.mockReturnValue({ id: 'user', repo: 'repo' });
+    global.fetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve([]) }));
+    render(<RepoIssues />);
+    await waitFor(() => expect(screen.queryByTestId('spinner')).not.toBeInTheDocument());
+    const input = screen.getByTestId('form-control');
+    const button = screen.getByText(/Search Issues/i);
+    fireEvent.change(input, { target: { value: 'newrepo' } });
+    fireEvent.click(button);
+    expect(mockNavigate).toHaveBeenCalledWith('/issues/user/newrepo', {
+      replace: true,
+      state: {
+        id: 'user',
+        repo: 'newrepo',
+      },
     });
+    expect(mockNavigate).toHaveBeenCalledWith(0);
+  });
 });