I CLONED RARIBLE IN 24H - Listing user tokens [PART 9]

Moralis General
#1

So I was working on cloning rarible tutorial but now I’m stuck.
first I encountered a problem that the ownedItems.forEach doesn’t get recognized as a function.
and my second problem is that when I try to save the avatar of a user/my avatar doesn’t change and it gives the error that there is a duplicate value in a file I don’t even recognize here are the errors I am getting. If someone could help me that would be awesome been stuck on this for a few days now.
Have a nice day!

2021-09-01
2021-09-011920×1030 112 KB

this is the main.js code:

// NFT2
Moralis.initialize("zGgSNOTQkkXCWjBTVH93dZ9JBzQT55xrtJe29JPB");
Moralis.serverURL = 'https://3rsjrx0pchtl.usemoralis.com:2053/server'
const TOKEN_CONTRACT_ADDRESS = "0x3D205305B9d3f477e767f849C55aB24f73B633eC";
const MARKETPLACE_CONTRACT_ADDRESS = "0x94aD855c7ABD8AE4Ec85936a9D21E2D1042A89E5";

init = async () => {
    hideElement(userItemsSection);
    hideElement(userInfo);
    hideElement(createItemForm);
    window.web3 = await Moralis.Web3.enable();
    window.tokenContract = new web3.eth.Contract(tokenContractAbi, TOKEN_CONTRACT_ADDRESS);
    window.marketplaceContract = new web3.eth.Contract(tokenContractAbi, MARKETPLACE_CONTRACT_ADDRESS);
    initUser();
}

//if user logges in show userprofile and createitem else hide these buttons and show the button that the user has to connect.
initUser = async () => {
    if(await Moralis.User.current()){
        hideElement(userConnectButton);
        showElement(userProfileButton);
        showElement(openCreateItemButton);
        showElement(openUserItemsButton);
        loadUserItems();
    } else {
        showElement(userConnectButton);
        hideElement(userProfileButton);
        hideElement(openCreateItemButton);
        hideElement(openUserItemsButton);
    }
}

//login button.
login = async () => {
    try{
        await Moralis.Web3.authenticate();
        initUser();
    } catch (error) {
        alert(error);
    }
}

//logout button and hide the user info.
logout = async () => {
    await Moralis.User.logOut();
    hideElement(userInfo);
    initUser();
}

//when user is logged in show the user info.
openUserInfo = async () => {
    user = await Moralis.User.current();
    if (user){
        const email = user.get('email');
        if(email){
            userEmailField.value = email;
        } else{
            userEmailField.value = "";
        }

        userUsernameField.value = user.get('username');

        const userAvatar = user.get('avatar');
        if(userAvatar){
            userAvatarImg.src = userAvatar.url();
            showElement(userAvatarImg);
        }else{
            hideElement(userAvatarImg);
        }

        showElement(userInfo);
    } else{
        login();
    }
}

//save user info set email and username. 
saveUserinfo = async () => {
    user.set('email', userEmailField.value);
    user.set('username', userUsernameField.value);

    if (userAvatarFile.files.length > 0) {
        const avatar = new Moralis.File("avatar1.jpg", userAvatarFile.files[0]);
        user.set('avatar', avatar);
      }

    await user.save();
    alert("User info saved successfully!");
    openUserInfo();
}

