Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

swiper 実装 #46

Closed
wants to merge 1 commit into from
Closed

swiper 実装 #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,168 changes: 1,075 additions & 93 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,16 @@
"lint:fix": "next lint --fix"
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@headlessui/react": "^1.4.2",
"@mui/icons-material": "^5.15.15",
"@mui/material": "^5.15.15",
"axios": "^0.21.1",
"next": "^13.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"swiper": "^11.1.1",
"swr": "^1.3.0"
},
"devDependencies": {
Expand Down
14 changes: 7 additions & 7 deletions src/components/Layouts/Navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,17 @@ const Navigation = ({ user }) => {
<div className="flex">
{/* Logo */}
<div className="flex-shrink-0 flex items-center">
<Link href="/dashboard">
<Link href="/home">
<ApplicationLogo className="block h-10 w-auto fill-current text-gray-600" />
</Link>
</div>

{/* Navigation Links */}
<div className="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<NavLink
href="/dashboard"
active={router.pathname === '/dashboard'}>
Dashboard
href="/home"
active={router.pathname === '/home'}>
Home
</NavLink>
</div>
</div>
Expand Down Expand Up @@ -108,9 +108,9 @@ const Navigation = ({ user }) => {
<div className="block sm:hidden">
<div className="pt-2 pb-3 space-y-1">
<ResponsiveNavLink
href="/dashboard"
active={router.pathname === '/dashboard'}>
Dashboard
href="/home"
active={router.pathname === '/home'}>
home
</ResponsiveNavLink>
</div>

Expand Down
14 changes: 14 additions & 0 deletions src/pages/api/getPopularMovies.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import axios from 'axios'

export default async function handler(req, res) {
try {
const response = await axios(
`https://api.themoviedb.org/3/tv/popular?api_key=${process.env.TMDB_API_KEY}&language=ja-JP`,
)
res.status(200).json(response.data)
console.log('取得した結果は...', response.data)
} catch (err) {
console.log(err)
res.status(500).json('エラーが発生しました', err)
}
}
29 changes: 0 additions & 29 deletions src/pages/dashboard.js
View file
Open in desktop

This file was deleted.

51 changes: 51 additions & 0 deletions src/pages/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import AppLayout from '@/components/Layouts/AppLayout'
import axios from 'axios'
import Head from 'next/head'
import { useEffect, useState } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'

const Dashboard = () => {
const [movies, setMovies] = useState([])

useEffect(() => {
const fetchMovies = async () => {
try {
const response = await axios.get('api/getPopularMovies')
// console.log(response.data.results)
setMovies(response.data.results)
console.log(movies)
} catch (err) {
console.log(err)
}
}
fetchMovies()
}, [])
return (
<AppLayout
header={
<h2 className="font-semibold text-xl text-gray-800 leading-tight">
Home
</h2>
}>
<Head>
<title>Laravel - Home</title>
</Head>
<Swiper
spaceBetween={30}
slidesPerView={5}
onSlideChange={() => console.log('slide change')}
onSwiper={swiper => console.log(swiper)}>
{movies.map(movie => (
<SwiperSlide key={movie.id}>
<img
src={`https://image.tmdb.org/t/p/original${movie.poster_path}`}
/>
</SwiperSlide>
))}
</Swiper>
</AppLayout>
)
}

export default Dashboard
4 changes: 2 additions & 2 deletions src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ export default function Home() {
<div className="hidden fixed top-0 right-0 px-6 py-4 sm:block">
{user ? (
<Link
href="/dashboard"
href="/home"
className="ml-4 text-sm text-gray-700 underline">
Dashboard
HOME
</Link>
) : (
<>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Login = () => {

const { login } = useAuth({
middleware: 'guest',
redirectIfAuthenticated: '/dashboard',
redirectIfAuthenticated: '/home',
})

const [email, setEmail] = useState('')
Expand Down
2 changes: 1 addition & 1 deletion src/pages/register.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { useState } from 'react'
const Register = () => {
const { register } = useAuth({
middleware: 'guest',
redirectIfAuthenticated: '/dashboard',
redirectIfAuthenticated: '/home',
})

const [name, setName] = useState('')
Expand Down