/**
* @typedef {Function} TransformPhotosParams
* @param {FetchPhotosParams}
* @return {Object}
*/
/**
* @typedef {Object} FetchPhotosParams
* @see {@link https://www.buddyboss.com/resources/api/#api-Media-GetBBPhotos}
* @property {Number} page Current page of the collection.
* @property {Number} per_page Maximum number of items to be returned in result set.
* @property {String} scope Scope of the media. Allowed values: `friends`, `groups`, `personal`
* @property {String} search Limit results to those matching a string.
* @property {String} type Shorthand for certain orderby/order combinations.
*/
/**
* @class
* Photos Screen Hooks.
* Instance name: photosScreenApi
You can use this hook to customize the photos screen such as adding a custom filter and more.
* @example
* externalCodeSetup.photosScreenApi.METHOD_NAME
*/
export class PhotosScreenApi {
fetchParamsFilter = params => params;
/**
* It overrides the parameters that are used to fetch photos in the Photos screen so that you can make it as customizable as possible when calling its API.
* @method
* @param {TransformPhotosParams} fetchParamsFilter
*
* @example <caption> Create a custom filter in photos screen </caption>
*
* //In custom_code/PhotosFiltersCustom.js ...
*
* import React, { useState } from "react";
* import { TextInput, View, Button, Text, Switch } from 'react-native'
* import { useDispatch } from "react-redux";
* import { globalPhotosRequested } from "@src/actions/globalPhotos";
* import { getExternalCodeSetup } from "@src/externalCode/externalRepo";
* import withGlobalStyles from "@src/components/hocs/withGlobalStyles";
*
* const hook = getExternalCodeSetup().photosScreenApi;
*
* const screenName = "photos";
*
* getExternalCodeSetup().indexScreenApiHooks.setHeaderHeight((defaultHeaderHeight, filterType, navigation) => {
*
* if (filterType === screenName)
* return 300;
*
* return defaultHeaderHeight;
* });
*
* const filter = "all"; //"all", "personal", "groups"
* const subfilters = { type: "alphabetical" }; // "alphabetical", "recent", "my-progress"
*
* const refresh = true; //Set to true to refresh list
* const searchTerm = ""
*
* const PhotosFiltersCustom = (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 [albumId, setAlbumId] = useState(false);
*
* const handleSubmit = () => {
*
* //Set custom parameters before fetching
* getExternalCodeSetup().photosScreenApi.setFetchParamsFilter((props) => {
*
* //You can add more parameters such as "subject", "keyword" etc...
* return {
* ...props,
* album_id: albumId
* }
* })
*
* //Dispatch redux action to call api using customized filters
* dispatch(globalPhotosRequested(filter, subfilters, refresh, searchTerm));
*
* }
*
* return <View style={{ backgroundColor: colors.whiteColor, alignItems: "center", justifyContent: "center" }}>
*
* <TextInput
* style={{paddingHorizontal: 20, marginTop: 10, fontSize: 20}}
* autoFocus
* value={albumId}
* onChangeText={albumId => setAlbumId(albumId)}
* placeholder="Album ID..."
* />
* <Button
* onPress={() => handleSubmit()}
* title="Filter"
* />
* </View>
* }
*
* return null;
*
* }
*
* export default withGlobalStyles(PhotosFiltersCustom);
*
* // In custom_code/index.js ...
*
* import PhotosFiltersCustom from "./components/PhotosFiltersCustom";
* export const applyCustomCode = externalCodeSetup => {
* externalCodeSetup.filterScreenApiHooks.setAfterFilterComponent(PhotosFiltersCustom);
* }
*/
setFetchParamsFilter = fetchParamsFilter => {
this.fetchParamsFilter = fetchParamsFilter;
};
}
Source