Thiết kế website giá rẻ

Question

import Cliz from "./mainClient";




var first_name = "https://image.tmdb.org/t/p/w200"; 


const weekApi = 'https://api.themoviedb.org/3/trending/movie/week?language=en-US';
const weekOptions = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: 'my Auth',
    Cache: 'no-store'
  },

  

};



const url = 'https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1+2';
const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: 'my auth',
  },
  cache: 'no-store',
};


const rated = async () => {

    var get = await fetch(url, options)
    var rec = await get.json()
    var bac = rec.results
    var first_name = "https://image.tmdb.org/t/p/original"
    var gotItAll = bac.map((f) =>first_name.concat( f.poster_path))
    var backWall = first_name.concat(rec.results[0].backdrop_path)
    var wallDes = rec.results[0].overview
    var wallTitle = rec.results[0].title
    var kk = wallDes.substring(0, 48) 
    var bb = wallDes.substring(49, 144)
    var cc = wallDes.substring(144 , 210)
    var dd = wallDes.substring(210, 277)
    var ee = wallDes.substring(277, 3466)
    var ff = bac.map((c) => c.vote_average)
    var titles = bac.map((c) => c.title)
    var needs = [gotItAll, backWall, kk, bb, cc, dd, ee, wallTitle, titles, ff]
    needs[0].splice(17, 1)
    needs[0].splice(11, 1)
    needs[8].splice(11, 1)
    needs[8].splice(16, 1)

    return needs
}



const weekRated = async () => {
  var weekGet = await fetch(weekApi, weekOptions)
  var weekRec = await weekGet.json()
  var want =  weekRec.results
  var weekImg = want.map((c) => first_name.concat(c.poster_path))
  var weekTitle = want.map((c) => c.title )
  var weekScores = want.map((c) => c.vote_average)
  var wants = [weekImg, weekScores, weekTitle]

  wants[0].splice(16, 1)
  wants[2].splice(16, 1)

  return  wants
}



export default async function top(props){
    var getIt = await rated()
    var getweek = await weekRated()
    var weekImgs = getweek[0]
    var weekblight = getweek[1]
    var weekTi = getweek[2]
    var lineBreak = getIt[2]
    var lineBreak2 = getIt[3]
    var lineBreak3 = getIt[4]
    var lineBreak4 = getIt[5]
    var lineBreak5 = getIt[6]
    var lineBreak6 = getIt[7]
    var score = getIt[9]





    return(
        <div className="kkl">
            <div className="box-man">
            <img className="back-img" src={getIt[1]} alt={""}/>
            <p className="wallTitle">{lineBreak6} </p>
            </div>
            <br />
            <div className="hii-con">
              <div>
                <h3 className="hii-cli">All time Movies</h3></div>
            </div>
  
            <div className="image-flask">
              {getIt[0].map((user, index) => <div key={index} className="image-wrapper">
            <img className='try' id={'' +index} src={user} alt={""}/>
            <p className="image-name"></p>
            <div className="star-line">
              <span className="stars"></span>
            </div>

            
            <div>
            </div>
          </div>
          )}
            </div>

            <div className="week-block">
              <h3 className="week">Weekly Trending</h3>
            </div>

            <div className="imgae-flask-week">
            {weekImgs.map((user, index) => <div key={index} className="image-wrapper">
            <img className='try' id={'' +index} src={user} alt={""}/>
            <p className="image-title"></p>
            <div className="star-line">
              <span className="westars"></span>
            </div>
          </div>
          )}
            </div>

          <Cliz point={score}  name={getIt[8]} weekFlash={weekblight} weekName={weekTi}/>
        </div>
    )
}

import Usezz from "./romote";

export default function Cliz(props){
    var names = props.name
    var vote = props.point
    var weekWhatever = props.weekName
    var weekOf = props.weekFlash
    
    return(<>
        <Usezz votes={vote} weekDone={weekOf} weekYes={weekWhatever} title={names}/>
        </>
    )

}



"use client"
import '../Gone.css';
import {useEffect} from 'react';



