# new ForumsHooksApi()

Example

externalCodeSetup.forumsHooksApi.METHOD_NAME

# defaultFilter

Deprecated:

• Yes

# setDefaultFilter

Deprecated:

• Yes

# setFetchParamsFilter(fetchParamsFilter)

Parameters:

Examples

Create a custom filter in forums screen

// In custom_code/components/ForumFiltersCustom.js...

import React, { useState } from "react";
import { TextInput, View, Button, Text, Switch } from 'react-native'
import { useDispatch } from "react-redux";
import { forumsLoadRequest } from "@src/actions/forums";
import { getExternalCodeSetup } from "@src/externalCode/externalRepo";
import withGlobalStyles from "@src/components/hocs/withGlobalStyles";
const hook = getExternalCodeSetup().forumsHooksApi;
const screenName = "forums";

getExternalCodeSetup().indexScreenApiHooks.setHeaderHeight((defaultHeaderHeight, filterType, navigation) => {

    if (filterType === screenName){
        return 300
    }

    return defaultHeaderHeight;

});

const filter = "all";
const subfilters = {
    orderby: "name", // "date", "ID", "author", "title", "name", "modified", "parent", "rand", "menu_order", "relevance", "popular", "activity"
    order: "desc"
}

const refresh = true; //Set to true to refresh list
const searchTerm = ""

const ForumFiltersCustom = (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 [isEnabled, setIsEnabled] = useState(false);

        const toggleSwitch = () => setIsEnabled(previousState => !previousState)

        const handleSubmit = () => {

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

                //You can add more parameters such as "subject", "keyword" etc...
                return {
                    ...props,
                    subscriptions : isEnabled ? true : false
                }
            })

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

        }

        return <View style={{ backgroundColor: colors.whiteColor, alignItems: "center", justifyContent: "center" }}>

            <Text>Subscribed forums only</Text>
            <Switch
                trackColor={{ false: "#767577", true: "#81b0ff" }}
                thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
                ios_backgroundColor="#3e3e3e"
                onValueChange={toggleSwitch}
                value={isEnabled}
            />
            <Button
                onPress={() => handleSubmit()}
                title="Filter"
            />
        </View>
    }

    return null;

}

export default withGlobalStyles(ForumFiltersCustom);

 //In custom_code/index.js...

 import ForumFiltersCustom from "./components/ForumFiltersCustom";
 export const applyCustomCode = externalCodeSetup => {
   externalCodeSetup.filterScreenApiHooks.setAfterFilterComponent(ForumFiltersCustom);
}

Sort by ascending order

externalCodeSetup.forumsHooksApi.setFetchParamsFilter(props => {
 return {
  ...props,
  order: "asc",
 }
})

# setForumItemComponent(ForumItemComponentnullable)

Parameters:

Example

Add more details in each forum items

//In custom_code/components/ForumItem.js...

import React from "react";
import { View, Text } from "react-native";
//Load BuddyBoss components and helper functions
import AppTouchableOpacity from "@src/components/AppTouchableOpacity";
import AppAvatar from "@src/components/AppAvatar";
import ActionSheetButton from "@src/components/ActionButtons/ActionSheetButton";
import { getForumAvatarSource, shortContent } from "@src/utils";
import AuthWrapper from "@src/components/AuthWrapper";
const ForumItem = ({
   forum,
   colors,
   formatDateFunc,
   global,
   actionButtons,
   t
}) => {
   const avatarSource = getForumAvatarSource(forum);
   const verticalSpacing = 18;
   return (
       <AppTouchableOpacity
           style={[global.forumListItem, { flexDirection: "row" }]}
           onPress={forum.toSingle}
       >
           <AppAvatar
               size={50}
               source={avatarSource}
               style={{ marginVertical: verticalSpacing }}
           />
           <View
               style={{
                   flex: 1,
                   flexDirection: "row",
                   marginLeft: 13,
                   ...global.bottomBorder,
                   paddingVertical: verticalSpacing
               }}
           >
               <View
                   style={{
                       flex: 1
                   }}
               >
                   <View>
                       <Text style={[global.itemTitle, { marginBottom: 4, marginTop: 1 }]}>
                           {forum.title}
                       </Text>
                       //Load short content if there forum has any
                       {forum.shortContent ? (
                           <Text
                               style={[global.itemDesc, { marginBottom: 8 }]}
                               numberOfLines={2}
                               ellipsizeMode={"tail"}
                           >
                               {shortContent(forum.shortContent)}
                           </Text>
                       ) : null}
                   </View>
                   <View style={[global.itemFooter]}>
                       <Text style={global.itemMeta}>{forum.topicCount}</Text>
                   </View>

                   //Include more forum details...
                   <View>
                       <Text style={global.itemMeta}>Created {formatDateFunc(forum.date)}</Text>
                       {forum?.group?.id && <Text style={global.itemMeta}>Associated group: {forum.group?.name}</Text>}
                   </View>
               </View>
               //Use an action sheet to display buttons such as toggle subscription to forum
               <AuthWrapper actionOnGuestLogin={"hide"}>
                   <ActionSheetButton
                       touchableStyle={{ alignSelf: "center", marginLeft: 10 }}
                       object={forum}
                       colors={colors}
                       actionButtons={actionButtons}
                       headerProps={{
                           id: forum.id,
                           onClick: forum.toSingle,
                           title: forum.title,
                           description: shortContent(forum.shortContent),
                           avatarSource
                       }}
                       global={global}
                       color={colors.textIconColor}
                       t={t}
                   />
               </AuthWrapper>
           </View>
       </AppTouchableOpacity>
   );
};

export default ForumItem;

//In custom_code/index.js

...

import ForumItem from "./components/ForumItem";
export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.forumsHooksApi.setForumItemComponent(props => <ForumItem {...props} />)
}

# setShowSearch(showSearch)

Parameters:

Example

externalCodeSetup.forumsHooksApi.setShowSearch((bbSetting) => false);

# setSubFiltersFilter(subFiltersFilter)

Parameters:

Example

User would like to have "Alphabetical" and "Date Created" filters only

externalCodeSetup.forumsHooksApi.setSubFiltersFilter((filters) => {
  return ["title", "date"]; //available filters include "activity", "date", "title", "popular"
})