From e157ae44145187374c0faf380b96d68e037249fb Mon Sep 17 00:00:00 2001
From: Kaushik Narayan R <rknarayan02@gmail.com>
Date: Thu, 13 Feb 2025 10:47:54 -0700
Subject: [PATCH] bleh, and spotify redirect uri

https://developer.spotify.com/blog/2025-02-12-increasing-the-security-requirements-for-integrating-with-spotify
---
 .env.development                |  2 +-
 src/components/Navbar/index.tsx |  1 +
 src/pages/HowToUse/index.tsx    | 11 +++++++++++
 src/pages/Login/index.tsx       |  2 +-
 src/routes/AllRoutes.tsx        |  2 ++
 5 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/HowToUse/index.tsx

diff --git a/.env.development b/.env.development
index 1169ce8..54711e2 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1 @@
-REACT_APP_API_BASE_URL = "http://localhost:9001"
+REACT_APP_API_BASE_URL = "http://127.0.0.1:9001"
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 0199a75..32d6d91 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -12,6 +12,7 @@ const Navbar = () => {
     <nav className={`${styles.navbar_wrapper} custom_scrollbar`}>
       <StyledNavLink path="/" text="About" />
       <StyledNavLink path="/graph" text="Graph" />
+      <StyledNavLink path="/how-to" text="How To" />
       {auth === true ? (
         <StyledNavLink path="/logout" text="Logout" />
       ) : (
diff --git a/src/pages/HowToUse/index.tsx b/src/pages/HowToUse/index.tsx
new file mode 100644
index 0000000..1006e0e
--- /dev/null
+++ b/src/pages/HowToUse/index.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const HowToUse = () => {
+  return (
+    <div>
+      <h1>How To Use?</h1>
+    </div>
+  );
+};
+
+export default HowToUse;
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index f9acae1..dc4baa4 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -11,7 +11,7 @@ const Login = () => {
 
     return () => clearTimeout(timeoutID);
   }, []);
-  return <div className={styles.login_wrapper}>Redirecting to Spotify...</div>;
+  return <div className={styles.login_wrapper}>Logging in to Spotify...</div>;
 };
 
 export default Login;
diff --git a/src/routes/AllRoutes.tsx b/src/routes/AllRoutes.tsx
index 1571321..7e68b45 100644
--- a/src/routes/AllRoutes.tsx
+++ b/src/routes/AllRoutes.tsx
@@ -8,6 +8,7 @@ import PageNotFound from "../pages/PageNotFound";
 import Graph from "../pages/Graph";
 import Login from "../pages/Login";
 import Logout from "../pages/Logout";
+import HowToUse from "../pages/HowToUse";
 
 const AllRoutes = () => {
   return (
@@ -26,6 +27,7 @@ const AllRoutes = () => {
 
       {/* Common routes */}
       <Route path="/" element={<Landing />} />
+      <Route path="/how-to" element={<HowToUse />} />
 
       {/* 404 */}
       <Route path="/page-not-found" element={<PageNotFound />} />