Un 535 rtk cache

src/common/components/BugDetail/Tags.tsx

@@ -30,16 +30,27 @@ export default ({
   };
 }) => {
   const { t } = useTranslation();
-  const [options, setOptions] = useState<{ id: number; label: string }[]>([]);
-
-  const { tags: bugTags } = bug;
-  const [patchBug] = usePatchCampaignsByCidBugsAndBidMutation();
+  const [options, setOptions] = useState<
+    { id: number; label: string; selected?: boolean }[]
+  >([]);
+  const [bugTags, setBugTags] = useState<
+    {
+      id: number;
+      label: string;
+    }[]
+  >([
+    ...(bug.tags?.map((tag) => ({
+      id: tag.tag_id,
+      label: tag.name,
+    })) ?? []),
+  ]);
 
   const {
-    isLoading: isLoadingCampaign,
-    isFetching: isFetchingCampaign,
-    isError: isErrorCampaign,
+    isLoading: isLoadingCampaignTags,
+    isFetching: isFetchingCampaignTags,
+    isError: isErrorCampaignTags,
     data: cpTags,
+    refetch: refetchCpTags,
   } = useGetCampaignsByCidTagsQuery({
     cid: bug.campaign_id.toString() ?? '0',
   });
@@ -50,29 +61,34 @@ export default ({
         cpTags.map((tag) => ({
           id: tag.tag_id,
           label: tag.display_name,
-          selected: bugTags
-            ? bugTags.some((selectedTag) => selectedTag.tag_id === tag.tag_id)
-            : false,
+          selected: bugTags.some((bt) => bt.id === tag.tag_id),
         }))
       );
     }
   }, [cpTags, bugTags]);
 
