Source

externalCode/photosScreen.js

/**
 * @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;
	};
}