Added Guitar Gallery

This Component presents the guitars gotten from the server.
It contains a sub-component: GuitarInfo which is a GalleryItem
In addition this commit removes the unecessary files regarding Users.js

.ruby-version

@@ -1 +1 @@
-ruby-2.6.3
+2.7.6

app/controllers/guitars_controller.rb

@@ -0,0 +1,24 @@
+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

app/javascript/components/GuitarGallery.js

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Title, TitleSizes, Gallery } from '@patternfly/react-core';
+import GuitarInfo from './GuitarInfo';
+
+// Loading the data from the server:
+
+export const GuitarGallery = () => {
+  const getGuitars = async () => {
+    try {
+      const response = await axios.get('/guitars');
+      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.map(({ name, url, price, description }) => (
+          <GuitarInfo key={name} name={name} url={url} price={price} description={description} />
+        ))}
+      </Gallery>
+    </div>
+  );
+};

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/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/guitar_gallery/index.html.erb

@@ -0,0 +1,2 @@
+<h1>Guitars#index</h1>
+<p>Find me in app/views/guitars/index.html.erb</p>

config/routes.rb

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