How show different Frontpage with custom api route?

🙋Get Help
#1

Hi, i am trying to make Frontpage in Frontity js code. I registered custom api route which is featured-posts it show featured-posts with meta key. I am done with show post title image and link. But when click on link it redirect to 404 same post under category when click on that it show post content. Can you help me, i don’t know where i missed.

import { connect, decode, styled } from "frontity";
import { Fragment, useEffect } from "react";
import Link from "../link";
import Post from "../post";

const FeaturedPosts = ({ state, showExcerpt, showMedia }) => {
  const posts = state.source.get("getFeaturedPosts");
  //console.log(posts);
  const { primary } = state.theme.colors;
  const _showExcerpt = showExcerpt || !state.theme.showAllContentOnArchive;
  
  useEffect(() => {
    Post.preload();
  }, []);

  return (
    <>
    <Container>
      {posts.items.map((item, index) => {
        console.log(item.type +':'+ item.id);
        const isLastArticle = index === posts.items.length - 1;
        const data = state.source[item.type][item.id];
        // console.log(item);
        
          if(index == 1){
          return (
            <Fragment key={item.id}>
          <LeftCol key={item.id}>
              <Link link={item.link}>{item.title.rendered}</Link>
          </LeftCol></Fragment>
        );
          
          }
      
      })}
    </Container>
    </>
  );
};

export default connect(FeaturedPosts);
const LeftCol = styled.div`
  display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 8rem);
    font-size: 1.3em;
    font-weight: 700;
`;
const Container = styled.div`
  font-size: 1em;
  font-weight: 600;
  margin: 0 auto;
  line-height: 30px;
  width: calc(100% - 4rem);
  max-width: 1170px;

  @media (min-width: 700px) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 8rem);
    font-size: 1.3em;
    font-weight: 700;
  }
`;

api url
http://p1.iwc-r1.com/wp-json/wp/v2/featured-posts

#2 
<Main id="main">

          <Switch>

            <Loading when={data.isFetching} />

            <FrontPage when={data.isHome}/>

            <SearchResults when={data.isSearch} />

            <Archive when={data.isArchive} />

            <Post when={data.isPostType} />

            <PageError when={data.isError} />

          </Switch>

        </Main>

here i call Frontpage component with codition

#3

It show only 1 item in array, i don’t know why can’t fetch all 4 item in array? I am trying to copy from Archive file

const FeaturedPosts = ({ state, actions }) => {

  //console.log(posts);

  

  useEffect(() => {

    actions.source.fetch("getFeaturedPosts");

  }, []);

  const data = state.source.get("getFeaturedPosts");

        //console.log(data.items);

  return (

    <>

    <Container>

      {data.items.map(({ type, id }, index) => {

        //const isLastArticle = index === data.items.length - 1;

        const item = state.source[type][id];

        console.log(item);

        if(index == 1)

          <PostLink link={item.link}>

            <FeaturedMedia id={item.featured_media} />

          </PostLink>

                

      })}

    </Container>

      </>

  );

};

export default connect(FeaturedPosts);
#4

Any response please?

#10

Hi @harpreet.freelance,

Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions of technical issues with specific code

Custom routes in Frontity can be created by using handlers as explained in this thread

These handlers are used when actions.source.fetch is called.

#12

here my git repo