How to show data from json file that is linked to logged in users wallet address in next.js?

Question

I'm trying to make a claim page in next.js that would allow logged in metamask address to:

1. read data provided in .json file locally to see if the account is eligible for claiming the item and rendering a claim page
2. on submiting form to write to .json that the item has been claimed.

I used this tutorial on how to connect to a metamask account: https://medium.com/@prodmxle/adding-metamask-authentication-in-next-js-application-using-the-thirdweb-9d23e9147496

except styling my project currently looks the same as code in the tutorial.

.json:

{
"wallets": [
  {
    "wallet": "YOUR_ROPSTEN WALLET1",
    "tokenAmount": 44,
    "hasPizza": true,
    "hasCoffee": false,
    "hasBurger": false,
    "hasClaimed": false
  },
  {
    "wallet": "YOUR_ROPSTEN WALLET2",
    "tokenAmount": 2,
    "hasPizza": false,
    "hasCoffee": false,
    "hasBurger": false,
    "hasClaimed": true
  },
  {
    "wallet": "YOUR_ROPSTEN WALLET3",
    "tokenAmount": 4,
    "hasPizza": false,
    "hasCoffee": false,
    "hasBurger": false,
    "hasClaimed": true
  } 
]

}

Answer 1

Learn the api feature in nextJS, it's pretty straight forward, will be too much to explain here. Since you've the user's data you can send an api request with the user's ID and on the api end you can filter and return only that user's data.

OR

Since you've a pretty small database and assuming it's already being hosted or imported and you have the data within the component you want to display

const userId="YOUR_ROPSTEN WALLET1"
const user= data.filter(user=> user.wallet===userId);

Now user will look like this

[
    {
        "wallet": "YOUR_ROPSTEN WALLET1",
        "tokenAmount": 44,
        "hasPizza": true,
        "hasCoffee": false,
        "hasBurger": false,
        "hasClaimed": false
      }
]