Request Social Media Data

You can request data stored by any user on the Verida Network.

In this example we are going to request a user's social media posts.

Note: Before doing this, make sure you open the Verida Wallet and connect Facebook and / or Twitter to syncronize your social media posts. This can be done via the "Connections" navigation item in the bottom left of the home screen.

Live Editor

VeridaRequestDataExample = () => { const [status, setStatus] = useState(null) const [veridaContext, setVeridaContext] = useState(undefined) const [socialDataResponse, setSocialDataResponse] = useState(undefined) const [tableRows, setTableRows] = useState([]); this.CONTEXT_NAME = "Verida Tutorial" React.useEffect(async () => { // See the login example for an explaination of this if (!veridaContext) { if (hasSession(this.CONTEXT_NAME)) { // we know we have a session already // globalLoginFunction is a globally defined version of the login function // See https://developers.verida.io/docs/tutorial/SSO let ctx = await globalLoginFunction(this.CONTEXT_NAME); setVeridaContext(ctx); } } }, []); requestSocialData = async function () { setSocialDataResponse(undefined) setStatus("Initalizing messaging... please wait.") const messaging = await veridaContext.getMessaging() // setup a listener to show the response messaging.onMessage(function(message) { console.log('New message:') console.log(message) setStatus('New message') setSocialDataResponse(message) generateTableRows(message.data.data[0]) }) setStatus("Creating request") const message = 'Please share your social media posts' const messageType = 'inbox/type/dataRequest' // Note: You could apply a filter `{sourceApplication: 'https://twitter.com/'}` to only include twitter results const data = { requestSchema: 'https://common.schemas.verida.io/social/post/v0.1.0/schema.json', filter: {}, userSelect: false } const config = { recipientContextName: 'Verida: Vault' } // This is the DID the message will go to // In this case it is the DID you are logged on here as const requestFromDID = veridaContext.account.accountDid await messaging.send(requestFromDID, messageType, data, message, config) setStatus("Request sent. Please check the Vault and share your social data") } generateTableRows = (items) => { // We render all available fields here // the "myvalue" column is the one we set in the addItem function below let rows = items.map((item) => ( <tr key={item._id}> <td>{item._id}</td> <td><img src={ item.icon } /></td> <td>{item.name}</td> <td>{item.sourceApplication}</td> <td>{item.insertedAt}</td> </tr> )) setTableRows(rows) } let socialMediaMessage = <span></span> if (socialDataResponse !== undefined) { socialMediaMessage = ( <div> <table> <thead> <tr><td>_id</td><td>icon</td><td>name</td><td>sourceApplication</td><td>insertedAt</td></tr> </thead> <tbody>{tableRows}</tbody> </table> </div> ) } let statusMessage = <div></div> if (status !== null) { statusMessage = ( <div className="tutorial-status tutorial-status admonition admonition-info alert alert--info"> {status} {socialMediaMessage} </div> ) } // if we have a veridaContext we are logged in if (veridaContext) { // user is logged in return ( <div> Please make sure you have connected Facebook and / or Twitter to your Verida Wallet. <br /> <button onClick={this.requestSocialData}>Request Social Data</button> {statusMessage} </div> ) } else { return ( <div className="admonition admonition-danger alert alert--danger"> <h2> Please login <a href="/docs/tutorial/SSO#runcode">here</a> </h2> </div> ) } }

VeridaRequestDataExample = () => {
    const [status, setStatus] = useState(null)
    const [veridaContext, setVeridaContext] = useState(undefined)
    const [socialDataResponse, setSocialDataResponse] = useState(undefined)
    const [tableRows, setTableRows] = useState([]);
    this.CONTEXT_NAME = "Verida Tutorial"
  
  React.useEffect(async () => {
    // See the login example for an explaination of this
    if (!veridaContext) {
      if (hasSession(this.CONTEXT_NAME)) {
        // we know we have a session already
        // globalLoginFunction is a globally defined version of the login function 
        // See https://developers.verida.io/docs/tutorial/SSO
        let ctx = await globalLoginFunction(this.CONTEXT_NAME);
        setVeridaContext(ctx);
      }
    }
  }, []);

  requestSocialData = async function () {
      setSocialDataResponse(undefined)
      setStatus("Initalizing messaging... please wait.")
      const messaging = await veridaContext.getMessaging()  

      // setup a listener to show the response
      messaging.onMessage(function(message) { 
        console.log('New message:')
        console.log(message)
        setStatus('New message')
        setSocialDataResponse(message)
        generateTableRows(message.data.data[0])
      })

      setStatus("Creating request")

      const message = 'Please share your social media posts'
      const messageType = 'inbox/type/dataRequest'

      // Note: You could apply a filter `{sourceApplication: 'https://twitter.com/'}` to only include twitter results
      const data = {
        requestSchema: 
          'https://common.schemas.verida.io/social/post/v0.1.0/schema.json',
        filter: {},
        userSelect: false
      }

      const config = {
        recipientContextName: 'Verida: Vault'
      }

      // This is the DID the message will go to
      // In this case it is the DID you are logged on here as
      const requestFromDID = veridaContext.account.accountDid

      await messaging.send(requestFromDID, messageType, data, message, config)
      setStatus("Request sent. Please check the Vault and share your social data")

  }   

  generateTableRows = (items) => {
    // We render all available fields here
    // the "myvalue" column is the one we set in the addItem function below

    let rows = items.map((item) => (
      <tr key={item._id}>
        <td>{item._id}</td>
        <td><img src={ item.icon } /></td>
        <td>{item.name}</td>
        <td>{item.sourceApplication}</td>
        <td>{item.insertedAt}</td>
      </tr>
    ))
    setTableRows(rows)
  } 

  let socialMediaMessage = <span></span>
  if (socialDataResponse !== undefined) {
    socialMediaMessage = (
      <div>
        <table>
          <thead>
            <tr><td>_id</td><td>icon</td><td>name</td><td>sourceApplication</td><td>insertedAt</td></tr>
          </thead>
          <tbody>{tableRows}</tbody>
        </table>
      </div>
    )
  }


  let statusMessage = <div></div>
  if (status !== null) {
    statusMessage = (
      <div className="tutorial-status tutorial-status admonition admonition-info alert alert--info">
        {status}
        {socialMediaMessage}
      </div>
    )
  }    

  // if we have a veridaContext we are logged in
  if (veridaContext) {
    // user is logged in
    return (
      <div>
        Please make sure you have connected Facebook and / or Twitter to your Verida Wallet. 
        <br />
        <button onClick={this.requestSocialData}>Request Social Data</button>

        {statusMessage}
      </div>
    )
  } else {
    return (
      <div className="admonition admonition-danger alert alert--danger">
        <h2>
          Please login <a href="/docs/tutorial/SSO#runcode">here</a>
        </h2>
      </div>
    )
  }

}
  

Result

Loading...