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

src/components/IssueModal/CreateIssueModal/index.tsx

@@ -15,7 +15,7 @@ import { Field, Formik } from 'formik';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
-import useSWR from 'swr';
+import useSWR, { mutate } from 'swr';
 import * as Yup from 'yup';
 
 const messages = defineMessages({
@@ -130,6 +130,8 @@ const CreateIssueModal = ({
                 autoDismiss: true,
               }
             );
+
+            mutate('/api/v1/issue/count');
           }
 
           if (onCancel) {

src/components/Layout/MobileMenu/index.tsx

@@ -25,12 +25,14 @@ import {
 } from '@heroicons/react/24/solid';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { cloneElement, useRef, useState } from 'react';
+import { cloneElement, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 interface MobileMenuProps {
   pendingRequestsCount: number;
   openIssuesCount: number;
+  revalidateIssueCount: () => void;
+  revalidateRequestsCount: () => void;
 }
 
 interface MenuLink {
@@ -48,6 +50,8 @@ interface MenuLink {
 const MobileMenu = ({
   pendingRequestsCount,
   openIssuesCount,
+  revalidateIssueCount,
+  revalidateRequestsCount,
 }: MobileMenuProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const intl = useIntl();
@@ -134,6 +138,21 @@ const MobileMenu = ({
       })
   );
 
+  useEffect(() => {
+    if (openIssuesCount) {
+      revalidateIssueCount();
+    }
+
+    if (pendingRequestsCount) {
+      revalidateRequestsCount();
+    }
+  }, [
+    revalidateIssueCount,
+    revalidateRequestsCount,
+    pendingRequestsCount,
+    openIssuesCount,
+  ]);
+
   return (
     <div className="fixed bottom-0 left-0 right-0 z-50">
       <Transition
@@ -221,7 +240,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

@@ -15,7 +15,7 @@ import {
 } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { Fragment, useRef } from 'react';
+import { Fragment, useEffect, useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 export const menuMessages = defineMessages({
@@ -33,6 +33,8 @@ interface SidebarProps {
   setClosed: () => void;
   pendingRequestsCount: number;
   openIssuesCount: number;
+  revalidateIssueCount: () => void;
+  revalidateRequestsCount: () => void;
 }
 
 interface SidebarLinkProps {
@@ -106,6 +108,8 @@ const Sidebar = ({
   setClosed,
   pendingRequestsCount,
   openIssuesCount,
+  revalidateIssueCount,
+  revalidateRequestsCount,
 }: SidebarProps) => {
   const navRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
@@ -113,6 +117,21 @@ const Sidebar = ({
   const { hasPermission } = useUser();
   useClickOutside(navRef, () => setClosed());
 
+  useEffect(() => {
+    if (openIssuesCount) {
+      revalidateIssueCount();
+    }
+
+    if (pendingRequestsCount) {
+      revalidateRequestsCount();
+    }
+  }, [
+    revalidateIssueCount,
+    revalidateRequestsCount,
+    pendingRequestsCount,
+    openIssuesCount,
+  ]);
+
   return (
     <>
       <div className="lg:hidden">

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>