Added Guitar Gallery

.browserslistrc

@@ -0,0 +1 @@
+defaults

.gitattributes

@@ -0,0 +1,10 @@
+# See https://git-scm.com/docs/gitattributes for more about git attribute files.
+
+# Mark the database schema as having been generated.
+db/schema.rb linguist-generated
+
+# Mark the yarn lockfile as having been generated.
+yarn.lock linguist-generated
+
+# Mark any vendored files as having been vendored.
+vendor/* linguist-vendored

.gitignore

@@ -34,7 +34,6 @@
 
 /public/packs
 /public/packs-test
-/node_modules
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
@@ -43,3 +42,4 @@ yarn-debug.log*
 Gemfile.lock
 package-lock.json
 yarn.lock
+node_modules/

app/__mocks__/axios.js

@@ -0,0 +1,6 @@
+export default {
+  get: jest.fn(),
+  post: jest.fn(),
+  put: jest.fn(),
+  delete: jest.fn()
+};

app/controllers/guitars_controller.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+# rubocop:disable Metrics/MethodLength
+
+class GuitarsController < ApplicationController
+  def index
+    render json: [
+      {
+        name: 'guitar1',
+        url: 'https://rukminim1.flixcart.com/image/416/416/acoustic-guitar/x/8/w/topaz-blue-signature-original-imaefec7uhypjdr9.jpeg?q=70',
+        price: '100',
+        description: 'blablabla 1'
+      },
+      {
+        name: 'guitar2',
+        url: 'https://shop.brianmayguitars.co.uk/user/special/content/Antique%20Cherry%20a.jpg',
+        price: '200',
+        description: 'blablabla 2'
+      },
+      {
+        name: 'guitar3',
+        url: 'https://cdn.mos.cms.futurecdn.net/Yh6r74b8CAj2jbdf2FAhq4-970-80.jpg.webp',
+        price: '300',
+        description: 'blablabla 3'
+      }
+    ]
+  end
+end
+
+# rubocop:enable Metrics/MethodLength

app/javascript/components/GuitarGallery.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Title, TitleSizes, Gallery, Spinner } from '@patternfly/react-core';
+import GuitarInfo from './GuitarInfo';
+import { guitarsUrl } from './constants';
+
+// Loading the data from the server:
+
+const GuitarGallery = () => {
+  const getGuitars = async () => {
+    try {
+      const response = await axios.get(guitarsUrl);
+      if (response.data) {
+        setGuitars(response.data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const [guitars, setGuitars] = useState([]);
+
+  useEffect(() => {
+    getGuitars();
+  }, []);
+
+  return (
+    <div>
+      <Title headingLevel="h1" size={TitleSizes['4xl']}>
+        Guitars For Sale:
+      </Title>
+      <Gallery
+        hasGutter
+        minWidths={{
+          md: '100px',
+          lg: '150px',
+          xl: '200px',
+          '2xl': '300px'
+        }}>
+        {guitars.length === 0 ? (
+          <Spinner isSVG aria-label="Contents of the Guitar Gallery" aria-valuetext="Loading..." />
+        ) : (
+          guitars.map(({ name, url, price, description }) => (
+            <GuitarInfo key={name} name={name} url={url} price={price} description={description} />
+          ))
+        )}
+      </Gallery>
+    </div>
+  );
+};
+
+export default GuitarGallery;

app/javascript/components/GuitarInfo.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  GalleryItem,
+  Grid,
+  GridItem,
+  Card,
+  CardTitle,
+  CardBody,
+  CardFooter
+} from '@patternfly/react-core';
+
+const GuitarInfo = ({ name, url, price, description }) => {
+  return (
+    <GalleryItem>
+      <Card id={name} isFlat>
+        <Grid md={6}>
+          <GridItem>
+            <img className="Guitar-Image" src={url} alt="Guitar Image" />
+          </GridItem>
+          <GridItem>
+            <CardTitle>{name}</CardTitle>
+            <CardBody>Price: {price}</CardBody>
+            <CardFooter>Description: {description}</CardFooter>
+          </GridItem>
+        </Grid>
+      </Card>
+    </GalleryItem>
+  );
+};
+GuitarInfo.propTypes = {
+  name: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  price: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired
+};
+
+export default GuitarInfo;

app/javascript/components/constants.js

@@ -0,0 +1 @@
+export const guitarsUrl = '/guitars';

app/javascript/components/tests/GuitarGallery.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { waitFor, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import axios from 'axios';
+import GuitarGallery from '../GuitarGallery.js';
+import { guitarsUrl } from '../constants';
+import { guitarData } from './fixtures';
+
+test("show loader when it's fetching data, then render Guitars", async () => {
+  await axios.get.mockResolvedValueOnce(guitarData);
+  const { unmount, getByText } = render(<GuitarGallery />);
+
+  // check the correct url is called:
+  expect(axios.get).toHaveBeenCalledWith(guitarsUrl);
+  expect(axios.get).toHaveBeenCalledTimes(1);
+
+  // ensure the title of the page is presented in the page:
+  expect(screen.getByText('Guitars For Sale:')).toBeInTheDocument();
+
+  // Another option to test it using getByText that react-testing-library/render returns:
+  const title = getByText(/Guitars For Sale:/);
+  expect(title).toHaveTextContent('Guitars For Sale:');
+
+  // ensure some content of the page is presented in the page:
+
+  await waitFor(() => screen.getByText('Description: some description in guitar1_test'));
+
+  expect(screen.getByText('Description: some description in guitar1_test')).toBeInTheDocument();
+  expect(screen.getByText('Description: some description in guitar2_test')).toBeInTheDocument();
+
+  // unmnount the component from the DOM
+  unmount();
+});

app/javascript/components/tests/fixtures.js

@@ -0,0 +1,16 @@
+export const guitarData = {
+  data: [
+    {
+      name: 'guitar1_test',
+      url: 'https://rukminim1.flixcart.com/image/416/416/acoustic-guitar/x/8/w/topaz-blue-signature-original-imaefec7uhypjdr9.jpeg?q=70',
+      price: '100',
+      description: 'some description in guitar1_test'
+    },
+    {
+      name: 'guitar2_test',
+      url: 'https://shop.brianmayguitars.co.uk/user/special/content/Antique%20Cherry%20a.jpg',
+      price: '200',
+      description: 'some description in guitar2_test'
+    }
+  ]
+};

app/javascript/packs/hello_react.jsx

@@ -3,9 +3,9 @@
 // of the page.
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Users } from '../components/Users';
+import GuitarGallery from '../components/GuitarGallery';
 import './fonts.css';
 
 document.addEventListener('DOMContentLoaded', () => {
-  ReactDOM.render(<Users />, document.body.appendChild(document.createElement('div')));
+  ReactDOM.render(<GuitarGallery />, document.body.appendChild(document.createElement('div')));
 });

app/views/home/index.html.erb

@@ -1 +0,0 @@
-

config/routes.rb

@@ -1,8 +1,7 @@
 # frozen_string_literal: true
 
 Rails.application.routes.draw do
-  root
-  'guitars#index'
-
+  root 'home#index'
+  get '/guitars', to: 'guitars#index'
   # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
 end