# new BlogApi()

Example

externalCodeSetup.blogApi.METHOD_NAME

# hideSearch()

Example

externalCodeSetup.blogApi.hideSearch();

# setBlogItemComponent(BlogItemComponentnullable)

Parameters:

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)

Parameters:

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)

Parameters:

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) => {});