Merge branch 'main' of github.com:conorheffron/ironoc

Author: conorheffron

.github/workflows/auto-assign.yml

@@ -12,7 +12,7 @@ jobs:
       pull-requests: write
     steps:
     - name: 'Auto-assign issue'
-      uses: pozil/auto-assign-issue@v1
+      uses: pozil/auto-assign-issue@v4
       with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           assignees: conorheffron

frontend/README.md

@@ -74,6 +74,23 @@ frontend
     └── setupTests.js
 ```
 
+## Camera Roll Background Config
+
+Home and About background image rotation is driven by `public/camera-roll.yml`.
+
+Example:
+
+```yml
+home:
+  - teal-bg
+  - navy-bg
+about:
+  - navy-bg
+  - red-bg
+```
+
+Supported keys are `teal-bg`, `navy-bg`, and `red-bg`.
+
 #### Quick start
 ```shell
 cd frontend

frontend/package-lock.json

@@ -0,0 +1,9 @@
+# Camera roll keys for rotating Home/About backgrounds
+home:
+  - teal-bg
+  - navy-bg
+  - red-bg
+about:
+  - navy-bg
+  - red-bg
+  - teal-bg

frontend/public/camera-roll.yml

@@ -27,6 +27,22 @@
     overflow: hidden;
 }
 
+.App-header-camera-roll {
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    animation: subtle-camera-roll-pan 24s ease-in-out infinite alternate;
+    box-shadow: inset 0 0 0 1000px rgba(12, 31, 66, 0.15);
+}
+
+.App-header-camera-roll--home {
+    background-color: #1b3f83;
+}
+
+.App-header-camera-roll--about {
+    background-color: #16356c;
+}
+
 .App-link {
     color: #61dafb;
 }
@@ -40,6 +56,17 @@
     }
 }
 