//create the item that the user selected.
createItem = async () => {
    if (createItemFile.files.length == 0){
        alert("Please select a file!");
        return;
    } else if(createItemNameField.value.length == 0){
        alert("Please give item a name!");
        return;
    }

    const nftFile = new Moralis.File("nftFile.jpg", createItemFile.files[0]);
    await nftFile.saveIPFS();

    const nftFilePath = nftFile.ipfs();
    const nftFileHash = nftFile.hash();

    const metadata = {
        name: createItemNameField.value,
        description: createItemDescriptionField.value,
        image: nftFilePath
    };

    const nftFileMetadatFile = new Moralis.File("metadata.json", {base64 : btoa(JSON.stringify(metadata))});
    await nftFileMetadatFile.saveIPFS();

    const nftFileMetadatFilepath = nftFileMetadatFile.ipfs();
    const nftFileMetadatFilehash = nftFileMetadatFile.hash();

    const nftId = await mintNft(nftFileMetadatFilepath);

    const Item = Moralis.Object.extend("Item");

    // Create a new instance of that class.
    const item = new Item();
    item.set('name', createItemNameField.value);
    item.set('description', createItemDescriptionField.value);
    item.set('nftFilePath', nftFilePath);
    item.set('nftFileHash', nftFileHash);
    item.set('MetadatFilepath', nftFileMetadatFilepath);
    item.set('MetadatFilehash', nftFileMetadatFilehash);
    item.set('nftId', nftId);
    item.set('nftContractAddress', TOKEN_CONTRACT_ADDRESS);
    await item.save();
    console.log(item);

    user = await Moralis.User.current();
    const userAddress = user.get('ethAddress');

        switch(createItemStatusField.value){
            case "0":
                return;
            case "1":
                await ensureMarketplaceIsApproved(nftId, TOKEN_CONTRACT_ADDRESS);
                await marketplaceContract.methods.addItemToMarket(nftId, TOKEN_CONTRACT_ADDRESS, createItemPriceFild.value);
                break;
            case "2":
                alert("Not yet supported!");
                return;
        }
}

//mint nft call create item and send the NFT to the creator address
mintNft = async (metadetaUrl) => {
    const receipt = await tokenContract.methods.createItem(metadetaUrl).send({from: ethereum.selectedAddress});
    console.log(receipt);
    return receipt.events.Transfer.returnValues.tokenId;
} 

openUserItems = async () => {
    user = await Moralis.User.current();
    if (user){
        showElement(userItemsSection);
    } else{
        login();
    }
}

loadUserItems = async () => {
    const ownedItems = await Moralis.Cloud.run("getUserItems");
    console.log(ownedItems);
    ownedItems.forEach(item => {
        getAndRenderItemData(item, renderUserItem);
    }); 
}
initTemplate = (id) => {
    const template = document.getElementById(id);
    template.id = "";
    template.parentNode.removeChild(template);
    return template;
}

renderUserItem = (item) => {
    const userItem = userItemTemplate.cloneNode(true);
    userItem.getElementsByTagName("img")[0].src = item.image;
    userItem.getElementsByTagName("img")[0].alt = item.name;
    userItem.getElementsByTagName("h5")[0].innerText = item.name;
    userItem.getElementsByTagName("p")[0].innerText = item.description;
    userItems.appendChild(userItem);
}

getAndRenderItemData = (item, renderFunction) => {
    fetch(item.tokenUri)
    .then(response => response.json())
    .then(data => {
        data.symbol = item.symbol;
        data.tokenId = item.tokenId;
        data.tokenAddress = item.tokenAddress;
        renderFunction(data);
    });
}
ensureMarketplaceIsApproved = async (tokenId, tokenAddress) => {
    user = await Moralis.User.current();
    const userAddress = user.get('ethAddress');
    const contract = web3.eth.Contract(tokenContractAbi, tokenAddress);
    const approvedAddress = await contract.methods.getApproved(tokenId).call({from: userAddress});
    if (approvedAddress != MARKETPLACE_CONTRACT_ADDRESS){
        await contract.methods.approve(MARKETPLACE_CONTRACT_ADDRESS, tokenId);
    }
}

hideElement = (element) => element.style.display = "none"; 
showElement = (element) => element.style.display = "block"; 

// NavBar
const userConnectButton = document.getElementById("btnConnect");
userConnectButton.onclick = login;

const userProfileButton = document.getElementById("btnUserInfo");
userProfileButton.onclick = openUserInfo;

const openCreateItemButton = document.getElementById("btnOpenCreateItem");
openCreateItemButton.onclick = () => showElement(createItemForm);

// User profile
const userInfo = document.getElementById("userInfo");
const userUsernameField = document.getElementById("txtUsername");
const userEmailField = document.getElementById("txtEmail");
const userAvatarImg = document.getElementById("imgAvatar");
const userAvatarFile = document.getElementById("fileAvatar");

