Class

BlogApi

BlogApi()

Blog Screen Hooks. Instance name: blogApi

Constructor

# new BlogApi()

Example
externalCodeSetup.blogApi.METHOD_NAME

Methods

# hideSearch()

You can use this to remove the search component from the blog and forums screen. For example, the search bar that is by default at the top of the blog screen would be hidden.

Example
externalCodeSetup.blogApi.hideSearch();

# setBlogItemComponent(BlogItemComponentnullable)

Replaces the blog item component in the blog list.

Parameters:
Name Type Attributes Description
BlogItemComponent React.ComponentType.<BlogItemProps> <nullable>
Example
//In custom_code/components/BlogItem.js...
import React from "react";
import {View, StyleSheet, Text, Image} from "react-native";
import AppTouchableOpacity from "@src/components/AppTouchableOpacity";
import {ItemTitle} from "@src/components/TextComponents";
import Icon from "@src/components//Icon";
import {GUTTER} from "@src/styles/global";
import IconButton from "@src/components/IconButton";

const BlogItem = props => {
   const {item, global, colors, actions, index, t} = props;

   return (
     <AppTouchableOpacity
         onPress={item.onClick}
         style={[styles.item, index === 0 ? {paddingTop: 0} : {}]}
     >
      <View
        style={[
           global.row,
           {justifyContent: "space-between", flex: 1, alignItems: "flex-start"}
        ]}
      >
      <View style={[styles.imageWrapper]}>
         <Image
             style={[
                styles.imageStyle,
                {borderColor: "rgba(0,0,0,0.08)", borderWidth: 1}
              ]}
              resizeMode="cover"
              source={item.featuredImage}
         />
      </View>

      <View style={[global.bottomBorder, styles.infoContainer]}>
         <ItemTitle
              global={global}
              numberOfLines={2}
              style={[global.itemTitle, {color: colors.headingsColor}]}
         >
            {item.title}
         </ItemTitle>

         <Text style={[global.regularText, {marginTop: 8}]}>
            {item.authorName}
         </Text>

         <View style={{flex: 1}} />
            <View style={[global.row, {alignItems: "center"}]}>
               <Text style={global.textMeta}>{item.date}</Text>
                {item.allowComments && <View style={global.dotSep} />}
                {item.allowComments && (
                 <IconButton
                     icon={require("@src/assets/img/activity-actions/post-comment.png")}
                     tintColor={colors.textIconColor}
                     style={{height: 17, width: 17, marginLeft: -4}}
                     renderText={() => (
                         <Text style={[{marginLeft: 6}, global.activityCount]}>
                             {item.commentCount}
                         </Text>
                     )}
                 />
                )}
            </View>
           </View>
        </View>
      </AppTouchableOpacity>
   );
};

const styles = StyleSheet.create({
  joinButton: {
    marginTop: 2
  },
  item: {
    flex: 1,
    marginTop: 16,
    paddingHorizontal: GUTTER
  },
  imageWrapper: {
    height: 120,
    width: 120,
    borderRadius: 14,
    marginBottom: 16
  },
  imageStyle: {
    height: 120,
    width: 120,
    borderRadius: 14,
    overflow: "hidden"
  },
  infoContainer: {
    marginLeft: 16,
    paddingRight: 16,
    paddingBottom: 16,
    flex: 1
 }
});

export default BlogItem;

//In custom_code/index.js

...

import BlogItem from "./components/BlogItem";
export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.blogApi.setBlogItemComponent(props => <BlogItem {...props} />)
}

# setFetchParamsFilter(fetchParamsFilter)

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

Parameters:
Name Type Description
fetchParamsFilter TransformBlogParams
Example

Create a custom filter in blog screen

//In components/BlogFiltersCustom.js...

import React, { useState } from "react";
import { TextInput, View, Button } from 'react-native'
import { useDispatch } from "react-redux";
import { blogRequested } from "@src/actions/blog/blog";
import { getExternalCodeSetup } from "@src/externalCode/externalRepo";
import withGlobalStyles from "@src/components/hocs/withGlobalStyles";
import DatePicker from 'react-native-datepicker'

const hook = getExternalCodeSetup().blogApi;
hook.hideSearch();

const screenName = "blog";

const filter = "all";
const subfilters = ""

const refresh = true; //Set to true to refresh list
const searchTerm = ""
const userId = 1; //Define author id


const BlogFiltersCustom = (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 [date, setDate] = useState(new Date())

       const handleSubmit = () => {

           //Set custom parameters before fetching
           hook.setFetchParamsFilter((props) => {

               //You can add more parameters such as "subject", "keyword" etc...
               return {
                   ...props,
                   date
               }
           })

           //Dispatch redux action to call api using customized filters
           dispatch(blogRequested(filter, subfilters, refresh, searchTerm, userId));

       }

       return <View style={{ backgroundColor: colors.whiteColor, flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
           <DatePicker
               style={{ width: 200 }}
               date={date}
               mode="date"
               format="YYYY-MM-DD"
               confirmBtnText="Confirm"
               cancelBtnText="Cancel"
               customStyles={{
                   dateIcon: {
                       position: 'absolute',
                       left: 0,
                       top: 4,
                       marginLeft: 0
                   },
                   dateInput: {
                       marginLeft: 36
                   }
               }}
               onDateChange={(date) => { setDate(date) }}
           />
           <Button
               onPress={() => handleSubmit()}
               title="Filter"
           />
       </View>
   }

   return null;

}

export default withGlobalStyles(BlogFiltersCustom);

//In custom_code/index.js...

...

import BlogFiltersCustom from "./components/BlogFiltersCustom";
export const applyCustomCode = externalCodeSetup => {
   externalCodeSetup.filterScreenApiHooks.setAfterFilterComponent(BlogFiltersCustom);
}

# setSubFiltersFilter(subFiltersFilter)

Sets the available sub filter function for blogs. For example, you can define the items in the year sub filter.

Parameters:
Name Type Description
subFiltersFilter TransformBlogSubFiltersFilterCallback
Examples

User would like to specify a year subfilter

externalCodeSetup.blogApi.setSubFiltersFilter((filters) => {
return {
  categories: [
    {
      value: "",
      translatedLabel: "subFilter:all_blog_categories"
    }
  ],
  year: [
     {
      value: "",
      translatedLabel: "subFilter:all_years"
     },
     {
      label: "2021",
      value: "2021"
     },
     {
      label: "2000",
      value: "2000"
     }
   ]
 }
});

User would like to remove the sub filters

externalCodeSetup.blogApi.setSubFiltersFilter((filters) => {});