index.js

import AppBar from '../components/appbar'
import Card from '../components/card'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'

import { makeStyles } from '@material-ui/core/styles'
import Grid from '@material-ui/core/Grid'
import Paper from '@material-ui/core/Paper'

function fetcher(url) {
  return fetch(url).then((r) => r.json())
}

const PostLink = ({ show }) => (
  <Grid item xl>
    <Card
      title={show.title}
      img={show.thumbnail}
      episode={show.episode.episode_num}
      episodeid={show.episode.id}
      anime-slug={show.anime.slug}
    />
  </Grid>
)

const Index = (props) => (
  <div>
    <AppBar />
    <Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justify="center"
      style={{ minHeight: '100vh' }}
    >
      <h1>anime flix</h1>
      <Grid
        container
        justify="center"
        alignItems="flex-start"
        spacing={3}
        style={{ minHeight: '100vh' }}
      >
        <div><h1>latest:</h1></div>
        <div style={{ minWidth: '80%' }}></div>
        {props.shows.map((show) => (
          <PostLink key={show.id} show={show} />
        ))}
      </Grid>
    </Grid>
  </div>
)

Index.getInitialProps = async function(props) {
  const { page } = props.query
  let url = 'https://falling-sea-afd5.kanbaru.workers.dev/?https://gistcdn.githack.com/notkanbaru/76480b26593184a8fbbca442a69c69df/raw/d15614917adf699963eff77c8b8cc00fc21b8359/haha.json'
  //if (page != undefined) url = url + '&page=' + page
  console.log(url)
  const res = await fetch(url, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      accept:
        'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
      'User-Agent':
        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4101.0 Safari/537.36 Edg/83.0.474.0',
      origin: 'https://animeflix.io/'
    }
  })
  console.log(res)
  const data = await res.json()

  return {
    shows: data.data.map((title) => title)
  }
}

export default Index