bug fixes

package.json

@@ -14,6 +14,7 @@
     "fecha": "^4.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-ga": "^3.3.0",
     "react-paginate": "^8.1.2",
     "react-router-dom": "^6.2.2",
     "react-scripts": "^5.0.0",

public/index.html

@@ -4,15 +4,14 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Find upcoming concerts near you." />
+    <meta name="keywords" content="concerts" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel=”shortcut icon” href=”%PUBLIC_URL%/favicon.ico”>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

public/manifest.json

@@ -1,21 +1,11 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Croncert",
+  "name": "Croncert",
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
+      "sizes": "96x96 32x32 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

src/App.css

@@ -1,7 +1,5 @@
 .App {
   text-align: center;
-  background-image: linear-gradient(#578672,  #7eacb3);
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -12,5 +10,5 @@
 
 .heading {
   font-size: 50px;
-  margin: 50px;
+  margin: 40px;
 }

src/App.tsx

@@ -1,9 +1,12 @@
-import React, { Component } from 'react';
-import './App.css';
-import ConcertList from './components/ConcertList';
-import { Concert } from './model';
-import SearchBar from './components/SearchBar';
-import Footer from './components/Footer';
+import React, { Component } from "react";
+import "./App.css";
+import ConcertList from "./components/ConcertList";
+import { Concert } from "./model";
+import SearchBar from "./components/SearchBar";
+import Footer from "./components/Footer";
+import ReactGA from "react-ga";
+
+ReactGA.initialize("G-1VDTNKYJRK");
 
 type State = {
   baseUrl: string;
@@ -12,105 +15,145 @@ type State = {
   concerts: Array<Concert>;
   titleSearchTerm: string;
   citySearchTerm: string;
-}
+};
 
 class App extends Component {
-
   state: State = {
-    baseUrl: 'https://event-api-6bbi2ttrza-ew.a.run.app/api/events',
+    baseUrl: "https://api.croncert.ch/api/events",
     totalPages: 0,
     page: 1,
     concerts: [],
     titleSearchTerm: "",
-    citySearchTerm: ""
-  }
+    citySearchTerm: "",
+  };
 
   async getConcerts() {
-    const res = await fetch(this.state.baseUrl + '?page=' + this.state.page + '&title=' + this.state.titleSearchTerm + '&city=' + this.state.citySearchTerm);
+    const res = await fetch(
+      this.state.baseUrl +
+        "?page=" +
+        this.state.page +
+        "&title=" +
+        this.state.titleSearchTerm +
+        "&city=" +
+        this.state.citySearchTerm
+    );
     const res_json = await res.json();
     this.setState({
-      totalPages: res_json['last_page'],
-      page: res_json['page'],
-      concerts: res_json['data']
-    })
-
+      totalPages: res_json["last_page"],
+      page: res_json["page"],
+      concerts: res_json["data"],
+    });
   }
 
   async componentDidMount() {
+    ReactGA.pageview(window.location.pathname);
     this.getConcerts();
   }
 
