Prettier, function components

jsconfig.json

@@ -3,4 +3,4 @@
     "baseUrl": "src"
   },
   "include": ["src"]
-}
+}

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "husky": "^3.0.4",
     "lint-staged": "^9.2.5",
-    "prettier": "^1.18.2",
+    "prettier": "^2.0.5",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-router-dom": "^5.0.1",
@@ -38,5 +38,10 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-router-dom": "^5.1.5"
+  }
 }

public/googleab27cd38daab0cc8.html

@@ -1 +1 @@
-google-site-verification: googleab27cd38daab0cc8.html
+google-site-verification: googleab27cd38daab0cc8.html

src/App.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
@@ -7,32 +7,30 @@ import Copy from './Pages/Copy';
 
 import './App.css';
 
-class App extends Component {
-  render() {
-    return (
-      <Router>
-        <Switch>
-          <Route path="/" exact component={Home} />
-          <Route path="/copy" exact component={Copy} />
-        </Switch>
-        <ToastContainer
-          className="toast-container"
-          bodyClassName="toast-body"
-          toastClassName="toast-class"
-          progressClassName="toast-progress"
-          position="bottom-right"
-          autoClose={2000}
-          hideProgressBar={false}
-          newestOnTop
-          closeOnClick
-          rtl={false}
-          pauseOnVisibilityChange
-          draggable
-          pauseOnHover={false}
-        />
-      </Router>
-    );
-  }
+function App() {
+  return (
+    <Router>
+      <Switch>
+        <Route path="/" exact component={Home} />
+        <Route path="/copy" exact component={Copy} />
+      </Switch>
+      <ToastContainer
+        className="toast-container"
+        bodyClassName="toast-body"
+        toastClassName="toast-class"
+        progressClassName="toast-progress"
+        position="bottom-right"
+        autoClose={2000}
+        hideProgressBar={false}
+        newestOnTop
+        closeOnClick
+        rtl={false}
+        pauseOnVisibilityChange
+        draggable
+        pauseOnHover={false}
+      />
+    </Router>
+  );
 }
 
 export default App;

src/Components/MainContainer.jsx

@@ -3,14 +3,12 @@ import NavBar from './NavBar';
 
 import './MainContainer.css';
 
-export default class MainContainer extends React.Component {
-  render = () => {
-    return (
-      <div className="main-container">
-        <NavBar />
-        <div className="children-container">{this.props.children}</div>
-        <div id="background-div"></div>
-      </div>
-    );
-  };
+export default function MainContainer({ children }) {
+  return (
+    <div className="main-container">
+      <NavBar />
+      <div className="children-container">{children}</div>
+      <div id="background-div"></div>
+    </div>
+  );
 }

src/Components/NavBar.jsx

@@ -1,62 +1,49 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import { NavLink } from 'react-router-dom';
 
 import './NavBar.css';
 
-export default class NavBar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      navbarClassName: 'main-nav'
-    };
-  }
+export default function NavBar() {
+  const [navbarClassName, setNavbarClassName] = useState('main-nav');
 
-  toggleResponsiveMenu = () => {
-    const { navbarClassName } = this.state;
+  const toggleResponsiveMenu = useCallback(() => {
     if (navbarClassName === 'main-nav') {
-      this.setState({
-        navbarClassName: 'main-nav navbar-mobile'
-      });
+      setNavbarClassName('main-nav navbar-mobile');
     } else {
-      this.setState({
-        navbarClassName: 'main-nav'
-      });
+      setNavbarClassName('main-nav');
     }
-  };
+  }, [navbarClassName]);
 
-  render = () => {
-    const { navbarClassName } = this.state;
-    return (
-      <nav className="navbar">
-        <span className="navbar-toggle" onClick={this.toggleResponsiveMenu}>
-          <i className="material-icons">menu</i>
-        </span>
-        <NavLink to="/" className="logo">
-          copyfi
-        </NavLink>
-        <ul className={navbarClassName}>
-          <li>
-            <a
-              href="https://open.spotify.com"
-              className="nav-links"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Go To Spotify
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://github.com/LfxB/copyfi"
-              className="nav-links"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Source
-            </a>
-          </li>
-        </ul>
-      </nav>
-    );
-  };
+  return (
+    <nav className="navbar">
+      <span className="navbar-toggle" onClick={toggleResponsiveMenu}>
+        <i className="material-icons">menu</i>
+      </span>
+      <NavLink to="/" className="logo">
+        copyfi
+      </NavLink>
+      <ul className={navbarClassName}>
+        <li>
+          <a
+            href="https://open.spotify.com"
+            className="nav-links"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Go To Spotify
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://github.com/LfxB/copyfi"
+            className="nav-links"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Source
+          </a>
+        </li>
+      </ul>
+    </nav>
+  );
 }

