Turned components into pages and used router.push to render page

Author: Anindya-K-Das

src/components/settingComponents/generalPage.jsx

@@ -11,6 +11,7 @@ import { useEffect } from 'react';
 
 export default function General(){
   const router = useRouter();
+  
   const [isPopupOpen, setIsPopupOpen] = useState(false);
   const [selectedImage, setSelectedImage] = useState(null);
 

src/components/settingComponents/sidebar.jsx

@@ -1,46 +1,39 @@
 import Link from 'next/link';
+import { useRouter } from 'next/router'
 
 export default function Sidebar(){
-  
+  const router = useRouter()
     return(
          <div
               className="  mt-10 flex-none border-r pl-10 pr-10 text-gray-900"
               style={{ borderColor: '#212121' }}
             >
               <ul className="mr-2 py-2">
                 <li className="py-1">
-                  <Link
-                    href="../settings"
-                    className="px-2 py-2 text-lg  font-medium text-white"
-                    
-                  >
-                    {' '}
+                <button className="px-2 py-1  text-lg font-medium text-white hover:text-gray-400" 
+                  onClick={() =>router.push('../settings',null, { shallow: true })}>
                     General
-                  </Link>
+                </button>
                 </li>
                 <li className="py-1 ">
-                  <Link
-                    href="../settings?loc=security"
-                    className="px-2 py-1  text-lg font-medium text-white hover:text-gray-400"
-                  >
+                  
+                <button className="px-2 py-1  text-lg font-medium text-white hover:text-gray-400" 
+                  onClick={() =>router.push('../settings/security',null, { shallow: true })}>
                     Security
-                  </Link>
+                </button>
                 </li>
                 <li className="py-1 ">
-                  <Link
-                    href="../settings?loc=preferences"
-                    className="px-2 py-1  text-lg font-medium text-white hover:text-gray-400"
-                  >
+                <button className="px-2 py-1  text-lg font-medium text-white hover:text-gray-400" 
+                  onClick={() =>router.push('../settings/preferences',null, { shallow: true })}>
                     Email Preferences
-                  </Link>
+                </button>
+    
                 </li>
                 <li className="py-1 ">
-                  <Link
-                    href="../settings?loc=billing"
-                    className="px-2 py-1  text-lg font-medium text-white hover:text-gray-400"
-                  >
+                <button className="px-2 py-1  text-lg font-medium text-white hover:text-gray-400" 
+                  onClick={() =>router.push('../settings/billing',null, { shallow: true })}>
                     Billing
-                  </Link>
+                </button>
                 </li>
               </ul>
             </div>

src/pages/settings.jsx

@@ -5,10 +5,8 @@ import { useEffect } from 'react';
 import { useState } from 'react';
 import { getCookie } from '@/utils/request';
 import General from '@/components/settingComponents/generalPage';
-import Security from '@/components/settingComponents/securityPage';
 import Sidebar from '@/components/settingComponents/sidebar';
-import Billing from '@/components/settingComponents/billingPage';
-import Preferences from '@/components/settingComponents/preferencesPage';
+
 import {
   updatePassword,
   getAuth,
@@ -38,11 +36,6 @@ export default function Dashboard() {
   const [billing, setbilling] = useState(false);
   const [username, setUsername] = useState('');
 
-
-  const [selectedImage, setSelectedImage] = useState(null);
-  const [isPopupOpen, setIsPopupOpen] = useState(false);
-  const [pfp, setPfp] = useState(`https://robohash.org/KshitijIsCool.png?set=set1&size=150x150`);
-
   var pfpString = '';
   var pfpChanged = false;
 
@@ -165,7 +158,32 @@ export default function Dashboard() {
     }
   }
 
+  function savePreferences() {
+    document.getElementById('savePreferences').innerHTML = 'Saving...';
+
+    var data = JSON.stringify({
+      FRIEND_ACCEPT: document.getElementById('friend-notif').checked,
+      CHALLENGE_VERIFY: document.getElementById('challenge-notif').checked,
+    });
+
+    var xhr = new XMLHttpRequest();
+
+    xhr.addEventListener('readystatechange', function() {
+      if (this.readyState === 4) {
+        document.getElementById('savePreferences').innerHTML = 'Save';
+      }
+    });
+
+    xhr.open('PUT', `${process.env.NEXT_PUBLIC_API_URL}/account/preferences`);
+
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    let token = getCookie();
+    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
+    xhr.withCredentials = true;
 
+    xhr.send(data);
+  }
+  
   function loadPreferences() {
     // WARNING: For GET requests, body is set to null by browsers.
 
@@ -218,34 +236,12 @@ export default function Dashboard() {
 
           {general && (              
             <div id="general" className="">
-                {/*DIV CONTAINING THE BODY OF GENERAL SECTION*/}
+                {/*CONTAINING THE BODY OF GENERAL SECTION*/}
                 <General/>
             </div>
           )}
 
-          {billing && (
-            <div id="general" className="">
-                {/*DIV CONTAINING BODY OF THE BILLING SECTION*/}
-                <Billing/>
-            </div>
-          )}
-
-          {security && (
-            <div id="security" className="">
-                {/*DIV CONTAINING BODY OF THE SECURITY SECTION*/}
-                <Security/>
-            </div>
-          )}
-
-
-          {preferences && (
-            <div id="preferences" className="">
-              
-                {/*DIV CONTAINING BODY OF THE PREFERENCES SECTION*/}
-                <Preferences/>
-              
-            </div>
-          )}
+         
       </div>
 
       <Footer />