feat: skip fetching if offline

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

src/renderer/components/metrics/CommentsPill.tsx

@@ -21,9 +21,9 @@ export const CommentsPill: FC<CommentsPillProps> = ({ commentCount }) => {
   return (
     <MetricPill
       color={IconColor.GRAY}
+      contents={description}
       icon={CommentIcon}
       metric={commentCount}
-      title={description}
     />
   );
 };

src/renderer/components/metrics/LabelsPill.tsx

@@ -1,8 +1,11 @@
 import type { FC } from 'react';
 
+import { TagIcon } from '@primer/octicons-react';
 import { IssueLabelToken, LabelGroup } from '@primer/react';
 
-import type { GitifyLabels } from '../../types';
+import { type GitifyLabels, IconColor } from '../../types';
+
+import { MetricPill } from './MetricPill';
 
 export interface LabelsPillProps {
   labels: GitifyLabels[];
@@ -14,7 +17,7 @@ export const LabelsPill: FC<LabelsPillProps> = ({ labels }) => {
   }
 
   const labelsContent = (
-    <LabelGroup visibleChildCount="auto">
+    <LabelGroup>
       {labels.map((label) => {
         return (
           <IssueLabelToken
@@ -28,5 +31,12 @@ export const LabelsPill: FC<LabelsPillProps> = ({ labels }) => {
     </LabelGroup>
   );
 
-  return labelsContent;
+  return (
+    <MetricPill
+      color={IconColor.GRAY}
+      contents={labelsContent}
+      icon={TagIcon}
+      metric={labels.length}
+    />
+  );
 };

src/renderer/components/metrics/LinkedIssuesPill.tsx

@@ -21,15 +21,15 @@ export const LinkedIssuesPill: FC<LinkedIssuesPillProps> = ({
   const description = formatMetricDescription(
     linkedIssues.length,
     'issue',
-    (count, noun) => `Linked to ${count} ${noun}: ${linkedIssues.join(', ')}`,
+    (noun) => `Linked to ${noun}: ${linkedIssues.join(', ')}`,
   );
 
   return (
     <MetricPill
       color={IconColor.GRAY}
+      contents={description}
       icon={IssueOpenedIcon}
       metric={linkedIssues.length}
-      title={description}
     />
   );
 };

src/renderer/components/metrics/MetricPill.test.tsx

@@ -9,7 +9,7 @@ import { MetricPill, type MetricPillProps } from './MetricPill';
 describe('renderer/components/metrics/MetricPill.tsx', () => {
   it('should render with metric', () => {
     const props: MetricPillProps = {
-      title: 'Mock Pill',
+      contents: 'Mock Pill',
       metric: 1,
       icon: MarkGithubIcon,
       color: IconColor.GREEN,
@@ -22,7 +22,7 @@ describe('renderer/components/metrics/MetricPill.tsx', () => {
 
   it('should render without metric', () => {
     const props: MetricPillProps = {
-      title: 'Mock Pill',
+      contents: 'Mock Pill',
       icon: MarkGithubIcon,
       color: IconColor.GREEN,
     };

src/renderer/components/metrics/MetricPill.tsx

@@ -6,18 +6,18 @@ import { Label, Stack, Text, Tooltip } from '@primer/react';
 import { type IconColor, Size } from '../../types';
 
 export interface MetricPillProps {
-  title: string;
+  contents: string | ReactNode;
   metric?: number;
   icon: Icon;
   color: IconColor;
-  content?: ReactNode;
 }
 
 export const MetricPill: FC<MetricPillProps> = (props: MetricPillProps) => {
   const Icon = props.icon;
 
   return (
-    <Tooltip direction="s" text={props.title}>
+    // @ts-expect-error: We overload text with a ReactNode
+    <Tooltip direction="s" text={props.contents}>
       <button type="button">
         <Label
           className="hover:bg-gitify-notification-pill-hover"
@@ -32,7 +32,6 @@ export const MetricPill: FC<MetricPillProps> = (props: MetricPillProps) => {
             ) : null}
           </Stack>
         </Label>
-        {props.content}
       </button>
     </Tooltip>
   );

src/renderer/components/metrics/MilestonePill.tsx

@@ -18,8 +18,8 @@ export const MilestonePill: FC<MilestonePillProps> = ({ milestone }) => {
   return (
     <MetricPill
       color={milestone.state === 'OPEN' ? IconColor.GREEN : IconColor.PURPLE}
+      contents={milestone.title}
       icon={MilestoneIcon}
-      title={milestone.title}
     />
   );
 };

src/renderer/components/metrics/ReactionsPill.tsx

@@ -1,10 +1,11 @@
 import type { FC } from 'react';
 
 import { SmileyIcon } from '@primer/octicons-react';
+import { IssueLabelToken, LabelGroup } from '@primer/react';
 
 import { type GitifyReactionGroup, IconColor } from '../../types';
 
-import { formatMetricDescription } from '../../utils/notifications/formatters';
+// import { formatMetricDescription } from '../../utils/notifications/formatters';
 import { MetricPill } from './MetricPill';
 
 export interface ReactionsPillProps {
@@ -31,33 +32,34 @@ export const ReactionsPill: FC<ReactionsPillProps> = ({
     return null;
   }
 
-  const hasMultipleReactions =
-    reactionGroups.filter((rg) => rg.reactors.totalCount > 0).length > 1;
-
-  const description = formatMetricDescription(
-    reactionsCount,
-    'reaction',
-    (count, noun) => {
-      const formatted = reactionGroups
-        .map((rg) => {
-          const emoji = reactionEmojiMap[rg.content];
-          if (!emoji || !rg.reactors.totalCount) {
-            return '';
-          }
-          return `${emoji} ${hasMultipleReactions ? rg.reactors.totalCount : ''}`.trim();
-        })
-        .filter(Boolean)
-        .join(' ');
-      return `${count} ${noun}: ${formatted}`;
-    },
+  const visibleReactionGroups = reactionGroups.filter(
+    (rg) => !!rg.reactors && rg.reactors.totalCount > 0,
+  );
+
+  const reactionsContent = (
+    <LabelGroup>
+      {visibleReactionGroups.map((rg) => {
+        const emoji = reactionEmojiMap[rg.content];
+        const total = rg.reactors.totalCount;
+
+        return (
+          <IssueLabelToken
+            fillColor="#24292e" // Same as sidebar color from tailwind config
+            key={rg.content}
+            size="small"
+            text={`${emoji} ${total}`}
+          />
+        );
+      })}
+    </LabelGroup>
   );
 
   return (
     <MetricPill
       color={IconColor.GRAY}
+      contents={reactionsContent}
       icon={SmileyIcon}
       metric={reactionsCount}
-      title={description}
     />
   );
 };

src/renderer/components/metrics/ReviewsPill.tsx

@@ -26,10 +26,10 @@ export const ReviewsPill: FC<ReviewsPillProps> = ({ reviews }) => {
         return (
           <MetricPill
             color={icon.color}
+            contents={icon.description}
             icon={icon.type}
             key={review.state}
             metric={review.users.length}
-            title={icon.description}
           />
         );
       })}