Fix sidebar and page container not working side by side.

Fix ESLint config with linebreak errors.
Add Spotify Web API Node module.
Add Spotify test code.

.eslintrc.json

@@ -23,7 +23,7 @@
             4
         ],
         "linebreak-style": [
-            1,
+            "off",
             "unix"
         ],
         "quotes": [
@@ -44,4 +44,4 @@
             }
         ]
     }
-}
+}

.gitignore

@@ -22,3 +22,4 @@ keys
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+config.json

package.json

@@ -21,6 +21,7 @@
         "react-scripts": "^1.1.5",
         "semantic-ui-css": "^2.4.1",
         "semantic-ui-react": "^2.0.3",
+        "spotify-web-api-node": "^5.0.2",
         "styled-components": "^5.3.0",
         "web-vitals": "^1.1.2"
     },

src/components/organisms/Sidebar.jsx

@@ -4,16 +4,17 @@ import { SidebarButton, MuspaceLogo } from "@atoms";
 import { FaHome, FaUserFriends, FaEnvelope, FaSpotify } from "react-icons/fa";
 
 const StyledDiv = Styled.div`
-    max-width: 20vw;
+    width: 20%;
     height: 100vh;
+    padding: 0;
+
     background-color: ${props => props.theme.colors.white};
+    border-right: 1px solid ${props => props.theme.colors.black};
+
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     transition: all 0.25s ease;
-    min-width: 20vw;
-    border-right: 1px solid ${props => props.theme.colors.lightGrey};
-    padding: 20px 0;
 
 `;
 

src/functions/Spotify.js

@@ -0,0 +1,19 @@
+import SpotifyWebApi from "spotify-web-api-node";
+
+const api = new SpotifyWebApi(
+    {
+        clientId: "1e4ee4e30b23405d8643d058642dffaf",
+        clientSecret: "8ab0151237234a22877c4e644fa1b433",
+        redirectUri: "https://muspace.me/spotify-callback"
+    }
+);
+
+async function test() {
+    console.log("Testing test()");
+    const response = await api.getArtistAlbums("43ZHCT0cAZBISjO8DG9PnE");
+    console.log(response.body);
+    return response.body;
+
+}
+
+export default { test };

src/functions/index.js

@@ -1,3 +1,4 @@
 import Firebase from "./Firebase";
+import Spotify from "./Spotify";
 
 export default Firebase;

src/misc/ProtectedRoute.jsx

@@ -1,21 +1,53 @@
 import React from "react";
-import { Route } from "react-router-dom";
-
-import { Redirect } from "react-router-dom";
+import Styled from "styled-components";
+import { Route, Redirect } from "react-router-dom";
 import { Sidebar } from "@organisms";
 
 import Firebase from "@functions";
-
 const loggedIn = Firebase.isLoggedIn();
 
+const StyledDiv = Styled.div`
+    width: 100vw;
+    height: 100vh;
+    padding: 0;
+
+    background-color: ${props => props.theme.colors.white};
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    transition: all 0.25s ease;
+
+    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+    box-sizing: border-box;         /* Opera/IE 8+ */
+`;
+
+const PageContainer = Styled.div`
+    width: 80vw;
+    height: 100vh;
+    padding: 0;
+
+    background-color: ${props => props.theme.colors.white};
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    transition: all 0.25s ease;
+
+    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+    box-sizing: border-box;         /* Opera/IE 8+ */
+`;
+
 // eslint-disable-next-line no-unused-vars
 function ProtectedRoute({ exact = false, path, component }) {
     if (loggedIn)
         return (
-            <div>
+            <StyledDiv>
                 <Sidebar />
-                <Route path={path} component={component} />
-            </div>
+                <PageContainer>
+                    <Route path={path} component={component} />
+                </PageContainer>
+            </StyledDiv>
         );
 
     else

src/pages/HomePage.jsx

@@ -3,7 +3,7 @@ import Styled from "styled-components";
 
 function HomePage() {
     return (
-        <div>hey</div>
+        <div><p>heywhatsup</p></div>
     );
 }