document.getElementById("btnCloseUserInfo").onclick = () => hideElement(userInfo);
document.getElementById("btnLogout").onclick = logout;
document.getElementById("btnSaveUserInfo").onclick = saveUserinfo;

// Item creation
const createItemForm = document.getElementById("createItem");

const createItemNameField = document.getElementById("txtCreateItemName");
const createItemDescriptionField = document.getElementById("txtCreateItemDescriptions");
const createItemPriceFild = document.getElementById("numCreateItemPrice");
const createItemStatusField = document.getElementById("selectCreateItemStatus");
const createItemFile = document.getElementById("fileCreateItemFile");
document.getElementById("btnCloseCreateItem").onclick = () => hideElement(createItemForm);
document.getElementById("btnCreateItem").onclick = createItem;

//User items
const userItemsSection = document.getElementById("userItems");
const userItems = document.getElementById("userItemsList");
document.getElementById("btnCloseUserItems").onclick = () => hideElement(btnCloseUserItems);
const openUserItemsButton = document.getElementById("btnMyItems");
openUserItemsButton.onclick = openUserItems;

const userItemTemplate = initTemplate("itemTemplate");

init();

this is my cloud function. Maybe i did something wrong here since it isn’t all the same in the tutorial:

Moralis.Cloud.define("getUserItems", async (request) => {
  return request;
  const query = new Moralis.Query("NFTTokenOwners");
  query.equalTo("contract_type", "ERC721");
  query.containedIn("owner_of", request.user.attributes.accounts);
  const queryResults = await query.find();
  const results = [];
  
  let sum = 0;
  for (let i = 0; i < queryResults.length; ++i) {
	results.push({
    	"id": queryResults[i].attributes.objectId, 
        "tokenId": queryResults[i].attributes.token_id,
        "tokenAddress": queryResults[i].attributes.token_address,
        "symbol": queryResults[i].attributes.symbol,
        "tokenUri": queryResults[i].attributes.token_uri,
    });
  }
  return results;
});

and here is my index.html file:

<!DOCTYPE html>

<html lang="en">

  <head>

    <!-- Moralis SDK code -->

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Morarable</title>

  </head>

  <body>

    <div>

      <button id="btnConnect">Connect wallet</button>

      <button id="btnUserInfo">Profile</button>

      <button id="btnOpenCreateItem">Create</button>

      <button id="btnMyItems">My items</button>

    </div>

    <div id="userInfo">

      <h4>User Profile</h4>

      <input type="text" id="txtUsername" required placeholder="Enter username">

      <input type="text" id="txtEmail" placeholder="Enter email">

      <small>Optional</small>

      <img width="50" height="50" src="" id="imgAvatar" alt="">

      <label for="fileAvatar">Select Avatar</label>

      <input type="file" id="fileAvatar">

      <button id="btnLogout">Log out</button>

      <button id="btnCloseUserInfo">Close</button>

      <button id="btnSaveUserInfo">Save</button>

    </div>

    <div id="createItem">

      <h4>Create Item</h4>

      <input type="text" id="txtCreateItemName" required placeholder="Enter name">

      <textarea id="txtCreateItemDescriptions" cols="30" rows="5" placeholder="Enter description"></textarea>

      <input type="number" min="1" step="1" id="numCreateItemPrice" placeholder="Enter price" required>

      

      <label for="selectCreateItemStatus">Status</label>

      <select id="selectCreateItemStatus">

        <option value="0">Not for sale</option>

        <option value="1">Instant buy</option>

        <option value="2">Accept Offers</option>

      </select>

      <label for="fileCreateItemFile">Select File</label>

      <input type="file" id="fileCreateItemFile">

      <button id="btnCloseCreateItem">Close</button>

      <button id="btnCreateItem">Create!</button>

    </div>

    <div id="userItems">

      <h4>My Items</h4>

      <div id="userItemsList"></div>

      <button id="btnCloseUserItems">Close</button>

    </div>

    <div id="itemTemplate">

      <img src="" alt="">

      <h5></h5>

      <p></p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

    <script src="abi.js"></script>

    <script src="main.js"></script>

  </body>

</html>
#2

Hey @Jelle

