resolve API keys and plan redirection

Author: dharmesh03

src/components/global/navbar/User.tsx

@@ -18,18 +18,18 @@ function User() {
     const handleClick = (event: React.MouseEvent<HTMLElement>) => {
         setAnchorEl(event.currentTarget);
     };
-    const {data: sessions} = useSession()
+    const { data: sessions } = useSession()
     const router = useRouter();
 
-    const {id_token, idToken} = sessions?.user as { id_token?: string, idToken?: string } || {};
+    const { id_token, idToken } = sessions?.user as { id_token?: string, idToken?: string} || {};
     const handleClose = (url?: string) => {
         setAnchorEl(null);
         url && router.push(url)
     };
 
     const dropdown = [
         ["My Profile", "/my-profile", "/images/icon-container (2).svg"],
-        ["API Plans", "/apiplans", "/images/API.svg"],
+        ["API Plans", "https://adityaagarwal.notion.site/Products-Services-c3633ff3f9ea4aeeb1892ae1303439ba#4b87ad9fa7a346548e1c7cd71803821d", "/images/API.svg"],
         ["API Keys", "/apiKeys", "images/shield-key.svg"],
     ]
     const propsConfig = {

src/views/ApiKeys/index.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { useSession } from "next-auth/react"
 import Table, { tableDataT } from '@/components/common/table/Table';
 import table_data from './table_data.json';
+import { useRouter } from "next/router";
 import moment from 'moment';
 import { ToastContainer , toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
@@ -16,25 +17,26 @@ function APIKeys() {
     const [tableLoading] = useState(false);
     const [captionText, setCaptionText] = useState('');
     const { data: sessions } = useSession()
-    const { id_token, sub } = sessions?.user as { id_token: string; sub: string } || {};
+    const { id_token, sub, idToken } = sessions?.user as { id_token: string; idToken: string; sub: string } || {};
+    const router = useRouter();
 
-    useEffect(() => {
-        const fetchData = async () => {
-            if (!sub) return;
-            try {
-                const { data } = await fetchAPIKeyList(id_token, sub);
-                if (Array.isArray(data.data.apiKeys)) {
-                    const newRows = data.data.apiKeys.map((item :any) => ({
-                        keys: item.value,
-                        created: moment(item.createdDate).format('MM/DD/yyyy'),
-                    }));
-                    setApiKeysTable((prevState) => ({ ...prevState, rows: newRows }));
-                }
-            } catch (error) {
-                console.error(error);
+    const fetchData = async () => {
+        if (!sub) return;
+        try {
+            const { data } = await fetchAPIKeyList(id_token || idToken, sub);
+            if (Array.isArray(data.data.apiKeys)) {
+                const newRows = data.data.apiKeys.map((item :any) => ({
+                    keys: item.value,
+                    created: moment(item.createdDate).format('MM/DD/yyyy'),
+                }));
+                setApiKeysTable((prevState) => ({ ...prevState, rows: newRows }));
             }
-        };
+        } catch (error) {
+            console.error(error);
+        }
+    };
 
+    useEffect(() => {
         fetchData();
     }, [sub]);
 
@@ -43,8 +45,11 @@ function APIKeys() {
     }, [apiKeysTable]);
 
     const handleCreateApiKey = () => {
-        createAPIKey(id_token, toast);
+        createAPIKey(id_token || idToken, toast).then(()=>{
+            fetchData();
+        });
     }
+    const apiPlanUrl = "https://adityaagarwal.notion.site/Products-Services-c3633ff3f9ea4aeeb1892ae1303439ba#4b87ad9fa7a346548e1c7cd71803821d"
 
     return (
         <div className="">
@@ -66,10 +71,11 @@ function APIKeys() {
                     </button>
                     <button
                         className="text-sm border border-dark-200 text-md gap-2 inline-flex tracking-[1.25px] pt-[9px] pb-[9px] px-4 uppercase  rounded bg-white"
+                        onClick={()=> router.push(apiPlanUrl)}
                         style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}
                     >
                         <img className="-translate-y-[1px]" src="/images/api.svg" alt="" />
-                        <span>Check Api Plan</span>
+                        <span>CHECK API PLANS</span>
                     </button>
                 </div>
             </div>