Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Discussion on how to add a "Follow" option in a social media project and how to connect frontend code and sanity file.

7 replies
Last updated: Aug 18, 2022
Hey guys!I want to have a "FOLLOW" option in my sicial media project and this is my frontend code and sanity file.
but I don't know haw to connect them to each other and when the user click on the "Follow" button the data of the user send to the sanity dataset
can someone twell me what shpuld I do?

 <style>{`
       .container { 
        text-align: center;}

        .blackButton{
         font-weight: bold; 
         content: "Following";         
          position: relative;
          width: 100px;
          height: 40px;
          margin-left: auto;
          margin-right: auto;
          margin-top: 20px;
          color: white;
          background-color: rgb(255, 0, 0);
                   
          text-align: center;
          border-radius: 25px;
        }
        
        .whiteButton{
          content: "Follow";
          font-weight: bold;
          width: 100px;
          height: 40px;
          margin-left: auto;
          margin-right: auto;
          background-color: rgb(179, 179, 179);
          color: rgb(255, 255, 255);
          text-align: center;
          border-radius: 25px;
          margin-top: 20px;
          
        }
      `}</style>
      <button
        className={buttons}
        onClick={(e) => setbutton((buttons) => (buttons === "blackButton" ? "whiteButton" : "blackButton"),
        addFollower(buttons),
        
        )
      }
      >
      Following    
      </button>

export default{
    name: 'user',
    title: 'User',
    type: 'document',
    fields: [
        {
            name: 'userName',
            title: 'UserName',
            type: 'string' 
        },
        {
            name: 'image',
            title: 'Image',
            type: 'string'
        },
        {
            name: 'detail',
            title: 'Detail',
            type: 'string'
        },
        {
            name: 'following',
            title: 'Following',
            type: 'reference',
            to: [{ type:'user' }],
        },
    ]
}
Aug 15, 2022, 6:43 AM
Hi!I know that it's unrelated, but I'm genuinely curious about your usage of the CSS content property. Is it supposed to change the button text upon clicking it?
Aug 15, 2022, 7:32 AM
user E
Hi!yes it's supposed to change the buttton color and text when we cliking it.but hunestly the text doesn;t change
😞
Aug 15, 2022, 10:03 AM
You'd need to submit a patch to your dataset that adds a reference to your 
following
array. You can read about adding items to an array here .
Aug 15, 2022, 5:04 PM
user M
Thank you!But does it shows the posts of followed person in my home page too?How should I set that?
Aug 16, 2022, 6:19 AM
On your homepage, you'd need to query for all of the posts the followed person has created. Since your user already has already referenced the other user it's a pretty easy GROQ query. I don't know what your schema looks like, but if the followed user is listed as the 
author
on a post, it would look something like this:
{
//...the rest of your query
  'followedPosts': *[_type == 'post' && author._ref in ^.following[]._ref ]
}
That's just an example, though. You would need to tweak it to work for your content model.
Aug 16, 2022, 3:41 PM
user M
AhaaI think I got it Thank you so much.
Can I ask more questions if I get some problems? :)
Aug 17, 2022, 2:53 PM
Sure! Maybe open a new thread in the channel though! 🙂
Aug 18, 2022, 4:06 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?