export default function Usezz(props){
        var i = 1000
        var movieName = props.title
        var addUps = props.votes
        var weekUnderline = props.weekYes
        var weekUnderStars = props.weekDone

        


        useEffect(()=> {
            var alias = document.querySelectorAll('.image-flask p')
            var stars = document.querySelectorAll('.image-flask span')
            var weekFile = document.querySelectorAll('.imgae-flask-week p')
            var weekStars = document.querySelectorAll('.imgae-flask-week span')


            alias.forEach((element, index, array) => {
                element.innerHTML = movieName[index].substring(0, 18) + '<br>' + '...'
            })
            
            stars.forEach((element, index, array) => {
                element.innerHTML = addUps[index] + '☆'
            }) 

            weekFile.forEach((element , index , array) => {
                element.innerHTML = weekUnderline[index].substring(0, 18) + '<br>' + '...'

            })

            weekStars.forEach((element, index, array) => {
                element.innerHTML = weekUnderStars[index] + '☆'
            })


        })

    return(
        <div>
            

            <button className="button28" onClick={() => {
                document.querySelector('.image-flask').scrollTo({top: 100, left:i, behavior:'smooth'})
                i = i + 1000
                if(i > 2000 ){
                    i = null

                }
            }}>{'>'}</button>
            <button className="button29" onClick={() => document.querySelector('.image-flask').scrollTo({top: 100, left:0, behavior:'smooth' })}>{'<'}</button>
            <button className="button30" onClick={() => document.querySelector('.imgae-flask-week').scrollTo({top: 100, left:0, behavior:'smooth' })}>{'<'}</button>
            <button className="button31" onClick={() => {
                document.querySelector('.imgae-flask-week').scrollTo({top: 100, left:i, behavior:'smooth' })
                i = i + 1000
                if(i > 2000 ){
                    i = null

                }
            }}>{'>'}</button>
        </div>
    )

}

THE BROWSE PAGE

import Outputs from "./searchser";




const searchUrl = `https://api.themoviedb.org/3/search/movie?query=harry&include_adult=false&language=en-US&page=1`;
const searchOptions = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: my auth},

};



export const find = async (fish)  => {
    var search = await fetch(`https://api.themoviedb.org/3/search/movie?query=${fish}&include_adult=false&language=en-US&page=1`, searchOptions)
    var found = await search.json()
    var finished = found.results
    var imp = "https://image.tmdb.org/t/p/w200"

    return finished

}



export default async function Browse(props){
    const userRequest = await find()

    return(
        <div>
            <h1 className="no">browse</h1>
            <p className="no">{'userRequest'}</p>
            <Outputs  />
        </div>
    )

}


import Inputs from "./searchcli";


export default function Outputs(props) {
 return(
    <div>
        <Inputs />
    </div>
 )
}



"use client"
import { useState } from "react";
import { find } from "./page";
// import '../Gone.css'

export function getValue() {
  return 'Hello, World!';
}




export default function Inputs(props) {
  const [searchText, setSearchText] = useState('')
  const [searchResults, setSearchResults] = useState([]);

  const handleImageError = (event) => {
    event.target.style.display = 'none';
    event.target.style.position = 'relative';
  };


  const handleSearch = async () => {
    if (searchText) {
      const results = await find(searchText);
      console.log(results)
      setSearchResults(results);
    } else {
      setSearchResults([]);
    }
  };

  const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      handleSearch();
    }
  };
  

    return (
      <div>
       
          <div className="searchBox">

            <input className="searchInput"type="text" name="" placeholder="Search" onKeyDown={handleKeyPress} onChange={e => setSearchText(e.target.value)}></input>
            <button onClick={handleSearch} className="searchButton" href="#">
            ????
            </button>
          </div>

        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        {searchResults.length > 0 && ( 
        <div className="image-search-container">
          {searchResults.map((item, index) => (
            <div key={index}>
            <img
              src={`https://image.tmdb.org/t/p/w200${item.poster_path}`}
              alt={item.title}
              className="image-item"/>  
            <p className="search-title">{item.title.substring(0, 30) + "n" + item.title.substring(30, 68) + "n" + item.title.substring(68, 100)}</p>

            </div>



          ))}
        </div>
      )}
      </div>
    );
  }

I am using cloudflare to host my project. all the pages load fine but when i click on this one everything crashes and i get

Application error: a server-side exception has occurred (see the server logs for more information).

at first i thought it was the links in navigation bar that i had. but that was not it.

than i thought maybe is the useffect acting up. but still is not working

i tried deleting and reinstalling my npm. and i tried updating it.

when it crashes it effects all the pages except the browse page.

the browse page is fine and runs completely normally

Thiết kế website giá rẻ

Danh mục

Next js 14 routing issues in production cloudflare