@conorheffron/ironoc-frontend 5.5.9 → 7.0.0

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@conorheffron/ironoc-frontend",
-  "version": "5.5.9",
+  "version": "7.0.0",
   "private": false,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.28.0",
     "bootstrap": "5.1",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.5",
@@ -15,7 +14,6 @@
     "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "^5.0.1",
     "reactstrap": "^8.10.0",
     "web-vitals": "^4.2.3"
   },
@@ -45,6 +43,13 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "jest": "^27.5.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^4.2.3"
+  },
+  "resolutions": {
+    "react-scripts/@svgr/webpack": "^6.2.1"
   }
 }

package/src/App.css

@@ -73,3 +73,24 @@
     height: 13;
     width: 51;
 }
+
+.carousel-caption h3, h5 {
+    color: navy;
+}
+
+p a {
+    color: yellow;
+}
+
+.carousel-caption h3, h5 {
+    background-color:yellow;
+    width: 50%;
+    height: auto;
+    margin: 0 auto;
+}
+
+.carousel-item img {
+    width: 50%;
+    height: auto;
+    margin: 0 auto;
+}

package/src/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import './App.css';
 import Home from './components/Home';
+import CoffeeHome from './components/CoffeeHome';
 import NotFound from './components/NotFound';
 import About from './components/About';
 import RepoDetails from './components/RepoDetails';
