style: not showing zero & null value

apps/app/components/issues/my-issues-list-item.tsx

@@ -23,7 +23,7 @@ import { LayerDiagonalIcon } from "components/icons";
 import { AssigneesList } from "components/ui/avatar";
 import { CustomMenu, Tooltip } from "components/ui";
 // types
-import { IIssue, Properties } from "types";
+import { IIssue, MyIssueProperties } from "types";
 // helper
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // fetch-keys
@@ -31,7 +31,7 @@ import { USER_ISSUE } from "constants/fetch-keys";
 
 type Props = {
   issue: IIssue;
-  properties: Properties;
+  properties: MyIssueProperties;
   projectId: string;
 };
 
@@ -175,7 +175,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
               </Tooltip>
             </div>
           )}
-          {properties.sub_issue_count && (
+          {properties.sub_issue_count && issue.sub_issues_count > 0 && (
             <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">
@@ -185,7 +185,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
               </Tooltip>
             </div>
           )}
-          {properties.link && (
+          {properties.link && issue.link_count > 0 && (
             <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">
@@ -195,7 +195,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
               </Tooltip>
             </div>
           )}
-          {properties.attachment_count && (
+          {properties.attachment_count && issue.attachment_count > 0 && (
             <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">

apps/app/hooks/use-my-issues-filter.tsx

@@ -5,10 +5,10 @@ import workspaceService from "services/workspace.service";
 // hooks
 import useUser from "hooks/use-user";
 // types
-import { IWorkspaceMember, Properties } from "types";
+import { IWorkspaceMember, MyIssueProperties } from "types";
 import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
 
-const initialValues: Properties = {
+const initialValues: MyIssueProperties = {
   assignee: true,
   due_date: false,
   key: true,
@@ -19,12 +19,10 @@ const initialValues: Properties = {
   attachment_count: false,
   link: false,
   estimate: false,
-  created_on: false,
-  updated_on: false,
 };
 
 const useMyIssuesProperties = (workspaceSlug?: string) => {
-  const [properties, setProperties] = useState<Properties>(initialValues);
+  const [properties, setProperties] = useState<MyIssueProperties>(initialValues);
 
   const { user } = useUser();
 
@@ -49,7 +47,7 @@ const useMyIssuesProperties = (workspaceSlug?: string) => {
   }, [myWorkspace, workspaceSlug, user]);
 
   const updateIssueProperties = useCallback(
-    (key: keyof Properties) => {
+    (key: keyof MyIssueProperties) => {
       if (!workspaceSlug || !user) return;
 
       setProperties((prev) => ({ ...prev, [key]: !prev[key] }));
@@ -83,7 +81,7 @@ const useMyIssuesProperties = (workspaceSlug?: string) => {
     [workspaceSlug, myWorkspace, user]
   );
 
-  const newProperties: Properties = {
+  const newProperties: MyIssueProperties = {
     assignee: properties.assignee,
     due_date: properties.due_date,
     key: properties.key,
@@ -94,8 +92,6 @@ const useMyIssuesProperties = (workspaceSlug?: string) => {
     attachment_count: properties.attachment_count,
     link: properties.link,
     estimate: properties.estimate,
-    created_on: properties.created_on,
-    updated_on: properties.updated_on,
   };
 
   return [newProperties, updateIssueProperties] as const;

apps/app/pages/[workspaceSlug]/me/my-issues.tsx

@@ -18,7 +18,7 @@ import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // hooks
 import useMyIssuesProperties from "hooks/use-my-issues-filter";
 // types
-import { IIssue, Properties } from "types";
+import { IIssue, MyIssueProperties } from "types";
 // components
 import { MyIssuesListItem } from "components/issues";
 // helpers
@@ -34,6 +34,8 @@ const MyIssuesPage: NextPage = () => {
   const { myIssues } = useIssues(workspaceSlug as string);
   const { projects } = useProjects();
 
+  // TODO: remove create on and update on
+  // [ ] - attachment count, link count, due date, labels, sub-issue count
   const [properties, setProperties] = useMyIssuesProperties(workspaceSlug as string);
 
   return (
@@ -79,11 +81,11 @@ const MyIssuesPage: NextPage = () => {
                                 key={key}
                                 type="button"
                                 className={`rounded border px-2 py-1 text-xs capitalize ${
-                                  properties[key as keyof Properties]
+                                  properties[key as keyof MyIssueProperties]
                                     ? "border-custom-primary bg-custom-primary text-white"
                                     : "border-custom-border-200"
                                 }`}
-                                onClick={() => setProperties(key as keyof Properties)}
+                                onClick={() => setProperties(key as keyof MyIssueProperties)}
                               >
                                 {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
                               </button>

apps/app/types/workspace.d.ts

@@ -39,7 +39,7 @@ export interface IWorkspaceBulkInviteFormData {
   emails: { email: string; role: 5 | 10 | 15 | 20 }[];
 }
 
-export type Properties = {
+export type PropertiesBuilder = {
   assignee: boolean;
   due_date: boolean;
   labels: boolean;
@@ -50,6 +50,11 @@ export type Properties = {
   link: boolean;
   attachment_count: boolean;
   estimate: boolean;
+};
+
+export type MyIssueProperties = PropertiesBuilder;
+
+export type Properties = PropertiesBuilder & {
   created_on: boolean;
   updated_on: boolean;
 };