@selfcommunity/react-core 0.6.4-alpha.9 → 0.6.4-courses.101

package/lib/esm/constants/Preferences.d.ts

@@ -117,6 +117,7 @@ export declare const CONFIGURATIONS_URL_TEMPLATE_USER_PROFILE_SETTINGS: string;
 export declare const CONFIGURATIONS_URL_TEMPLATE_NOTIFICATIONS: string;
 export declare const CONFIGURATIONS_URL_TEMPLATE_USER_PRIVATE_MESSAGES: string;
 export declare const CONFIGURATIONS_URL_TEMPLATE_INCUBATOR: string;
+export declare const CONFIGURATIONS_URL_TEMPLATE_LIVE_STREAM: string;
 export declare const CONFIGURATIONS_APP_URL: string;
 export declare const CONFIGURATIONS_USER_METADATA_DEFINITIONS: string;
 export declare const CONFIGURATIONS_TAG_MANAGER_CONTAINER_ID: string;
@@ -134,8 +135,15 @@ export declare const CONFIGURATIONS_EVENTS_ENABLED: string;
 export declare const CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED: string;
 export declare const CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED: string;
 export declare const CONFIGURATIONS_EVENTS_PRIVATE_ENABLED: string;
+export declare const CONFIGURATIONS_COURSES_ENABLED: string;
+export declare const CONFIGURATIONS_COURSES_ONLY_STAFF_ENABLED: string;
+export declare const CONFIGURATIONS_COURSES_VISIBILITY_ENABLED: string;
+export declare const CONFIGURATIONS_COURSES_PRIVATE_ENABLED: string;
 export declare const CONFIGURATIONS_ONBOARDING_ENABLED: string;
 export declare const CONFIGURATIONS_ONBOARDING_HIDDEN: string;
+export declare const CONFIGURATIONS_LIVE_STREAM_ENABLED: string;
+export declare const CONFIGURATIONS_LIVE_STREAM_ONLY_STAFF_ENABLED: string;
+export declare const CONFIGURATIONS_SUBSCRIPTION_TIER: string;
 /**
  * PROVIDERS
  */

package/lib/esm/constants/Preferences.js

@@ -118,6 +118,7 @@ export const CONFIGURATIONS_URL_TEMPLATE_USER_PROFILE_SETTINGS = `${SCPreference
 export const CONFIGURATIONS_URL_TEMPLATE_NOTIFICATIONS = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.URL_TEMPLATE_NOTIFICATIONS}`;
 export const CONFIGURATIONS_URL_TEMPLATE_USER_PRIVATE_MESSAGES = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.URL_TEMPLATE_USER_PRIVATE_MESSAGES}`;
 export const CONFIGURATIONS_URL_TEMPLATE_INCUBATOR = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.URL_TEMPLATE_INCUBATOR}`;
+export const CONFIGURATIONS_URL_TEMPLATE_LIVE_STREAM = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.URL_TEMPLATE_LIVE_STREAM}`;
 export const CONFIGURATIONS_APP_URL = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.APP_URL}`;
 export const CONFIGURATIONS_USER_METADATA_DEFINITIONS = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.USER_METADATA_DEFINITIONS}`;
 export const CONFIGURATIONS_TAG_MANAGER_CONTAINER_ID = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.TAG_MANAGER_CONTAINER_ID}`;
@@ -135,8 +136,15 @@ export const CONFIGURATIONS_EVENTS_ENABLED = `${SCPreferenceSection.CONFIGURATIO
 export const CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.EVENTS_ONLY_STAFF_ENABLED}`;
 export const CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.EVENTS_VISIBILITY_ENABLED}`;
 export const CONFIGURATIONS_EVENTS_PRIVATE_ENABLED = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.EVENTS_PRIVATE_ENABLED}`;
+export const CONFIGURATIONS_COURSES_ENABLED = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.COURSES_ENABLED}`;
+export const CONFIGURATIONS_COURSES_ONLY_STAFF_ENABLED = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.COURSES_ONLY_STAFF_ENABLED}`;
+export const CONFIGURATIONS_COURSES_VISIBILITY_ENABLED = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.COURSES_VISIBILITY_ENABLED}`;
+export const CONFIGURATIONS_COURSES_PRIVATE_ENABLED = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.COURSES_PRIVATE_ENABLED}`;
 export const CONFIGURATIONS_ONBOARDING_ENABLED = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.ONBOARDING_ENABLED}`;
 export const CONFIGURATIONS_ONBOARDING_HIDDEN = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.ONBOARDING_HIDDEN}`;
