Web3 Netflix Helping Each Other

[ivan]

Hi all,

This is a thread for everyone who is donig the Netflix project.
This thread is created so that we can help each other.

If you need help - feel free to post here.
If you see someone and you can help - please do so!

Moralis team will be monitoring this thread also.

LFG

[LT7]

Does no messages mean its all going well ? Just starting now!!

[cryptokid]

what you mean by no messages?

[Siego]

I had some issues trying to import the Netflix-Starter link provided in the description. If you had a similar issue here is the correct link:

GitHub - IAmJaysWay/Netflix-Starter

[0xhdev]

Hi everyone!

I have an error when compiling while i had movie.

(Module not found: Can’t resolve ‘…/helpers/library’)

Can you help?

[cryptokid]

Did you look at the final version of the project to see if that folder is present there?

[0xhdev]

Thanks i will use the final version to build

[Siego]

Hi everyone,

I am getting an error with cloud functions in my Moralis server. How do I resolve it?

[AydenCrypto]

Whats the error?can you put more details

[Freenature]

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?

[themis]

I have the same problem!

[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?