How can i set route to my custom homepage or modify route for the one which i am using?

🙋Get Help
1

I am using the frontity-chakra-theme and trying to modify the existing homepage but unfortunately, when I added a new component to it, its starts appearing across all other pages wp-pages which i have loaded ast he menu.

my custom component code:

import { Box, PseudoBox, SimpleGrid } from "@chakra-ui/core";

import React from "react";

import { connect } from "frontity";

const ServicesBox = props => (

  <Box

    pos="relative"

    bg="#3d3b3b"

    py={{ base: "32px", lg: "40px" }}

    {...props}

  />

);

const ServiceSectionGroup = props => (

  <SimpleGrid

    columns={{ base: 1, md: 1 }}

    maxWidth="1150px"

    mx="auto"

    p = {6}

    width="90%"

    {...props}

  />

);

const property = {

    h1: "“From social media agencyto Super Bowl powerhouse”-AdWeek"

}

const ServicesContainer = props => (

    <Box 

        color="#fff"

        as="h1"

        width="85%"

        textTransform="uppercase"

        alignItems="center"

        textAlign="center"

        fontSize="2.5em"

        {...props}

    />

);

const ServicesBoxSection = ({ state }) => (

  <ServicesBox alignSelf="flex-end">

    <ServiceSectionGroup>

        <ServicesContainer>

            {property.h1}

        </ServicesContainer>

    </ServiceSectionGroup>

  </ServicesBox>

);

export default connect(ServicesBoxSection);

My Index page source code

import { Box, CSSReset, theme, ThemeProvider } from "@chakra-ui/core";

import { connect, Head } from "frontity";

import React from "react";

import Archive from "./archive";

import Footer from "./footer";

import Header from "./header";

import Loading from "./loading";

import Page404 from "./page404";

import Post from "./post/post";

import SearchResults from "./search";

import Title from "./title";

import FontFace from "./styles/font-face";

import ServicesBoxSection from "./services/services.js";

// Theme is the root React component of our theme. The one we will export

// in roots.

const Theme = ({ state, libraries }) => {

  // Get information about the current URL.

  const data = state.source.get(state.router.link);

  const parse = libraries.source.parse(state.router.link);

  // Check if the url is a search type

  const isSearch = Boolean(parse.query["s"]);

  return (

    <ThemeProvider

      theme={{

        ...theme,

        fonts: {

          ...theme.fonts,

          heading: "Montserrat, sans-serif"

        },

        colors: { ...theme.colors, ...state.theme.colors }

      }}

    >

      <FontFace />

      <CSSReset />

      <Title />

      <Head>

        <meta name="description" content={state.frontity.description} />

        <html lang="en" />

      </Head>

      <Header />

      <ServicesBoxSection />

      <Box

        as="main"

        mt={{ base: "40px", md: "70px" }}

        minH="calc(100vh - 320px)"

      >

        {(data.isFetching && <Loading />) ||

          (isSearch && <SearchResults />) ||

          // (data.isArchive && <Archive />) ||

          (data.isPostType && <Post />) ||

          (data.is404 && <Page404 />)}

      </Box>

      <Footer />

    </ThemeProvider>

  );

};

export default connect(Theme);

I commented the Archive section and use my own section but when I apply into this code like:

        <Box
        as="main"

        mt={{ base: "40px", md: "70px" }}

        minH="calc(100vh - 320px)"

      >

        {(data.isFetching && <Loading />) ||

          (isSearch && <SearchResults />) ||

          // (data.isArchive && <Archive />) ||
          (<ServicesBoxSection />) ||
          (data.isPostType && <Post />) ||

          (data.is404 && <Page404 />)}

      </Box>

It appears as required but when adding a section below my custom component ServicesBoxSection then there nothing added, i tried in this way:

<Box

        as="main"

        mt={{ base: "40px", md: "70px" }}

        minH="calc(100vh - 320px)"

      >

        {(data.isFetching && <Loading />) ||

          (isSearch && <SearchResults />) ||

          (data.isArchive && <Archive />) ||

          (data.isPostType && <Post />) ||

          <ServicesBoxSection /> ||

          (data.is404 && <Page404 />)}

      </Box>

Then this code do not add my custom component.
Question is:
Do I have to create my custom page and then point this route “/” to my custom page or can I modify the one which is already there?

