Toggle-refactor

src/common/components/utils/getExcludeNotABugInfo.tsx

@@ -1,9 +1,10 @@
 import { TFunction } from 'i18next';
+import { DEFAULT_NOT_A_BUG_CUSTOM_STATUS } from 'src/constants';
 
-export const getExcludeNotABugInfo = (t?: TFunction) => ({
-  customStatusId: 7,
-  customStatusName: 'not a bug',
+export const getExcludeNotABugInfo = (t: TFunction) => ({
+  customStatusId: DEFAULT_NOT_A_BUG_CUSTOM_STATUS.id,
+  customStatusName: DEFAULT_NOT_A_BUG_CUSTOM_STATUS.name,
   actionIdentifier: 'excludeNotABug',
-  recapTitle: t ? t('__BUGS_EXCLUDED_NOT_A_BUG') : 'Excluded not a Bug',
-  drawerTitle: t ? t('__BUGS_EXCLUDE_NOT_A_BUG') : 'Exclude “Not a bug”',
+  recapTitle: t('__BUGS_EXCLUDED_NOT_A_BUG'),
+  drawerTitle: t('__BUGS_EXCLUDE_NOT_A_BUG'),
 });

src/constants.ts

@@ -52,3 +52,8 @@ export const RELATIVE_DATE_FORMAT_OPTS: {
     other: "EEEE',' d MMMM Y",
   },
 };
+
+export const DEFAULT_NOT_A_BUG_CUSTOM_STATUS = {
+  id: 7,
+  name: 'not a bug',
+};

src/locales/en/translation.json

@@ -38,7 +38,7 @@
   "__BUG_SEVERITY_MEDIUM": "Medium",
   "__BUG_STATUS": "Status",
   "__BUGS_CUSTOM_STATUS_FILTER_ITEM_NO_ITEMS": "All statuses",
-  "__BUGS_EXCLUDED_NOT_A_BUG": "Excluded not a Bug",
+  "__BUGS_EXCLUDED_NOT_A_BUG": "“Not a bug” excluded",
   "__BUGS_EXCLUDE_NOT_A_BUG": "Exclude “Not a bug”",
   "__BUGS_DEVICES_FILTER_ITEM_NO_ITEMS": "Devices",
   "__BUGS_FILTER_VIEW_ALL_LABEL": "All filters",

src/locales/it/translation.json

@@ -38,7 +38,7 @@
   "__BUG_SEVERITY_MEDIUM": "Medi",
   "__BUG_STATUS": "Stato",
   "__BUGS_CUSTOM_STATUS_FILTER_ITEM_NO_ITEMS": "Tutti gli stati",
-  "__BUGS_EXCLUDED_NOT_A_BUG": "Escluso non un bug",
+  "__BUGS_EXCLUDED_NOT_A_BUG": "“Non un bug” esclusi",
   "__BUGS_EXCLUDE_NOT_A_BUG": "Escludi “Non un bug”",
   "__BUGS_DEVICES_FILTER_ITEM_NO_ITEMS": "Dispositivi",
   "__BUGS_FILTER_VIEW_ALL_LABEL": "Tutti i filtri",

src/pages/Bugs/Content/BugsTable/hooks/useTableData.tsx

@@ -1,12 +1,15 @@
 import { getIsNaBugExcluded } from 'src/features/bugsPage/bugsPageSlice';
 import { getExcludeNotABugInfo } from 'src/common/components/utils/getExcludeNotABugInfo';
+import { useTranslation } from 'react-i18next';
 import { useCampaignBugs } from './useCampaignBugs';
 import { useCampaignBugStates } from './useCampaignBugStates';
 import { useCampaignUseCases } from './useCampaignUseCases';
 import { sortByUseCase } from '../utils/sortByUseCase';
 import { sortByStates } from '../utils/sortByStates';
 
 export const useTableData = (campaignId: number) => {
+  const { t } = useTranslation();
+
   // get  bugs accepted states and usecases
   const { bugs, bugsError, bugsLoading, bugsFetching } =
     useCampaignBugs(campaignId);
@@ -17,6 +20,8 @@ export const useTableData = (campaignId: number) => {
 
   const currentIsNaBugExcluded = getIsNaBugExcluded();
 
+  const customStatusNotABugInfo = getExcludeNotABugInfo(t);
+
   // if there is no data, return empty array
   if (
     bugsLoading ||
@@ -42,7 +47,7 @@ export const useTableData = (campaignId: number) => {
   let bugItems = [...bugs.items];
   if (currentIsNaBugExcluded) {
     bugItems = bugs.items.filter(
-      (item) => item.custom_status.id !== getExcludeNotABugInfo().customStatusId
+      (item) => item.custom_status.id !== customStatusNotABugInfo.customStatusId
     );
   }
 

src/pages/Bugs/Drawer/CustomStatusField.tsx

@@ -47,18 +47,20 @@ export const CustomStatusField = ({
 
   if (!counters) return null;
 
+  const customStatusNotABugInfo = getExcludeNotABugInfo(t);
+
   const selectedWithNaB = currentIsNaBugExcluded
     ? [
         ...selected,
         {
-          id: getExcludeNotABugInfo().actionIdentifier,
-          name: getExcludeNotABugInfo().drawerTitle,
+          id: customStatusNotABugInfo.actionIdentifier,
+          name: customStatusNotABugInfo.drawerTitle,
         },
       ]
     : [...selected];
 
   const shallDisable = (item: BugCustomStatus): boolean => {
-    if (item.id !== getExcludeNotABugInfo().customStatusId)
+    if (item.id !== customStatusNotABugInfo.customStatusId)
       return !counters[item.id];
     if (currentIsNaBugExcluded) return currentIsNaBugExcluded;
     return !counters[item.id];
@@ -67,10 +69,10 @@ export const CustomStatusField = ({
   const filterNaBug = (arr: BugCustomStatus[]) =>
     arr.filter(
       (item: BugCustomStatus) =>
-        item.id !== getExcludeNotABugInfo().customStatusId
+        item.id !== customStatusNotABugInfo.customStatusId
     );
 
-  const shouldDisableToggle = !counters[getExcludeNotABugInfo().customStatusId];
+  const shouldDisableToggle = !counters[customStatusNotABugInfo.customStatusId];
 
   return (
     <>
@@ -93,8 +95,8 @@ export const CustomStatusField = ({
                   ? `${selectedWithNaB
                       .slice(0, maxItemsToShow)
                       .map((item) =>
-                        item.id === getExcludeNotABugInfo().actionIdentifier
-                          ? getExcludeNotABugInfo(t).drawerTitle
+                        item.id === customStatusNotABugInfo.actionIdentifier
+                          ? customStatusNotABugInfo.drawerTitle
                           : getCustomStatusInfo(item?.name as BugState, t).text
                       )
                       .join(', ')
@@ -130,9 +132,9 @@ export const CustomStatusField = ({
                     ...(shouldDisableToggle && disabledStyle),
                   }}
                 >
-                  {getExcludeNotABugInfo(t).drawerTitle}
+                  {customStatusNotABugInfo.drawerTitle}
                   <MD>
-                    {counters[getExcludeNotABugInfo().customStatusId] || 0}
+                    {counters[customStatusNotABugInfo.customStatusId] || 0}
                   </MD>
                 </LabelSpaceBetween>
               </Toggle>

src/pages/Bugs/Drawer/index.tsx

@@ -47,6 +47,8 @@ const BugsFilterDrawer = () => {
 
   const campaignData = getCurrentCampaignData();
 
+  const customStatusNotABugInfo = getExcludeNotABugInfo(t);
+
   const memoizedFilters = useMemo(() => {
     if (!campaignData) return <Skeleton />;
 
@@ -128,7 +130,7 @@ const BugsFilterDrawer = () => {
     if (currentIsNaBugExcluded) {
       bugItems = bugs.items.filter(
         (item: Bug) =>
-          item.custom_status.id !== getExcludeNotABugInfo().customStatusId
+          item.custom_status.id !== customStatusNotABugInfo.customStatusId
       );
     } else {
       bugItems = bugs.items;

src/pages/Bugs/Filters/CustomStatusFilter.tsx

@@ -27,8 +27,10 @@ export const CustomStatusFilter = () => {
   )
     return null;
 
+  const customStatusNotABugInfo = getExcludeNotABugInfo(t);
+
   const shallDisable = (item: BugCustomStatus): boolean => {
-    if (item.id !== getExcludeNotABugInfo().customStatusId)
+    if (item.id !== customStatusNotABugInfo.customStatusId)
       return !counters[item.id];
     if (currentIsNaBugExcluded) return currentIsNaBugExcluded;
     return !counters[item.id];

src/pages/Bugs/Filters/FilterRecap.tsx

@@ -267,6 +267,8 @@ export const FilterRecap = () => {
     filters.customStatuses?.length ||
     currentIsNaBugExcluded;
 
+  const customStatusNotABugInfo = getExcludeNotABugInfo(t);
+
   return hasFilters ? (
     <Wrapper>
       <Inner>
@@ -356,8 +358,8 @@ export const FilterRecap = () => {
           {currentIsNaBugExcluded ? (
             <FilterRecapItem
               type="excludeNotABug"
-              value={getExcludeNotABugInfo().actionIdentifier}
-              name={getExcludeNotABugInfo(t).recapTitle}
+              value={customStatusNotABugInfo.actionIdentifier}
+              name={customStatusNotABugInfo.recapTitle}
             />
           ) : null}
           <StyledButton