# new CoursesHooksApi()

Example

externalCodeSetup.coursesHooksApi.METHOD_NAME

# setCategoriesSubFiltersFilter(subFiltersFilter)

Parameters:

Example

User would like to have "Newly Created" as the default selected filter

externalCodeSetup.coursesHooksApi.setCategoriesSubFiltersFilter((filters) => {
  return ["date", "title"]; //available filters include "title", "date"
})

# setCourseAuthorComponent(CourseAuthorComponent)

Parameters:

Example

...

import {WidgetItemCourseUserConnected} from "@src/components/Widgets/WidgetItemCourseUser";

export const applyCustomCode = (externalCodeSetup) => {

    externalCodeSetup.coursesHooksApi.setCourseAuthorComponent(({
        hideAuthor,
        global,
        userId,
        colors
    }) => {
        return !hideAuthor ? (
            <WidgetItemCourseUserConnected
                global={global}
                userId={userId}
                colors={colors}
            />
        ) : null;
    });
}

# setCourseDateComponent(CourseDateComponent)

Parameters:

Example

externalCodeSetup.coursesHooksApi.setCourseDateComponent(
 ({showDate, styles, date}) => {
   return showDate ? <Text style={styles.date}>{date}</Text> : null;
 }
);

# setCourseTitleComponent(CourseTitleComponent)

Parameters:

Example

Allow 3 lines of text instead of the default 2 lines

externalCodeSetup.coursesHooksApi.setCourseTitleComponent(({
  styles,
  title
}) => {
    return (
        <Text style={styles.title} numberOfLines={3} ellipsizeMode={"tail"}>
            {title}
        </Text>
    );
});

# setCourseViewModelFilter(courseViewModelFilter)

Parameters:

Example

Add date to course view model

externalCodeSetup.coursesHooksApi.setCourseViewModelFilter((viewModel, course, params, navigation) => {
  return {...viewModel, date: new Date()}
});

# setFetchCategoriesParamsFilter(fetchParamsFilter)

Parameters:

Example

Define how many course items to be displayed in course categories screen

externalCodeSetup.coursesHooksApi.setFetchCategoriesParamsFilter(props => {
  return {...props, courses_limit: 1}
});

# setFetchParamsFilter(fetchParamsFilter)

Parameters:

Examples

Create a custom filter in courses screen

//In components/MyCustomScreen.js...

import React from 'react';

import { View, Text } from "react-native"
import CoursesScreen from "@src/containers/Custom/CoursesScreen";
import withGlobalStyles from "@src/components/hocs/withGlobalStyles";
import CoursesFilter from "./CoursesFilter"

const MyCustomHeader = (props) => {

const {colors, title} = props

return <View style={{
   backgroundColor: colors.headerBg,
   height: 116}}>
   <Text style={{
     position: "absolute",
     color: colors.whiteColor,
     top: 60,
     left: 10,
     fontSize: 30
   }}> {title} </Text>
  </View>
}

const MyCustomScreen = props => {

 const { global, colors } = props;
 const title = "My Courses";

 return <>
   <MyCustomHeader {...props} title={title} />
     <CoursesFilter {...props} />
     <CoursesScreen {...props} showSearch={false} hideFilters={true} headerHeight={0} hideNavigationHeader={true}/>
 </>

}

export default withGlobalStyles(MyCustomScreen);

//In components/CoursesFilter.js...

import React, { useState } from "react";
import { TextInput, View, Button } from 'react-native'
import { useDispatch } from "react-redux";
import { requestCourses } from "@src/actions/courses";
import { getExternalCodeSetup } from "@src/externalCode/externalRepo";
import {withNavigation} from "@src/components/hocs/withNavigation";
const hook = getExternalCodeSetup().coursesHooksApi;
const requestAction = requestCourses;
const screenName = "book";

const filter = "my-courses"; // "all", "my-courses"
const subfilters = "title" // "title", "recent", "my_progress";
const refresh = true; //Set to true to refresh list

const CoursesFilter = (props) => {

   const { navigation, route, colors } = props;

   const dispatch = useDispatch();

   //If showing the matched screen, show custom filter before displaying list component
   if (route?.params?.item?.object === screenName) {

       const [author, setAuthor] = useState('');

       const handleSubmit = () => {

           //Set custom parameters before fetching
           hook.setFetchParamsFilter((props) => {

               //You can add more parameters such as "subject", "keyword" etc...
               return {
                   ...props,
                   author
               }
           })

           //Dispatch redux action to call api using customized filters
           dispatch(requestAction(filter, subfilters, refresh));

       }

       return <View style={{ backgroundColor: colors.whiteColor}}>

           <TextInput
               style={{paddingHorizontal: 20, marginTop: 10, fontSize: 20}}
               autoFocus
               value={author}
               onChangeText={author => setAuthor(author)}
               placeholder="Author"
           />

           <Button
               onPress={() => handleSubmit()}
               title="Filter"
           />
       </View>
   }

   return null;

}

export default withNavigation(CoursesFilter);

//In custom_code/index.js...

...

export const applyCustomCode = externalCodeSetup => {

   externalCodeSetup.navigationApi.addNavigationRoute(
      "book",
      "BookScreen",
      MyCustomScreen,
      "All"
   );
   externalCodeSetup.navigationApi.addNavigationRoute(
      "book",
      "BookScreen",
      MyCustomScreen,
      "Main"
   );
}

Set sort order

externalCodeSetup.coursesHooksApi.setFetchParamsFilter(props => {
  return {...props, order: "desc"}
});

# setSubFiltersFilter(subFiltersFilter)

Parameters:

Example

User would like to have "Alphabetical" filter only

externalCodeSetup.coursesHooksApi.setSubFiltersFilter((filters) => {
  return ["title"]; //available filters include "title", "recent", "my_progress"
})

# setWidgetItemCourseComponent(WidgetItemCourseComponent)

Parameters:

Example

Courses widget to be displayed as text list with additional details

...

import { WidgetItemCourseUserConnected } from "@src/components/Widgets/WidgetItemCourseUser"; //Use BuddyBoss component that can display author name using author id

export const applyCustomCode = externalCodeSetup => {

 const NewWidgetItemCourseComponent = (props) => {

   const { viewModel, global, colors } = props;

   return <View style={{ margin: 20 }}>

     <TouchableOpacity onPress={viewModel.onClick}>
       <Text>
         {viewModel.title}
       </Text>

       <WidgetItemCourseUserConnected
         lightText={true}
         global={global}
         userId={viewModel.authorId}
         colors={colors}
       />

       <Text>
         Enrolled members: {viewModel.enrolledMembers}
       </Text>
     </TouchableOpacity>

    </View>
  }
  externalCodeSetup.coursesHooksApi.setWidgetItemCourseComponent(NewWidgetItemCourseComponent)
}