fix: properly update issue and request counts in certain scenarios (#4051)

src/components/Layout/MobileMenu/index.tsx

@@ -33,6 +33,8 @@ import { useIntl } from 'react-intl';
 interface MobileMenuProps {
   pendingRequestsCount: number;
   openIssuesCount: number;
+  revalidateIssueCount: () => void;
+  revalidateRequestsCount: () => void;
 }
 
 interface MenuLink {
@@ -50,6 +52,8 @@ interface MenuLink {
 const MobileMenu = ({
   pendingRequestsCount,
   openIssuesCount,
+  revalidateIssueCount,
+  revalidateRequestsCount,
 }: MobileMenuProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const intl = useIntl();
@@ -250,7 +254,7 @@ const MobileMenu = ({
                               router.pathname.match(link.activeRegExp)
                                 ? 'border-indigo-600 from-indigo-700 to-purple-700'
                                 : 'border-indigo-500 from-indigo-600 to-purple-600'
-                            } !px-1 leading-none`}
+                            } !px-1 !py-[1px] leading-none`}
                           >
                             {pendingRequestsCount}
                           </Badge>

src/components/Layout/Sidebar/index.tsx

@@ -19,7 +19,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { Fragment, useEffect, useRef } from 'react';
-import { useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 export const menuMessages = defineMessages('components.Layout.Sidebar', {
   dashboard: 'Discover',
@@ -37,6 +37,8 @@ interface SidebarProps {
   setClosed: () => void;
   pendingRequestsCount: number;
   openIssuesCount: number;
+  revalidateIssueCount: () => void;
+  revalidateRequestsCount: () => void;
 }
 
 interface SidebarLinkProps {
@@ -121,6 +123,8 @@ const Sidebar = ({
   setClosed,
   pendingRequestsCount,
   openIssuesCount,
+  revalidateIssueCount,
+  revalidateRequestsCount,
 }: SidebarProps) => {
   const navRef = useRef<HTMLDivElement>(null);
   const router = useRouter();

src/components/Layout/index.tsx

@@ -23,8 +23,18 @@ const Layout = ({ children }: LayoutProps) => {
   const router = useRouter();
   const { currentSettings } = useSettings();
   const { setLocale } = useLocale();
-  const { data: requestResponse } = useSWR('/api/v1/request/count');
-  const { data: issueResponse } = useSWR('/api/v1/issue/count');
+  const { data: requestResponse, mutate: revalidateRequestsCount } = useSWR(
+    '/api/v1/request/count',
+    {
+      revalidateOnMount: true,
+    }
+  );
+  const { data: issueResponse, mutate: revalidateIssueCount } = useSWR(
+    '/api/v1/issue/count',
+    {
+      revalidateOnMount: true,
+    }
+  );
 
   useEffect(() => {
     if (setLocale && user) {
@@ -61,13 +71,17 @@ const Layout = ({ children }: LayoutProps) => {
       <Sidebar
         open={isSidebarOpen}
         setClosed={() => setSidebarOpen(false)}
-        pendingRequestsCount={requestResponse?.pending}
-        openIssuesCount={issueResponse?.open}
+        pendingRequestsCount={requestResponse?.pending ?? 0}
+        openIssuesCount={issueResponse?.open ?? 0}
+        revalidateIssueCount={() => revalidateIssueCount()}
+        revalidateRequestsCount={() => revalidateRequestsCount()}
       />
       <div className="sm:hidden">
         <MobileMenu
-          pendingRequestsCount={requestResponse?.pending}
-          openIssuesCount={issueResponse?.open}
+          pendingRequestsCount={requestResponse?.pending ?? 0}
+          openIssuesCount={issueResponse?.open ?? 0}
+          revalidateIssueCount={() => revalidateIssueCount()}
+          revalidateRequestsCount={() => revalidateRequestsCount()}
         />
       </div>