How to use kitsu - 10 common examples

// Make sure that we have a valid route that we can navigate to.
  // If we don't have a valid route then open the url in the browser
  const validRoutes = ['episodes', 'chapters', 'reactions', 'franchise'];
  if (response && response.tab && !validRoutes.includes(response.tab)) {
    Linking.openURL(`${response.scheme}${response.path}`);
    return;
  }

  if (!visibleComponentId || !response.id) return;
  let mediaId = response.id;

  // Fetch id if it's a slug
  if (!isNumeric(response.id)) {
    try {
      store.dispatch(toggleActivityIndicatorHOC(true));
      const media = await Kitsu.findAll(type, {
        filter: {
          slug: response.id,
        },
        fields: {
          anime: 'id',
          manga: 'id',
        },
      });
      mediaId = (media && media.length > 0) ? media[0].id : null;
    } catch (e) {
      console.log(`Failed to fetch ${type} with slug: ${response.id}`, e);
      mediaId = null;
      return;
    } finally {
      store.dispatch(toggleActivityIndicatorHOC(false));
    }

const handleUnit = async (response, type) => {
  const unitType = type === 'anime' ? 'episodes' : 'chapters';
  let media = null;
  let unit = null;

  // Make sure we have valid inputs
  if (!response || !response.id || !isNumeric(response.number)) return;

  // Fetch the media first
  store.dispatch(toggleActivityIndicatorHOC(true));
  try {
    // Check if we need to fetch media based on slug
    if (!isNumeric(response.id)) {
      const results = await Kitsu.findAll(type, {
        filter: {
          slug: response.id,
        },
      });
      media = results && results.length > 0 && results[0];
    } else {
      // Just fetch media by the id
      media = await Kitsu.find(type, response.id);
    }
  } catch (e) {
    console.log(`Failed to fetch ${type} with id: ${response.id}`, e);
    media = null;
  }

  // Make sure we have a valid media object
  if (!media) {

export const fetchMediaReactions = (mediaId, mediaType, limit = 20, pageIndex = 0) => async (
  dispatch,
  getState,
) => {
  dispatch({ type: types.FETCH_MEDIA_REACTIONS });
  let data = [];
  if (pageIndex > 0) {
    data = [...getState().media.reactions[mediaId]];
  }
  try {
    const reactions = await Kitsu.findAll('mediaReactions', {
      filter: {
        [`${mediaType}Id`]: mediaId,
      },
      include: 'user',
      sort: '-upVotesCount',
    });
    data = [...data, ...reactions];
    dispatch({
      type: types.FETCH_MEDIA_REACTIONS_SUCCESS,
      payload: {
        mediaId,
        reactions: data,
      },
    });
  } catch (e) {
    // console.log(e);

try {
      const { currentUser } = this.props;
      let { like, isLiked, post, postLikesCount } = this.state;

      // Optimistically update our UI
      this.setState({
        isLiked: !isLiked,
        postLikesCount: isLiked ? postLikesCount - 1 : postLikesCount + 1,
      });

      if (like) {
        await Kitsu.destroy('postLikes', like.id);
        FeedCache.deleteLike(post.id);
        this.setState({ like: null });
      } else {
        like = await Kitsu.create('postLikes', {
          post: {
            id: post.id,
            type: 'posts',
          },
          user: {
            id: currentUser.id,
            type: 'users',
          },
        });
        FeedCache.setLike(post.id, like);
        this.setState({ like });
      }
    } catch (err) {
      console.log('Error toggling like: ', err);
      const { isLiked, postLikesCount } = this.state;
      this.setState({

onImportButtonPressed = async () => {
    const { accessToken, currentUser, navigation } = this.props;
    const item = navigation.state.params.item;
    setToken(accessToken);
    const kind = item.title === 'MyAnimeList' ? 'my-anime-list' : 'anilist';
    this.setState({ loading: true });
    try {
      const res = await Kitsu.create('listImports', {
        user: { id: currentUser.id },
        inputText: this.state.username,
        strategy: 'greater',
        kind,
      });
      this.setState({
        showModal: true,
        loading: false,
        errMessage: res.errorMessage,
      });
    } catch (e) {
      // TODO: we may have crashes here.
      // console.log('failed import', e);
      this.setState({
        showModal: true,
        errMessage: e && e[0].title,

if (!response || !response.id || !isNumeric(response.number)) return;

  // Fetch the media first
  store.dispatch(toggleActivityIndicatorHOC(true));
  try {
    // Check if we need to fetch media based on slug
    if (!isNumeric(response.id)) {
      const results = await Kitsu.findAll(type, {
        filter: {
          slug: response.id,
        },
      });
      media = results && results.length > 0 && results[0];
    } else {
      // Just fetch media by the id
      media = await Kitsu.find(type, response.id);
    }
  } catch (e) {
    console.log(`Failed to fetch ${type} with id: ${response.id}`, e);
    media = null;
  }

  // Make sure we have a valid media object
  if (!media) {
    store.dispatch(toggleActivityIndicatorHOC(false));
    return;
  }

  // Fetch the unit
  try {
    const idKey = unitType === 'chapters' ? 'mangaId' : 'mediaId';
    const includes = type === 'anime' ? 'videos' : null;

onEditProfile = async (changes) => {
    try {
      this.setState({ editModalVisible: false, loading: true });
      const { userId } = this.props;
      const data = await Kitsu.update('users', {
        id: userId,
        ...changes,
      }, { include: 'waifu' });

      // Bust the cover cache
      if (data && data.coverImage) {
        const bustedCovers = this.applyCacheBust(data.coverImage);
        data.coverImage = bustedCovers;
      }

      this.setState({ profile: data });
      await fetchCurrentUser();
    } catch (err) {
      console.log('Error updating user:', err);
    } finally {
      this.setState({ loading: false });

);
  }
}

const styles = StyleSheet.create({
  wrapper: {
    justifyContent: 'center',
    width: '120%', // We need to overflow our parent, as we're actually wider than we technically should be.
    height: 45,
  },
  filterContext: {
    color: colors.white,
    fontFamily: 'OpenSans',
    fontWeight: '800',
    fontSize: 13,
    textAlign: 'center',
  },
  instructions: {
    color: colors.lightGrey,
    fontFamily: 'OpenSans',
    fontSize: 11,
    fontWeight: '600',
    textAlign: 'center',
  },
});

import * as colors from 'kitsu/constants/colors';
import Icon from 'react-native-vector-icons/FontAwesome';
import { upperFirst } from 'lodash';
import { ProgressiveImage } from 'kitsu/components/ProgressiveImage';
import { StyledText } from 'kitsu/components/StyledText';
import * as Layout from 'kitsu/screens/Feed/components/Layout';

const styles = StyleSheet.create({
  container: {
    // padding: 8,
    alignItems: 'center',
    justifyContent: 'center',
    margin: 4,
    paddingRight: 4,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.lightGrey,
    borderRadius: 4,
  },
  iconContainer: {
    width: 28,
    height: 28,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 8,
  },
  icon: {
    color: colors.lightGrey,
    fontSize: 18,
  },
  image: {
    width: 60,
    height: 90,

fetchComments = async () => {
    try {
      // We go ahead and fetch the comments so if the user wants to view detail
      // they can do so without a refetch.
      // This will order the comments by newest first.
      const comments = await Kitsu.findAll('comments', {
        filter: {
          postId: this.state.post.id,
          parentId: '_none',
        },
        fields: {
          users: 'slug,avatar,name',
        },
        include: 'user,uploads',
        sort: '-createdAt',
      });

      const processed = preprocessFeedPosts(comments);
      const uniqueComments = uniqBy(processed, 'id');

      // Store the comments in the right order (oldest - newest)
      FeedCache.setComments(this.state.post.id, [...uniqueComments].reverse());