-  handlePageClick = (event: { selected: number; }) => {
+  handlePageClick = (event: { selected: number }) => {
     this.setState({ page: event.selected + 1 }, () => {
       this.getConcerts();
     });
+    window.scrollTo(0, 0);
   };
 
   handleSearch = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    this.setState({
-      titleSearchTerm: event.currentTarget.titlesearch.value,
-      citySearchTerm: event.currentTarget.citysearch.value,
-      page: 1
-    }, () => {
-      this.getConcerts();
-    })
-  }
+    this.setState(
+      {
+        titleSearchTerm: event.currentTarget.titlesearch.value,
+        citySearchTerm: event.currentTarget.citysearch.value,
+        page: 1,
+      },
+      () => {
+        this.getConcerts();
+      }
+    );
+  };
 
   handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    this.setState({
-      page: 1
-    }, () => {
-      this.getConcerts();
-    })
-  }
+    this.setState(
+      {
+        page: 1,
+      },
+      () => {
+        this.getConcerts();
+      }
+    );
+  };
 
   handleTitleChange = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     this.setState({
-      titleSearchTerm: event.currentTarget.titlesearch.value
-    })
-  } 
+      titleSearchTerm: event.currentTarget.titlesearch.value,
+    });
+  };
 
   handleCityChange = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    this.setState({
-      citySearchTerm: event.currentTarget.citysearch.value,
-    })
-  }
+    this.setState(
+      {
+        citySearchTerm: event.currentTarget.citysearch.value,
+        page: 1,
+      },
+      () => {
+        this.getConcerts();
+      }
+    );
+  };
 
   render() {
     return (
-      <div className="App">
-        <span className='heading'>CrONCERT</span>
-        {/* <SearchField handleFormSubmit={this.handleSearch}></SearchField> */}
-        <SearchBar
-          handleSubmit={this.handleSubmit}
-          handleTitleChange={this.handleTitleChange}
-          handleCityChange={this.handleCityChange} />
-        <ConcertList
-          concerts={this.state.concerts}
-          page={this.state.page}
-          totalPages={this.state.totalPages}
-          handlePagination={this.handlePageClick} />
-        <Footer/>
+      <div>
+        <div
+          style={{
+            backgroundImage: "linear-gradient(#578672,  #7eacb3)",
+            position: "fixed",
+            width: "100%",
+            height: "100%",
+            zIndex: -1,
+          }}
+        ></div>
+        <svg
+          style={{
+            position: "fixed",
+            opacity: 0.6,
+            width: "100%",
+            height: "100%",
+            zIndex: -1,
+          }}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <filter id="noiseFilter">
+            <feTurbulence
+              type="fractalNoise"
+              baseFrequency="0.65"
+              numOctaves="4"
+              stitchTiles="stitch"
+            />
+          </filter>
+
+          <rect width="100%" height="100%" filter="url(#noiseFilter)" />
+        </svg>
+        <div className="App">
+          <span className="heading">CrONCERT</span>
+          <SearchBar
+            handleSubmit={this.handleSubmit}
+            handleTitleChange={this.handleTitleChange}
+            handleCityChange={this.handleCityChange}
+          />
+          <ConcertList
+            concerts={this.state.concerts}
+            page={this.state.page}
+            totalPages={this.state.totalPages}
+            handlePagination={this.handlePageClick}
+          />
+          <Footer />
+        </div>
       </div>
     );
-
   }
 }
 
-// class App extends Component {
-//   render() {
-//     return (
-//       <div className="App">
-//         <Routes>
-//           <Route path="/" element={SearchPage} />
-//         </Routes>
-//       </div>
-//     );
-//   }
-// }
-
-export default App;
+export default App;

src/components/ConcertList.tsx

@@ -31,7 +31,6 @@ const ConcertList = ({ concerts, page, totalPages, handlePagination }: Props) =>
           marginPagesDisplayed={1}
           pageCount={totalPages}
           previousLabel="<"
-        // renderOnZeroPageCount={null}
         />)}
       </div>
     </div>

src/components/styles.css

@@ -47,8 +47,7 @@
     position: relative;
     background-color:rgb(255, 226, 197);
     border-radius: 20px;
-    margin-top: 20px;
-    padding: 10px 0 10px 0;
+    padding: 10px 0 8px 0;
     box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
 }
 
@@ -62,8 +61,9 @@
     background-color: rgb(255, 226, 197);
     font-family: inherit;
     font-weight: 400;
-    font-size: 20px;
+    font-size: 18px;
     float: left;
+    width: 100%;
 }
 
 .searchbar_input_title:focus {
@@ -85,7 +85,7 @@
     background-color: rgb(255, 226, 197);
     font-family: inherit;
     font-weight: 400;
-    font-size: 20px;
+    font-size: 18px;
     float: left;
 }
 
@@ -131,7 +131,7 @@
 }
 
 .concertitem__title {
-    font-size: 25px;
+    font-size: 20px;
     font-weight: 500;
     padding: 5px;
 }
@@ -147,7 +147,7 @@
 }
 
 .concertitem__location_city {
-    font-size: 20px;
+    font-size: 16px;
     font-weight: 400;
     padding: 2px 0 2px 5px;
 }