I'm trying to get my posts list to remain in place after clicking on a post title

🙋Get Help
1

Hi! I’m very new to react and frontity. I’m trying to make a site adapted from the Mars Theme, w/ four different menus, drawing posts from four different categories.

I’ve separated out a div to display my post list, and another div to display the post once it’s been clicked on. The first hurdle I’m trying to jump is to have the list of posts remain visible in its div after clicking on a post link.

At the moment, I’m not looking for help w/ particular piece of code.
I’m just looking for to be point me in the direction of what file(s) I should be tinkering with.

Thanks for any orientation you might be able to offer!

2

one way to look at it is… if you think of a normal wordpress site, your main menu is included on each post.

so what you could do is include the post list on every post.

(let’s assume for now post list is on the left, post is on the right… like an email client)

I would therefore probably use eg a handler or beforeSSR function to get the post list as data that gets pulled into each post.

if you directly visit mysite.com/some-post you still want the post list to appear on the left presumably?

however. i’m guessing you may also want to visit mysite.com/some-post-type and have the list on the left, and then the right hand side either be blank or default to an initial post?

I guess you could have one component that covers both types of URL and conditionally check what the initial view is based on either data.isPostType or data.isArchive

note this is a simple example and doesn’t account for pagination or default post on right hand side etc

const Combo = ({ state, actions, libraries }) => {

  // Get information about the current URL.
  const data = state.source.get(state.router.link);

  let post_data
  let list_data

  // if it's a post page
  if(data.isPostType) {

    post_data = data
    
    // get the post list for this post type
    let list_type_url = "/"
    
    // allow for different post types
    if(data.type !== "post") {
      list_type_url = "/" + data.type
    }
  
    // get the list
    list_data = state.source.get(list_type_url)
  } 
  
  // otherwise if it's a list page
  else if(data.isArchive) {
    list_data = data
  }

  return data.isReady && list_data.isReady && (
    <StyledCombo>
      
      {
      <ListHolder>
        <List data={list_data} />
      </ListHolder>
      }

      <PostHolder>
        {post_data && 
        <Post data={post_data} />
        }
      </PostHolder>
      
    </StyledCombo>
  )
}

you’d want to pass the data into Post and List components rather than getting it from the router link
const Post = ({ data, state, libraries, actions }) => {

also with this example you’d want to prefetch data in beforeSSR (although ideally probably a custom handler)

beforeSSR: async ({state, actions, libraries}) => {
  const data = state.source.get(state.router.link);
        
  // if post, prefetch list
  if(data.isPostType) {
    let list_type_url = "/"
    if(!data.type === "post") {
      list_type_url = "/" + data.type
    } 
    await actions.source.fetch(list_type_url)
  }
}
1 Like