chore: profile activity empty state added (#4732)

packages/types/src/users.d.ts

@@ -128,6 +128,7 @@ export interface IUserActivityResponse {
   prev_page_results: boolean;
   results: IIssueActivity[];
   total_pages: number;
+  total_results: number;
 }
 
 export type UserAuth = {

web/components/profile/activity/profile-activity-list.tsx

@@ -24,10 +24,11 @@ type Props = {
   perPage: number;
   updateResultsCount: (count: number) => void;
   updateTotalPages: (count: number) => void;
+  updateEmptyState: (state: boolean) => void;
 };
 
 export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
-  const { cursor, perPage, updateResultsCount, updateTotalPages } = props;
+  const { cursor, perPage, updateResultsCount, updateTotalPages, updateEmptyState } = props;
   // store hooks
   const { data: currentUser } = useUser();
 
@@ -45,9 +46,12 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
   useEffect(() => {
     if (!userProfileActivity) return;
 
+    // if no results found then show empty state
+    if (userProfileActivity.total_results === 0) updateEmptyState(true);
+
     updateTotalPages(userProfileActivity.total_pages);
     updateResultsCount(userProfileActivity.results.length);
-  }, [updateResultsCount, updateTotalPages, userProfileActivity]);
+  }, [updateResultsCount, updateTotalPages, userProfileActivity, updateEmptyState]);
 
   // TODO: refactor this component
   return (

web/constants/empty-state.ts

@@ -40,6 +40,7 @@ export enum EmptyStateType {
   WORKSPACE_SETTINGS_WEBHOOKS = "workspace-settings-webhooks",
   WORKSPACE_SETTINGS_EXPORT = "workspace-settings-export",
   WORKSPACE_SETTINGS_IMPORT = "workspace-settings-import",
+  PROFILE_ACTIVITY = "profile-activity",
   PROFILE_ASSIGNED = "profile-assigned",
   PROFILE_CREATED = "profile-created",
   PROFILE_SUBSCRIBED = "profile-subscribed",
@@ -241,6 +242,13 @@ const emptyStateDetails = {
     path: "/empty-state/workspace-settings/imports",
   },
   // profile
+  [EmptyStateType.PROFILE_ACTIVITY]: {
+    key: EmptyStateType.PROFILE_ASSIGNED,
+    title: "No activities yet",
+    description:
+      "Get started by creating a new issue! Add details and properties to it. Explore more in Plane to see your activity.",
+    path: "/empty-state/profile/activity",
+  },
   [EmptyStateType.PROFILE_ASSIGNED]: {
     key: EmptyStateType.PROFILE_ASSIGNED,
     title: "No issues are assigned to you",

web/pages/profile/activity.tsx

@@ -5,7 +5,10 @@ import { Button } from "@plane/ui";
 // components
 import { PageHead } from "@/components/core";
 import { SidebarHamburgerToggle } from "@/components/core/sidebar";
+import { EmptyState } from "@/components/empty-state";
 import { ProfileActivityListPage } from "@/components/profile";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
 //hooks
 import { useAppTheme } from "@/hooks/store";
 // layouts
@@ -20,6 +23,7 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
   const [pageCount, setPageCount] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
   const [resultsCount, setResultsCount] = useState(0);
+  const [isEmpty, setIsEmpty] = useState(false);
   // store hooks
   const { toggleSidebar } = useAppTheme();
 
@@ -27,6 +31,8 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
 
   const updateResultsCount = (count: number) => setResultsCount(count);
 
+  const updateEmptyState = (isEmpty: boolean) => setIsEmpty(isEmpty);
+
   const handleLoadMore = () => setPageCount((prev) => prev + 1);
 
   const activityPages: JSX.Element[] = [];
@@ -38,11 +44,16 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
         perPage={PER_PAGE}
         updateResultsCount={updateResultsCount}
         updateTotalPages={updateTotalPages}
+        updateEmptyState={updateEmptyState}
       />
     );
 
   const isLoadMoreVisible = pageCount < totalPages && resultsCount !== 0;
 
+  if (isEmpty) {
+    return <EmptyState type={EmptyStateType.PROFILE_ACTIVITY} layout="screen-detailed" />;
+  }
+
   return (
     <>
       <PageHead title="Profile - Activity" />