At first look I see a problem with namings. Change NFTTokenOwners -> EthNFTOwners

Also take a look at Solving common problems [Rarible Clone]

1 Like
#3

Wow, that’s quick.
Yeah I had a look into it and changed this but didn’t seem to work so I set it back to EthNFTOwners but I will set it back to EthNFTOwners.

#4

Yes, it’s not the main issue. I need a little more time to figure out that issue.

1 Like
#5

Your main.js looks very different compared to the original ones over here - https://github.com/MoralisWeb3/youtube-tutorials/tree/main/rarible-clone.

I would suggest you finish the entire tutorial and then run your application. There are a lot of moving parts so make sure you follow the tutorial diligently.

Thanks.

1 Like
#6

yeah that’s right I was at part 9 so it wasn’t like the end code.
But i now finished the tutorial and still get the same errors. I also copied the entire end code into my file and still not working.
The forEach function is still not readable or something and when i try to save the avatar of the user i get this error: A duplicate value for a field with unique values was provided
maybe something at my server side is going wrong ?

#7

What does that console.log display?

1 Like
#8

This cloud function returns request on first line?

1 Like
#9

when I try to console.log the ownedItems object I get the object with the variables I have set. But somehow it can’t put the forEach function on it.
I also noticed the items I have for sale don’t load directly when I load the homepage…

2021-09-06 (2)
2021-09-06 (2)1920×1030 169 KB

When I change the cloud function it doesn’t return anything I also tried to console.log the request but that also didn’t work. Then I get these errors.

2021-09-06
2021-09-061920×1030 149 KB

this is btw my whole code after part 15:

// NFT2
Moralis.initialize("zGgSNOTQkkXCWjBTVH93dZ9JBzQT55xrtJe29JPB");
Moralis.serverURL = 'https://3rsjrx0pchtl.usemoralis.com:2053/server'
const TOKEN_CONTRACT_ADDRESS = "0x8a6AB061BD6D64bdc0af257F4209D3d6C764Fb9d";
const MARKETPLACE_CONTRACT_ADDRESS = "0xB8b590f2B57FF5d3815FC00b0a76834A4dED3FA9";

init = async () => {
    hideElement(userItemsSection);
    hideElement(userInfo);
    hideElement(createItemForm);
    window.web3 = await Moralis.Web3.enable();
    window.tokenContract = new web3.eth.Contract(tokenContractAbi, TOKEN_CONTRACT_ADDRESS);
    window.marketplaceContract = new web3.eth.Contract(marketplaceContractAbi, MARKETPLACE_CONTRACT_ADDRESS);
    initUser();
    loadItems();

    const soldItemsQuery = new Moralis.Query('SoldItems');
    const soldItemsSubscription  = await soldItemsQuery.subscribe();
    soldItemsSubscription .on("create", onItemSold);

    const itemsAddedQuery = new Moralis.Query('ItemsForSale');
    const ItemsAddedSubcription = await soldItemsQuery.subscribe();
    soldItemsSubscription .on("create", onItemAdded);
}   

onItemSold = async (item) => {
    const listing = document.getElementById(`item-${item.attributes.uid}`);
    if(listing){
        listing.parentNode.removeChild(listing);
    }

    user = await Moralis.User.current();
    if(user){
        const params = {uid: `${item.attributes.uid}`};
        const soldItem = await Moralis.Cloud.run('getItem', params);
        if(soldItem){
            if(user.get('accounts').includes(item.attributes.buyer)){
                getAndRenderItemData(soldItem, renderUserItem);
        }

            const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
            if(userItemListing) userItemListing.parentNode.removeChild(userItemListing);
        }
    }
}

onItemAdded = async (item) => {
    const params = {uid: `${item.attributes.uid}`};
    const addedItem = await Moralis.Cloud.run('getItem', params);
    if(addedItem){
        user = await Moralis.User.current();
        if(user){
            if(user.get('accounts').includes(addedItem.ownerOf)){
                const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
                if(userItemListing) useritemListing.parentNode.removeChild(userItemListing);

                getAndRenderItemData(addedItem, renderUserItem);
                return;
                }
            }
            getAndRenderItemData(addedItem, renderItem);
    }

}

