How show different Frontpage with custom api route?

[harpreet.freelance]

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

[harpreet.freelance]

<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

[harpreet.freelance]

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);

[harpreet.freelance]

Any response please?

[juanma]

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

How to create Custom Pages?

Hi @aeyzazkhan, The best way to do that at this moment is to create a custom handler for the route of each page (handlers are explained here). In this case, the only thing those handlers should do is to add a property to their data object to identify that specific route in React and render whatever component you want. For example, in the case of a sign up page in the link /signup/ , you would define a handler: const signUpHandler = { pattern: "/sign-up/", func: ({ state }) => { state…

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

[harpreet.freelance]

here my git repo

harpreet9629/frontity-theme

[harpreet.freelance]

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

[juanma]

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

Frontity default state.source don't fetch all items once in loop

Hi @harpreet.freelance , Congratulations on your project! It seems to be a very interesting one. Regarding your issue, it seems your handler packages/twentytwenty-theme/src/components/handlers/featured-posts.js is properly defining your custom route /getFeaturedPosts that is populating the information received from your REST API to Frontity’s state { isFetching: false, isReady: true, route: 'getFeaturedPosts/', link: 'getfeaturedposts/', query: {}, page: 1, items: [ { …

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?