2

Hi @hammad! :wave:

If you add your component like this, you are “matching” the properties of data and for each “match” react will render a different component. So:

  • if data has an isFetching property, only the <Loading/> component will be rendered and nothing else.
  • if data has an isSearch property, only the <SearchResults/> component will be rendered and nothing else
  • etc.

If you add your <ServicesBoxSection/> like this, it will be always be rendered for each page except for when searching.

I feel like you might want to check out how logical operators work in javascript so that the part of the code using the || operators becomes a bit more clear :slightly_smiling_face:

Finally, in answer to that, I think what you probably want to do is to edit the page components that already exist in the theme. For example, if you want to make your component appear on every post page, then you can add it inside of the <Post/> component in the theme.

4

thanks for your response @mmczaplinski. :slight_smile:
I do not want to render my custom component on each post i just want to edit the homepage (index.js) but when i add a custom component under <Header /> component then it starts appearing for each post/pag.

5

@hammad In that case (if you only want to show your component on the homepage) you can keep your component in the same place (inside of the page) and just check if data has a property .isHome :slightly_smiling_face: like:

data.isHome && <CustomComponent/>

You can also distingush other types of links. More info in the docs here.

2 Likes
6

By the way, we also provide a <Switch/> component that makes creating the routing logic a bit simpler: https://docs.frontity.org/api-reference-1/frontity-components#switch

7

Yeah, I tried with <Switch />, But When I try to render another component under my previous component then it doesn’t appear. Can we only add a single component under:

data.isHome && <CustomComponent1/>

why can’t we do this?

<Switch>
    <Loading when={data.isFetching} />
    <CustomComponent1 when={data.isHome} />
    <CustomComponent2 when={data.isHome} />
    <Archive when={data.isArchive} />
    <Post when={data.isPostType} />
    <Page404 when={data.is404}/> {/* rendered by default */}
</Switch>

I tried this and only getting one component on the homepage as an output to the above <Switch /> component.
Why can’t we add components like normal React?

8

Hey @hammad, sorry if I wasn’t clear before.

  1. The <Switch/> component will only help you make the code more readable and get rid of the ugly || but it will only return one component (similarly to how the switch statement in javascript works)

  2. If you want to show your component on the homepage only, you can add it inside of the <Archive/> component. There, you can place it like:

data.isHome && <CustomComponent1/>

The <Archive/> component will be shown on the for the page for the author archive, the date archive, the postType archive, etc. But only when you are on the postType archive will the isHome be true. This is codified according to the WP template hierarchy and documented here, but please let me know if it’s still unclear.

1 Like
9

Hey @mmczaplinski thanks for getting back.
You have explained in a very great details no doubt but I am still confused about why there is no other option like we do in the react to add component below or above to any other component?

10

Could you explain with an example what you mean by that:

Frontity does not change in any way how react itself works :slight_smile:

1 Like
11

@mmczaplinski
I think i can achieve adding multiple components by using 2 Switches. Will there be any optimization issue?
Like:

<Switch>
    <Component1 when={data.isHome} />
</Switch>
<Switch>
    <Component2 when={data.isHome} />
</Switch>
13

@hammad I’m not sure what optimization issues you are referring to, but I guess the answer is “no”. There should not be any optimization issues :slight_smile:

That said, I don’t think this is a pattern that you want to use - it does not really make sense to use a Switch with one case.

<Switch>
    <Component1 when={data.isHome} />
</Switch>

// This is equivalent to the code above
{data.isHome &&  <Component1 />}

I would encourage you to put some effort into trying to describe your use case with full code examples, explain what you have tried and what problem you have encountered. We are only able to help to the extent that we can understand your use case and the problems you are facing :slightly_smiling_face:

2 Likes
14

Hey @mmczaplinski:
I got you how to deal with things from your thorough discussion. Once again thanks for your explanation and patience.
This is my react page which is working in my ReactJs app. Now I wanted to add these components to my homepage for chakra theme frontity. I searched for it before posting issue and got a discussion that we have to set route and that’s why I get confused.
I hope now you got my point?
I should have added this before sorry about that.

usecase_snap
usecase_snap335Ă—620 48.5 KB

15

@hammad Have you tried the following?

1 Like
16

Yes It worked and clear now. Thanks for your time.

1 Like