# new MembersListHooksApi()

Example

externalCodeSetup.membersListHooksApi.METHOD_NAME

# shouldHideFilterComponent

Deprecated:

• hides the BuddyPressListFilters bellow header in MembersList

# setActionsFilter(actionsFilter)

Parameters:

Example

The following example shows how to remove a button from the members list.

  externalCodeSetup.membersListHooksApi.setActionsFilter((buttonConfig) => {
    return buttonConfig.splice(0, 1);
  })

# setFetchParamsFilter(fetchParamsFilter)

Parameters:

Example

Create a custom filter in members screen

//In components/MembersBeforeList.js...

import React, { useState } from "react";
import { TextInput, View, Button } from 'react-native'
import { useDispatch } from "react-redux";
import { membersRequested } from "@src/actions/members";
import { getExternalCodeSetup } from "@src/externalCode/externalRepo";
import withGlobalStyles from "@src/components/hocs/withGlobalStyles";

const hook = getExternalCodeSetup().membersListHooksApi;

const screenName = "book";

const filter = "all"; //"all", "friends", "following", "followers", "requests"
const subfilters = {
   type: "active" // "active", "newest", "alphabetical", "random", "online", "popular"
};

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

const MembersBeforeList = (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 [experience, setExperience] = useState('');
       const [coursesCompleted, setCoursesCompleted] = useState('')

       const handleSubmit = () => {

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

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

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

       }

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

           <TextInput
               style={{paddingHorizontal: 20, marginTop: 10, fontSize: 20}}
               autoFocus
               keyboardType="number-pad"
               value={experience}
               onChangeText={experience => setExperience(experience)}
               placeholder="Experience (Cumulative Years)"
           />

           <TextInput
               style={{paddingHorizontal: 20, marginTop: 10, fontSize: 20}}
               value={coursesCompleted}
               onChangeText={coursesCompleted => setCoursesCompleted(coursesCompleted)}
               placeholder="Courses completed (Enter keyword...)"
           />

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

   return null;

}

export default withGlobalStyles(MembersBeforeList);

//In components/MyCustomScreen.js...
import React from 'react';
import MembersScreen from "@src/containers/Custom/MembersScreen";

const MyCustomScreen = props => (<MembersScreen {...props} showSearch={false} hideFilters={true} headerHeight={250} />)


export default MyCustomScreen;

//In custom_code/index.js...

...

import MembersBeforeList from "./components/MembersBeforeList";
export const applyCustomCode = externalCodeSetup => {

   externalCodeSetup.filterScreenApiHooks.setAfterFilterComponent(MembersBeforeList);

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

# setMemberItemComponent(MemberItemComponentnullable)

Parameters:

Example

Use default member item structure and add more information about the member

//In custom_code/components/MemberItem.js

import React, { useMemo } from "react";
import { View, StyleSheet, Text, ActivityIndicator } from "react-native";

//Load BuddyBoss components and helper functions
import AppAvatar from "@src/components/AppAvatar";
import { ItemTitle } from "@src/components//TextComponents";
import Icon from "@src/components/Icon";
import AppTouchableOpacity from "@src/components/AppTouchableOpacity";
import { Settings } from "@src/reducers/config";
import AuthWrapper from "@src/components/AuthWrapper";
import { withSettings } from "@src/components/hocs/withSettings";
import ActionSheetButton from "@src/components/ActionButtons/ActionSheetButton";
import { formatDate, displayUserName } from "@src/utils";
import { GUTTER } from "@src/styles/global";

const MemberItem = props => {
   const {
       item,
       global,
       actions,
       index,
       colors,
       settings,
       lastItem,
       groupId,
       locale,
       t,
       showLoader = false,
       rawData
   } = props;

   const userMeta = useMemo(() => {
       if (!!groupId && item.groupJoiningDate) {
           return `${t("members:joined")} ${formatDate(locale)(
               item.groupJoiningDate
           )}`;
       } else if (settings[Settings.ENABLE_MEMBER_TYPE_DISPLAY] && item.type) {
           return item.type;
       } else if (item.nicename) {
           return displayUserName(item.nicename);
       }
   });

   return (
       <AppTouchableOpacity
           onPress={item.onClick}
           style={[styles.item, index === 0 ? { paddingTop: 0 } : {}]}
      >
           <View style={[global.row, styles.itemInner]}>
               <AppAvatar
                   size={64}
                   name={item.fullname}
                   source={{
                       uri: item.avatarUrl
                   }}
               />
               <View
                   style={[global.row, !lastItem && global.bottomBorder, styles.text]}
               >
                   <View style={{ flex: 1 }}>
                       <ItemTitle global={global} style={{ marginBottom: 3 }}>
                           {item.fullname}
                       </ItemTitle>
                       {!!userMeta && <Text style={global.itemMeta}>{userMeta}</Text>}

                       //Add more data for member...
                       <Text>Link to user profile: {rawData?.link}</Text>
                       <Text>Last Activity: {rawData?.last_activity}</Text>
                       <Text>Friendship status: {rawData?.friendship_status}</Text>
                   </View>
                   {showLoader ? (
                       <ActivityIndicator size={"small"} color={colors.highlightColor} />
                   ) : (
                       <ActionSheetButton
                           headerProps={{
                               id: item.id,
                               title: item.fullname,
                               avatarSource: { uri: item.avatarUrl },
                               onClick: item.onClick
                           }}
                           object={item}
                           actionButtons={actions}
                           global={global}
                           colors={colors}
                           t={t}
                           renderButton={() => (
                               <AuthWrapper actionOnGuestLogin={"hide"}>
                                   <Icon
                                       icon={{fontIconName: "ellipsis-h", weight: 300}}
                                       tintColor={colors.textIconColor}
                                       styles={{
                                           margin: 5,
                                            height: 16
                                       }}
                                   />
                               </AuthWrapper>
                           )}
                        />
                   )}
               </View>
           </View>
       </AppTouchableOpacity>
   );
};

const styles = StyleSheet.create({
   item: {
       flex: 1,
       paddingHorizontal: GUTTER
   },
   itemInner: {
       flex: 1,
       justifyContent: "space-between"
   },
   text: {
       paddingVertical: 24,
       marginLeft: 14,
       justifyContent: "space-between",
       flex: 1
   },
   buttonsWrap: {}
});

export default withSettings(MemberItem);

//In custom_code/index.js

...

import MemberItem from "./components/MemberItem";
 export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.membersListHooksApi.setMemberItemComponent(props => {
    return <MemberItem {...props} />
  })
}

# setMemberViewModelFilter(memberViewModelFilter)

Parameters:

Example

externalCodeSetup.membersListHooksApi.setMemberViewModelFilter((props) => {
    return {...props, date: new Date()}
  })

# setSubFiltersFilter(subFiltersFilter)

Parameters:

Example

User would like to set "Alphabetical" as the first filter

externalCodeSetup.membersListHooksApi.setSubFiltersFilter(filter => {
    return {
        type: [
            {
                value: "alphabetical",
                label: "Alphabetical"
            },
            {
                value: "active",
                label: "Recently Active"
            },
            {
                value: "newest",
                label: "Newest Members"
            }
        ],
        member_type: filter.member_type
    };
});