App Codex Version: 1.0.0

Source

containers/Custom/CourseCategoriesScreen.ts

  1. import {mapProps, compose} from "recompose";
  2. import CourseCategoriesFilter from "../../components/Courses/CourseCategoriesFilter";
  3. import withLearndashLabels from "../../components/hocs/withLearnDashTranslations";
  5. import withActiveCallBacks from "../../navigators/react-navigation-addons/withActiveCallBacks";
  6. import {withNavigation} from "../../components/hocs/withNavigation";
  7. import PropTypes from "prop-types";
  9. const buildFilterProps = props => ({
  10. 	navigation: props.navigation,
  11. 	screenTitle: props.route.params?.item?.label || props.labels.courses,
  12. 	...props
  13. });
  15. /**
  16.  * You can use this component to display your course categories screen in your custom screen.
  17.  * @component
  18.  * @example <caption> Display course categories screen with a component to navigate to a featured course </caption>
  19.  *
  20.  * //In custom_code/components/MyCustomScreen.js...
  21.  * import React from "react";
  22.  * import {View, Button} from "react-native";
  23.  * import {useSelector} from "react-redux";
  24.  * import {CommonActions} from "@react-navigation/native";
  25.  *
  26.  * import CourseCategoriesScreen from "@src/containers/Custom/CourseCategoriesScreen";
  27.  * import {useScreenProps} from "@src/navigators/v5/ScreenPropsProvider";
  28.  *
  29.  * const MyCustomScreen = props => {
  30.  *     const {colors} = useScreenProps(["colors"]);
  31.  *     const state = useSelector(state => state);
  32.  *     const featuredCourseId = 49;
  33.  *
  34.  *     const goToFeaturedCourse = courseId => {
  35.  *         const featuredCourse = state.coursesCache.byId.get(
  36.  *             courseId ? courseId.toString() : ""
  37.  *         );
  38.  *
  39.  *         //Navigate to featured course
  40.  *         props.navigation.dispatch(
  41.  *             CommonActions.navigate({
  42.  *                 name: "CoursesSingleScreen",
  43.  *                 params: {
  44.  *                     id: featuredCourse.id,
  45.  *                     featuredCourse
  46.  *                 },
  47.  *                 key: featuredCourse.id.toString()
  48.  *             })
  49.  *         );
  50.  *     };
  51.  *
  52.  *     return (
  53.  *         <View style={{flex: 1}}>
  54.  *             <View style={{flex: 0.8}}>
  55.  *                 <CourseCategoriesScreen
  56.  *                     {...props}
  57.  *                     screenTitle="Course Categories"
  58.  *                     hideFilters={true}
  59.  *                     headerHeight={150}
  60.  *                     hideNavigationHeader={true}
  61.  *                 />
  62.  *             </View>
  63.  *
  64.  *             <View style={{flex: 0.2, backgroundColor: colors.bodyFrontBg}}>
  65.  *                 <Button
  66.  *                     title="Go to featured course"
  67.  *                     onPress={() => goToFeaturedCourse(featuredCourseId)}
  68.  *                 />
  69.  *             </View>
  70.  *         </View>
  71.  *     );
  72.  * };
  73.  *
  74.  *
  75.  * export default MyCustomScreen;
  76.  *
  77.  *
  78.  * //In custom_code/index.js...
  79.  *
  80.  * ...
  81.  *
  82.  * import MyCustomScreen from "./components/MyCustomScreen";
  83.  *
  84.  * export const applyCustomCode = externalCodeSetup => {
  85.  *   externalCodeSetup.navigationApi.replaceScreenComponent("courses_category", MyCustomScreen);
  86.  * }
  87.  */
  88. export const CourseCategoriesScreen = compose(
  89. 	withLearndashLabels,
  90. 	withNavigation,
  91. 	withActiveCallBacks,
  92. 	mapProps(buildFilterProps)
  93. )(CourseCategoriesFilter);
  95. CourseCategoriesScreen.propTypes = {
  96. 	/**
  97. 	 * List screen title. Default comes from translation files in BuddyBoss site
  98. 	 * {String}
  99. 	 */
  100. 	screenTitle: PropTypes.string,
  101. 	/**
  102. 	 * Use `true` to hide title of the screen
  103. 	 * {Boolean}
  104. 	 */
  105. 	hideTitle: PropTypes.bool,
  106. 	/**
  107. 	 * Use `true` to hide filters in the screen
  108. 	 * {Boolean}
  109. 	 */
  110. 	hideFilters: PropTypes.bool,
  111. 	/**
  112. 	 * Use `true` to hide the screen title container when scrolling
  113. 	 * {Boolean}
  114. 	 */
  115. 	hideNavigationHeader: PropTypes.bool,
  116. 	/**
  117. 	 * Define header height
  118. 	 * {Number}
  119. 	 */
  120. 	headerHeight: PropTypes.number
  121. };
  123. export default CourseCategoriesScreen;