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
<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
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);
juanma
24 February 2021 12:09
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
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.
please help me, my project is stuck because of this issue
juanma
26 February 2021 13:22
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
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?