diff --git a/packages/types/src/users.d.ts b/packages/types/src/users.d.ts index c191cac89..3adec55d1 100644 --- a/packages/types/src/users.d.ts +++ b/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 = { diff --git a/web/components/profile/activity/profile-activity-list.tsx b/web/components/profile/activity/profile-activity-list.tsx index 108589ff6..c381690e7 100644 --- a/web/components/profile/activity/profile-activity-list.tsx +++ b/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 = 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 = 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 ( diff --git a/web/constants/empty-state.ts b/web/constants/empty-state.ts index 084e618a2..02dea7b63 100644 --- a/web/constants/empty-state.ts +++ b/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", diff --git a/web/pages/profile/activity.tsx b/web/pages/profile/activity.tsx index 414969445..1f724b4ff 100644 --- a/web/pages/profile/activity.tsx +++ b/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 ; + } + return ( <> diff --git a/web/public/empty-state/profile/activity-dark.webp b/web/public/empty-state/profile/activity-dark.webp new file mode 100644 index 000000000..d44e6a1de Binary files /dev/null and b/web/public/empty-state/profile/activity-dark.webp differ diff --git a/web/public/empty-state/profile/activity-light.webp b/web/public/empty-state/profile/activity-light.webp new file mode 100644 index 000000000..206685a4c Binary files /dev/null and b/web/public/empty-state/profile/activity-light.webp differ