Web3 Netflix Helping Each Other

[thecil]

Hey @Freenature, hope you are great!

I just copy/paste your code and it does work for me, maybe you can show an screenshot of it, also you can try to restart the react server again so it compiles all the changes.

I assume you are working from the netflix-starter repo right? Which browser are you using? (im using brave and chrome, in both works good)

Carlos Z

[franco1701]

*hello could you help me I have a problem this is the error:

Uncaught ReferenceError: process is not defined
at Object.4043 (:2:13168)
at r (:2:306599)
at Object.8048 (:2:9496)
at r (:2:306599)
at Object.8641 (:2:1379)
at r (:2:306599)
at :2:315627
at :2:324225
at :2:324229
at HTMLIFrameElement.e.onload (index.js:1:1)

*and this:

POST https://i0eflwmjf9be.usemoralis.com:2053/server/functions/getMyList 400

*and this:

RESTController.js:438 Uncaught (in promise) Error: Cannot read properties of undefined (reading 'attributes')
at handleError (RESTController.js:438:1)
at async fetchMyList (Home.js:25:1)

handleError @ RESTController.js:438
await in handleError (async)
(anonymous) @ Home.js:32
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157

my code is:

import React,{useEffect, useState} from ‘react’;

import { Link, useParams } from “react-router-dom”;

import “./Home.css”;

import { Logo } from ‘…/images/Netflix’;

import { Button, ConnectButton,Icon, Modal, Tab, TabList, useNotification } from “web3uikit”

import {movies} from “…/helpers/library”

import { useMoralis } from ‘react-moralis’;

import { message } from ‘antd’;

const Home = () => {

const[visible, setVisible] = useState(false)

const[selectMovie, setSelectMovie] = useState()

const[myMovies, setMyMovies] = useState()

const{isAuthenticated, Moralis, account} = useMoralis()

const dispatch = useNotification()

useEffect(()=>{

async function fetchMyList(){

  const theList = await Moralis.Cloud.run("getMyList", {addrs: account})

  const filterA = movies.filter(function(e){

    return theList.indexOf(e.Name) > -1;

  })

  setMyMovies(filterA)

}

fetchMyList();

},[account])

const handleNewNotification = ()=>{

dispatch({

  type: "error",

  message: "pleaser connect your cripto wallet",

  title: "not Authenticated",

  position: "topL"

})

}

return (

<>

  <div className='logo'>

    <Logo />        

  </div>

  <div className='connect'>

      <Icon fill='#ffffff' svg='bell' size={24}/>

      <ConnectButton />

  </div>

  <div className='topBanner'>

    <TabList defaultActiveKey={1} tabStyle="bar">

      <Tab tabKey={1} tabName={"Movies"}>

        <div className='scene'>

          <img src={movies[0].Scene} className="sceneImg"></img>

          <img src={movies[0].Logo} className="sceneLogo"></img>

          <p className='sceneDesc'>{movies[0].Description}</p>

          <div className="playButton">

                <Button

                type='button'

                theme='secundary'

                icon='chevronRightX2'

                text='play'/>

              <Button

              type='button'

              theme='translucent'

              icon='plus'

              text='Add to My list'/>

          </div>

        </div>          

        <div className='title'>

          movies

        </div>            

        <br/>

        <div className='thumbs'>

          {movies && movies.map(e=>{

            return(

              <img

                className='thumbnail'

                src={e.Thumnbnail}

                onClick={()=>{setSelectMovie(e);setVisible(true)}}></img>

            )

          })}

        </div>

      </Tab>

      <Tab tabKey={2} tabName={"series"} isDisabled={true}></Tab>

      <Tab tabKey={3} tabName={"MyList"}></Tab>

    </TabList>

    {selectMovie && (

      <div className='modal'>

        <Modal

          onCloseButtonPressed={()=>setVisible(false)}

          isVisible= {visible}

          hasFooter = {false}

          width = "1000px"

        >

        <div className='modalContent'>

          <img src={selectMovie.Scene} className="modalImg"></img>

          <img src={selectMovie.Logo} className="modalLogo"></img>

          <div className="modalPlayButton">

               {isAuthenticated ? (

                 <>

                 <Link to="/player" state={selectMovie.Movie}>

                <Button

                type='button'

                theme='secundary'

                icon='chevronRightX2'

                text='play'/>

               </Link>

              <Button

              type='button'

              theme='translucent'

              icon='plus'

              text='Add to My list'

              onClick={()=>console.log(myMovies)}/>

                 </>

               ):(

                 <>

                <Button

                type='button'

                theme='secundary'

                icon='chevronRightX2'

                text='play'

                onClick={handleNewNotification}/>

              <Button

              type='button'

              theme='translucent'

              icon='plus'

              text='Add to My list'

              onClick={handleNewNotification}/>

                 </>

               )}

          </div>

          <div className='movieInfo'>

            <div className='description'>

              <div className='details'>

                <span>{selectMovie.Year}</span>

                <span>{selectMovie.Duration}</span>

              </div>

              <span>{selectMovie.Description}</span>

            </div>

            <div className='detailedInfo'>

              Genre:

              <span className='deets'>{selectMovie.Genre}</span>

              <br/>

              Actors:

              <span className='deets'>{selectMovie.Actors}</span>

            </div>

          </div>

        </div>

        </Modal>

      </div>

    )}

  </div>      

</>

)

}

