Class

MembersListHooksApi

MembersListHooksApi()

Members Screen Hooks. Instance name: membersListHooksApi

You can customize how the members list screen such as replacing item components, modifying call to action buttons and more.

Constructor

# new MembersListHooksApi()

Example
externalCodeSetup.membersListHooksApi.METHOD_NAME

Members

# shouldHideFilterComponent

Deprecated:
  • hides the BuddyPressListFilters bellow header in MembersList

Methods

# setActionsFilter(actionsFilter)

It sets the filter function to modify the member action buttons array such as removing an action button from the list.

Parameters:
Name Type Description
actionsFilter TransformMemberActionsCallback
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)

It overrides the parameters that are used to fetch members in the Members screen so that you can make it as customizable as possible when calling its API.

Parameters:
Name Type Description
fetchParamsFilter TransformMembersParams
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)

Replaces a member item component in the members list. For example, you can add more information about the members as shown in the example below.

Parameters:
Name Type Attributes Description
MemberItemComponent React.ComponentType.<MemberItemComponentProps> <nullable>
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)

Sets the callback function that can change an existing member view model object.

Parameters:
Name Type Description
memberViewModelFilter TransformMemberViewModelCallback
Example
externalCodeSetup.membersListHooksApi.setMemberViewModelFilter((props) => {
    return {...props, date: new Date()}
  })

# setSubFiltersFilter(subFiltersFilter)

You can use this to set the sub filter function to rearrange the order of the filters in the Members screen. For example, you can rearrange the labels to set "Alphabetical" as the default filter on the members list screen under the search bar.

Parameters:
Name Type Description
subFiltersFilter TransformMembersSubFiltersFilterCallback
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
    };
});