Feature/suggestions

src/views/AppRouter.jsx

@@ -6,6 +6,7 @@ import Overview from './spotify/overview/Overview';
 import Landingpage from './landingpage/Landingpage';
 import Tracks from './spotify/tracks/Tracks';
 import Artists from './spotify/artists/Artists';
+import Suggestions from './spotify/suggestions/Suggestions';
 import Analyze from './spotify/analyze/Analyze';
 import Genres from './spotify/genres/Genres';
 import { Header, Footer } from './common';
@@ -42,6 +43,7 @@ const AppRouter = ({ isLoading }) => {
         <Route exact path="/overview" component={Overview} />
         <Route exact path="/artists" component={Artists} />
         <Route exact path="/tracks" component={Tracks} />
+        <Route exact path="/suggestions" component={Suggestions} />
         <Route exact path="/analyze" component={Analyze} />
         <Route exact path="/genres" component={Genres} />
         <Footer />

src/views/common/header/Header.jsx

@@ -9,7 +9,7 @@ const Header = () => {
     <div className="header">
       <h3 className="title">
         <a className="header-link" href="/">
-          Statify
+          STATIFY
         </a>
       </h3>
       <NavBar />

src/views/common/index.js

@@ -16,6 +16,8 @@ export { default as UserBadge } from './user-badge/UserBadge';
 
 export { default as ShowAt } from './defaultscreens/ShowAt';
 
+export { default as Suggestion } from './suggestion/Suggestion';
+
 export { default as ScreenToSmall } from './errors/ScreenToSmall';
 
 export { default as NavBar } from './navbar/NavBar';

src/views/common/suggestion/Suggestion.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import './style.css';
+
+const Suggestion = (suggestion, index) => {
+  let background = {};
+  if (suggestion.images[0]) {
+    background = {
+      backgroundImage: `url(${suggestion.images[0].url})`,
+    };
+  }
+
+  return (
+    <div key={suggestion.id} className="artist">
+      <div className="img-container">
+        <div style={background} className="artist-card-image"></div>
+        <p className="artist-rank">{index + 1}</p>
+      </div>
+      <p className="artist-card-name bold">{suggestion.name}</p>
+    </div>
+  );
+};
+
+export default Suggestion;

src/views/common/user-badge/UserBadge.jsx

@@ -65,10 +65,11 @@ function Userbadge() {
         <div className={`fullscreen-menu ${menuActive}`}>
           <a
             href="/"
-            className={`fullscreen-navigation-item ${window.location.href.split('/')[3] === ''
-              ? 'fullscreen-navigation-active'
-              : 'fullscreen-navigation-inactive'
-              }`}
+            className={`fullscreen-navigation-item ${
+              window.location.href.split('/')[3] === 'overview'
+                ? 'fullscreen-navigation-active'
+                : 'fullscreen-navigation-inactive'
+            }`}
           >
             Overview
           </a>

src/views/landingpage/Landingpage.jsx

@@ -16,13 +16,12 @@ function Landingpage() {
   return (
     <div className="landingpage">
       <div className="login-area">
-        <h3 className="logo">Statify</h3>
+        <h3 className="logo">STATIFY</h3>
         <h1 className="intro-text">Do you really know what music you listen to?</h1>
         <p>
           With our website you can see what your most listened artist and tracks are. You can also
           create playlists with your favourite tracks directly from Statify
         </p>
-        <p className="disclaimer">*Some functionality may be exclusive for Spotify-Users</p>
         <a href="/about">About this site</a>
         <div className="login-buttons">
           <button

src/views/spotify/suggestions/Suggestions.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+// import { fetchSuggestions } from '../../../services/spotifyservice';
+// import { Suggestion, DefaultErrorMessage } from '../../common';
+import './style.css';
+
+// import { Spinner } from '../../common';
+// import useDataHook from '../../../hooks/useDataHook';
+
+function Suggestions() {
+  // const [baseContent, setBaseContent] = '';
+  // const [suggestionsRequest, setSuggestionsRequest] = useState(() => () => fetchSuggestions(baseContent));
+  // const { data: artists, isLoading, hasError } = useDataHook(suggestionsRequest);
+
+  // useEffect(() => {
+  //   setSuggestionsRequest(() => () => fetchSuggestions(baseContent));
+  // }, [timerange]);
+
+  // if (hasError) return <DefaultErrorMessage />;
+  // if (!artists > 0 && isLoading !== false) return <Spinner />;
+
+  // const renderSuggestions = () => {
+  //   return artists.map((artist, index) => {
+  //     return Suggestion(artist, index);
+  //   });
+  // };
+
+  return (
+    <div className="suggestions">
+      <h1 className="site-title">Let us show you songs you might like!</h1>
+
+      {/* <div className="suggestions-content">{renderSuggestions()}</div> */}
+    </div>
+  );
+}
+
+export default Suggestions;