export default Home;

thanks…

[cryptokid]

@franco1701

i0eflwmjf9be.usemoralis.com

Moralis.Cloud.define("getMyList", async (request) =>{
	const addrs = request.params.addrs;
  	const user = Moralis.Object.extend("_User");
  	const query = new Moralis.Query(user);
  	query.equalTo("ethAddres", addrs)
  
  	const data = await query.first({useMasterKey: true});
  	
  	if(data.attributes.myFavoriteList){
    	return data.attributes.myFavoriteList
      
    }else{
    	return []
    }
})

it looks like the only line with attributes is that line with data.attributes

it looks like that query.first doesn’t return data

in particular, here query.equalTo("ethAddres", addrs) it looks like it is a typo with ethAddres vs ethAddress

[franco1701]

my cloud function in moralis is:

Moralis.Cloud.define(“getMyList”, async (request) =>{
const addrs = request.params.addrs;
const user = Moralis.Object.extend("_User");
const query = new Moralis.Query(user);
query.equalTo(“ethAddres”, addrs)

const data = await query.first({useMasterKey: true});

if(data.attributes.myFavoriteList){
	return data.attributes.myFavoriteList
  
}else{
	return []
}

})
and continuos the error

[cryptokid]

you can see here how to post code on forum:

READ BEFORE POSTING - How to post code in the forum

How to post readable code in the forum You can use the “Preformatted Text” button to encapsulate any kind of code you want to show in your post. The demonstration, below, shows you how, and what the formatted code will look like: function formatText() { let words = "I'm a preformatted text button. Please use me wisely!"; } [image] [preformatted text]

also, I pointed out what is the problem in that cloud function code in the above reply

[thecil]

Try with this instead

  useEffect(() => {
    async function fetchMyList() {

      try {
        const theList = await Moralis.Cloud.run("getMyList", { addrs: account });

        const filterdA = movies.filter(function (e) {
          return theList.indexOf(e.Name) > -1;
        });

        setMyMovies(filterdA);
        
      } catch (error) {
        console.error(error)
      }
    }

    fetchMyList();
  }, [account]);

Also please try to provide the code in this way:

READ BEFORE POSTING - How to post code in the forum

How to post readable code in the forum You can use the “Preformatted Text” button to encapsulate any kind of code you want to show in your post. The demonstration, below, shows you how, and what the formatted code will look like: function formatText() { let words = "I'm a preformatted text button. Please use me wisely!"; } [image] [preformatted text]

Carlos Z

[franco1701]

yes it worked only now it doesn’t show me the list in myFavoriteList and I get these errors:

RESTController.js:302          POST https://i0eflwmjf9be.usemoralis.com:2053/server/functions/getMyList 400
dispatch @ RESTController.js:302
ajax @ RESTController.js:309
(anonymous) @ RESTController.js:416
Promise.then (async)
request @ RESTController.js:410
run @ Cloud.js:172
run @ Cloud.js:98
fetchMyList @ Home.js:38
(anonymous) @ Home.js:51
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
performSyncWorkOnRoot @ react-dom.development.js:22269
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
handleConnect @ _useMoralisWeb3.ts:70
emit @ events.js:153
(anonymous) @ MoralisWeb3.js:395
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:15
_next @ asyncToGenerator.js:27
(anonymous) @ asyncToGenerator.js:34
Wrapper @ export.js:18
(anonymous) @ asyncToGenerator.js:23
(anonymous) @ MoralisWeb3.js:423
(anonymous) @ _useMoralisWeb3.ts:120
step @ tslib.es6.js:102
(anonymous) @ tslib.es6.js:83
(anonymous) @ tslib.es6.js:76
__awaiter @ tslib.es6.js:72
(anonymous) @ _useMoralisWeb3.ts:114
(anonymous) @ web3uikit.esm.js:7209
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
index.js:1 Error: Cannot read properties of undefined (reading 'attributes')
    at handleError (RESTController.js:438:1)
    at async fetchMyList (Home.js:38:1)
