From 9e1f8f4c7d580963b5d573b3a0b4aac612599962 Mon Sep 17 00:00:00 2001 From: cedric karungu Date: Wed, 24 Jan 2024 13:44:13 +0200 Subject: [PATCH 1/3] feat: add pagination on Unassigned Tasks --- apps/web/lib/features/user-profile-tasks.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/apps/web/lib/features/user-profile-tasks.tsx b/apps/web/lib/features/user-profile-tasks.tsx index f87637377..112632eb1 100644 --- a/apps/web/lib/features/user-profile-tasks.tsx +++ b/apps/web/lib/features/user-profile-tasks.tsx @@ -1,8 +1,9 @@ import { I_UserProfilePage, useLiveTimerStatus } from '@app/hooks'; -import { Divider, Text } from 'lib/components'; +import { Divider, Paginate, Text } from 'lib/components'; import { TaskCard } from './task/task-card'; import { I_TaskFilter } from './task/task-filters'; import { useTranslations } from 'next-intl'; +import { usePagination } from '@app/hooks/features/usePagination'; type Props = { tabFiltered: I_TaskFilter; @@ -28,6 +29,8 @@ export function UserProfileTask({ profile, tabFiltered }: Props) { const otherTasks = tasks.filter((t) => profile.member?.running == true ? t.id !== profile.activeUserTeamTask?.id : t ); + const { total, onPageChange, itemsPerPage, itemOffset, endOffset, setItemsPerPage, currentItems } = + usePagination(otherTasks); return (
@@ -79,7 +82,7 @@ export function UserProfileTask({ profile, tabFiltered }: Props) { )}
); From 09f1f9fe16e367cf755b1e80517609bee2323492 Mon Sep 17 00:00:00 2001 From: cedric karungu Date: Wed, 24 Jan 2024 19:24:35 +0200 Subject: [PATCH 2/3] fix: deepScan errors --- apps/web/app/hooks/features/usePublicOrganizationTeams.ts | 3 ++- apps/web/lib/settings/member-table.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/app/hooks/features/usePublicOrganizationTeams.ts b/apps/web/app/hooks/features/usePublicOrganizationTeams.ts index 7467f68a6..00707b079 100644 --- a/apps/web/app/hooks/features/usePublicOrganizationTeams.ts +++ b/apps/web/app/hooks/features/usePublicOrganizationTeams.ts @@ -86,13 +86,14 @@ export function usePublicOrganizationTeams() { return res; }); }, + // eslint-disable-next-line react-hooks/exhaustive-deps [queryCall, setTeams, setAllTasks, setPublicTeam, teams, publicTeam] ); const loadPublicTeamMiscData = useCallback( (profileLink: string, teamId: string) => { return queryCallMiscData(profileLink, teamId).then((res) => { - if (res.data.status === 404) { + if (res.data?.status === 404) { setTeams([]); return res; } diff --git a/apps/web/lib/settings/member-table.tsx b/apps/web/lib/settings/member-table.tsx index 509668a7a..a3a3b7329 100644 --- a/apps/web/lib/settings/member-table.tsx +++ b/apps/web/lib/settings/member-table.tsx @@ -52,7 +52,7 @@ export const MemberTable = ({ members }: { members: OT_Member[] }) => { updateAvatar({ firstName: editMember?.employee?.user?.firstName || '', lastName: editMember?.employee?.user?.lastName || '', - id: editMember.employee.userId + id: editMember?.employee?.userId }).then(() => { const teamIndex = organizationTeams.findIndex((team) => team.id === activeTeamId); const tempOrganizationTeams = cloneDeep(organizationTeams); From 668d39b0f26620eb20baad490c2a99891f1cc0d2 Mon Sep 17 00:00:00 2001 From: cedric karungu Date: Thu, 25 Jan 2024 00:50:19 +0200 Subject: [PATCH 3/3] feat: get Tasks data by infinity --- apps/web/app/hooks/useInfinityFetch.ts | 37 +++++++++++++++++++ apps/web/app/utils/scroll-to-element.ts | 2 +- apps/web/components/shared/Observer/index.tsx | 22 +++++++++++ apps/web/lib/features/user-profile-tasks.tsx | 22 ++++------- 4 files changed, 68 insertions(+), 15 deletions(-) create mode 100644 apps/web/app/hooks/useInfinityFetch.ts create mode 100644 apps/web/components/shared/Observer/index.tsx diff --git a/apps/web/app/hooks/useInfinityFetch.ts b/apps/web/app/hooks/useInfinityFetch.ts new file mode 100644 index 000000000..e85ace888 --- /dev/null +++ b/apps/web/app/hooks/useInfinityFetch.ts @@ -0,0 +1,37 @@ +'use client'; + +import React from 'react'; + +export const getPartData = ({ offset = 0, limit = 10, arr = [] }: { offset?: number; limit?: number; arr: any[] }) => + arr.slice(0, offset * limit + limit); + +export const useInfinityScrolling = (arr: any) => { + const [offset, setOffset] = React.useState(0); + const [data, setData] = React.useState(arr); + + const getSomeTasks = React.useCallback( + (offset: number) => { + setData(getPartData({ arr, limit: 10, offset })); + }, + [arr] + ); + + const nextOffset = React.useCallback(() => { + setOffset((prev) => prev + 1); + setData((prev) => getPartData({ arr: prev, limit: 10, offset })); + }, [offset]); + + React.useEffect(() => { + console.log({ offset }); + getSomeTasks(offset); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [offset]); + + return { + offset, + setOffset, + getSomeTasks, + nextOffset, + data + }; +}; diff --git a/apps/web/app/utils/scroll-to-element.ts b/apps/web/app/utils/scroll-to-element.ts index 5aedc9fc8..a233b8d43 100644 --- a/apps/web/app/utils/scroll-to-element.ts +++ b/apps/web/app/utils/scroll-to-element.ts @@ -3,4 +3,4 @@ export function scrollToElement(rect: DOMRect, diff = 150) { top: rect.y > 0 ? rect.y + window.scrollY - diff : window.scrollY - Math.abs(rect.y) - diff, behavior: 'smooth' }); -} +} \ No newline at end of file diff --git a/apps/web/components/shared/Observer/index.tsx b/apps/web/components/shared/Observer/index.tsx new file mode 100644 index 000000000..7f6f10d0d --- /dev/null +++ b/apps/web/components/shared/Observer/index.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +export const ObserverComponent = ({ isLast, getNextData }: { isLast: boolean; getNextData: () => any }) => { + const cardRef = React.useRef(); + + React.useEffect(() => { + if (!cardRef?.current) return; + + const observer = new IntersectionObserver(([entry]) => { + if (isLast && entry.isIntersecting) { + // fetch with new Entry + console.log('IN OBSERVER'); + getNextData(); + observer.unobserve(entry.target); + } + }); + + observer.observe(cardRef.current); + }, [isLast, getNextData]); + // @ts-expect-error + return
; +}; diff --git a/apps/web/lib/features/user-profile-tasks.tsx b/apps/web/lib/features/user-profile-tasks.tsx index 112632eb1..7952dbd7b 100644 --- a/apps/web/lib/features/user-profile-tasks.tsx +++ b/apps/web/lib/features/user-profile-tasks.tsx @@ -1,9 +1,10 @@ import { I_UserProfilePage, useLiveTimerStatus } from '@app/hooks'; -import { Divider, Paginate, Text } from 'lib/components'; +import { Divider, Text } from 'lib/components'; import { TaskCard } from './task/task-card'; import { I_TaskFilter } from './task/task-filters'; import { useTranslations } from 'next-intl'; -import { usePagination } from '@app/hooks/features/usePagination'; +import { ObserverComponent } from '@components/shared/Observer'; +import { useInfinityScrolling } from '@app/hooks/useInfinityFetch'; type Props = { tabFiltered: I_TaskFilter; @@ -29,8 +30,9 @@ export function UserProfileTask({ profile, tabFiltered }: Props) { const otherTasks = tasks.filter((t) => profile.member?.running == true ? t.id !== profile.activeUserTeamTask?.id : t ); - const { total, onPageChange, itemsPerPage, itemOffset, endOffset, setItemsPerPage, currentItems } = - usePagination(otherTasks); + const { nextOffset, data } = useInfinityScrolling(otherTasks); + // const { total, onPageChange, itemsPerPage, itemOffset, endOffset, setItemsPerPage, currentItems } = + // usePagination(otherTasks); return (
@@ -82,9 +84,10 @@ export function UserProfileTask({ profile, tabFiltered }: Props) { )}
    - {currentItems.map((task) => { + {data.map((task, index) => { return (
  • + ); })} -
);