src/Components/SomethingWentWrong.jsx

@@ -3,30 +3,26 @@ import MainContainer from 'Components/MainContainer';
 
 import './SomethingWentWrong.css';
 
-export default class SomethingWentWrong extends React.Component {
-  render = () => {
-    const { message } = this.props;
-    return (
-      <MainContainer>
-        <div className="something-wrong">
-          {!message && (
+export default function SomethingWentWrong({ message }) {
+  return (
+    <MainContainer>
+      <div className="something-wrong">
+        {!message && (
+          <div>
+            Something went wrong. Please <a href="/">go back</a> and try again.
+          </div>
+        )}
+        {message && (
+          <React.Fragment>
+            <code>
+              <pre>{message}</pre>
+            </code>
             <div>
-              Something went wrong. Please <a href="/">go back</a> and try
-              again.
+              Click <a href="/">here</a> to try again.
             </div>
-          )}
-          {message && (
-            <React.Fragment>
-              <code>
-                <pre>{message}</pre>
-              </code>
-              <div>
-                Click <a href="/">here</a> to try again.
-              </div>
-            </React.Fragment>
-          )}
-        </div>
-      </MainContainer>
-    );
-  };
+          </React.Fragment>
+        )}
+      </div>
+    </MainContainer>
+  );
 }

src/Helpers/hash.js

@@ -1,4 +1,4 @@
-export const getHashFragment = location => {
+export const getHashFragment = (location) => {
   return location.hash
     .substring(1)
     .split('&')

src/Helpers/spotify.js

@@ -9,10 +9,10 @@ const scopes = [
   'playlist-modify-private',
   'user-read-email',
   'user-read-private',
-  'user-read-playback-state'
+  'user-read-playback-state',
 ];
 
-const makeid = length => {
+const makeid = (length) => {
   var result = '';
   var characters =
     'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@@ -34,13 +34,13 @@ export const authLink =
   '&response_type=token&show_dialog=true&state=' +
   makeid(16);
 
-export const getCurrentUserProfile = async token => {
+export const getCurrentUserProfile = async (token) => {
   let response = await fetch(`https://api.spotify.com/v1/me`, {
     method: 'GET',
     headers: new Headers({
       Accept: 'application/json',
-      Authorization: `Bearer ${token}`
-    })
+      Authorization: `Bearer ${token}`,
+    }),
   });
   let data = await response.json();
   return data;
@@ -65,13 +65,13 @@ export const createPlaylist = async (token, userId, name, description) => {
       method: 'POST',
       headers: new Headers({
         Accept: 'application/json',
-        Authorization: `Bearer ${token}`
+        Authorization: `Bearer ${token}`,
       }),
       body: JSON.stringify({
         name,
         description,
-        public: true
-      })
+        public: true,
+      }),
     }
   );
   let data = await response.json();
@@ -84,8 +84,8 @@ export const getPlaylistInfo = async (token, playlistId) => {
     method: 'GET',
     headers: new Headers({
       Accept: 'application/json',
-      Authorization: `Bearer ${token}`
-    })
+      Authorization: `Bearer ${token}`,
+    }),
   });
   let data = await response.json();
   return data;
@@ -99,8 +99,8 @@ export const getPlaylistTracks = async (token, playlistId, next) => {
     method: 'GET',
     headers: new Headers({
       Accept: 'application/json',
-      Authorization: `Bearer ${token}`
-    })
+      Authorization: `Bearer ${token}`,
+    }),
   });
   let data = await response.json();
   return data;
@@ -113,33 +113,33 @@ export const addTracksToPlaylist = async (token, playlistId, tracklist) => {
       method: 'POST',
       headers: new Headers({
         Accept: 'application/json',
-        Authorization: `Bearer ${token}`
+        Authorization: `Bearer ${token}`,
       }),
       body: JSON.stringify({
-        uris: tracklist
-      })
+        uris: tracklist,
+      }),
     }
   );
   let data = await response.json();
   return data;
 };
 
-export const getCurrentPlaybackInfo = async token => {
+export const getCurrentPlaybackInfo = async (token) => {
   let response = await fetch('https://api.spotify.com/v1/me/player', {
     method: 'GET',
     headers: new Headers({
       Accept: 'application/json',
-      Authorization: `Bearer ${token}`
-    })
+      Authorization: `Bearer ${token}`,
+    }),
   });
 
   if (!response.ok) {
     return {
-      error: true
+      error: true,
     };
   }
 
-  return response.text().then(text => {
+  return response.text().then((text) => {
     return text ? JSON.parse(text) : { error: true };
   });
 };