-  if (isErrorCampaign) return null;
+  const [patchBug] = usePatchCampaignsByCidBugsAndBidMutation();
+
+  if (isErrorCampaignTags) return null;
 
   return (
     <Container className="responsive-container">
       <Label style={{ marginBottom: globalTheme.space.xxs }}>
         {t('__BUGS_PAGE_BUG_DETAIL_TAGS_LABEL')}
       </Label>
-      {isLoadingCampaign || isFetchingCampaign ? (
+      {!bug || !cpTags || isLoadingCampaignTags ? (
         <Skeleton
           height="30px"
           style={{ borderRadius: globalTheme.borderRadii.md }}
         />
       ) : (
-        <div className="max-width-6-sm">
+        <div
+          className="max-width-6-sm"
+          style={{ opacity: isFetchingCampaignTags ? 0.5 : 1 }}
+        >
           <MultiSelect
+            options={options}
+            selectedItems={options.filter((o) => o.selected)}
             creatable
             maxItems={4}
             size="small"
@@ -84,7 +100,7 @@ export default ({
                 `${t('__BUGS_PAGE_BUG_DETAIL_TAGS_ADD_NEW')} "${value}"`,
             }}
             onChange={async (selectedItems, newLabel) => {
-              const { tags } = await patchBug({
+              await patchBug({
                 cid: bug.campaign_id.toString(),
                 bid: bug.id.toString(),
                 body: {
@@ -103,23 +119,39 @@ export default ({
                       : []),
                   ],
                 },
-              }).unwrap();
+              })
+                .unwrap()
+                .then(({ tags }) => {
+                  const selectedTags = tags
+                    ? tags.map((tag) => ({
+                        id: tag.tag_id,
+                        label: tag.tag_name,
+                      }))
+                    : [];
 
-              const results = tags
-                ? tags.map((tag) => ({
-                    id: tag.tag_id,
-                    label: tag.tag_name,
-                  }))
-                : [];
-              const unselectedItems = options.filter(
-                (o) => !results.find((r) => r.id === o.id)
-              );
-              setOptions([
-                ...unselectedItems,
-                ...results.map((r) => ({ ...r, selected: true })),
-              ]);
+                  // Update bug tags
+                  setBugTags(selectedTags);
+
+                  const unselectedTags = options.filter(
+                    (o) => !selectedTags.find((r) => r.id === o.id)
+                  );
+
+                  const newOptions = [
+                    ...selectedTags.map((r) => ({ ...r, selected: true })),
+                    ...unselectedTags.map((r) => ({ ...r, selected: false })),
+                  ];
+
+                  // Update options
+                  setOptions(newOptions);
+
+                  // Refetch cp tags to get the new ones
+                  refetchCpTags();
+                })
+                .catch((err) => {
+                  // eslint-disable-next-line no-console
+                  console.error(err);
+                });
             }}
-            options={options}
           />
         </div>
       )}

src/features/api/apiTags.ts

@@ -54,13 +54,13 @@ unguessApi.enhanceEndpoints({
       providesTags: ['Campaigns'],
     },
     getCampaignsByCidBugs: {
-      providesTags: ['Campaigns'],
+      providesTags: ['Bugs'],
     },
     getCampaignsByCidWidgets: {
       providesTags: ['Bugs'],
     },
     patchCampaignsByCidBugsAndBid: {
-      invalidatesTags: ['Tags'],
+      invalidatesTags: ['Bugs'],
     },
     getCampaignsByCidTags: {
       providesTags: ['Tags'],

src/pages/Bugs/Content/BugPreview.tsx

@@ -53,10 +53,15 @@ export const BugPreview = ({
     isLoading,
     isFetching,
     isError,
-  } = useGetCampaignsByCidBugsAndBidQuery({
-    cid: campaignId.toString(),
-    bid: bugId.toString(),
-  });
+  } = useGetCampaignsByCidBugsAndBidQuery(
+    {
+      cid: campaignId.toString(),
+      bid: bugId.toString(),
+    },
+    {
+      refetchOnMountOrArgChange: true,
+    }
+  );
   const currentBugId = getSelectedBugId();
 
   // Reset container scroll position when bug changes

src/pages/Bugs/PageHeader/Tools/index.tsx

@@ -11,7 +11,7 @@ import { StatusMeta } from 'src/common/components/meta/StatusMeta';
 import { CampaignStatus } from 'src/types';
 import { PageMeta } from 'src/common/components/PageMeta';
 import { UniqueBugsCounter } from './UniqueBugsCounter';
-import { useCampaign } from './useCampaign';
+import { useCampaignBugs } from './useCampaignBugs';
 
 const Container = styled.div`
   display: flex;
@@ -37,25 +37,38 @@ export const Tools = ({
 }) => {
   const { t } = useTranslation();
   const integrationCenterUrl = getLocalizeIntegrationCenterRoute(campaignId);
-  const { isLoading, status, severities } = useCampaign(campaignId);
+  const {
+    isCampaignLoading,
+    isCampaignBugsLoading,
+    isCampaignFetching,
+    isCampaignBugsFetching,
+    severities,
+    status,
+  } = useCampaignBugs(campaignId);
 
-  if (isLoading || !status || !severities)
-    return <Skeleton width="200px" height="20px" />;
+  if (isCampaignLoading || isCampaignBugsLoading) {
+    return <Skeleton width="200px" height="30px" />;
+  }
 
   return (
-    <Container>
+    <Container
+      style={{
+        opacity: isCampaignFetching || isCampaignBugsFetching ? 0.5 : 1,
+      }}
+    >
       <PageMeta>
         <UniqueBugsCounter campaignId={campaignId} />
-        {Object.keys(severities).map((severity) => (
-          <SeverityMeta
-            key={severity}
-            counter={severities[severity as Severities]}
-            severity={severity as Severities}
-            size="large"
-          />
-        ))}
+        {severities &&
+          Object.keys(severities).map((severity) => (
+            <SeverityMeta
+              key={severity}
+              counter={severities[severity as Severities]}
+              severity={severity as Severities}
+              size="large"
+            />
+          ))}
         <Pipe />
-        <StatusMeta status={status.name as CampaignStatus} />
+        {status && <StatusMeta status={status.name as CampaignStatus} />}
       </PageMeta>
       <ButtonsWrapper>
         <Button

src/pages/Bugs/PageHeader/Tools/useCampaign.tsx → src/pages/Bugs/PageHeader/Tools/useCampaignBugs.tsx

@@ -3,17 +3,20 @@ import {
   useGetCampaignsByCidBugsQuery,
 } from 'src/features/api';
 
-export const useCampaign = (id: number) => {
+export const useCampaignBugs = (id: number) => {
   const {
     isLoading: isCampaignLoading,
     isFetching: isCampaignFetching,
+    isError: isErrorCampaign,
     data: campaign,
   } = useGetCampaignsByCidQuery({
     cid: id?.toString() ?? '0',
   });
+
   const {
     isLoading: isCampaignBugsLoading,
     isFetching: isCampaignBugsFetching,
+    isError: isErrorCampaignBugs,
     data: bugs,
   } = useGetCampaignsByCidBugsQuery({
     cid: id?.toString() ?? '0',
@@ -22,14 +25,15 @@ export const useCampaign = (id: number) => {
     },
   });
 
-  if (
-    isCampaignLoading ||
-    isCampaignFetching ||
-    isCampaignBugsLoading ||
-    isCampaignBugsFetching ||
-    !campaign
-  ) {
-    return { isLoading: true };
+  if (!campaign || isCampaignLoading || isCampaignBugsLoading) {
+    return {
+      isCampaignLoading: true,
+      isCampaignFetching: true,
+      isCampaignBugsLoading: true,
+      isCampaignBugsFetching: true,
+      isCampaignError: isErrorCampaign,
+      isCampaignBugsError: isErrorCampaignBugs,
+    };
   }
 
   const severities: Record<Severities, number> = {
@@ -52,7 +56,12 @@ export const useCampaign = (id: number) => {
   }
 
   return {
-    isLoading: false,
+    isCampaignLoading,
+    isCampaignFetching,
+    isCampaignBugsLoading,
+    isCampaignBugsFetching,
+    isCampaignError: isErrorCampaign,
+    isCampaignBugsError: isErrorCampaignBugs,
     status: campaign.status,
     severities,
   };