//if user logges in show userprofile and createitem else hide these buttons and show the button that the user has to connect.
initUser = async () => {
    if(await Moralis.User.current()){
        hideElement(userConnectButton);
        showElement(userProfileButton);
        showElement(openCreateItemButton);
        showElement(openUserItemsButton);
        loadUserItems();
    } else {
        showElement(userConnectButton);
        hideElement(userProfileButton);
        hideElement(openCreateItemButton);
        hideElement(openUserItemsButton);
    }
}

//login button.
login = async () => {
    try{
        await Moralis.Web3.authenticate();
        initUser();
    } catch (error) {
        alert(error);
    }
}

//logout button and hide the user info.
logout = async () => {
    await Moralis.User.logOut();
    hideElement(userInfo);
    initUser();
}

//when user is logged in show the user info.
openUserInfo = async () => {
    user = await Moralis.User.current();
    if (user){
        const email = user.get('email');
        if(email){
            userEmailField.value = email;
        } else{
            userEmailField.value = "";
        }

        userUsernameField.value = user.get('username');

        const userAvatar = user.get('avatar');
        if(userAvatar){
            userAvatarImg.src = userAvatar.url();
            showElement(userAvatarImg);
        }else{
            hideElement(userAvatarImg);
        }

        showElement(userInfo);
    } else{
        login();
    }
}

//save user info set email and username. 
saveUserInfo = async () => {
    user.set('email', userEmailField.value);
    user.set('username', userUsernameField.value);

    if (userAvatarFile.files.length > 0) {
        const avatar = new Moralis.File("avatar1.jpg", userAvatarFile.files[0]);
        user.set('avatar', avatar);
      }

    await user.save();
    alert("User info saved successfully!");
    openUserInfo();
}

//create the item that the user selected.
createItem = async () => {
    if (createItemFile.files.length == 0){
        alert("Please select a file!");
        return;
    } else if(createItemNameField.value.length == 0){
        alert("Please give the item a name!");
        return;
    }

    const nftFile = new Moralis.File("nftFile.jpg", createItemFile.files[0]);
    await nftFile.saveIPFS();

    const nftFilePath = nftFile.ipfs();

    const metadata = {
        name: createItemNameField.value,
        description: createItemDescriptionField.value,
        image: nftFilePath
    };

    const nftFileMetadatFile = new Moralis.File("metadata.json", {base64 : btoa(JSON.stringify(metadata))});
    await nftFileMetadataFile.saveIPFS();

    const nftFileMetadataFilePath = nftFileMetadatFile.ipfs();

    const nftId = await mintNft(nftFileMetadataFilePath);

    user = await Moralis.User.current();
    const userAddress = user.get('ethAddress');

        switch(createItemStatusField.value){
            case "0":
                return;
            case "1":
                await ensureMarketplaceIsApproved(nftId, TOKEN_CONTRACT_ADDRESS);
                await marketplaceContract.methods.addItemToMarket(nftId, TOKEN_CONTRACT_ADDRESS, createItemPriceField.value).send({from: userAddress});
                break;
            case "2":
                alert("Not yet supported!");
                return;
        }
}

//mint nft call create item and send the NFT to the creator address
mintNft = async (metadetaUrl) => {
    const receipt = await tokenContract.methods.createItem(metadetaUrl).send({from: ethereum.selectedAddress});
    console.log(receipt);
    return receipt.events.Transfer.returnValues.tokenId;
} 

openUserItems = async () => {
    user = await Moralis.User.current();
    if (user){
        showElement(userItemsSection);
    } else{
        login();
    }
}

loadUserItems = async () => {
    const ownedItems = await Moralis.Cloud.run("getUserItems");
    console.log(ownedItems);
    ownedItems.forEach(item => {
        const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
        if(userItemListing) return;
        getAndRenderItemData(item, renderUserItem);
    }); 
}