console.<computed> @ index.js:1
fetchMyList @ Home.js:47
await in fetchMyList (async)
(anonymous) @ Home.js:51
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
performSyncWorkOnRoot @ react-dom.development.js:22269
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
handleConnect @ _useMoralisWeb3.ts:70
emit @ events.js:153
(anonymous) @ MoralisWeb3.js:395
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:15
_next @ asyncToGenerator.js:27
(anonymous) @ asyncToGenerator.js:34
Wrapper @ export.js:18
(anonymous) @ asyncToGenerator.js:23
(anonymous) @ MoralisWeb3.js:423
(anonymous) @ _useMoralisWeb3.ts:120
step @ tslib.es6.js:102
(anonymous) @ tslib.es6.js:83
(anonymous) @ tslib.es6.js:76
__awaiter @ tslib.es6.js:72
(anonymous) @ _useMoralisWeb3.ts:114
(anonymous) @ web3uikit.esm.js:7209
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
Home.js:138 undefined

[franco1701]

this is my code:

import React,{useEffect, useState} from 'react';
import { Link, useParams } from "react-router-dom";
import "./Home.css";
import { Logo } from '../images/Netflix';
import { Button, ConnectButton,Icon, Modal, Tab, TabList, useNotification } from "web3uikit"
import {movies} from "../helpers/library"
import { useMoralis } from 'react-moralis';
import { message } from 'antd';



const Home = () => {
  
  
  
  const[visible, setVisible] = useState(false)
  const[selectMovie, setSelectMovie] = useState()
  const[myMovies, setMyMovies] = useState()
  const{isAuthenticated, Moralis, account} = useMoralis()

  const dispatch = useNotification()

 /* useEffect(()=>{    
    async function fetchMyList(){
      const theList = await Moralis.Cloud.run("getMyList", {addrs: account})

      const filterA = movies.filter(function(e){
        return theList.indexOf(e.Name) > -1;
      })
      setMyMovies(filterA)
    }
    fetchMyList();
  },[account])*/
  useEffect(() => {
    async function fetchMyList() {

      try {
        const theList = await Moralis.Cloud.run("getMyList", { addrs: account });

        const filterdA = movies.filter(function (e) {
          return theList.indexOf(e.Name) > -1;
        });

        setMyMovies(filterdA);
        
      } catch (error) {
        console.error(error)
      }
    }

    fetchMyList();
  }, [account]);

 
  
  const handleNewNotification = ()=>{
    dispatch({
      type: "error",
      message: "pleaser connect your cripto wallet",
      title: "not Authenticated",
      position: "topL"
    })
  }

  return (
    <>
      <div className='logo'>
        <Logo />        
      </div>
      <div className='connect'>
          <Icon fill='#ffffff' svg='bell' size={24}/>
          <ConnectButton />
      </div>
      <div className='topBanner'>
        <TabList defaultActiveKey={1} tabStyle="bar">
          <Tab tabKey={1} tabName={"Movies"}>
            <div className='scene'>
              <img src={movies[0].Scene} className="sceneImg"></img>
              <img src={movies[0].Logo} className="sceneLogo"></img>
              <p className='sceneDesc'>{movies[0].Description}</p>
              <div className="playButton">
                    <Button
                    type='button'
                    theme='secundary'
                    icon='chevronRightX2'
                    text='play'/>
                  <Button
                  type='button'
                  theme='translucent'
                  icon='plus'
                  text='Add to My list'/>
              </div>
            </div>          
            <div className='title'>
              movies
            </div>            
            <br/>
            <div className='thumbs'>
              {movies && movies.map(e=>{
                return(
                  <img 
                    className='thumbnail' 
                    src={e.Thumnbnail}
                    onClick={()=>{setSelectMovie(e);setVisible(true)}}></img>
                )
              })}
            </div>
          </Tab>
          <Tab tabKey={2} tabName={"series"} isDisabled={true}></Tab>
          <Tab tabKey={3} tabName={"MyList"}></Tab>
        </TabList>
        {selectMovie && (
          <div className='modal'>
            <Modal
              onCloseButtonPressed={()=>setVisible(false)}
              isVisible= {visible}
              hasFooter = {false}
              width = "1000px"
            >
            <div className='modalContent'>
              <img src={selectMovie.Scene} className="modalImg"></img>
              <img src={selectMovie.Logo} className="modalLogo"></img>
              <div className="modalPlayButton">
                   {isAuthenticated ? (
                     <>
                     <Link to="/player" state={selectMovie.Movie}>
                    <Button
                    type='button'
                    theme='secundary'
                    icon='chevronRightX2'
                    text='play'/>
                   </Link>
                  <Button
                  type='button'
                  theme='translucent'
                  icon='plus'
                  text='Add to My list' 
                  onClick={()=>console.log(myMovies)}/>
                     </>
                   ):(
                     <>
                    <Button
                    type='button'
                    theme='secundary'
                    icon='chevronRightX2'
                    text='play'
                    onClick={handleNewNotification}/>
                  <Button
                  type='button'
                  theme='translucent'
                  icon='plus'
                  text='Add to My list' 
                  onClick={handleNewNotification}/>
                     </>
                   )}
              </div>
              <div className='movieInfo'>
                <div className='description'>
                  <div className='details'>
                    <span>{selectMovie.Year}</span>
                    <span>{selectMovie.Duration}</span>
                  </div>
                  <span>{selectMovie.Description}</span>
                </div>
                <div className='detailedInfo'>
                  Genre:
                  <span className='deets'>{selectMovie.Genre}</span>
                  <br/>
                  Actors:
                  <span className='deets'>{selectMovie.Actors}</span>
                </div>
              </div>
            </div>
            </Modal>
          </div>
        )}
      </div>      
    </>
  )
}