@@ -19,6 +20,7 @@ class App extends Component {
             <Route path='/projects' exact={true} component={RepoDetails}/>
             <Route path='/projects/:id' component={RepoDetails}/>
             <Route path='/issues/:id/:repo' component={RepoIssues}/>
+            <Route path='/brews' exact={true} component={CoffeeHome}/>
             <Route path="*" component={NotFound} />
           </Switch>
         </Router>

package/src/App.test.js

@@ -1,8 +1,97 @@
-import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Home from './components/Home';
+import axios from 'axios';
+import App from './App';
+import CoffeeCarousel from './components/CoffeeCarousel';
+import CoffeeHome from './components/CoffeeHome';
+import NotFound from './components/NotFound';
+
+// Mocking axios
+jest.mock('axios');
 
 test('renders learn react link', () => {
   render(<Home />);
   const element = screen.getByText(/Home/i);
   expect(element).toBeInTheDocument();
 });
+
+// Sample data for testing
+const coffeeItems = [
+    {
+        title: 'Espresso',
+        ingredients: ['Water', 'Coffee beans'],
+        image: 'https://example.com/espresso.jpg',
+    },
+    {
+        title: 'Cappuccino',
+        ingredients: ['Espresso', 'Steamed milk', 'Foam milk'],
+        image: 'https://example.com/cappuccino.jpg',
+    },
+];
+
+describe('CoffeeCarousel', () => {
+    test('renders carousel with coffee items', () => {
+        render(<CoffeeCarousel items={coffeeItems} />);
+
+        // Check that the carousel items are rendered
+        coffeeItems.forEach((item) => {
+            expect(screen.getByText(item.title)).toBeInTheDocument();
+            expect(screen.getByAltText(item.title)).toBeInTheDocument();
+            expect(screen.getByText(item.ingredients.join(', '))).toBeInTheDocument();
+        });
+    });
+
+    test('renders carousel with correct number of items', () => {
+        render(<CoffeeCarousel items={coffeeItems} />);
+
+        // Check that the correct number of carousel items are rendered
+        const carouselItems = screen.getAllByRole('img');
+
+        expect(carouselItems.length).toBe(coffeeItems.length);
+    });
+});
+
+describe('CoffeeHome', () => {
+    beforeEach(() => {
+        axios.get.mockResolvedValue({ data: coffeeItems });
+    });
+
+    test('renders AppNavbar component', () => {
+        render(<App />);
+        expect(screen.getByRole('banner')).toBeInTheDocument();
+    });
+
+    test('displays loading state initially', () => {
+        render(<CoffeeHome />);
+        expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    test('renders CoffeeCarousel component with coffee items', async () => {
+        render(<CoffeeHome />);
+
+        // Wait for the coffee items to be fetched and rendered
+        await waitFor(() => {
+            expect(screen.getByText('Espresso')).toBeInTheDocument();
+            expect(screen.getByText('Cappuccino')).toBeInTheDocument();
+        });
+    });
+});
+
+describe('NotFound', () => {
+    test('renders AppNavbar component', () => {
+        render(<NotFound />);
+        expect(screen.getByRole('banner')).toBeInTheDocument();
+    });
+
+    test('displays 404 error message', () => {
+        render(<NotFound />);
+        expect(screen.getByText('404 - Page Not Found')).toBeInTheDocument();
+    });
+
+    test('displays the apology message', () => {
+        render(<NotFound />);
+        expect(screen.getByText('Sorry, the page you are looking for could not be found.')).toBeInTheDocument();
+    });
+});

package/src/AppNavbar.js

@@ -18,6 +18,7 @@ export default function AppNavBar() {
                             <DropdownMenu end>
                                 <DropdownItem href="/about">About</DropdownItem>
                                 <DropdownItem href="/portfolio">Portfolio</DropdownItem>
+                                <DropdownItem href="/brews">Brews</DropdownItem>
                                 <DropdownItem divider />
                                 <DropdownItem href="https://linktr.ee/conorheffron" target="_blank" rel="noreferrer">Link Tree</DropdownItem>
                             </DropdownMenu>

package/src/LoadingSpinner.js

@@ -0,0 +1,15 @@
+import Button from 'react-bootstrap/Button';
+import Spinner from 'react-bootstrap/Spinner';
+import { Container } from 'reactstrap';
+import AppNavbar from './AppNavbar';
+
+function LoadingSpinner() {
+  return (
+        <Container fluid>
+            <Button variant="primary" disabled>
+            <Spinner as="span" animation="grow" size="sm" role="status" aria-hidden="true"/>Loading...</Button>
+        </Container>
+  );
+}
+
+export default LoadingSpinner;

package/src/components/About.js

@@ -27,7 +27,8 @@ class About extends Component {
                         <br /><br />
                         I believe in continuous learning & practical skills that can be demonstrated in a positive & collaborative 
                         manner (open source is great!). When not learning or working, I like jogging/cycling, music, cooking, 
-                        pretending to be a caffeine connoisseur, & searching for new forms of salsa verde / green sauce! 
+                        pretending to be a <a href="/brews">caffeine connoisseur</a>, & searching for new forms of
+                        salsa verde / green sauce!
                         <br /><br />
                         Let's connect and explore exciting
                         opportunities together! See above & beyond for contact details and further information.
@@ -35,7 +36,7 @@ class About extends Component {
                         <a class="strava-badge" href='https://strava.com/athletes/2582329' target="_clean">
                           Follow me on
                           <img class="strava-badge-img" src='https://badges.strava.com/logo-strava.png' alt='Strava' />
-                        </a>
+                        </a><br />
                 </header>
             </Container>
             <Footer/>

package/src/components/CoffeeCarousel.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Carousel } from 'react-bootstrap';
+import '.././App.css';
+
+const CoffeeCarousel = ({ items }) => {
+    return (
+        <Carousel className="App-header">
+            {items.map((item, index) => (
+                <Carousel.Item key={index}>
+                    <img src={item.image} alt={item.title}/>
+                    <Carousel.Caption>
+                        <h3>{item.title}</h3>
+                        <h5>{item.ingredients.join(', ')}</h5>
+                    </Carousel.Caption>
+                </Carousel.Item>
+            ))}
+        </Carousel>
+    );
+};
+
+export default CoffeeCarousel;

package/src/components/CoffeeHome.js

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Container, InputGroup, Table } from 'reactstrap';
+import axios from 'axios';
+import AppNavbar from '.././AppNavbar';
+import CoffeeCarousel from './CoffeeCarousel';
+import Footer from '.././Footer';
+import LoadingSpinner from '.././LoadingSpinner';
+
+function CoffeeHome() {
+    const [coffeeItems, setCoffeeItems] = useState([]);
+
+    useEffect(() => {
+        axios.get('/coffees')
+            .then(response => setCoffeeItems(response.data))
+            .catch(error => console.error('Error fetching coffee details:', error));
+    }, []);
+
+    return (
+        <div className="App">
+            <AppNavbar/>
+            <Container>
+                {coffeeItems.length > 0 ? (
+                    <>
+                    <br /><br />
+                    <CoffeeCarousel items={coffeeItems} />
+                    </>
+                ) : (
+                    <>
+                    <br /><br /><br />
+                    <LoadingSpinner/>
+                    </>
+                )}
+            </Container>
+            <Footer/>
+        </div>
+    );
+}
+
+export default CoffeeHome;

package/src/components/ControlledCarousel.js

@@ -24,7 +24,7 @@ class ControlledCarousel extends Component {
                                         <h1><u>ironoc-db</u></h1>
                                         <h2>Sample Data Manager Service with UI</h2>
                                         <br /><br />
-                                        <h3>Tech Stack:</h3>
+                                        <h4>Tech Stack:</h4>
                                         <h4>Java & Spring Boot, Thymeleaf Templating Engine, & MySQL.</h4>
                                     </Carousel.Caption>
                                 </a>
@@ -36,19 +36,19 @@ class ControlledCarousel extends Component {
                                         <h1><u>booking-sys</u></h1>
                                         <h2>Sample Reservations & Viewer System</h2>
                                         <br /><br />
-                                        <h3>Tech Stack:</h3>
+                                        <h4>Tech Stack:</h4>
                                         <h4>Python & Django Web App, JavaScript, SQLite3 or MySQL database.</h4>
                                     </Carousel.Caption>
                                 </a>
                             </Carousel.Item>
                             <Carousel.Item interval={500}>
-                                <a href="https://github.com/cph33/nba-stats" target="_blank" rel="noreferrer">
+                                <a href="https://github.com/conorheffron/nba-stats" target="_blank" rel="noreferrer">
                                     <img className="d-block w-100" src={navy} alt="navy3" />
                                     <Carousel.Caption>
                                         <h1><u>nba-stats</u></h1>
                                         <h2>NBA Analytics (Seasons 2015 - 2023): Player Statistics</h2>
                                         <br /><br />
-                                        <h3>Tech Stack:</h3>
+                                        <h4>Tech Stack:</h4>
                                         <h4>Jupyter Notebooks, Python, Pandas, & Requests / JSON API.</h4>
                                     </Carousel.Caption>
                                 </a>
@@ -60,7 +60,7 @@ class ControlledCarousel extends Component {
                                         <h1><u>cbio-skin-canc</u></h1>
                                         <h2>Skin Cancer Dataset Analysis</h2>
                                         <br /><br />
-                                        <h3>Tech Stack:</h3>
+                                        <h4>Tech Stack:</h4>
                                         <h4>R, dplyr, plotly, knitr, testthat, covr, GIT.</h4>
                                     </Carousel.Caption>
                                 </a>
@@ -72,7 +72,7 @@ class ControlledCarousel extends Component {
                                         <h1><u>gene-expr</u></h1>
                                         <h2>Breast Cancer Dataset Analysis</h2>
                                         <br /><br />
-                                        <h3>Tech Stack:</h3>
+                                        <h4>Tech Stack:</h4>
                                         <h4>R, ggplot2, dplyr, deseq2-analysis, & R markdown.</h4>
                                     </Carousel.Caption>
                                 </a>
@@ -84,7 +84,7 @@ class ControlledCarousel extends Component {
                                         <h1><u>bio-cell-red-edge</u></h1>
                                         <h2>Edge Detection of Biological Cell (Image Processing Script)</h2>
                                         <br /><br />
-                                        <h3>Tech Stack:</h3>
+                                        <h4>Tech Stack:</h4>
                                         <h4>Python, sci-kit-image, matplotlib.pyplot, & scipy.ndimage.</h4>
                                     </Carousel.Caption>
                                 </a>
@@ -96,7 +96,7 @@ class ControlledCarousel extends Component {
                                         <h1><u>global-max-sim-matrix</u></h1>
                                         <h2>Compute Global Maximum Similarity Matrix</h2>
                                         <br /><br />
-                                        <h3>Tech Stack:</h3>
+                                        <h4>Tech Stack:</h4>
                                         <h4>R Package, testthat, stringr, & devtools.
                                         </h4>
                                     </Carousel.Caption>

package/src/components/Home.js

@@ -16,18 +16,19 @@ class Home extends Component {
                     <br /><br />
                     <a href="/"><img src={logo} className="App-logo" alt="iRonoc"/></a>
                     <p id="my-intro"> Welcome to my personal portfolio site.<br />
-                    Please use the navigation bar to view different features such as about me, my link tree, a carousel 
-                    that scrolls through highlighted projects & the GitHub project manager (PM) tool which is built 
+                    Please use the navigation bar to view different features such as <a href="/about">about</a> me, my
+                    &nbsp;<a href="https://linktr.ee/conorheffron">link tree</a>, a <a href="/portfolio">carousel</a>
+                    &nbsp;that scrolls through highlighted projects & the GitHub project manager (PM) tool which is built
                     against the iRonoc API.
                     <br /><br />
                     The GitHub PM tool allows you to view & navigate the backlog of issues & bugs for a given project
                     repository for the corresponding user or organisation account. There is an option to search by user ID
                     or to drill down to a specific repository name via search or 'List Issues' icon in the 'Actions' column 
-                    of the <a href="https://www.ironoc.net/projects/conorheffron">projects component view</a>.
+                    of the <a href="/projects/conorheffron">projects component view</a>.
                     <br /><br />
-                    The ironoc API is documented with <a href="https://www.ironoc.net/swagger-ui-ironoc.html">Open API</a> 
-                    & sample GET requests that return raw JSON responses are available for demonstration purposes only i.e. 
-                    <a href="https://www.ironoc.net/get-repo-issue/conorheffron/ironoc/">Issues JSON Sample</a>.</p>
+                    The ironoc API is documented with &nbsp;<a href="/swagger-ui-ironoc.html">Open API</a>
+                    &nbsp; & sample GET requests that return raw JSON responses are available for demonstration
+                    purposes only i.e. &nbsp;<a href="/get-repo-issue/conorheffron/ironoc/">Issues JSON Sample</a>.</p>
                   </header>
               </Container>
               <Footer/>

package/src/components/RepoDetails.js

@@ -5,6 +5,7 @@ import Form from 'react-bootstrap/Form';
 import AppNavbar from '.././AppNavbar';
 import Footer from '.././Footer';
 import { Link } from 'react-router-dom';
+import LoadingSpinner from '.././LoadingSpinner';
 
 class RepoDetails extends Component {
 
@@ -39,7 +40,16 @@ class RepoDetails extends Component {
         const {repoDetailList, isLoading} = this.state;
 
         if (isLoading) {
-            return <p>Loading...</p>;
+            return (
+                <div className="App">
+                    <AppNavbar/>
+                    <Container>
+                        <br /><br /><br />
+                        <LoadingSpinner/>
+                    </Container>
+                    <Footer/>
+                </div>
+            );
         }
 
         let gitUser = this.props.match.params.id;

package/src/components/RepoIssues.js

@@ -4,6 +4,7 @@ import '.././App.css';
 import Form from 'react-bootstrap/Form';
 import AppNavbar from '.././AppNavbar';
 import Footer from '.././Footer';
+import LoadingSpinner from '.././LoadingSpinner';
 
 class RepoIssues extends Component {
 
@@ -39,8 +40,18 @@ class RepoIssues extends Component {
     render() {
         const {repoIssueList, isLoading} = this.state;
         if (isLoading) {
-            return <p>Loading...</p>;
+            return (
+                <div className="App">
+                    <AppNavbar/>
+                    <Container>
+                        <br /><br /><br />
+                        <LoadingSpinner/>
+                    </Container>
+                    <Footer/>
+                </div>
+            );
         }
+
         const repoList = repoIssueList.map(issue => {
             let username = this.props.match.params.id
             let repository = this.props.match.params.repo