Web3 Netflix Helping Each Other

Whats the error?can you put more details

import React from ‘react’;

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

import “./Home.css”;

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

import { ConnectButton, Icon, TabList, Tab } from “web3uikit”;

const Home = () => {

return (

<>

<div className="logo">

  <Logo />

</div>

<div className="connect">

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

  <ConnectButton />

</div>

<div className="topBanner">

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

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

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

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

  </TabList>

</div>

</>

);

}

export default Home;

I can’t make it show the Tabs with the links. And The bell icon on top near the connect wallet is not centred like in the video.
What I am doing wrong?

1 Like

I have the same problem!

1 Like

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

*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…

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

2 Likes

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

1 Like

you can see here how to post code on forum:

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

1 Like

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:

Carlos Z

1 Like

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

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;

did you fix the typo in cloud code?

2 Likes

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 []
    }
})

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

1 Like

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

2 Likes

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!)

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

please try to provide the code in this way:

Carlos Z

1 Like

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

Carlos Z

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);
    });
});```