From f485299d453bf8b455e5ce7afb531893a0a3ed98 Mon Sep 17 00:00:00 2001
From: Levar-B <l.bobbsemple@gmail.com>
Date: Mon, 24 Oct 2022 14:34:34 -0400
Subject: [PATCH] userSuggestions not active on refresh

---
 src/components/account/Profile.jsx | 98 +++++++++++++++---------------
 1 file changed, 49 insertions(+), 49 deletions(-)

diff --git a/src/components/account/Profile.jsx b/src/components/account/Profile.jsx
index e36e526..d95f132 100644
--- a/src/components/account/Profile.jsx
+++ b/src/components/account/Profile.jsx
@@ -3,59 +3,59 @@ import { useSelector } from 'react-redux';
 import { Link, Outlet, useOutlet } from 'react-router-dom';
 
 const Profile = () => {
-  const profile = useSelector((state) => state.profile);
-  const { props } = useOutlet();
-  const tabURL = props.children.props.match.route.path;
+	const profile = useSelector((state) => state.profile);
+	const { props } = useOutlet();
+	const tabURL = props.children.props.match.route.path;
 
-  useEffect(() => {
-    document.querySelector(`button[id=${tabURL}]`)?.classList.add('active');
-  }, []);
-  useEffect(() => {}, [profile]);
-  useEffect(() => {}, [OnClick]);
+	useEffect(() => {
+		document.querySelector(`button[id=${tabURL}]`)?.classList.add('active');
+	}, []);
+	useEffect(() => {}, [profile]);
+	useEffect(() => {}, [OnClick]);
 
-  const OnClick = (event) => {
-    let tablinks = document.getElementsByClassName('tab');
-    for (let i = 0; i < tablinks.length; i++) {
-      tablinks[i].className = tablinks[i].className.replace(' active', '');
-    }
+	const OnClick = (event) => {
+		let tablinks = document.getElementsByClassName('tab');
+		for (let i = 0; i < tablinks.length; i++) {
+			tablinks[i].className = tablinks[i].className.replace(' active', '');
+		}
 
-    if (event.target) {
-      event.target.className += ' active';
-    }
-  };
+		if (event.target) {
+			event.target.className += ' active';
+		}
+	};
 
-  return (
-    <div className="profile">
-      <nav>
-        <Link to="likes">
-          <button className="tab" id="likes" onClick={OnClick}>
-            Likes
-          </button>
-        </Link>
-        <Link to="dislikes">
-          <button className="tab" id="dislikes" onClick={OnClick}>
-            Dislikes
-          </button>
-        </Link>
-        <Link to="edit">
-          <button className="tab" id="edit" onClick={OnClick}>
-            Profile
-          </button>
-        </Link>
-        <Link to="history">
-          <button className="tab" id="history" onClick={OnClick}>
-            History
-          </button>
-        </Link>
-        <Link to={'userSuggestions'}>
-          <button className="tab" id="user-suggestions" onClick={OnClick}>
-            Suggestions
-          </button>
-        </Link>
-      </nav>
-      <Outlet />
-    </div>
-  );
+	return (
+		<div className="profile">
+			<nav>
+				<Link to="likes">
+					<button className="tab" id="likes" onClick={OnClick}>
+						Likes
+					</button>
+				</Link>
+				<Link to="dislikes">
+					<button className="tab" id="dislikes" onClick={OnClick}>
+						Dislikes
+					</button>
+				</Link>
+				<Link to="edit">
+					<button className="tab" id="edit" onClick={OnClick}>
+						Profile
+					</button>
+				</Link>
+				<Link to="history">
+					<button className="tab" id="history" onClick={OnClick}>
+						History
+					</button>
+				</Link>
+				<Link to={'userSuggestions'}>
+					<button className="tab" id="userSuggestions" onClick={OnClick}>
+						Suggestions
+					</button>
+				</Link>
+			</nav>
+			<Outlet />
+		</div>
+	);
 };
 
 export default Profile;