loadItems = async () => {
    const items = await Moralis.Cloud.run("getItems");
    user = await Moralis.User.current();
    items.forEach(item => {
        if(user){
            if(user.attributes.accounts.includes(item.ownerOf)){
                const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
                if(userItemListing) userItemListing.parentNode.removeChild(userItemListing);
                getAndRenderItemData(item, renderUserItem);
                return;
            }
        }
        getAndRenderItemData(item, renderItem);
    }); 
}

initTemplate = (id) => {
    const template = document.getElementById(id);
    template.id = "";
    template.parentNode.removeChild(template);
    return template;
}

renderUserItem = async (item) => {
    const userItemListing = document.getElementById(`user-item-${item.tokenObjectId}`);
    if(userItemListing) return;

    const userItem = userItemTemplate.cloneNode(true);
    userItem.getElementsByTagName("img")[0].src = item.image;
    userItem.getElementsByTagName("img")[0].alt = item.name;
    userItem.getElementsByTagName("h5")[0].innerText = item.name;
    userItem.getElementsByTagName("p")[0].innerText = item.description;

    userItem.getElementsByTagName("input")[0].value = item.askingPrice ?? 1;
    userItem.getElementsByTagName("input")[0].disabled = item.askingPrice > 0;
    userItem.getElementsByTagName("button")[0].disabled = item.askingPrice > 0;
    userItem.getElementsByTagName("input")[0].onclick = async() => {
        user = await Moralis.User.current();
        if(!user){
            login();
            return;
        }
        await ensureMarketplaceIsApproved(item.tokenId, item.tokenAddress);
        await marketplaceContract.methods.addItemToMarket(item.tokenId, item.tokenAddress, userItem.getElementsByTagName("input")[0].value).send({from: user.get('ethAddress')});

    };

    userItem.id = `user-item-${item.tokenObjectId}`
    userItems.appendChild(userItem);
}

renderItem = (item) => {
    const itemForSale = marketplaceItemTemplate.cloneNode(true);
    if(item.sellerAvatar){
        itemForSale.getElementsByTagName("img")[0].src = item.sellerAvatar.url();
        itemForSale.getElementsByTagName("img")[0].alt = item.sellerUsername;
    }
    itemForSale.getElementsByTagName("img")[1].src = item.image;
    itemForSale.getElementsByTagName("img")[1].alt = item.name;
    itemForSale.getElementsByTagName("h5")[0].innerText = item.name;
    itemForSale.getElementsByTagName("p")[0].innerText = item.description;

    itemForSale.getElementsByTagName("button")[0].innerText = `Buy for ${item.askingPrice}`;
    itemForSale.getElementsByTagName("button")[0].onclick = () => buyItem(item);

    itemForSale.id = `item-${item.uid}`;
    itemsForSale.appendChild(itemForSale);
}

getAndRenderItemData = (item, renderFunction) => {
    fetch(item.tokenUri)
    .then(response => response.json())
    .then(data => {
        item.name = data.name;
        item.description = data.description;
        item.image = data.image;
        renderFunction(item);
    })
}
ensureMarketplaceIsApproved = async (tokenId, tokenAddress) => {
    user = await Moralis.User.current();
    const userAddress = user.get('ethAddress');
    const contract = new web3.eth.Contract(tokenContractAbi, tokenAddress);
    const approvedAddress = await contract.methods.getApproved(tokenId).call({from: userAddress});
    if (approvedAddress != MARKETPLACE_CONTRACT_ADDRESS){
        await contract.methods.approve(MARKETPLACE_CONTRACT_ADDRESS, tokenId).send({from: userAddress});
    }
}

buyItem = async (item) => {
    user = await Moralis.User.current();
    if(!user){
        login();
        return;
    }
    await marketplaceContract.methods.buyItem(item.uid).send({from: user.get('ethAddress'), value: item.askingPrice});
}

hideElement = (element) => element.style.display = "none"; 
showElement = (element) => element.style.display = "block"; 

// NavBar
const userConnectButton = document.getElementById("btnConnect");
userConnectButton.onclick = login;

const userProfileButton = document.getElementById("btnUserInfo");
userProfileButton.onclick = openUserInfo;

const openCreateItemButton = document.getElementById("btnOpenCreateItem");
openCreateItemButton.onclick = () => showElement(createItemForm);