+export const CONFIGURATIONS_LIVE_STREAM_ENABLED = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.LIVE_STREAM_ENABLED}`;
+export const CONFIGURATIONS_LIVE_STREAM_ONLY_STAFF_ENABLED = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.LIVE_STREAM_ONLY_STAFF_ENABLED}`;
+export const CONFIGURATIONS_SUBSCRIPTION_TIER = `${SCPreferenceSection.CONFIGURATIONS}.${SCPreferenceName.SUBSCRIPTION_TIER}`;
 /**
  * PROVIDERS
  */
@@ -264,6 +272,7 @@ export const DATA_TYPES = {
     [CONFIGURATIONS_URL_TEMPLATE_NOTIFICATIONS]: stringType,
     [CONFIGURATIONS_URL_TEMPLATE_USER_PRIVATE_MESSAGES]: stringType,
     [CONFIGURATIONS_URL_TEMPLATE_INCUBATOR]: stringType,
+    [CONFIGURATIONS_URL_TEMPLATE_LIVE_STREAM]: stringType,
     [CONFIGURATIONS_APP_URL]: stringType,
     [CONFIGURATIONS_USER_METADATA_DEFINITIONS]: stringType,
     [CONFIGURATIONS_TAG_MANAGER_CONTAINER_ID]: stringType,
@@ -281,8 +290,15 @@ export const DATA_TYPES = {
     [CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED]: booleanType,
     [CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED]: booleanType,
     [CONFIGURATIONS_EVENTS_PRIVATE_ENABLED]: booleanType,
+    [CONFIGURATIONS_COURSES_ENABLED]: booleanType,
+    [CONFIGURATIONS_COURSES_ONLY_STAFF_ENABLED]: booleanType,
+    [CONFIGURATIONS_COURSES_VISIBILITY_ENABLED]: booleanType,
+    [CONFIGURATIONS_COURSES_PRIVATE_ENABLED]: booleanType,
     [CONFIGURATIONS_ONBOARDING_ENABLED]: booleanType,
     [CONFIGURATIONS_ONBOARDING_HIDDEN]: booleanType,
+    [CONFIGURATIONS_LIVE_STREAM_ENABLED]: booleanType,
+    [CONFIGURATIONS_LIVE_STREAM_ONLY_STAFF_ENABLED]: booleanType,
+    [CONFIGURATIONS_SUBSCRIPTION_TIER]: stringType,
     [PROVIDERS_APP_URL_ON_APP_STORE]: stringType,
     [PROVIDERS_APP_URL_ON_GOOGLE_PLAY]: stringType,
     [PROVIDERS_FACEBOOK_SIGNIN_ENABLED]: stringType,

package/lib/esm/constants/Routes.d.ts

@@ -38,9 +38,17 @@ export declare const GROUPS_ROUTE_NAME = "groups";
 export declare const GROUPS_SUBSCRIBED_ROUTE_NAME = "groups_subscribed";
 export declare const EVENT_ROUTE_NAME = "event";
 export declare const EVENTS_ROUTE_NAME = "events";
+export declare const COURSE_ROUTE_NAME = "course";
+export declare const COURSE_EDIT_ROUTE_NAME = "course_edit";
+export declare const COURSE_DASHBOARD_ROUTE_NAME = "course_dashboard";
+export declare const COURSE_LESSON_ROUTE_NAME = "course_lesson";
+export declare const COURSE_LESSON_COMMENT_ROUTE_NAME = "course_lesson_comment";
+export declare const COURSES_ROUTE_NAME = "courses";
+export declare const COURSES_SUBSCRIBED_ROUTE_NAME = "courses_subscribed";
 export declare const EVENTS_SUGGESTED_ROUTE_NAME = "events_suggested";
 export declare const EVENTS_SUBSCRIBED_ROUTE_NAME = "events_subscribed";
 export declare const EVENTS_HIGHLIGHT_ROUTE_NAME = "events_highlight";
+export declare const LIVESTREAM_ROUTE_NAME = "live";
 /**
  * Default Routes
  * @type {{[p: string]: string, '[POST_ROUTE_NAME]': string, '[INCUBATOR_ROUTE_NAME]': string, '[LOYALTY_ROUTE_NAME]': string, '[USER_NOTIFICATION_ROUTE_NAME]': string, '[USER_PRIVATE_MESSAGES_ROUTE_NAME]': string, '[COMMENT_ROUTE_NAME]': string, '[DISCUSSION_ROUTE_NAME]': string, '[CATEGORIES_ROUTE_NAME]': string, '[USER_PROFILE_ROUTE_NAME]': string, '[CATEGORY_ROUTE_NAME]': string, '[USER_PROFILE_SETTINGS_ROUTE_NAME]': string, '[STATUS_ROUTE_NAME]': string}}

package/lib/esm/constants/Routes.js

@@ -38,9 +38,17 @@ export const GROUPS_ROUTE_NAME = 'groups';
 export const GROUPS_SUBSCRIBED_ROUTE_NAME = 'groups_subscribed';
 export const EVENT_ROUTE_NAME = 'event';
 export const EVENTS_ROUTE_NAME = 'events';
+export const COURSE_ROUTE_NAME = 'course';
+export const COURSE_EDIT_ROUTE_NAME = 'course_edit';
+export const COURSE_DASHBOARD_ROUTE_NAME = 'course_dashboard';
+export const COURSE_LESSON_ROUTE_NAME = 'course_lesson';
+export const COURSE_LESSON_COMMENT_ROUTE_NAME = 'course_lesson_comment';
+export const COURSES_ROUTE_NAME = 'courses';
+export const COURSES_SUBSCRIBED_ROUTE_NAME = 'courses_subscribed';
 export const EVENTS_SUGGESTED_ROUTE_NAME = 'events_suggested';
 export const EVENTS_SUBSCRIBED_ROUTE_NAME = 'events_subscribed';
 export const EVENTS_HIGHLIGHT_ROUTE_NAME = 'events_highlight';
+export const LIVESTREAM_ROUTE_NAME = 'live';
 /**
  * Default Routes
  * @type {{[p: string]: string, '[POST_ROUTE_NAME]': string, '[INCUBATOR_ROUTE_NAME]': string, '[LOYALTY_ROUTE_NAME]': string, '[USER_NOTIFICATION_ROUTE_NAME]': string, '[USER_PRIVATE_MESSAGES_ROUTE_NAME]': string, '[COMMENT_ROUTE_NAME]': string, '[DISCUSSION_ROUTE_NAME]': string, '[CATEGORIES_ROUTE_NAME]': string, '[USER_PROFILE_ROUTE_NAME]': string, '[CATEGORY_ROUTE_NAME]': string, '[USER_PROFILE_SETTINGS_ROUTE_NAME]': string, '[STATUS_ROUTE_NAME]': string}}
@@ -84,4 +92,12 @@ export const defaultRoutes = {
     [EVENT_ROUTE_NAME]: '/event/:id/:slug/',
     [EVENTS_SUBSCRIBED_ROUTE_NAME]: '/events/subscribed/',
     [EVENTS_HIGHLIGHT_ROUTE_NAME]: '/events/highlight/',
+    [COURSE_ROUTE_NAME]: '/course/:id/:slug/',
+    [COURSES_ROUTE_NAME]: '/courses/',
+    [COURSE_EDIT_ROUTE_NAME]: '/course/:id/:slug/edit',
+    [COURSE_DASHBOARD_ROUTE_NAME]: '/course/:id/:slug/dashboard',
+    [COURSE_LESSON_ROUTE_NAME]: '/course/:id/:slug/section/:section_id/lesson/:lesson_id/',
+    [COURSE_LESSON_COMMENT_ROUTE_NAME]: '/course/:id/:slug/section/:section_id/lesson/:lesson_id/comment/:comment_id',
+    [COURSES_SUBSCRIBED_ROUTE_NAME]: '/courses/subscribed/',
+    [LIVESTREAM_ROUTE_NAME]: '/live/:slug/',
 };

package/lib/esm/hooks/useSCFetchCourse.d.ts

@@ -0,0 +1,23 @@
+import { CourseInfoParams } from '@selfcommunity/api-services';
+import { SCCourseType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils';
+/**
+ :::info
+ This custom hook is used to fetch an course object.
+ :::
+ * @param object
+ * @param object.id
+ * @param object.course
+ * @param object.cacheStrategy
+ * @param object.params
+ */
+export default function useSCFetchCourse({ id, course, cacheStrategy, params, }: {
+    id?: number | string;
+    course?: SCCourseType;
+    cacheStrategy?: CacheStrategies;
+    params?: CourseInfoParams;
+}): {
+    scCourse: SCCourseType;
+    setSCCourse: (c: SCCourseType) => void;
+    error: string;
+};

package/lib/esm/hooks/useSCFetchCourse.js

@@ -0,0 +1,78 @@
+import { Endpoints, http } from '@selfcommunity/api-services';
+import { CacheStrategies, Logger, LRUCache, objectWithoutProperties } from '@selfcommunity/utils';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
+import { useSCUser } from '../components/provider/SCUserProvider';
+import { getCourseObjectCacheKey } from '../constants/Cache';
+import { SCOPE_SC_CORE } from '../constants/Errors';
+/**
+ :::info
+ This custom hook is used to fetch an course object.
+ :::
+ * @param object
+ * @param object.id
+ * @param object.course
+ * @param object.cacheStrategy
+ * @param object.params
+ */
+export default function useSCFetchCourse({ id = null, course = null, cacheStrategy = CacheStrategies.CACHE_FIRST, params = null, }) {
+    const __courseId = useMemo(() => (course === null || course === void 0 ? void 0 : course.id) || id, [course, id]);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    const authUserId = useMemo(() => { var _a; return ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) || null; }, [scUserContext.user]);
+    // CACHE
+    const __courseCacheKey = useMemo(() => getCourseObjectCacheKey(__courseId), [__courseId]);
+    const __course = useMemo(() => (authUserId ? course : objectWithoutProperties(course, ['join_status'])), [authUserId, course]);
+    const [scCourse, setScCourse] = useState(cacheStrategy !== CacheStrategies.NETWORK_ONLY ? LRUCache.get(__courseCacheKey, __course) : null);
+    const [error, setError] = useState(null);
+    const setSCCourse = useCallback((c) => {
+        setScCourse(c);
+        LRUCache.set(__courseCacheKey, c);
+    }, [setScCourse, __courseCacheKey]);
+    /**
+     * Memoized fetchTag
+     */
+    const fetchCourse = useMemo(() => (id) => {
+        return http
+            .request({
+            url: Endpoints.GetCourseInfo.url({ id }),
+            method: Endpoints.GetCourseInfo.method,
+            params: params !== null && params !== void 0 ? params : {},
+        })
+            .then((res) => {
+            if (res.status >= 300) {
+                return Promise.reject(res);
+            }
+            return Promise.resolve(res.data);
+        });
+    }, []);
+    /**
+     * If id attempt to get the course by id
+     */
+    useEffect(() => {
+        if (id !== null && id !== undefined && !course) {
+            fetchCourse(id)
+                .then((e) => {
+                setSCCourse(e);
+            })
+                .catch((err) => {
+                LRUCache.delete(__courseCacheKey);
+                if (err.status === 403) {
+                    setError('You do not have permission to perform this action.');
+                    Logger.error(SCOPE_SC_CORE, 'You do not have permission to perform this action.');
+                }
+                else {
+                    setError(`Course with id ${id} not found`);
+                    Logger.error(SCOPE_SC_CORE, `Course with id ${id} not found`);
+                }
+                Logger.error(SCOPE_SC_CORE, err.message);
+            });
+        }
+    }, [id, course, authUserId]);
+    useDeepCompareEffectNoCheck(() => {
+        if (course) {
+            setSCCourse(course);
+        }
+    }, [course, authUserId]);
+    return { scCourse, setSCCourse, error };
+}

package/lib/esm/hooks/useSCFetchCourses.d.ts

@@ -0,0 +1,22 @@
+import { SCCourseType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils';
+/**
+ :::info
+ This custom hook is used to fetch courses.
+ @param object.cacheStrategy
+
+ :::tip Context can be consumed in this way:
+
+ ```jsx
+ const {courses, isLoading} = useSCFetchCourses();
+ ```
+ :::
+ * @param props
+ */
+declare const useSCFetchCourses: (props?: {
+    cacheStrategy?: CacheStrategies;
+}) => {
+    courses: SCCourseType[];
+    isLoading: boolean;
+};
+export default useSCFetchCourses;

package/lib/esm/hooks/useSCFetchCourses.js

@@ -0,0 +1,81 @@
+import { __awaiter } from "tslib";
+import { useEffect, useState } from 'react';
+import { SCOPE_SC_CORE } from '../constants/Errors';
+import { Endpoints, http } from '@selfcommunity/api-services';
+import { CacheStrategies, Logger, LRUCache } from '@selfcommunity/utils';
+import { getCourseObjectCacheKey, getCoursesObjectCacheKey } from '../constants/Cache';
+const init = { courses: [], isLoading: true };
+// HYDRATE the cache
+const hydrate = (ids) => {
+    if (!ids) {
+        return null;
+    }
+    const courses = ids.map((id) => {
+        const __courseCacheKey = getCourseObjectCacheKey(id);
+        return LRUCache.get(__courseCacheKey);
+    });
+    if (courses.filter((c) => !c).length > 0) {
+        // REVALIDATE CACHE
+        return null;
+    }
+    return courses;
+};
+/**
+ :::info
+ This custom hook is used to fetch courses.
+ @param object.cacheStrategy
+
+ :::tip Context can be consumed in this way:
+
+ ```jsx
+ const {courses, isLoading} = useSCFetchCourses();
+ ```
+ :::
+ * @param props
+ */
+const useSCFetchCourses = (props) => {
+    // PROPS
+    const { cacheStrategy = CacheStrategies.CACHE_FIRST } = props || {};
+    // CACHE
+    const __coursesCacheKey = getCoursesObjectCacheKey();
+    // STATE
+    const courses = cacheStrategy !== CacheStrategies.NETWORK_ONLY ? hydrate(LRUCache.get(__coursesCacheKey, null)) : null;
+    const [data, setData] = useState(courses !== null ? { courses, isLoading: false } : init);
+    /**
+     * Fetch courses
+     */
+    const fetchCourses = (next = Endpoints.GetJoinedCourses.url()) => __awaiter(void 0, void 0, void 0, function* () {
+        const response = yield http.request({
+            url: next,
+            method: Endpoints.GetJoinedCourses.method,
+        });
+        const data = response.data;
+        if (data.next) {
+            return data.results.concat(yield fetchCourses(data.next));
+        }
+        return data.results;
+    });
+    /**
+     * Get courses
+     */
+    useEffect(() => {
+        if (cacheStrategy === CacheStrategies.CACHE_FIRST && courses) {
+            return;
+        }
+        fetchCourses()
+            .then((data) => {
+            setData({ courses: data, isLoading: false });
+            LRUCache.set(__coursesCacheKey, data.map((course) => {
+                const __courseCacheKey = getCourseObjectCacheKey(course.id);
+                LRUCache.set(__courseCacheKey, course);
+                return course.id;
+            }));
+        })
+            .catch((error) => {
+            console.log(error);
+            Logger.error(SCOPE_SC_CORE, 'Unable to retrieve courses');
+        });
+    }, []);
+    return data;
+};
+export default useSCFetchCourses;

package/lib/esm/hooks/useSCFetchLesson.d.ts

@@ -0,0 +1,22 @@
+import { SCCourseLessonType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils';
+/**
+ :::info
+ This custom hook is used to fetch a lesson object.
+ :::
+ * @param object
+ * @param object.id
+ * @param object.lesson
+ * @param object.cacheStrategy
+ */
+export default function useSCFetchLesson({ id, lesson, courseId, sectionId, cacheStrategy, }: {
+    id?: number | string;
+    lesson?: SCCourseLessonType;
+    courseId: number | string;
+    sectionId: number | string;
+    cacheStrategy?: CacheStrategies;
+}): {
+    scLesson: SCCourseLessonType;
+    setSCLesson: (lesson: SCCourseLessonType) => void;
+    error: string;
+};

package/lib/esm/hooks/useSCFetchLesson.js

@@ -0,0 +1,69 @@
+import { Endpoints, http } from '@selfcommunity/api-services';
+import { CacheStrategies, Logger, LRUCache } from '@selfcommunity/utils';
+import { useEffect, useMemo, useState } from 'react';
+import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
+import { useSCUser } from '../components/provider/SCUserProvider';
+import { getLessonObjectCacheKey } from '../constants/Cache';
+import { SCOPE_SC_CORE } from '../constants/Errors';
+/**
+ :::info
+ This custom hook is used to fetch a lesson object.
+ :::
+ * @param object
+ * @param object.id
+ * @param object.lesson
+ * @param object.cacheStrategy
+ */
+export default function useSCFetchLesson({ id = null, lesson = null, courseId = null, sectionId = null, cacheStrategy = CacheStrategies.CACHE_FIRST, }) {
+    const __lessonId = useMemo(() => (lesson === null || lesson === void 0 ? void 0 : lesson.id) || id, [lesson, id]);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    const authUserId = useMemo(() => { var _a; return ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) || null; }, [scUserContext.user]);
+    // CACHE
+    const __lessonCacheKey = useMemo(() => getLessonObjectCacheKey(__lessonId), [__lessonId]);
+    const [scLesson, setScLesson] = useState(cacheStrategy !== CacheStrategies.NETWORK_ONLY ? LRUCache.get(__lessonCacheKey, lesson) : null);
+    const [error, setError] = useState(null);
+    const setSCLesson = (lesson) => {
+        setScLesson(lesson);
+        LRUCache.set(__lessonCacheKey, lesson);
+    };
+    /**
+     * Memoized fetchTag
+     */
+    const fetchLesson = useMemo(() => (id) => {
+        return http
+            .request({
+            url: Endpoints.GetCourseLesson.url({ id: courseId, section_id: sectionId, lesson_id: id }),
+            method: Endpoints.GetCourseLesson.method,
+        })
+            .then((res) => {
+            if (res.status >= 300) {
+                return Promise.reject(res);
+            }
+            return Promise.resolve(res.data);
+        });
+    }, []);
+    /**
+     * If id attempt to get the lesson by id
+     */
+    useEffect(() => {
+        if (id !== null && id !== undefined && courseId !== null && courseId !== undefined && sectionId) {
+            fetchLesson(id)
+                .then((e) => {
+                setSCLesson(e);
+            })
+                .catch((err) => {
+                LRUCache.delete(__lessonCacheKey);
+                setError(`Lesson with id ${id} not found`);
+                Logger.error(SCOPE_SC_CORE, `Lesson with id ${id} not found`);
+                Logger.error(SCOPE_SC_CORE, err.message);
+            });
+        }
+    }, [id, courseId, authUserId, sectionId]);
+    useDeepCompareEffectNoCheck(() => {
+        if (lesson) {
+            setSCLesson(lesson);
+        }
+    }, [lesson, authUserId]);
+    return { scLesson, setSCLesson, error };
+}

package/lib/esm/hooks/useSCFetchLessonCommentObject.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { SCCourseCommentType, SCCourseLessonType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils';
+/**
+ :::info
+ This custom hooks is used to fetch a course lesson comment.
+ :::
+ * @param object
+ * @param object.id
+ * @param object.commentObject
+ * @param object.lesson
+ * @param object.cacheStrategy
+ */
+export default function useSCFetchLessonCommentObject({ id, commentObject, lesson, cacheStrategy, }: {
+    id?: number;
+    commentObject?: SCCourseCommentType;
+    lesson: SCCourseLessonType;
+    cacheStrategy?: CacheStrategies;
+}): {
+    obj: SCCourseCommentType;
+    setObj: import("react").Dispatch<import("react").SetStateAction<SCCourseCommentType>>;
+    error: string;
+};

package/lib/esm/hooks/useSCFetchLessonCommentObject.js

@@ -0,0 +1,69 @@
+import { useEffect, useMemo, useState } from 'react';
+import { SCOPE_SC_CORE } from '../constants/Errors';
+import { http, Endpoints } from '@selfcommunity/api-services';
+import { CacheStrategies, Logger, LRUCache } from '@selfcommunity/utils';
+import { getLessonCommentCacheKey } from '../constants/Cache';
+import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
+/**
+ :::info
+ This custom hooks is used to fetch a course lesson comment.
+ :::
+ * @param object
+ * @param object.id
+ * @param object.commentObject
+ * @param object.lesson
+ * @param object.cacheStrategy
+ */
+export default function useSCFetchLessonCommentObject({ id = null, commentObject = null, lesson = null, cacheStrategy = CacheStrategies.CACHE_FIRST, }) {
+    const __commentObjectId = commentObject ? commentObject.id : id;
+    // CACHE
+    const __commentObjectCacheKey = getLessonCommentCacheKey(__commentObjectId);
+    const [obj, setObj] = useState(cacheStrategy !== CacheStrategies.NETWORK_ONLY ? LRUCache.get(__commentObjectCacheKey, commentObject) : commentObject);
+    const [error, setError] = useState(null);
+    /**
+     * Memoized fetchLessonCommentObject
+     */
+    const fetchLessonCommentObject = useMemo(() => () => {
+        return http
+            .request({
+            url: Endpoints.GetCourseLessonComment.url({
+                id: lesson.course_id,
+                section_id: lesson.section_id,
+                lesson_id: lesson.id,
+                comment_id: __commentObjectId,
+            }),
+            method: Endpoints.GetCourseLessonComment.method,
+        })
+            .then((res) => {
+            if (res.status >= 300) {
+                return Promise.reject(res);
+            }
+            return Promise.resolve(res.data);
+        });
+    }, [__commentObjectId, lesson]);
+    /**
+     * If course commentObject resolve it
+     */
+    useEffect(() => {
+        if (__commentObjectId && lesson && (!obj || cacheStrategy === CacheStrategies.STALE_WHILE_REVALIDATE)) {
+            fetchLessonCommentObject()
+                .then((obj) => {
+                setObj(obj);
+                LRUCache.set(__commentObjectCacheKey, obj);
+            })
+                .catch((err) => {
+                LRUCache.delete(__commentObjectCacheKey);
+                setError(`Course Lesson comment Object with id ${id} not found`);
+                Logger.error(SCOPE_SC_CORE, `Course Lesson comment Object with id ${id} not found`);
+                Logger.error(SCOPE_SC_CORE, err.message);
+            });
+        }
+    }, [__commentObjectId, lesson]);
+    useDeepCompareEffectNoCheck(() => {
+        if (commentObject) {
+            setObj(commentObject);
+            LRUCache.set(__commentObjectCacheKey, obj);
+        }
+    }, [commentObject]);
+    return { obj, setObj, error };
+}

package/lib/esm/hooks/useSCFetchLessonCommentObjects.d.ts

@@ -0,0 +1,48 @@
+import { SCCommentsOrderBy, SCCourseCommentType, SCCourseLessonType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils';
+/**
+ * Interface SCLessonCommentsObjectType
+ */
+export interface SCLessonCommentsObjectType {
+    componentLoaded: boolean;
+    comments: SCCourseCommentType[];
+    total: number;
+    next: string;
+    previous: string;
+    isLoadingNext: boolean;
+    isLoadingPrevious: boolean;
+    page: number;
+    reload: boolean;
+}
+/**
+ * @hidden
+ * We have complex state logic that involves multiple sub-values,
+ * so useReducer is preferable to useState.
+ * Define all possible auth action types label
+ * Use this to export actions and dispatch an action
+ */
+export declare const commentsObjectActionTypes: {
+    LOADING_NEXT: string;
+    LOADING_PREVIOUS: string;
+    DATA_NEXT_LOADED: string;
+    DATA_PREVIOUS_LOADED: string;
+    DATA_RELOAD: string;
+    DATA_RELOADED: string;
+    DATA_REVALIDATE: string;
+};
+/**
+ :::info
+ This custom hooks is used to fetch paginated comments for a specific course lesson.
+ :::
+ * @param props
+ */
+export default function useSCFetchLessonCommentObjects(props: {
+    id?: number;
+    lessonObject?: SCCourseLessonType;
+    offset?: number;
+    pageSize?: number;
+    orderBy?: SCCommentsOrderBy;
+    parent?: number;
+    onChangePage?: (page: any) => any;
+    cacheStrategy?: CacheStrategies;
+}): any;