@cuemath/leap 3.5.9-as1 → 3.5.9-as2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/features/timeline/daily-timeline.js +84 -85
- package/dist/features/timeline/daily-timeline.js.map +1 -1
- package/dist/features/ui/intersection-loader/intersection-loader.js +47 -0
- package/dist/features/ui/intersection-loader/intersection-loader.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/package.json +1 -1
|
@@ -1,111 +1,103 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import J from "../ui/
|
|
6
|
-
import
|
|
7
|
-
import Q from "../ui/loader/app-loader/app-loader.js";
|
|
1
|
+
import { jsx as e, jsxs as y } from "react/jsx-runtime";
|
|
2
|
+
import { memo as Z, useState as S, useRef as q, useMemo as x, useCallback as z, useEffect as B } from "react";
|
|
3
|
+
import H from "../ui/error/error.js";
|
|
4
|
+
import N from "../ui/layout/flex-view.js";
|
|
5
|
+
import J from "../ui/loader/app-loader/app-loader.js";
|
|
6
|
+
import Q from "../ui/intersection-loader/intersection-loader.js";
|
|
8
7
|
import f from "../ui/separator/separator.js";
|
|
9
8
|
import ee from "../ui/simple-accordian/simple-accordion.js";
|
|
10
|
-
import
|
|
11
|
-
import { useDailyTimelineGet as
|
|
12
|
-
import { getTimelineCardIcon as
|
|
9
|
+
import oe from "../ui/text/text.js";
|
|
10
|
+
import { useDailyTimelineGet as te } from "./api/use-daily-timeline-get.js";
|
|
11
|
+
import { getTimelineCardIcon as re, getDayMonthYear as O } from "./comps/utils.js";
|
|
13
12
|
import ie from "./comps/daily-timeline-items/daily-timeline-items.js";
|
|
14
|
-
import { ScrollWrapper as
|
|
13
|
+
import { ScrollWrapper as ae, DailyTimelineContainer as ne, DailyItems as se, DailyTimelineItemsContainer as me } from "./daily-timeline-styled.js";
|
|
15
14
|
import { USER_TYPE as le } from "./daily-timeline-types.js";
|
|
16
15
|
import ce from "./comps/month-break/month-break.js";
|
|
17
16
|
import fe from "./comps/year-break/year-break.js";
|
|
18
17
|
import { INITIAL_PAGE as he } from "./comps/constants.js";
|
|
19
|
-
import { parseISO as
|
|
18
|
+
import { parseISO as b } from "../../node_modules/date-fns/parseISO.js";
|
|
20
19
|
import { isLastDayOfMonth as de } from "../../node_modules/date-fns/isLastDayOfMonth.js";
|
|
21
|
-
const
|
|
22
|
-
({ userType: h, studentId: d, courseStreams: m, onPuzzlesClick:
|
|
23
|
-
const [l,
|
|
24
|
-
get:
|
|
25
|
-
data:
|
|
26
|
-
isProcessingFailed:
|
|
27
|
-
isProcessing:
|
|
28
|
-
} =
|
|
29
|
-
(
|
|
30
|
-
|
|
31
|
-
page:
|
|
20
|
+
const k = Z(
|
|
21
|
+
({ userType: h, studentId: d, courseStreams: m, onPuzzlesClick: R, onReviewClick: w, scrollAreaHeight: u }) => {
|
|
22
|
+
const [l, _] = S([]), [p, C] = S(!1), Y = q(null), j = x(() => re("NO_ACTIVITY"), []), {
|
|
23
|
+
get: T,
|
|
24
|
+
data: o,
|
|
25
|
+
isProcessingFailed: v,
|
|
26
|
+
isProcessing: K
|
|
27
|
+
} = te(d), { user_logs: g } = o ?? {}, n = z(
|
|
28
|
+
(t = he, i = !1) => {
|
|
29
|
+
i && C(!0), T(d, {
|
|
30
|
+
page: t,
|
|
32
31
|
size: 10,
|
|
33
32
|
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
34
33
|
course_stream: h === le.TEACHER ? m : []
|
|
35
34
|
});
|
|
36
35
|
},
|
|
37
|
-
[
|
|
38
|
-
),
|
|
39
|
-
const
|
|
40
|
-
l.forEach((
|
|
41
|
-
|
|
42
|
-
|
|
36
|
+
[T, d, h, m]
|
|
37
|
+
), P = x(() => {
|
|
38
|
+
const t = /* @__PURE__ */ new Set();
|
|
39
|
+
l.forEach((r) => {
|
|
40
|
+
r.daily_logs && r.daily_logs.forEach((a) => {
|
|
41
|
+
a.course_stream && a.course_stream !== "CIRCLE" && t.add(a.course_stream);
|
|
43
42
|
});
|
|
44
43
|
});
|
|
45
|
-
const
|
|
46
|
-
(m || []).filter((
|
|
44
|
+
const i = new Set(
|
|
45
|
+
(m || []).filter((r) => String(r) !== "CIRCLE")
|
|
47
46
|
);
|
|
48
|
-
return
|
|
49
|
-
}, [l, m])
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}, [
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
i != null && i.next_page && !p && e.scrollTop + e.clientHeight >= e.scrollHeight - 100 && a(i.next_page, !0);
|
|
59
|
-
};
|
|
60
|
-
return e.addEventListener("scroll", r), () => {
|
|
61
|
-
e.removeEventListener("scroll", r);
|
|
62
|
-
};
|
|
63
|
-
}, [i, p, a]), w ? /* @__PURE__ */ t(J, { height: "70vh", onTryAgain: () => a(1, !1) }) : Y && !l.length ? /* @__PURE__ */ t(T, { $alignItems: "center", $justifyContent: "center", $height: _, children: /* @__PURE__ */ t(Q, { width: "100%", height: "100%" }) }) : /* @__PURE__ */ t(
|
|
64
|
-
ne,
|
|
47
|
+
return i.size > 1 || t.size > 1 || i.size > 0 && t.size > 0 && (i.size !== t.size || !Array.from(i).every((r) => t.has(r)));
|
|
48
|
+
}, [l, m]), X = z(() => {
|
|
49
|
+
o != null && o.next_page && !p && n(o.next_page, !0);
|
|
50
|
+
}, [o == null ? void 0 : o.next_page, p, n]);
|
|
51
|
+
return B(() => {
|
|
52
|
+
o && (o.curr_page === 1 ? _(g ?? []) : (_((t) => [...t, ...g ?? []]), C(!1)));
|
|
53
|
+
}, [o, g]), B(() => {
|
|
54
|
+
n(1, !1);
|
|
55
|
+
}, [n]), v ? /* @__PURE__ */ e(H, { height: "70vh", onTryAgain: () => n(1, !1) }) : K && !l.length ? /* @__PURE__ */ e(N, { $alignItems: "center", $justifyContent: "center", $height: u, children: /* @__PURE__ */ e(J, { width: "100%", height: "100%" }) }) : /* @__PURE__ */ e(
|
|
56
|
+
ae,
|
|
65
57
|
{
|
|
66
|
-
ref:
|
|
67
|
-
$height:
|
|
58
|
+
ref: Y,
|
|
59
|
+
$height: u,
|
|
68
60
|
$alignItems: "center",
|
|
69
|
-
children: /* @__PURE__ */
|
|
70
|
-
l.map((
|
|
71
|
-
const { daily_logs:
|
|
72
|
-
if (
|
|
73
|
-
const
|
|
74
|
-
day:
|
|
75
|
-
month:
|
|
76
|
-
monthName: X
|
|
77
|
-
} = R(P), {
|
|
78
|
-
day: M,
|
|
79
|
-
month: z,
|
|
80
|
-
year: F,
|
|
61
|
+
children: /* @__PURE__ */ y(ne, { children: [
|
|
62
|
+
l.map((t, i) => {
|
|
63
|
+
const { daily_logs: r, from_date: a, to_date: L } = t;
|
|
64
|
+
if (r) {
|
|
65
|
+
const F = b(a), $ = b(L), {
|
|
66
|
+
day: I,
|
|
67
|
+
month: A,
|
|
81
68
|
monthName: G
|
|
82
|
-
} =
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
69
|
+
} = O(F), {
|
|
70
|
+
day: D,
|
|
71
|
+
month: M,
|
|
72
|
+
year: V,
|
|
73
|
+
monthName: U
|
|
74
|
+
} = O($), c = de($), E = c && M === 12 && D === 31;
|
|
75
|
+
return /* @__PURE__ */ y(N, { children: [
|
|
76
|
+
/* @__PURE__ */ e(fe, { toYear: V, isLastDayOfYear: E }),
|
|
77
|
+
!E && A && c && /* @__PURE__ */ e(f, { heightX: 1 }),
|
|
78
|
+
/* @__PURE__ */ e(ce, { fromMonth: A, isLastDayOfMth: c }),
|
|
79
|
+
/* @__PURE__ */ y(se, { $gutterX: 1, $addedMonthBreak: !!(c && M), children: [
|
|
80
|
+
/* @__PURE__ */ e(f, { heightX: 1 }),
|
|
81
|
+
/* @__PURE__ */ e(oe, { $renderAs: "ac4-black", $color: "BLACK_T_60", children: a === L ? `${I} ${G}` : `${I} - ${D} ${U}` }),
|
|
82
|
+
/* @__PURE__ */ e(f, { heightX: 1 }),
|
|
83
|
+
/* @__PURE__ */ e(
|
|
92
84
|
me,
|
|
93
85
|
{
|
|
94
|
-
$borderBottomColor:
|
|
95
|
-
children:
|
|
86
|
+
$borderBottomColor: r.length > 0 ? "BLACK" : "BLACK_T_04",
|
|
87
|
+
children: r.length > 0 ? r.map((s, W) => /* @__PURE__ */ e(
|
|
96
88
|
ie,
|
|
97
89
|
{
|
|
98
90
|
type: s.type,
|
|
99
91
|
summary: s.summary ?? "",
|
|
100
92
|
courseStream: s.course_stream,
|
|
101
93
|
cards: s.cards,
|
|
102
|
-
onPuzzleClick:
|
|
103
|
-
onReviewClick:
|
|
94
|
+
onPuzzleClick: R,
|
|
95
|
+
onReviewClick: w,
|
|
104
96
|
userType: h,
|
|
105
|
-
shouldShowTag:
|
|
97
|
+
shouldShowTag: P && s.course_stream !== "CIRCLE"
|
|
106
98
|
},
|
|
107
|
-
`timeline-${
|
|
108
|
-
)) : /* @__PURE__ */
|
|
99
|
+
`timeline-${W}`
|
|
100
|
+
)) : /* @__PURE__ */ e(
|
|
109
101
|
ee,
|
|
110
102
|
{
|
|
111
103
|
icon: j ?? "",
|
|
@@ -117,20 +109,27 @@ const x = U(
|
|
|
117
109
|
)
|
|
118
110
|
}
|
|
119
111
|
),
|
|
120
|
-
/* @__PURE__ */
|
|
112
|
+
/* @__PURE__ */ e(f, { heightX: 1 })
|
|
121
113
|
] })
|
|
122
|
-
] }, `timeline-entry-${
|
|
114
|
+
] }, `timeline-entry-${i}`);
|
|
123
115
|
}
|
|
124
116
|
}),
|
|
125
|
-
|
|
117
|
+
/* @__PURE__ */ e(
|
|
118
|
+
Q,
|
|
119
|
+
{
|
|
120
|
+
onLoadMore: X,
|
|
121
|
+
isLoading: p,
|
|
122
|
+
hasMore: !!(o != null && o.next_page)
|
|
123
|
+
}
|
|
124
|
+
)
|
|
126
125
|
] })
|
|
127
126
|
}
|
|
128
127
|
);
|
|
129
128
|
}
|
|
130
129
|
);
|
|
131
|
-
|
|
132
|
-
const
|
|
130
|
+
k.displayName = "DailyTimeline";
|
|
131
|
+
const Oe = k;
|
|
133
132
|
export {
|
|
134
|
-
|
|
133
|
+
Oe as default
|
|
135
134
|
};
|
|
136
135
|
//# sourceMappingURL=daily-timeline.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"daily-timeline.js","sources":["../../../src/features/timeline/daily-timeline.tsx"],"sourcesContent":["import { isLastDayOfMonth, parseISO } from 'date-fns';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState, type FC } from 'react';\n\nimport { ILLUSTRATIONS } from '../../assets/illustrations/illustrations';\nimport { Loader } from '../ui/buttons/button/button-styled';\nimport Error from '../ui/error/error';\nimport FlexView from '../ui/layout/flex-view';\nimport AppLoader from '../ui/loader/app-loader/app-loader';\nimport Separator from '../ui/separator/separator';\nimport SimpleAccordion from '../ui/simple-accordian/simple-accordion';\nimport Text from '../ui/text/text';\nimport { type ITimelineData, useDailyTimelineGet } from './api/use-daily-timeline-get';\nimport { getDayMonthYear, getTimelineCardIcon } from './comps/utils';\nimport DailyTimelineItems from './comps/daily-timeline-items/daily-timeline-items';\nimport * as Styled from './daily-timeline-styled';\nimport { USER_TYPE, type IDailyTimelineProps } from './daily-timeline-types';\nimport MonthBreak from './comps/month-break/month-break';\nimport YearBreak from './comps/year-break/year-break';\nimport { INITIAL_PAGE } from './comps/constants';\n\nconst DailyTimeline: FC<IDailyTimelineProps> = memo(\n ({ userType, studentId, courseStreams, onPuzzlesClick, onReviewClick, scrollAreaHeight }) => {\n const [allTimelineData, setAllTimelineData] = useState<ITimelineData[]>([]);\n const [isLoadingMore, setIsLoadingMore] = useState(false);\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const NoActivityIcon = useMemo(() => getTimelineCardIcon('NO_ACTIVITY'), []);\n\n const {\n get: getTimeline,\n data: timelineData,\n isProcessingFailed,\n isProcessing,\n } = useDailyTimelineGet(studentId);\n const { user_logs: userLogs } = timelineData ?? {};\n\n const fetchTimeline = useCallback(\n (page = INITIAL_PAGE, append = false) => {\n if (append) {\n setIsLoadingMore(true);\n }\n\n getTimeline(studentId, {\n page,\n size: 10,\n timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,\n course_stream: userType === USER_TYPE.TEACHER ? courseStreams : [],\n });\n },\n [getTimeline, studentId, userType, courseStreams],\n );\n\n const shouldShowTag = useMemo(() => {\n const allCourseStreams = new Set<string>();\n\n allTimelineData.forEach(entry => {\n if (entry.daily_logs) {\n entry.daily_logs.forEach(log => {\n if (log.course_stream && log.course_stream !== 'CIRCLE') {\n allCourseStreams.add(log.course_stream);\n }\n });\n }\n });\n\n const courseStreamsSet = new Set(\n (courseStreams || []).filter(stream => String(stream) !== 'CIRCLE'),\n );\n\n return (\n courseStreamsSet.size > 1 ||\n allCourseStreams.size > 1 ||\n (courseStreamsSet.size > 0 &&\n allCourseStreams.size > 0 &&\n (courseStreamsSet.size !== allCourseStreams.size ||\n !Array.from(courseStreamsSet).every(stream => allCourseStreams.has(stream))))\n );\n }, [allTimelineData, courseStreams]);\n\n useEffect(() => {\n if (timelineData) {\n if (timelineData.curr_page === 1) {\n setAllTimelineData(userLogs ?? []);\n } else {\n setAllTimelineData(prev => [...prev, ...(userLogs ?? [])]);\n setIsLoadingMore(false);\n }\n }\n }, [timelineData, userLogs]);\n\n useEffect(() => {\n fetchTimeline(1, false);\n }, [fetchTimeline]);\n\n useEffect(() => {\n const container = scrollContainerRef.current;\n\n if (!container) return;\n\n const handleScroll = () => {\n if (\n timelineData?.next_page &&\n !isLoadingMore &&\n container.scrollTop + container.clientHeight >= container.scrollHeight - 100\n ) {\n fetchTimeline(timelineData.next_page, true);\n }\n };\n\n container.addEventListener('scroll', handleScroll);\n\n return () => {\n container.removeEventListener('scroll', handleScroll);\n };\n }, [timelineData, isLoadingMore, fetchTimeline]);\n\n if (isProcessingFailed) {\n return <Error height=\"70vh\" onTryAgain={() => fetchTimeline(1, false)} />;\n }\n\n if (isProcessing && !allTimelineData.length) {\n return (\n <FlexView $alignItems=\"center\" $justifyContent=\"center\" $height={scrollAreaHeight}>\n <AppLoader width=\"100%\" height=\"100%\" />\n </FlexView>\n );\n }\n\n return (\n <Styled.ScrollWrapper\n ref={scrollContainerRef}\n $height={scrollAreaHeight}\n $alignItems=\"center\"\n >\n <Styled.DailyTimelineContainer>\n {allTimelineData.map((entry, index) => {\n const { daily_logs: dailyLogs, from_date: fromDate, to_date: toDate } = entry;\n\n if (dailyLogs) {\n const fromDateObj = parseISO(fromDate);\n const toDateObj = parseISO(toDate);\n\n const {\n day: fromDay,\n month: fromMonth,\n monthName: fromMonthName,\n } = getDayMonthYear(fromDateObj);\n\n const {\n day: toDay,\n month: toMonth,\n year: toYear,\n monthName: toMonthName,\n } = getDayMonthYear(toDateObj);\n\n const isLastDayOfMth = isLastDayOfMonth(toDateObj);\n const isLastDayOfYear = isLastDayOfMth && toMonth === 12 && toDay === 31;\n\n return (\n <FlexView key={`timeline-entry-${index}`}>\n <YearBreak toYear={toYear} isLastDayOfYear={isLastDayOfYear} />\n {!isLastDayOfYear && fromMonth && isLastDayOfMth && <Separator heightX={1} />}\n <MonthBreak fromMonth={fromMonth} isLastDayOfMth={isLastDayOfMth} />\n <Styled.DailyItems $gutterX={1} $addedMonthBreak={!!(isLastDayOfMth && toMonth)}>\n <Separator heightX={1} />\n <Text $renderAs=\"ac4-black\" $color=\"BLACK_T_60\">\n {fromDate === toDate\n ? `${fromDay} ${fromMonthName}`\n : `${fromDay} - ${toDay} ${toMonthName}`}\n </Text>\n <Separator heightX={1} />\n <Styled.DailyTimelineItemsContainer\n $borderBottomColor={dailyLogs.length > 0 ? 'BLACK' : 'BLACK_T_04'}\n >\n {dailyLogs.length > 0 ? (\n dailyLogs.map((log, logIndex) => (\n <DailyTimelineItems\n key={`timeline-${logIndex}`}\n type={log.type}\n summary={log.summary ?? ''}\n courseStream={log.course_stream}\n cards={log.cards}\n onPuzzleClick={onPuzzlesClick}\n onReviewClick={onReviewClick}\n userType={userType}\n shouldShowTag={shouldShowTag && log.course_stream !== 'CIRCLE'}\n />\n ))\n ) : (\n <SimpleAccordion\n icon={NoActivityIcon ?? ''}\n title=\"No Activity\"\n defaultExpanded={false}\n $borderColor=\"BLACK_T_04\"\n $backgroundColor=\"BLACK_T_15\"\n />\n )}\n </Styled.DailyTimelineItemsContainer>\n <Separator heightX={1} />\n </Styled.DailyItems>\n </FlexView>\n );\n }\n })}\n\n {isLoadingMore && (\n <FlexView $alignItems=\"center\" $justifyContent=\"center\" $height=\"100%\">\n <Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size=\"large\" />\n </FlexView>\n )}\n </Styled.DailyTimelineContainer>\n </Styled.ScrollWrapper>\n );\n },\n);\n\nDailyTimeline.displayName = 'DailyTimeline';\n\nexport default DailyTimeline;\n"],"names":["DailyTimeline","memo","userType","studentId","courseStreams","onPuzzlesClick","onReviewClick","scrollAreaHeight","allTimelineData","setAllTimelineData","useState","isLoadingMore","setIsLoadingMore","scrollContainerRef","useRef","NoActivityIcon","useMemo","getTimelineCardIcon","getTimeline","timelineData","isProcessingFailed","isProcessing","useDailyTimelineGet","userLogs","fetchTimeline","useCallback","page","INITIAL_PAGE","append","USER_TYPE","shouldShowTag","allCourseStreams","entry","log","courseStreamsSet","stream","useEffect","prev","container","handleScroll","jsx","Error","FlexView","AppLoader","Styled.ScrollWrapper","jsxs","Styled.DailyTimelineContainer","index","dailyLogs","fromDate","toDate","fromDateObj","parseISO","toDateObj","fromDay","fromMonth","fromMonthName","getDayMonthYear","toDay","toMonth","toYear","toMonthName","isLastDayOfMth","isLastDayOfMonth","isLastDayOfYear","YearBreak","Separator","MonthBreak","Styled.DailyItems","Text","Styled.DailyTimelineItemsContainer","logIndex","DailyTimelineItems","SimpleAccordion","Loader","ILLUSTRATIONS","DailyTimeline$1"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"daily-timeline.js","sources":["../../../src/features/timeline/daily-timeline.tsx"],"sourcesContent":["import { isLastDayOfMonth, parseISO } from 'date-fns';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState, type FC } from 'react';\n\nimport Error from '../ui/error/error';\nimport FlexView from '../ui/layout/flex-view';\nimport AppLoader from '../ui/loader/app-loader/app-loader';\nimport IntersectionLoader from '../ui/intersection-loader/intersection-loader';\nimport Separator from '../ui/separator/separator';\nimport SimpleAccordion from '../ui/simple-accordian/simple-accordion';\nimport Text from '../ui/text/text';\nimport { type ITimelineData, useDailyTimelineGet } from './api/use-daily-timeline-get';\nimport { getDayMonthYear, getTimelineCardIcon } from './comps/utils';\nimport DailyTimelineItems from './comps/daily-timeline-items/daily-timeline-items';\nimport * as Styled from './daily-timeline-styled';\nimport { USER_TYPE, type IDailyTimelineProps } from './daily-timeline-types';\nimport MonthBreak from './comps/month-break/month-break';\nimport YearBreak from './comps/year-break/year-break';\nimport { INITIAL_PAGE } from './comps/constants';\n\nconst DailyTimeline: FC<IDailyTimelineProps> = memo(\n ({ userType, studentId, courseStreams, onPuzzlesClick, onReviewClick, scrollAreaHeight }) => {\n const [allTimelineData, setAllTimelineData] = useState<ITimelineData[]>([]);\n const [isLoadingMore, setIsLoadingMore] = useState(false);\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const NoActivityIcon = useMemo(() => getTimelineCardIcon('NO_ACTIVITY'), []);\n\n const {\n get: getTimeline,\n data: timelineData,\n isProcessingFailed,\n isProcessing,\n } = useDailyTimelineGet(studentId);\n const { user_logs: userLogs } = timelineData ?? {};\n\n const fetchTimeline = useCallback(\n (page = INITIAL_PAGE, append = false) => {\n if (append) {\n setIsLoadingMore(true);\n }\n\n getTimeline(studentId, {\n page,\n size: 10,\n timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,\n course_stream: userType === USER_TYPE.TEACHER ? courseStreams : [],\n });\n },\n [getTimeline, studentId, userType, courseStreams],\n );\n\n const shouldShowTag = useMemo(() => {\n const allCourseStreams = new Set<string>();\n\n allTimelineData.forEach(entry => {\n if (entry.daily_logs) {\n entry.daily_logs.forEach(log => {\n if (log.course_stream && log.course_stream !== 'CIRCLE') {\n allCourseStreams.add(log.course_stream);\n }\n });\n }\n });\n\n const courseStreamsSet = new Set(\n (courseStreams || []).filter(stream => String(stream) !== 'CIRCLE'),\n );\n\n return (\n courseStreamsSet.size > 1 ||\n allCourseStreams.size > 1 ||\n (courseStreamsSet.size > 0 &&\n allCourseStreams.size > 0 &&\n (courseStreamsSet.size !== allCourseStreams.size ||\n !Array.from(courseStreamsSet).every(stream => allCourseStreams.has(stream))))\n );\n }, [allTimelineData, courseStreams]);\n\n const handleLoadMore = useCallback(() => {\n if (timelineData?.next_page && !isLoadingMore) {\n fetchTimeline(timelineData.next_page, true);\n }\n }, [timelineData?.next_page, isLoadingMore, fetchTimeline]);\n\n useEffect(() => {\n if (timelineData) {\n if (timelineData.curr_page === 1) {\n setAllTimelineData(userLogs ?? []);\n } else {\n setAllTimelineData(prev => [...prev, ...(userLogs ?? [])]);\n setIsLoadingMore(false);\n }\n }\n }, [timelineData, userLogs]);\n\n useEffect(() => {\n fetchTimeline(1, false);\n }, [fetchTimeline]);\n\n if (isProcessingFailed) {\n return <Error height=\"70vh\" onTryAgain={() => fetchTimeline(1, false)} />;\n }\n\n if (isProcessing && !allTimelineData.length) {\n return (\n <FlexView $alignItems=\"center\" $justifyContent=\"center\" $height={scrollAreaHeight}>\n <AppLoader width=\"100%\" height=\"100%\" />\n </FlexView>\n );\n }\n\n return (\n <Styled.ScrollWrapper\n ref={scrollContainerRef}\n $height={scrollAreaHeight}\n $alignItems=\"center\"\n >\n <Styled.DailyTimelineContainer>\n {allTimelineData.map((entry, index) => {\n const { daily_logs: dailyLogs, from_date: fromDate, to_date: toDate } = entry;\n\n if (dailyLogs) {\n const fromDateObj = parseISO(fromDate);\n const toDateObj = parseISO(toDate);\n\n const {\n day: fromDay,\n month: fromMonth,\n monthName: fromMonthName,\n } = getDayMonthYear(fromDateObj);\n\n const {\n day: toDay,\n month: toMonth,\n year: toYear,\n monthName: toMonthName,\n } = getDayMonthYear(toDateObj);\n\n const isLastDayOfMth = isLastDayOfMonth(toDateObj);\n const isLastDayOfYear = isLastDayOfMth && toMonth === 12 && toDay === 31;\n\n return (\n <FlexView key={`timeline-entry-${index}`}>\n <YearBreak toYear={toYear} isLastDayOfYear={isLastDayOfYear} />\n {!isLastDayOfYear && fromMonth && isLastDayOfMth && <Separator heightX={1} />}\n <MonthBreak fromMonth={fromMonth} isLastDayOfMth={isLastDayOfMth} />\n <Styled.DailyItems $gutterX={1} $addedMonthBreak={!!(isLastDayOfMth && toMonth)}>\n <Separator heightX={1} />\n <Text $renderAs=\"ac4-black\" $color=\"BLACK_T_60\">\n {fromDate === toDate\n ? `${fromDay} ${fromMonthName}`\n : `${fromDay} - ${toDay} ${toMonthName}`}\n </Text>\n <Separator heightX={1} />\n <Styled.DailyTimelineItemsContainer\n $borderBottomColor={dailyLogs.length > 0 ? 'BLACK' : 'BLACK_T_04'}\n >\n {dailyLogs.length > 0 ? (\n dailyLogs.map((log, logIndex) => (\n <DailyTimelineItems\n key={`timeline-${logIndex}`}\n type={log.type}\n summary={log.summary ?? ''}\n courseStream={log.course_stream}\n cards={log.cards}\n onPuzzleClick={onPuzzlesClick}\n onReviewClick={onReviewClick}\n userType={userType}\n shouldShowTag={shouldShowTag && log.course_stream !== 'CIRCLE'}\n />\n ))\n ) : (\n <SimpleAccordion\n icon={NoActivityIcon ?? ''}\n title=\"No Activity\"\n defaultExpanded={false}\n $borderColor=\"BLACK_T_04\"\n $backgroundColor=\"BLACK_T_15\"\n />\n )}\n </Styled.DailyTimelineItemsContainer>\n <Separator heightX={1} />\n </Styled.DailyItems>\n </FlexView>\n );\n }\n })}\n\n <IntersectionLoader\n onLoadMore={handleLoadMore}\n isLoading={isLoadingMore}\n hasMore={!!timelineData?.next_page}\n />\n </Styled.DailyTimelineContainer>\n </Styled.ScrollWrapper>\n );\n },\n);\n\nDailyTimeline.displayName = 'DailyTimeline';\n\nexport default DailyTimeline;\n"],"names":["DailyTimeline","memo","userType","studentId","courseStreams","onPuzzlesClick","onReviewClick","scrollAreaHeight","allTimelineData","setAllTimelineData","useState","isLoadingMore","setIsLoadingMore","scrollContainerRef","useRef","NoActivityIcon","useMemo","getTimelineCardIcon","getTimeline","timelineData","isProcessingFailed","isProcessing","useDailyTimelineGet","userLogs","fetchTimeline","useCallback","page","INITIAL_PAGE","append","USER_TYPE","shouldShowTag","allCourseStreams","entry","log","courseStreamsSet","stream","handleLoadMore","useEffect","prev","jsx","Error","FlexView","AppLoader","Styled.ScrollWrapper","jsxs","Styled.DailyTimelineContainer","index","dailyLogs","fromDate","toDate","fromDateObj","parseISO","toDateObj","fromDay","fromMonth","fromMonthName","getDayMonthYear","toDay","toMonth","toYear","toMonthName","isLastDayOfMth","isLastDayOfMonth","isLastDayOfYear","YearBreak","Separator","MonthBreak","Styled.DailyItems","Text","Styled.DailyTimelineItemsContainer","logIndex","DailyTimelineItems","SimpleAccordion","IntersectionLoader","DailyTimeline$1"],"mappings":"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"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { memo as p, useRef as o, useCallback as I, useEffect as d } from "react";
|
|
3
|
+
import { Loader as x } from "../buttons/button/button-styled.js";
|
|
4
|
+
import { ILLUSTRATIONS as R } from "../../../assets/illustrations/illustrations.js";
|
|
5
|
+
import $ from "../layout/flex-view.js";
|
|
6
|
+
const b = p(
|
|
7
|
+
({ onLoadMore: u, isLoading: r = !1, hasMore: t = !0, rootMargin: f = "50px", threshold: i = 0.1 }) => {
|
|
8
|
+
const n = o(null), e = o(null), m = I(
|
|
9
|
+
(l) => {
|
|
10
|
+
const [c] = l;
|
|
11
|
+
c != null && c.isIntersecting && t && !r && u();
|
|
12
|
+
},
|
|
13
|
+
[u, t, r]
|
|
14
|
+
);
|
|
15
|
+
return d(() => {
|
|
16
|
+
if (!t) {
|
|
17
|
+
e.current && e.current.disconnect();
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
if (r) {
|
|
21
|
+
e.current && e.current.disconnect();
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
return e.current = new IntersectionObserver(m, {
|
|
25
|
+
rootMargin: f,
|
|
26
|
+
threshold: i
|
|
27
|
+
}), n.current && e.current.observe(n.current), () => {
|
|
28
|
+
e.current && e.current.disconnect();
|
|
29
|
+
};
|
|
30
|
+
}, [m, r, t, f, i]), !t && !r ? null : /* @__PURE__ */ s(
|
|
31
|
+
$,
|
|
32
|
+
{
|
|
33
|
+
ref: n,
|
|
34
|
+
$alignItems: "center",
|
|
35
|
+
$justifyContent: "center",
|
|
36
|
+
$height: "80px",
|
|
37
|
+
$width: "100%",
|
|
38
|
+
children: r && /* @__PURE__ */ s(x, { src: R.LOADER, alt: "Loading more...", $size: "medium" })
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
b.displayName = "IntersectionLoader";
|
|
44
|
+
export {
|
|
45
|
+
b as default
|
|
46
|
+
};
|
|
47
|
+
//# sourceMappingURL=intersection-loader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"intersection-loader.js","sources":["../../../../src/features/ui/intersection-loader/intersection-loader.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useRef, type FC } from 'react';\n\nimport { Loader } from '../buttons/button/button-styled';\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport FlexView from '../layout/flex-view';\n\ninterface IIntersectionLoaderProps {\n onLoadMore: () => void;\n isLoading?: boolean;\n hasMore?: boolean;\n rootMargin?: string;\n threshold?: number;\n}\n\nconst IntersectionLoader: FC<IIntersectionLoaderProps> = memo(\n ({ onLoadMore, isLoading = false, hasMore = true, rootMargin = '50px', threshold = 0.1 }) => {\n const elementRef = useRef<HTMLDivElement>(null);\n const observerRef = useRef<IntersectionObserver | null>(null);\n\n const handleIntersection = useCallback(\n (entries: IntersectionObserverEntry[]) => {\n const [entry] = entries;\n\n if (entry?.isIntersecting && hasMore && !isLoading) {\n onLoadMore();\n }\n },\n [onLoadMore, hasMore, isLoading],\n );\n\n useEffect(() => {\n // Don't observe when no more data\n if (!hasMore) {\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n\n return;\n }\n\n // Don't observe when loading to prevent multiple calls\n if (isLoading) {\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n\n return;\n }\n\n // Create new observer\n observerRef.current = new IntersectionObserver(handleIntersection, {\n rootMargin,\n threshold,\n });\n\n // Start observing\n if (elementRef.current) {\n observerRef.current.observe(elementRef.current);\n }\n\n // Cleanup on dependency change\n return () => {\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n };\n }, [handleIntersection, isLoading, hasMore, rootMargin, threshold]);\n\n if (!hasMore && !isLoading) {\n return null;\n }\n\n return (\n <FlexView\n ref={elementRef}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $height=\"80px\"\n $width=\"100%\"\n >\n {isLoading && <Loader src={ILLUSTRATIONS.LOADER} alt=\"Loading more...\" $size=\"medium\" />}\n </FlexView>\n );\n },\n);\n\nIntersectionLoader.displayName = 'IntersectionLoader';\n\nexport default IntersectionLoader;\n"],"names":["IntersectionLoader","memo","onLoadMore","isLoading","hasMore","rootMargin","threshold","elementRef","useRef","observerRef","handleIntersection","useCallback","entries","entry","useEffect","jsx","FlexView","Loader","ILLUSTRATIONS"],"mappings":";;;;;AAcA,MAAMA,IAAmDC;AAAA,EACvD,CAAC,EAAE,YAAAC,GAAY,WAAAC,IAAY,IAAO,SAAAC,IAAU,IAAM,YAAAC,IAAa,QAAQ,WAAAC,IAAY,UAAU;AACrF,UAAAC,IAAaC,EAAuB,IAAI,GACxCC,IAAcD,EAAoC,IAAI,GAEtDE,IAAqBC;AAAA,MACzB,CAACC,MAAyC;AAClC,cAAA,CAACC,CAAK,IAAID;AAEhB,QAAIC,KAAA,QAAAA,EAAO,kBAAkBT,KAAW,CAACD,KAC5BD;MAEf;AAAA,MACA,CAACA,GAAYE,GAASD,CAAS;AAAA,IAAA;AAyC7B,WAtCJW,EAAU,MAAM;AAEd,UAAI,CAACV,GAAS;AACZ,QAAIK,EAAY,WACdA,EAAY,QAAQ;AAGtB;AAAA,MACF;AAGA,UAAIN,GAAW;AACb,QAAIM,EAAY,WACdA,EAAY,QAAQ;AAGtB;AAAA,MACF;AAGY,aAAAA,EAAA,UAAU,IAAI,qBAAqBC,GAAoB;AAAA,QACjE,YAAAL;AAAA,QACA,WAAAC;AAAA,MAAA,CACD,GAGGC,EAAW,WACDE,EAAA,QAAQ,QAAQF,EAAW,OAAO,GAIzC,MAAM;AACX,QAAIE,EAAY,WACdA,EAAY,QAAQ;MACtB;AAAA,IACF,GACC,CAACC,GAAoBP,GAAWC,GAASC,GAAYC,CAAS,CAAC,GAE9D,CAACF,KAAW,CAACD,IACR,OAIP,gBAAAY;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKT;AAAA,QACL,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,SAAQ;AAAA,QACR,QAAO;AAAA,QAEN,UAAAJ,uBAAcc,GAAO,EAAA,KAAKC,EAAc,QAAQ,KAAI,mBAAkB,OAAM,SAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG5F;AACF;AAEAlB,EAAmB,cAAc;"}
|