// User profile
const userInfo = document.getElementById("userInfo");
const userUsernameField = document.getElementById("txtUsername");
const userEmailField = document.getElementById("txtEmail");
const userAvatarImg = document.getElementById("imgAvatar");
const userAvatarFile = document.getElementById("fileAvatar");

document.getElementById("btnCloseUserInfo").onclick = () => hideElement(userInfo);
document.getElementById("btnLogout").onclick = logout;
document.getElementById("btnSaveUserInfo").onclick = saveUserInfo;

// Item creation
const createItemForm = document.getElementById("createItem");

const createItemNameField = document.getElementById("txtCreateItemName");
const createItemDescriptionField = document.getElementById("txtCreateItemDescriptions");
const createItemPriceField = document.getElementById("numCreateItemPrice");
const createItemStatusField = document.getElementById("selectCreateItemStatus");
const createItemFile = document.getElementById("fileCreateItemFile");
document.getElementById("btnCloseCreateItem").onclick = () => hideElement(createItemForm);
document.getElementById("btnCreateItem").onclick = createItem;

//User items
const userItemsSection = document.getElementById("userItems");
const userItems = document.getElementById("userItemsList");
document.getElementById("btnCloseUserItems").onclick = () => hideElement(userItemsSection);
const openUserItemsButton = document.getElementById("btnMyItems");
openUserItemsButton.onclick = openUserItems;

const userItemTemplate = initTemplate("itemTemplate");
const marketplaceItemTemplate = initTemplate("marketplaceItemTemplate");

//Items for sale
const itemsForSale = document.getElementById("itemsForSale");

init();
#10

Jelle,

Just took a look at your main.js code, left here in the thread, and spotted some errors in implimentation. Ive noted these for you below, give it another whirl and see if it helps - correct the thrown errors.

Cheers, Deus.

From your code:

    const ItemsAddedSubcription = await soldItemsQuery.subscribe();	
    soldItemsSubscription .on("create", onItemAdded);	
}

Should be:

    const itemsAddedSubscription = await itemsAddedQuery.subscribe();
    itemsAddedSubscription.on("create", onItemAdded);
}

Your code:

//login button.
login = async () => {
    try{
        await Moralis.Web3.authenticate();
        initUser();
    } catch (error) {
        alert(error);
    }
}

Should be:

login = async () => {
    try {
        await Moralis.Web3.authenticate();
        initUser();
    } catch (error) {
        alert(error)
    }
}

Your Code:

userItem.getElementsByTagName("input")[0].value = item.askingPrice ?? 1;
    userItem.getElementsByTagName("input")[0].disabled = item.askingPrice > 0;
    userItem.getElementsByTagName("button")[0].disabled = item.askingPrice > 0;
    userItem.getElementsByTagName("input")[0].onclick = async() => {
        user = await Moralis.User.current();

Should be:

userItem.getElementsByTagName("input")[0].value = item.askingPrice ?? 1;
    userItem.getElementsByTagName("input")[0].disabled = item.askingPrice > 0;
    userItem.getElementsByTagName("button")[0].disabled = item.askingPrice > 0;
    userItem.getElementsByTagName("button")[0].onclick = async () => {
        user = await Moralis.User.current();

Your code:

const createItemDescriptionField = document.getElementById("txtCreateItemDescriptions");

Should be:

const createItemDescriptionField = document.getElementById("txtCreateItemDescription");
2 Likes
#11

Thanks for taking the time and reviewing my code.
I have implemented the code pieces you mentioned but still get the same errors:

2021-09-08
2021-09-081920×1030 171 KB

Now i deployed the rarible clone onto another server at Moralis. Now I can finally save the profile picture right but I still get the forEach error and now can’t save an NFT these are the errors the console shows:

2021-09-08 (3)
2021-09-08 (3)1920×1030 146 KB

#12

for example if it would be an error here at forEach, you would pus a console.log before that line to see if items are properly initialised. Most probably they aren’t. Then you’ll look on what getItems cloud function does and why it is not working properly.

Last error related to value could mean that you try to access a html item with the wrong ID.

You should be able to debug most of these errors on your own.

2 Likes