+@keyframes subtle-camera-roll-pan {
+    from {
+        background-position: 48% 50%;
+        background-size: 104%;
+    }
+    to {
+        background-position: 52% 46%;
+        background-size: 110%;
+    }
+}
+
 .App-header, .body, .table-headers, .table, .mb-3 {
     font-family: "Open Sans";
     font-size: 1.4em;

frontend/src/App.css

@@ -12,10 +12,18 @@ import RepoIssues from './components/RepoIssues';
 import ControlledCarousel from './components/ControlledCarousel';
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    // Create Apollo Client once for '/donate' route
+    this.donateClient = new ApolloClient({
+      link: new HttpLink({ uri: '/graphql' }),
+      cache: new InMemoryCache(),
+    });
+  }
+
   render() {
     // Default props
     const {
-      forceRefresh = true,
       routes = [
         { path: '/', exact: true, component: Home },
         { path: '/about', exact: true, component: About },
@@ -29,14 +37,8 @@ class App extends Component {
       ]
     } = this.props;
 
-    // Create Apollo Client for '/donate' route
-    const donateClient = new ApolloClient({
-      link: new HttpLink({ uri: '/graphql' }),
-      cache: new InMemoryCache(),
-    });
-
     return (
-      <Router forceRefresh={forceRefresh}>
+      <Router>
         <Routes>
           {routes.map((route, index) => {
             // Wrap the Donate component with ApolloProvider
@@ -47,7 +49,7 @@ class App extends Component {
                   path={route.path}
                   {...(route.exact ? { exact: true } : {})}
                   element={
-                    <ApolloProvider client={donateClient}>
+                    <ApolloProvider client={this.donateClient}>
                       <Donate />
                     </ApolloProvider>
                   }

frontend/src/App.js

@@ -2,8 +2,48 @@ import React, { Component } from 'react';
 import { Container } from 'reactstrap';
 import '.././App.css';
 import AppNavbar from '.././AppNavbar';
+import { loadCameraRollImages } from '../utils/cameraRollConfig';
 
 class About extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            backgroundImages: [],
+            backgroundImageIndex: 0
+        };
+
+        this.rotateCameraRollImage = this.rotateCameraRollImage.bind(this);
+        this.rotationIntervalId = null;
+        this.isMountedView = false;
+    }
+
+    async componentDidMount() {
+        this.isMountedView = true;
+        const backgroundImages = await loadCameraRollImages('about');
+
+        if (this.isMountedView) {
+            this.setState({ backgroundImages, backgroundImageIndex: 0 });
+
+            if (backgroundImages.length > 1) {
+                this.rotationIntervalId = setInterval(this.rotateCameraRollImage, 10000);
+            }
+        }
+    }
+
+    componentWillUnmount() {
+        this.isMountedView = false;
+
+        if (this.rotationIntervalId) {
+            clearInterval(this.rotationIntervalId);
+        }
+    }
+
+    rotateCameraRollImage() {
+        this.setState((prevState) => ({
+            backgroundImageIndex: (prevState.backgroundImageIndex + 1) % prevState.backgroundImages.length
+        }));
+    }
+
     render() {
         const {
             link = "https://www.linkedin.com/in/conorheffron",
@@ -15,12 +55,21 @@ class About extends Component {
             stravaImgSrc = 'https://badges.strava.com/logo-strava.png',
             stravaImgAlt = 'Strava'
         } = this.props;
+        const { backgroundImages, backgroundImageIndex } = this.state;
+        const activeBackgroundImage = backgroundImages[backgroundImageIndex];
+        const headerStyle = activeBackgroundImage
+            ? { backgroundImage: `linear-gradient(rgba(8, 36, 74, 0.6), rgba(8, 36, 74, 0.6)), url(${activeBackgroundImage})` }
+            : undefined;
 
         return (
             <div className="App">
                 <AppNavbar />
                 <Container>
-                    <header className="App-header">
+                    <header
+                        data-testid="about-header"
+                        className="App-header App-header-camera-roll App-header-camera-roll--about"
+                        style={headerStyle}
+                    >
                         <br /><br />
                         <a href={link} target="_blank" rel="noreferrer">
                             <img src={imgSrc} width={imgWidth} height={imgHeight} border="0" alt={imgAlt}></img>

frontend/src/components/About.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Container } from 'reactstrap';
 import '.././App.css';
 import AppNavbar from '.././AppNavbar';
+import { loadCameraRollImages } from '../utils/cameraRollConfig';
 
 class Home extends Component {
     constructor(props) {
@@ -17,18 +18,59 @@ class Home extends Component {
             className,
             headerClassName,
             introId,
-            welcomeMessage
+            welcomeMessage,
+            backgroundImages: [],
+            backgroundImageIndex: 0
         };
+
+        this.rotateCameraRollImage = this.rotateCameraRollImage.bind(this);
+        this.rotationIntervalId = null;
+        this.isMountedView = false;
+    }
+
+    async componentDidMount() {
+        this.isMountedView = true;
+        const backgroundImages = await loadCameraRollImages('home');
+
+        if (this.isMountedView) {
+            this.setState({ backgroundImages, backgroundImageIndex: 0 });
+
+            if (backgroundImages.length > 1) {
+                this.rotationIntervalId = setInterval(this.rotateCameraRollImage, 10000);
+            }
+        }
+    }
+
+    componentWillUnmount() {
+        this.isMountedView = false;
+
+        if (this.rotationIntervalId) {
+            clearInterval(this.rotationIntervalId);
+        }
+    }
+
+    rotateCameraRollImage() {
+        this.setState((prevState) => ({
+            backgroundImageIndex: (prevState.backgroundImageIndex + 1) % prevState.backgroundImages.length
+        }));
     }
 
     render() {
-        const { className, headerClassName, introId, welcomeMessage } = this.state;
+        const { className, headerClassName, introId, welcomeMessage, backgroundImages, backgroundImageIndex } = this.state;
+        const activeBackgroundImage = backgroundImages[backgroundImageIndex];
+        const headerStyle = activeBackgroundImage
+            ? { backgroundImage: `linear-gradient(rgba(10, 34, 80, 0.55), rgba(10, 34, 80, 0.55)), url(${activeBackgroundImage})` }
+            : undefined;
 
         return (
             <div className={className}>
                 <AppNavbar />
                 <Container>
-                    <header className={headerClassName}>
+                    <header
+                        data-testid="home-header"
+                        className={`${headerClassName} App-header-camera-roll App-header-camera-roll--home`}
+                        style={headerStyle}
+                    >
                         <br /><br />
                         <p id={introId}>
                             {welcomeMessage}<br /><br />

frontend/src/components/Home.js

@@ -1,15 +1,28 @@
-import { screen, render } from '@testing-library/react';
+import { screen, render, waitFor, act } from '@testing-library/react';
 import About from '../About';
 
 describe('About Component', () => {
-  test('renders with default props', () => {
-    render(<About />);
+  beforeEach(() => {
+    jest.spyOn(global, 'fetch').mockResolvedValue({
+      ok: true,
+      text: async () => `about:\n  - navy-bg\n  - red-bg`,
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('renders with default props', async () => {
+    await act(async () => {
+      render(<About />);
+    });
 
     expect(screen.getByAltText("View Conor Heffron's profile on LinkedIn")).toBeInTheDocument();
     expect(screen.getByAltText('Strava')).toBeInTheDocument();
   });
 
-  test('renders with provided props', () => {
+  test('renders with provided props', async () => {
     const props = {
       link: 'https://example.com',
       imgSrc: 'https://example.com/image.png',
@@ -18,8 +31,20 @@ describe('About Component', () => {
       stravaImgSrc: 'https://example.com/strava-image.png',
       stravaImgAlt: 'Example Strava',
     };
-    render(<About {...props} />);
+    await act(async () => {
+      render(<About {...props} />);
+    });
     expect(screen.getByAltText('Example Image')).toBeInTheDocument();
     expect(screen.getByAltText('Example Strava')).toBeInTheDocument();
   });
+
+  test('requests camera roll config on mount', async () => {
+    await act(async () => {
+      render(<About />);
+    });
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith('/camera-roll.yml', { cache: 'no-store' });
+    });
+  });
 });

frontend/src/components/__tests__/About.test.js

@@ -1,12 +1,31 @@
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, act, waitFor } from '@testing-library/react';
 import Home from '../Home';
 
 describe('Home', () => {
+  beforeEach(() => {
+    jest.spyOn(global, 'fetch').mockResolvedValue({
+      ok: true,
+      text: async () => `home:\n  - red-bg\n  - teal-bg`,
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   test('renders Home component', async () => {
     await act(async () => {
       render(<Home />);
     });
     const element = screen.getByText(/Home/i);
     expect(element).toBeInTheDocument();
   });
+
+  test('requests camera roll config on mount', async () => {
+    render(<Home />);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith('/camera-roll.yml', { cache: 'no-store' });
+    });
+  });
 });