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

13

please help me, my project is stuck because of this issue :frowning:

15

Hi @harpreet.freelance

I’m sorry but I cannot reproduce your issue with the current status of the code of the repository you’re providing. It throws an Internal Server Error and no content is showed in the brower.

In the terminal is throwing the following error

TypeError: Cannot read property 'id' of undefined

That I think it can be solved with the suggestion I’m providing you in this other thread

Can you create a codeSandbox with the minimal code to reproduce the issue?
Or can you solve the issues with the project so it can be properly launched locally and the specific issue you comment in this thread can be reproduced?