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, colors } = props;
const dispatch = useDispatch();
//If showing the matched screen, show custom filter before displaying list component
if (navigation?.state?.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} />)
MyCustomScreen.navigationOptions = { header: null };
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()}
})