export default Home;

[cryptokid]

did you fix the typo in cloud code?

[franco1701]

this is my code in cloud moralis

Moralis.Cloud.define("getMyList", async (request) =>{
	const addrs = request.params.addrs;
  	const user = Moralis.Object.extend("_User");
  	const query = new Moralis.Query(user);
  	query.equalTo("ethAddres", addrs)
  
  	const data = await query.first({useMasterKey: true});
  	
  	if(data.attributes.myFavoriteList){
    	return data.attributes.myFavoriteList
      
    }else{
    	return []
    }
})

[cryptokid]

did you read this reply: Web3 Netflix Helping Each Other ?

[franco1701]

thank you very kind I have solved the problem thanks to your answers I can continue … thank you very much

[Madlearner]

Hello there, i am having problems with the library.js, can anyone help me pls? i cannot load the images
Now i could resolve it creating helpers folder, thanks anyways!)

[Freenature]

Yes I am doing the netflix starter kit from github. And I am using Edge.

[thecil]

please try to provide the code in this way:

READ BEFORE POSTING - How to post code in the forum

How to post readable code in the forum You can use the “Preformatted Text” button to encapsulate any kind of code you want to show in your post. The demonstration, below, shows you how, and what the formatted code will look like: function formatText() { let words = "I'm a preformatted text button. Please use me wisely!"; } [image] [preformatted text]

Carlos Z

[thecil]

You should be using Chrome or Braves, also must have a metamask wallet installed to login with it.

Carlos Z

[c.barber1984]

I’m having trouble with the IPFS video upload. I keep getting the

“Error: Request failed with status code 500”
message after trying to run node movie.js

let fs = require("fs");
let axios = require("axios");

let media = ["bikeride.mp4", "GOPR2525.MP4"];
let ipfsArray = [];
let promises = [];

for (let i = 0; i < media.length; i++) {
  promises.push(
    new Promise((res, rej) => {
      fs.readFile(`${__dirname}/export/${media[i]}`, (err, data) => {
        if (err) rej();
        ipfsArray.push({
          path: `media/${i}`,
          content: data.toString("base64"),
        });
        res();
      });
    })
  );
}
Promise.all(promises).then(() => {
  axios
    .post("https://deep-index.moralis.io/api/v2/ipfs/uploadFolder", ipfsArray, {
      headers: {
        "X-API-KEY": "redacted",
        "Content-Type": "application/json",
        accept: "application/json",
      },
      maxContentLength: Infinity,
      maxBodyLength: Infinity
    })
    .then((res) => {
      console.log(res.data);
    })
    .catch((error) => {
      console.log(error);
    });
});```

[cryptokid]

did you try it multiple times?
what is the size of those files that you try to upload?

[Tebbo]

Hi , I am have issues when adding the updateMyList function to my cloud functions.
without it getMyList function works but when i add updateMyList function I get the error
Error: Invalid function: “getMyList”

Cloud Function code

Moralis.Cloud.define("getMyList", async (request) => {

	const addrs = request.params.addrs;
  	const user = Moralis.Object.extend("_User");
  	const query = new Moralis.Query(user);
  	query.equalTo("ethAddress", addrs);
  
  	const data = await query.first({useMasterKey: true});
  
  	if(data.attributes.myList){
      return data.attributes.myList}
  	else{
    	return []
    }

});

Moralis.Cloud.define("updateMyList", async (request) => {

	const addrs = request.params.addrs;
  	const newFav = request.params.newFav;
  
  	const user = Moralis.Object.extend("_User");
  	const query = new Moralis.Query(user);
  	query.equalTo("ethAddress", addrs);
  
  	const data = await query.first({useMasterKey: true});
  
  	if(data.attributes.myList){
      const { myList } = data.attributes;
      myList.push(newFav);
      data.set("myList", myList)
  	else{
    	data.set("myList",[newFav])
    }
     
    await data.save(null, {useMasterKey: true})

});

thanks

[cryptokid]

this can happen when it is a syntax error somewhere in the code, or when cloud code updates, and in that case it happens for a short period of time