App Codex Version: 1.0.0

Source

externalCode/activitiesScreen.js

  1. import * as React from "react";
  3. /**
  4.  * @typedef {Object} ActivityViewModel
  5.  * @property {Number} id  Activity id
  6.  * @property {String} action  Description of activity update
  7.  * @property {String} component  Info on where the activity came from such as "groups", "activity"
  8.  * @property {Object} user  User's id and name
  9.  * @property {String} content  Html content of activity to display
  10.  * @property {String} contentStripped  Content of activity to display stripped of html tags
  11.  * @property {Number} parentId  Used for activity relative id
  12.  * @property {Number} firstParentId Used for activity relative id
  13.  * @property {String} type Type of activity. Ex: "activity_update"
  14.  * @property {String} avatarUrl Url to user's avatar
  15.  * @property {Boolean} can_report True if user can report activity
  16.  * @property {Boolean} reported True if user has already reported the activity
  17.  * @property {Boolean} isMine True if activity is from user
  18.  * @property {Boolean} can_comment True if user can comment
  19.  * @property {Boolean} can_delete True if user can delete the activity
  20.  * @property {Boolean} can_favorite True if user can mark activity as favorite
  21.  * @property {Boolean} can_edit True if user can edit the activity
  22.  * @property {Boolean} isFavorite True if activity is marked as favorite
  23.  * @property {Object} activityData Contains more activity data such as groupName if post came from group activity
  24.  * @property {Number} commentCount Number of people commented in the activity
  25.  * @property {Function} authorClick Function that will navigate to profile of the user who posted the activity
  26.  * @property {String} dateRecorded Ex: "a month ago"
  27.  * @property {String} dateRecordedLong Ex: "3 weeks, 6 days ago"
  28.  * @property {Array<Object>} children Activity data related to main activity such as if there are comments in the activity
  29.  * @property {Array<Object>} media Media attached to activity
  30.  * @property {Array} documents Documents attached to activity
  31.  * @property {Array} platformMedia Platform media attached to activity
  32.  * @property {Object} gif Gif information including preview_url, video_url and rendered html
  33.  * @property {Object<Function>} actions Actions for `reply()` and `edit()`
  34.  * @property {String} privacy Privacy setting of the activity
  35.  *
  36.  */
  38. /**
  39.  * @typedef {Object} Button
  40.  * @param {boolean} permissionField Flag that tells should button show or not
  41.  * @param {React.ComponentType<any>} jsx Contains components for Like, Comment and Delete buttons
  42.  */
  44. /**
  45.  * @typedef {Function} ActivityButtonsFilterCallback
  46.  * @param {Array<Button>} buttons Current buttons array
  47.  * @param {ActivityViewModel} item Activity view model
  48.  * @param {Array<string>} actionsList List of allowed actions
  49.  * @param {Object} settings Settings object got from API
  50.  * @return {Array<Button>} Changed array of buttons
  51.  */
  53. /**
  54.  * @typedef {Function} ActivityViewModelFilterCallback
  55.  * @property {ActivityViewModel} viewModel Activity view model
  56.  * @property {Activity} activity Original activity object
  57.  * @property {ActivityModelDependencies} depend Dependencies (functions used to create view model)
  58.  * @return {Object} New view model
  59.  */
  61. /**
  62.  * @typedef {Object} ActivityModelDependencies
  63.  * @property {Object} config App configuration object
  64.  * @property {TranslationFunction} t Translation function
  65.  * @property {Object} actions Object with activity actions
  66.  * @property {boolean} isProfileList Flag that tells if it's the current screen under profile
  67.  * @property {User} currentUser Logged in user
  68.  * @property {ToUserBasedOnSettings} toUserBasedOnSettings Navigate to user function
  69.  */
  71. /**
  72.  * @typedef {Object} ActivityLikeComponentProps
  73.  * @property {LocalImageSource} icon
  74.  * @property {Function} pressHandler Mark activity as favorite
  75.  * @property {String} tintColor Default tint color of activity like button. Changes value depending on if activity is liked or not.
  76.  * @property {Array<Object>} touchableStyle Default styling of the like button container
  77.  * @property {Object} style Default styling of the like button
  78.  * @property {Function} renderText Returns JSX to display text beside the like button
  79.  * @property {ActivityViewModel}
  80.  *
  81.  */
  83. /**
  84.  * @typedef {Object} ActivityHeaderComponentProps
  85.  * @property {User} user
  86.  * @property {ActivityViewModel} item
  87.  * @property {Object} global App global style
  88.  * @property {Object} colors App colors
  89.  * @property {Object} tagsStyles Tag default styles
  90.  * @property {Object} contentWrapperStyle Default content wrapper for activity item
  91.  * @property {Object} style Default style for activity item wrapper
  92.  * @property {Function} attemptDeepLink Helper function which is used for deep linking when activity is pressed
  93.  * @property {Number} avatarSize Returns default size of avatar
  94.  * @property {Boolean} hidePrivacy Returns `true` if privacy button should be hidden
  95.  * @property {Function} onChangePrivacy Helper function which is used for changing the activity's privacy
  96.  * @property {Boolean} privacyModalVisible Returns `true` if modal for setting privacy should be visible
  97.  * @property {Object} contentWrapperStyle Returns the default styling for the content wrapper
  98.  * @property {Number} avatarSize The default size of the avatar
  99.  * @property {Boolean} hidePrivacy Returns `true` if privacy indicator should be shown
  100.  * @property {String} profileAvatarType Avatar type to be displayed in the activitypost
  101.  * @property {Boolean} enableProfileGravatar Returns `true` if profile gravatar is enabled
  102.  * @property {String} defaultProfileAvatarType The default profile avatar type
  103.  * @property {String} defaultCustomProfileAvatarImage The default custom profile avatar image
  104.  * @property {String} activitiesFilter Active filter in the activities list
  105.  * @property {Boolean} isGroupScreen Returns `true` if component is being rendered in a group screen
  106.  * @property {Function} renderActivityOptions Function to render activity options
  107.  *
  108.  */
  110. /**
  111.  * @typedef {Function} TransformActivitiesParams
  112.  * @param {FetchActivitiesParams}
  113.  * @return {Object}
  114.  */
  116. /**
  117.  * @typedef {Object} FetchActivitiesParams
  118.  * @see {@link https://www.buddyboss.com/resources/api/#api-Activity-GetBBActivities}
  119.  * @property {String} display_comments Allowed values: `stream`, `threaded`, `false`
  120.  * @property {?String} search Limit results to those matching a string.
  121.  *
  122.  */
  124. /**
  125.  * @typedef {Object} TransformActivityCommentButtons
  126.  * @property {Array<String>} params Default buttons allowed in the ActivityComment component
  127.  */
  129. /**
  130.  * @typedef {Object} BeforeActivitySingleComponentProps
  131.  * @property {ActivityViewModel} item
  132.  * @property {Number} index
  133.  * @property {User} currentUser
  134.  */
  136. /**
  137.  * @typedef {Object} AfterActivitySingleComponentProps
  138.  * @property {ActivityViewModel} item
  139.  * @property {Number} index
  140.  * @property {User} currentUser
  141.  */
  143. /**
  144.  * @typedef {Object} HeaderActionComponentProps
  145.  * @property {Boolean} canCreateActivity Returns `true` if create activity component should be visible
  146.  * @property {Function} onPress Navigates user to the create activity post screen
  147.  * @property {Object} colors App colors
  148.  */
  150. /**
  151.  * @typedef {Object} ActivityImageComponentProps
  152.  * @property {String} thumbnail Url to image's thumbnail
  153.  * @property {String} source Url to image's source
  154.  * @property {Object} styles Default styles
  155.  * @property {String} resizeMode Default resize mode
  156.  */
  158. /**
  159.  * @typedef {Object} AfterActivityContentComponentProps
  160.  * @property {ActivityViewModel} item
  161.  * @property {User} currentUser
  162.  */
  164. /**
  165.  * @typedef {Object} ActivityCommentHeaderComponentProps
  166.  * @property {Object} styles Default styles
  167.  * @property {Function} handleAuthorClick Used for navigating to the author's profile
  168.  * @property {String} username Author's name
  169.  * @property {String} date Comment date
  170.  * @property {Object} item Activity comment details
  171.  */
  173. /**
  174.  * @typedef {Object} ActivityCommentAvatarProps
  175.  * @property {Number} userId User id of the comment author
  176.  * @property {Function} handleAuthorClick Navigates to the author's profile
  177.  * @property {Number} size Default avatar size
  178.  * @property {Object} source Default uri for author's image
  179.  */
  181. /**
  182.  * @class
  183.  * Activities Screen Hooks.
  184.  * Instance name: activitiesScreenApi
  185.  *
  186.  
  187.  * The ActivitiesScreenHooksApi() enables you to modify your activity options on the app activity list screen.
  188.  
  189.    The filters below have a range of options such as adding/changing the action button on or tweaking your ViewModel options in the app. 
  190.  * @example
  191.  * externalCodeSetup.activitiesScreenApi.METHOD_NAME
  192.  */
  193. export class ActivitiesScreenHooksApi {
  194. 	/**
  195. 	 * @private
  196. 	 * @property {ActivityButtonsFilterCallback} activityButtonsFilter
  197. 	 */
  198. 	activityButtonsFilter = (b, item, a, settings) => b;
  200. 	/**
  201. 	 * It sets the filter functions so that you can change the "Activity" action buttons/ call-to-action buttons.
  202. 	 * The activity buttons for this filter can be used to add or modify buttons include like, comment, or edit buttons in the activity list screen.
  203. 	 * @method
  204. 	 * @param {ActivityButtonsFilterCallback} activityButtonsFilter Function that changes call-to-action/activity buttons in the activity list screen
  205. 	 * @example
  206. 	 * ...
  207. 	 * import { Text, TouchableOpacity } from 'react-native'
  208. 	 *
  209. 	 * export const applyCustomCode = externalCodeSetup => {
  210. 	 *   externalCodeSetup.activitiesScreenApi.setActivityButtonsFilter((buttons, item, actionsList, settings) => {
  211. 	 *
  212. 	 *     //Do something onPress
  213. 	 *       const onPress = () => {
  214. 	 *          //Call api...
  215. 	 *     }
  216. 	 *
  217. 	 *     return [
  218. 	 *     ...buttons,
  219. 	 *      {
  220. 	 *        // use false if it should be hidden.
  221. 	 *        // User can also use data from item. For example, instead of static boolean value, user can use `item.can_comment` if button should show if user can also comment
  222. 	 *        permissionField: true,
  223. 	 *        jsx: (
  224. 	 *          <TouchableOpacity onPress={onPress}>
  225. 	 *             <Text>Share</Text>
  226. 	 *          </TouchableOpacity>
  227. 	 *        )
  228. 	 *      }]
  229. 	 *   })
  230. 	 * }
  231. 	 */
  232. 	setActivityButtonsFilter = activityButtonsFilter => {
  233. 		this.activityButtonsFilter = activityButtonsFilter;
  234. 	};
  236. 	// @deprecated
  237. 	ActivityListHeaderComponent = null;
  238. 	setActivityListHeaderComponent = ActivityListHeaderComponent => {
  239. 		this.ActivityListHeaderComponent = ActivityListHeaderComponent;
  240. 	};
  242. 	/**
  243. 	 * @private
  244. 	 * @property {ActivityViewModelFilterCallback} activityToViewModelFilter
  245. 	 */
  246. 	activityToViewModelFilter = (viewModel, activity, depend) => viewModel;
  247. 	/**
  248. 	 * A ViewModel object contains a field that the app requires when viewing an activity.
  249. 	 * It helps UI-related data to be stored, managed, and configured in a conscious way.
  250. 	 * You can use the filter function below to change the current activity viewModel.
  251. 	 * For example, some of the fields you can change include `content`, `isMine`, `can_edit`, and `commentCount`.
  252. 	 * @method
  253. 	 * @param {ActivityViewModelFilterCallback} activityToViewModelFilter Function that changes activity ViewModel
  254. 	 * @example
  255. 	 *    externalCodeSetup.activitiesScreenApi.setActivityToViewModelFilter((viewModel, activity, depend) => {
  256. 	 *
  257. 	 *        return {
  258. 	 *            ...viewModel,
  259. 	 *            //Setting the following below as false will remove the buttons that allows a user to comment, delete, favorite and edit
  260. 	 *            can_comment: false,
  261. 	 *            can_delete: false,
  262. 	 *            can_favorite: false,
  263. 	 *            can_edit: false
  264. 	 *        }
  265. 	 *        return viewModel;
  266. 	 *    })
  267. 	 */
  268. 	setActivityToViewModelFilter = activityToViewModelFilter => {
  269. 		this.activityToViewModelFilter = activityToViewModelFilter;
  270. 	};
  272. 	ActivityLikeComponent = null;
  273. 	/**
  274. 	 * You can use this hook to replace the default "Like"/"Thumbs up" button to any of your preferred buttons in the Activities List screen.
  275. 	 * @method
  276. 	 * @param {?React.ComponentType<ActivityLikeComponentProps>} ActivityLikeComponent
  277. 	 * @example <caption> Like button changes icon and color when pressed</caption>
  278. 	 *
  279. 	 * //In custom_code/components/ActivityLikeButton.js...
  280. 	 *
  281. 	 * import React from "react";
  282. 	 * import IconButton from "@src/components/IconButton";
  283. 	 *
  284. 	 * const ActivityLikeButton = props => {
  285. 	 *
  286. 	 *    const {
  287. 	 *        pressHandler,
  288. 	 *        tintColor,
  289. 	 *        touchableStyle,
  290. 	 *        colors,
  291. 	 *        style,
  292. 	 *        renderText,
  293. 	 *        item } = props;
  294. 	 *
  295. 	 *    const likedIcon = {fontIconName: "thumbs-up", weight: 300}
  296. 	 *    const regularIcon = {fontIconName: "thumbs-up", weight: 400}
  297. 	 *
  298. 	 *    return (
  299. 	 *        <IconButton
  300. 	 *            icon={item.isFavorite ? likedIcon : regularIcon}
  301. 	 *            pressHandler={pressHandler}
  302. 	 *            tintColor={item.isFavorite ? "#A1DAD9" : tintColor}
  303. 	 *            touchableStyle={touchableStyle}
  304. 	 *            style={style}
  305. 	 *            renderText={renderText}
  306. 	 *        />
  307. 	 *    );
  308. 	 * };
  309. 	 * export default ActivityLikeButton;
  310. 	 *
  311. 	 * //In custom_code/index.js...
  312. 	 *
  313. 	 * ...
  314. 	 *
  315. 	 * import ActivityLikeButton from './components/ActivityLikeButton';
  316. 	 * export const applyCustomCode = externalCodeSetup => {
  317. 	 *   externalCodeSetup.activitiesScreenApi.setActivityLikeComponent(props => <ActivityLikeButton {...props} />)
  318. 	 * }
  319. 	 *
  320. 	 */
  321. 	setActivityLikeComponent = ActivityLikeComponent => {
  322. 		this.ActivityLikeComponent = ActivityLikeComponent;
  323. 	};
  325. 	ActivityHeaderComponent = null;
  326. 	/**
  327. 	 * It is used to modify the appearance and structure of the activities header component in the activities list screen.
  328. 	 * @method
  329. 	 * @param {?React.ComponentType<ActivityHeaderComponentProps>} ActivityHeaderComponent
  330. 	 * @example
  331. 	 *
  332. 	 * //In custom_code/components/ActivityHeader.js...
  333. 	 *
  334. 	 * import React from "react";
  335. 	 * import {View, StyleSheet, Text, useWindowDimensions} from "react-native";
  336. 	 * import AppAvatar from "@src/components/AppAvatar";
  337. 	 * import AppTouchableOpacity from "@src/components/AppTouchableOpacity";
  338. 	 * import {dateRenderer, spanRenderer} from "@src/utils/htmlRender";
  339. 	 * import {stripActivityTags} from "@src/utils/buddypress";
  340. 	 * import ActivityPrivacyButton from "@src/components/Activity/Privacy/ActivityPrivacyButton";
  341. 	 * import {getProfileImageSource} from "@src/components/Profile/Xprofile/utils";
  342. 	 * import {withDefaultProfileImageSettings} from "@src/components/hocs/withDefaultProfileImageSettings";
  343. 	 * import CustomHTML from "@src/components/HTML";
  344. 	 * import Icon from "@src/components/Icon";
  345. 	 * import {filters} from "@src/reducers/activities";
  346. 	 * import {BuddyPressScopes} from "@src/services/enums/buddyPress";
  347. 	 *
  348. 	 * const ActivityHeader = props => {
  349. 	 *     const {
  350. 	 *         t,
  351. 	 *         user,
  352. 	 *         item,
  353. 	 *         global,
  354. 	 *         colors,
  355. 	 *         tagsStyles,
  356. 	 *         attemptDeepLink,
  357. 	 *         showAvatar,
  358. 	 *         style,
  359. 	 *         textColor,
  360. 	 *         setItemHeight = () => {},
  361. 	 *         onChangePrivacy,
  362. 	 *         privacyModalVisible,
  363. 	 *         contentWrapperStyle,
  364. 	 *         avatarSize,
  365. 	 *         hidePrivacy,
  366. 	 *         profileAvatarType,
  367. 	 *         enableProfileGravatar,
  368. 	 *         defaultProfileAvatarType,
  369. 	 *         defaultCustomProfileAvatarImage,
  370. 	 *         activitiesFilter,
  371. 	 *         isGroupScreen,
  372. 	 *         renderActivityOptions
  373. 	 *     } = props;
  374. 	 *
  375. 	 *     const lightText = colors.descLightTextColor;
  376. 	 *
  377. 	 *     let avatarName = item.user?.name || "";
  378. 	 *     const {is_pinned} = item;
  379. 	 *     if (item.user?.id === user?.id) avatarName = user.name; // user is unavailable during guest login
  380. 	 *
  381. 	 *     const showPrivacy =
  382. 	 *         !hidePrivacy &&
  383. 	 *         item.can_edit &&
  384. 	 *         (item.type === "activity_update" || item.type === "activity_comment") &&
  385. 	 *         item.component !== "groups";
  386. 	 *
  387. 	 *     const showPin = isGroupScreen
  388. 	 *         ? item.component === BuddyPressScopes.groups
  389. 	 *         : activitiesFilter === filters[0] && item.isGroupPost === false;
  390. 	 *
  391. 	 *     const onLayout = ({
  392. 	 *         nativeEvent: {
  393. 	 *             layout: {height}
  394. 	 *         }
  395. 	 *     }) => {
  396. 	 *         setItemHeight(height);
  397. 	 *     };
  398. 	 *
  399. 	 *     const {width} = useWindowDimensions();
  400. 	 *
  401. 	 *     const tColor = textColor || colors.textColor;
  402. 	 *
  403. 	 *     return (
  404. 	 *         <View style={[global.row, styles.header, style]}>
  405. 	 *             {showAvatar && (
  406. 	 *                 <AppTouchableOpacity onPress={item.authorClick}>
  407. 	 *                     <AppAvatar
  408. 	 *                         size={avatarSize || 40}
  409. 	 *                         name={avatarName}
  410. 	 *                         source={getProfileImageSource(item.user, {
  411. 	 *                             avatarType: profileAvatarType,
  412. 	 *                             enableGravatar: enableProfileGravatar,
  413. 	 *                             defaultAvatarType: defaultProfileAvatarType,
  414. 	 *                             defaultCustomAvatarImage: defaultCustomProfileAvatarImage
  415. 	 *                         })}
  416. 	 *                     />
  417. 	 *                 </AppTouchableOpacity>
  418. 	 *             )}
  419. 	 *             <View
  420. 	 *                 onLayout={onLayout}
  421. 	 *                 style={[
  422. 	 *                     styles.text,
  423. 	 *                     {marginLeft: showAvatar ? 10 : 0},
  424. 	 *                     contentWrapperStyle
  425. 	 *                 ]}
  426. 	 *             >
  427. 	 *                 <CustomHTML
  428. 	 *                     allowedAllTags
  429. 	 *                     classesStyles={{"activity-to": {marginHorizontal: 3}}}
  430. 	 *                     tagsStyles={{
  431. 	 *                         ...tagsStyles,
  432. 	 *                         rawtext: {
  433. 	 *                             ...global.activityHtmlrawtext,
  434. 	 *                             color: tColor
  435. 	 *                         },
  436. 	 *                         p: {...global.activityHtmlp, color: tColor},
  437. 	 *                         a: {
  438. 	 *                             ...global.activityHtmla,
  439. 	 *                             color: tColor,
  440. 	 *                             textDecorationLine: "none"
  441. 	 *                         }
  442. 	 *                     }}
  443. 	 *                     contentWidth={width}
  444. 	 *                     baseStyle={Object.assign(
  445. 	 *                         {},
  446. 	 *                         global.activityHtml,
  447. 	 *                         textColor ? {color: textColor} : {}
  448. 	 *                     )}
  449. 	 *                     renderersProps={{
  450. 	 *                         a: {onPress: attemptDeepLink(false)}
  451. 	 *                     }}
  452. 	 *                     source={{html: stripActivityTags(item.action)}}
  453. 	 *                     renderers={{
  454. 	 *                         a: dateRenderer,
  455. 	 *                         span: spanRenderer
  456. 	 *                     }}
  457. 	 *                 />
  458. 	 *
  459. 	 *                 <View style={[global.row, {marginTop: 3}]}>
  460. 	 *                     <Text style={[global.activityDate, {color: lightText}]}>
  461. 	 *                         {item.dateRecorded} {`${item.is_edited ? `(${t("edited")})` : ""}`}
  462. 	 *                     </Text>
  463. 	 *                     {showPrivacy &&
  464. 	 *                         !!item.privacy &&
  465. 	 *                         item.privacy !== "media" && (
  466. 	 *                             <ActivityPrivacyButton
  467. 	 *                                 hideBorder={true}
  468. 	 *                                 privacyModalVisible={privacyModalVisible}
  469. 	 *                                 privacy={item.privacy}
  470. 	 *                                 onPress={onChangePrivacy}
  471. 	 *                                 colors={colors}
  472. 	 *                                 global={global}
  473. 	 *                             />
  474. 	 *                         )}
  475. 	 *                 </View>
  476. 	 *             </View>
  477. 	 *             {showPin &&
  478. 	 *                 is_pinned && (
  479. 	 *                     <View style={styles.pinContainer}>
  480. 	 *                         <Icon
  481. 	 *                             icon={{fontIconName: "thumbtack", weight: "400"}}
  482. 	 *                             tintColor={colors.textIconColor}
  483. 	 *                             size={20}
  484. 	 *                         />
  485. 	 *                     </View>
  486. 	 *                 )}
  487. 	 *
  488. 	 *             {renderActivityOptions && renderActivityOptions()}
  489. 	 *         </View>
  490. 	 *     );
  491. 	 * };
  492. 	 *
  493. 	 * const styles = StyleSheet.create({
  494. 	 *     item: {},
  495. 	 *     header: {
  496. 	 *         alignItems: "flex-start",
  497. 	 *         justifyContent: "space-between",
  498. 	 *         marginBottom: 11
  499. 	 *     },
  500. 	 *     pinContainer: {
  501. 	 *         alignSelf: "flex-start",
  502. 	 *         marginTop: 2,
  503. 	 *         height: 26,
  504. 	 *         width: 26,
  505. 	 *         alignItems: "center",
  506. 	 *         justifyContent: "center"
  507. 	 *     },
  508. 	 *     text: {
  509. 	 *         flex: 1
  510. 	 *     }
  511. 	 * });
  512. 	 *
  513. 	 * export default withDefaultProfileImageSettings(ActivityHeader);
  514. 	 *
  515. 	 * //In custom_code/index.js..
  516. 	 *
  517. 	 * ...
  518. 	 * import ActivityHeader from "./components/ActivityHeader";
  519. 	 * export const applyCustomCode = externalCodeSetup => {
  520. 	 *   externalCodeSetup.activitiesScreenApi.setActivityHeaderComponent(props => <ActivityHeader {...props} />)
  521. 	 * }
  522. 	 *
  523. 	 */
  524. 	setActivityHeaderComponent = ActivityHeaderComponent => {
  525. 		this.ActivityHeaderComponent = ActivityHeaderComponent;
  526. 	};
  528. 	fetchParamsFilter = params => params;
  530. 	/**
  531. 	 * It overrides the parameters that are used to fetch activities in the Activities screen and enables you to add more parameters when fetching an activity so that you can make it as customizable as possible when calling its API.
  532. 	 * @method
  533. 	 * @param {TransformActivitiesParams} fetchParamsFilter
  534. 	 *
  535. 	 * @example <caption> Create a custom filter in activities screen </caption>
  536. 	 *
  537. 	 * //In components/ActivitiesBeforeList.js...
  538. 	 *
  539. 	 * import React, { useState } from "react";
  540. 	 * import { TextInput, View, Button } from 'react-native'
  541. 	 * import { useDispatch } from "react-redux";
  542. 	 * import { activitiesRequested } from "@src/actions/activities";
  543. 	 * import { getExternalCodeSetup } from "@src/externalCode/externalRepo";
  544. 	 * import withGlobalStyles from "@src/components/hocs/withGlobalStyles";
  545. 	 *
  546. 	 * const hook = getExternalCodeSetup().activitiesScreenApi;
  547. 	 *
  548. 	 * const screenName = "book";
  549. 	 *
  550. 	 * const filter = "favorites"; //"just-me", "friends", "groups", "favorites", "mentions", "following"
  551. 	 * const subfilters = {type: "new_member"}; // "-1", "new_member", "new_avatar", "updated_profile", "activity_update", "activity_comment", "friendship_accepted", "friendship_created", "created_group", "joined_group", "group_details_updated", "bbp_topic_create", "bbp_reply_create"
  552. 	 *
  553. 	 * const refresh = true; //Set to true to refresh list
  554. 	 * const searchTerm = "Tony"
  555. 	 *
  556. 	 * const ActivitiesBeforeList = (props) => {
  557. 	 *
  558. 	 *    const { navigation, route, colors } = props;
  559. 	 *
  560. 	 *    const dispatch = useDispatch();
  561. 	 *
  562. 	 *    //If showing the matched screen, show custom filter before displaying list component
  563. 	 *    if (route?.params?.item?.object === screenName) {
  564. 	 *
  565. 	 *        const [act, setAct] = useState('')
  566. 	 *
  567. 	 *        const handleSubmit = () => {
  568. 	 *
  569. 	 *            //Set custom parameters before fetching
  570. 	 *            hook.setFetchParamsFilter((props) => {
  571. 	 *
  572. 	 *                //You can add more parameters such as "subject", "keyword" etc...
  573. 	 *                return {
  574. 	 *                    ...props,
  575. 	 *                    display_comments: false,
  576. 	 *                    someActivities: act,
  577. 	 *                }
  578. 	 *            })
  579. 	 *
  580. 	 *            //Dispatch redux action to call api using customized filters
  581. 	 *            dispatch(activitiesRequested(filter, subfilters, refresh, searchTerm));
  582. 	 *
  583. 	 *        }
  584. 	 *
  585. 	 *        return <View style={{ backgroundColor: colors.whiteColor}}>
  586. 	 *
  587. 	 *            <TextInput
  588. 	 *                style={{paddingHorizontal: 20, marginTop: 10, fontSize: 20}}
  589. 	 *                autoFocus
  590. 	 *                value={act}
  591. 	 *                onChangeText={act => setAct(act)}
  592. 	 *                placeholder="Search for an Activity"
  593. 	 *            />
  594. 	 *
  595. 	 *            <Button
  596. 	 *                onPress={() => handleSubmit()}
  597. 	 *                title="Filter"
  598. 	 *            />
  599. 	 *        </View>
  600. 	 *    }
  601. 	 *
  602. 	 *    return null;
  603. 	 *
  604. 	 * }
  605. 	 *
  606. 	 * export default withGlobalStyles(ActivitiesBeforeList);
  607. 	 *
  608. 	 * //In components/MyCustomScreen.js...
  609. 	 * import React from 'react';
  610. 	 * import ActivitiesScreen from "@src/containers/Custom/ActivitiesScreen";
  611. 	 *
  612. 	 * const MyCustomScreen = props => (<ActivitiesScreen {...props} showSearch={false} hideFilters={true} headerHeight={250} />)
  613. 	 *
  614. 	 *
  615. 	 * export default MyCustomScreen;
  616. 	 *
  617. 	 * //In custom_code/index.js...
  618. 	 *
  619. 	 * ...
  620. 	 *
  621. 	 * import ActivitiesBeforeList from "./components/ActivitiesBeforeList";
  622. 	 * export const applyCustomCode = externalCodeSetup => {
  623. 	 *
  624. 	 *    externalCodeSetup.filterScreenApiHooks.setAfterFilterComponent(ActivitiesBeforeList);
  625. 	 *
  626. 	 *    externalCodeSetup.navigationApi.addNavigationRoute(
  627. 	 *       "book",
  628. 	 *       "BookScreen",
  629. 	 *       MyCustomScreen,
  630. 	 *       "All"
  631. 	 *    );
  632. 	 *    externalCodeSetup.navigationApi.addNavigationRoute(
  633. 	 *       "book",
  634. 	 *       "BookScreen",
  635. 	 *       MyCustomScreen,
  636. 	 *       "Main"
  637. 	 *    );
  638. 	 * }
  639. 	 */
  640. 	setFetchParamsFilter = fetchParamsFilter => {
  641. 		this.fetchParamsFilter = fetchParamsFilter;
  642. 	};
  644. 	activityCommentButtonsFilter = params => params;
  646. 	/**
  647. 	 * It overrides the filters used in the ActivityComment component.
  648. 	 * You can use this together with `setActivityButtonsFilter` to add or remove buttons in the ActivityComment component.
  649. 	 * @method
  650. 	 * @param {TransformActivityCommentButtons} activityCommentButtonsFilter
  651. 	 *
  652. 	 * @example <caption> Add new buttons in the main activity post and comment activity post </caption>
  653. 	 *
  654. 	 * ...
  655. 	 *
  656. 	 * export const applyCustomCode = externalCodeSetup => {
  657. 	 *     externalCodeSetup.activitiesScreenApi.setActivityButtonsFilter(
  658. 	 *         (buttons, item, actionsList, settings) => {
  659. 	 *
  660. 	 *             //Do something onPress
  661. 	 *             const onPress = () => {
  662. 	 *                 console.log(item);
  663. 	 *             };
  664. 	 *
  665. 	 *             //Add a share "Like" button
  666. 	 *             let newButtons = [
  667. 	 *                 {
  668. 	 *                     id: "reply",
  669. 	 *                     permissionField: true,
  670. 	 *                     jsx: (
  671. 	 *                         <TouchableOpacity onPress={onPress}>
  672. 	 *                             <Text>Share</Text>
  673. 	 *                         </TouchableOpacity>
  674. 	 *                     )
  675. 	 *                 },
  676. 	 *                 ...buttons
  677. 	 *             ];
  678. 	 *
  679. 	 *             //Replace the "Reply" button and add a new button
  680. 	 *             if (item.parentId){
  681. 	 *                 newButtons = [
  682. 	 *                     {
  683. 	 *                         id: "custom",
  684. 	 *                         permissionField: true,
  685. 	 *                         jsx: (
  686. 	 *                             <TouchableOpacity onPress={onPress}>
  687. 	 *                                 <Text>Custom | </Text>
  688. 	 *                             </TouchableOpacity>
  689. 	 *                         )
  690. 	 *                     },
  691. 	 *                     {
  692. 	 *                         id: "reply",
  693. 	 *                         permissionField: true,
  694. 	 *                         jsx: (
  695. 	 *                             <TouchableOpacity onPress={onPress}>
  696. 	 *                                 <Text>Reply</Text>
  697. 	 *                             </TouchableOpacity>
  698. 	 *                         )
  699. 	 *                     },
  700. 	 *                     buttons[1], //Delete button
  701. 	 *                     buttons[2] //Show more button
  702. 	 *                 ]
  703. 	 *             }
  704. 	 *
  705. 	 *             return newButtons;
  706. 	 *         }
  707. 	 *     );
  708. 	 *
  709. 	 *     //Allow ActivityComment to render the button with the 'custom' id
  710. 	 *     externalCodeSetup.activitiesScreenApi.setActivityCommentButtonsFilter(filters => {
  711. 	 *         return [
  712. 	 *             ...filters,
  713. 	 *             'custom'
  714. 	 *         ]
  715. 	 *     })
  716. 	 * }
  717. 	 */
  718. 	setActivityCommentButtonsFilter = activityCommentButtonsFilter => {
  719. 		this.activityCommentButtonsFilter = activityCommentButtonsFilter;
  720. 	};
  722. 	BeforeActivitySingleComponent = null;
  724. 	/**
  725. 	 * You can use this hook to add a component before each ActivitySingle component.
  726. 	 * @method
  727. 	 * @param {?React.ComponentType<BeforeActivitySingleComponentProps>} BeforeActivitySingleComponent
  728. 	 * @example <caption> Add a text before the ActivitySingle component for x page </caption>
  729. 	 *
  730. 	 * ...
  731. 	 *
  732. 	 * export const applyCustomCode = externalCodeSetup => {
  733. 	 *    externalCodeSetup.activitiesScreenApi.setBeforeActivitySingleComponent(({
  734. 	 *        item,
  735. 	 *        index,
  736. 	 *        currentUser
  737. 	 *    }) => {
  738. 	 *
  739. 	 *        const numberPerPage = 10;
  740. 	 *        const page = Math.ceil(index / numberPerPage);
  741. 	 *
  742. 	 *        if (page < 2){
  743. 	 *            return <Text>Hi {currentUser?.name}!</Text>
  744. 	 *        }
  745. 	 *
  746. 	 *        return null;
  747. 	 *
  748. 	 *    })
  749. 	 * }
  750. 	 */
  751. 	setBeforeActivitySingleComponent = BeforeActivitySingleComponent => {
  752. 		this.BeforeActivitySingleComponent = BeforeActivitySingleComponent;
  753. 	};
  755. 	AfterActivitySingleComponent = null;
  757. 	/**
  758. 	 * You can use this hook to add a component after each ActivitySingle component.
  759. 	 * @method
  760. 	 * @param {?React.ComponentType<AfterActivitySingleComponentProps>} AfterActivitySingleComponent
  761. 	 * @example
  762. 	 *
  763. 	 * ...
  764. 	 *
  765. 	 * externalCodeSetup.activitiesScreenApi.setAfterActivitySingleComponent(props => <Text>Hello World</Text>)
  766. 	 */
  767. 	setAfterActivitySingleComponent = AfterActivitySingleComponent => {
  768. 		this.AfterActivitySingleComponent = AfterActivitySingleComponent;
  769. 	};
  771. 	HeaderActionComponent = null;
  773. 	/**
  774. 	 * You can use this hook to customize the "create post" button located at the upper right section of the activities screen.
  775. 	 * @method
  776. 	 * @param {React.ComponentType<HeaderActionComponentProps>} HeaderActionComponent
  777. 	 * @example
  778. 	 *
  779. 	 * ...
  780. 	 *
  781. 	 * import IconButton from "@src/components/IconButton";
  782. 	 * import AuthWrapper from "@src/components/AuthWrapper";
  783. 	 * export const applyCustomCode = (externalCodeSetup) => {
  784. 	 *     externalCodeSetup.activitiesScreenApi.setHeaderActionComponent(
  785. 	 *         ({canCreateActivity, onPress, colors}) => {
  786. 	 *             return canCreateActivity ? (
  787. 	 *                 <AuthWrapper>
  788. 	 *                     <IconButton
  789. 	 *                         icon={{fontIconName: "pencil", weight: 200}} //pencil, round-filled
  790. 	 *                         pressHandler={onPress}
  791. 	 *                         tintColor={colors.headerIconColor}
  792. 	 *                         style={{
  793. 	 *                             height: 28
  794. 	 *                         }}
  795. 	 *                     />
  796. 	 *                 </AuthWrapper>
  797. 	 *             ) : null;
  798. 	 *         }
  799. 	 *     );
  800. 	 * }
  801. 	 */
  803. 	setHeaderActionComponent = HeaderActionComponent => {
  804. 		this.HeaderActionComponent = HeaderActionComponent;
  805. 	};
  807. 	ActivityImageComponent = null;
  808. 	/**
  809. 	 * You can use this hook to replace an activity image.
  810. 	 * For example, you can use this to change the component's dimensions.
  811. 	 * @method
  812. 	 * @param {?React.ComponentType<ActivityImageComponentProps>} ActivityImageComponent
  813. 	 * @example <caption> Allow image to occupy entire image container</caption>
  814. 	 *
  815. 	 * import ProgressiveImage from "@src/components/ProgressiveImage";
  816. 	 *
  817. 	 * export const applyCustomCode = (externalCodeSetup) => {
  818. 	 *
  819. 	 *     externalCodeSetup.activitiesScreenApi.setActivityImageComponent(({
  820. 	 *         thumbnail,
  821. 	 *         source,
  822. 	 *         styles,
  823. 	 *         resizeMode
  824. 	 *     }) => {
  825. 	 *
  826. 	 *         const customStyle = {
  827. 	 *             ...styles.container,
  828. 	 *             width: '100%'
  829. 	 *         }
  830. 	 *
  831. 	 *         return (
  832. 	 *             <ProgressiveImage
  833. 	 *                 thumbnailSource={{
  834. 	 *                     uri: thumbnail
  835. 	 *                 }}
  836. 	 *                 source={{
  837. 	 *                     uri: source
  838. 	 *                 }}
  839. 	 *                 style={styles.image}
  840. 	 *                 containerStyle={customStyle}
  841. 	 *                 resizeMode='cover'
  842. 	 *             />
  843. 	 *         );
  844. 	 *     });
  845. 	 * }
  846. 	 *
  847. 	 */
  848. 	setActivityImageComponent = ActivityImageComponent => {
  849. 		this.ActivityImageComponent = ActivityImageComponent;
  850. 	};
  852. 	AfterActivityContentComponent = null;
  853. 	/**
  854. 	 * You can use this hook to add a component after each ActivityContent component.
  855. 	 * @method
  856. 	 * @param {React.ComponentType<AfterActivityContentComponentProps>} AfterActivityContentComponent
  857. 	 * @example
  858. 	 *
  859. 	 * ...
  860. 	 *
  861. 	 *  externalCodeSetup.activitiesScreenApi.setAfterActivityContentComponent(
  862. 	 *   props => (
  863. 	 *       <TouchableOpacity>
  864. 	 *           <View style={{marginVertical: 5}}>
  865. 	 *               <Text style={{fontSize: 13}}>John and 35 others liked this post</Text>
  866. 	 *           </View>
  867. 	 *       </TouchableOpacity>
  868. 	 *   )
  869. 	 * );
  870. 	 *
  871. 	 */
  872. 	setAfterActivityContentComponent = AfterActivityContentComponent => {
  873. 		this.AfterActivityContentComponent = AfterActivityContentComponent;
  874. 	};
  876. 	ActivityCommentHeaderComponent = null;
  877. 	/**
  878. 	 * You can use this to customize the author name and post date of the activity comments.
  879. 	 * For example, you can add a "verified" badge beside the author's name using this hook.
  880. 	 * @method
  881. 	 * @param {?React.ComponentType<ActivityCommentHeaderComponentProps>} ActivityCommentHeaderComponent
  882. 	 * @example
  883. 	 *
  884. 	 * externalCodeSetup.activitiesScreenApi.setActivityCommentHeaderComponent(
  885. 	 *   props => {
  886. 	 *       const {styles, handleAuthorClick, username, date} = props;
  887. 	 *       return (
  888. 	 *           <View style={styles.textContainer}>
  889. 	 *               <Text style={styles.textInnerContainer}>
  890. 	 *                   <Text onPress={handleAuthorClick} style={styles.text}>
  891. 	 *                       {username}
  892. 	 *                   </Text>
  893. 	 *                   {"  "}
  894. 	 *                   {date}
  895. 	 *               </Text>
  896. 	 *           </View>
  897. 	 *       );
  898. 	 *   }
  899. 	 * );
  900. 	 *
  901. 	 */
  902. 	setActivityCommentHeaderComponent = ActivityCommentHeaderComponent => {
  903. 		this.ActivityCommentHeaderComponent = ActivityCommentHeaderComponent;
  904. 	};
  906. 	ActivityCommentAvatar = null;
  907. 	/**
  908. 	 * You can use this to customize the author avatar of the activity comments.
  909. 	 * @method
  910. 	 * @param {React.ComponentType<ActivityCommentAvatarProps>} ActivityCommentAvatar
  911. 	 * @example
  912. 	 *
  913. 	 * ...
  914. 	 *
  915. 	 * import AppTouchableOpacity from "@src/components/AppTouchableOpacity";
  916. 	 * import AppAvatar from "@src/components/AppAvatar";
  917. 	 *
  918. 	 * export const applyCustomCode = (externalCodeSetup) => {
  919. 	 *
  920. 	 *     externalCodeSetup.activitiesScreenApi.setActivityCommentAvatar(
  921. 	 *         ({handleAuthorClick, userId, size, source}) => (
  922. 	 *             <AppTouchableOpacity onPress={handleAuthorClick}>
  923. 	 *                 <AppAvatar
  924. 	 *                     userId={userId}
  925. 	 *                     size={size}
  926. 	 *                     source={source}
  927. 	 *                 />
  928. 	 *             </AppTouchableOpacity>
  929. 	 *         )
  930. 	 *     );
  931. 	 * }
  932. 	 *
  933. 	 */
  934. 	setActivityCommentAvatar = ActivityCommentAvatar => {
  935. 		this.ActivityCommentAvatar = ActivityCommentAvatar;
  936. 	};
  937. }