spotify2

.env

@@ -0,0 +1,4 @@
+NEXTAUTH_URL = http://localhost:3000
+NEXT_PUBLIC_CLIENT_SECRET = c35fda3f50424e338e417366242cadab
+NEXT_PUBLIC_CLIENT_ID = c9a161242a7d4863aec84b44aad2839b
+JWT_SECRET = some_super_secret_value

atoms/playlistAtom.js

@@ -1,11 +1,11 @@
-import { atom } from "recoil";
+import { atom } from 'recoil'
 
 export const playlistState = atom({
-  key: "playlistState",
-  default: null,
-});
+	key: 'playlistState',
+	default: null,
+})
 
 export const playlistIdState = atom({
-  key: "playlistIsState",
-  default: "37i9dQZF1DWWvoJqVv7uOD",
-});
+	key: 'playlistIdState',
+	default: '3mzDAFxZSfuMxpsQjneHkg',
+})

atoms/songAtom.js

@@ -1,11 +1,11 @@
-import { atom } from "recoil";
+import { atom } from 'recoil'
 
 export const currentTrackIdState = atom({
-  key: "currentTrackIdState",
-  default: null,
-});
+	key: 'currentTrackIdState',
+	default: null,
+})
 
 export const isPlaingState = atom({
-  key: "isPlaingState",
-  default: false,
-});
+	key: 'isPlaingState',
+	default: false,
+})

components/Center.js

@@ -1,83 +1,83 @@
-import React, { useEffect, useState } from "react";
-import { useSession, signOut } from "next-auth/react";
-import { shuffle } from "lodash";
-import { useRecoilValue, useRecoilState } from "recoil";
+import React, { useEffect, useState } from 'react'
+import { useSession, signOut } from 'next-auth/react'
+import { shuffle } from 'lodash'
+import { useRecoilValue, useRecoilState } from 'recoil'
 
-import { playlistIdState, playlistState } from "../atoms/playlistAtom";
-import useSpotify from "../hooks/useSpotify";
-import Songs from "./Songs";
+import { playlistIdState, playlistState } from '../atoms/playlistAtom'
+import useSpotify from '../hooks/useSpotify'
+import Songs from './Songs'
 
-import { ChevronDown } from "../icons/ChevronDown";
+import { ChevronDown } from '../icons/ChevronDown'
 
 const colors = [
-  "from-indigo-500",
-  "from-blue-500",
-  "from-green-500",
-  "from-red-500",
-  "from-yellow-500",
-  "from-pink-500",
-  "from-purple-500",
-];
+	'from-indigo-500',
+	'from-blue-500',
+	'from-green-500',
+	'from-red-500',
+	'from-yellow-500',
+	'from-pink-500',
+	'from-purple-500',
+]
 
 const Center = () => {
-  const { data: session } = useSession();
-  const spotifyApi = useSpotify();
-  const [color, setColor] = useState(null);
-  const playlistId = useRecoilValue(playlistIdState);
-  const [playlist, setPlayList] = useRecoilState(playlistState);
+	const { data: session } = useSession()
+	const spotifyApi = useSpotify()
+	const [color, setColor] = useState(null)
+	const playlistId = useRecoilValue(playlistIdState)
+	const [playlist, setPlayList] = useRecoilState(playlistState)
 
-  useEffect(() => {
-    setColor(shuffle(colors).pop());
-  }, [playlistId]);
+	useEffect(() => {
+		setColor(shuffle(colors).pop())
+	}, [playlistId])
 
-  useEffect(() => {
-    spotifyApi
-      .getPlaylist(playlistId)
-      .then((data) => {
-        setPlayList(data.body);
-      })
-      .catch((err) => console.log("Somthing wen wrong!", err));
-  }, [spotifyApi, playlistId]);
+	useEffect(() => {
+		spotifyApi
+			.getPlaylist(playlistId)
+			.then(data => {
+				setPlayList(data.body)
+			})
+			.catch(err => console.log('Somthing wen wrong!', err))
+	}, [spotifyApi, playlistId])
 
-  /*   console.log(playlist); */
+	/*   console.log(playlist); */
 
-  return (
-    <div className="flex-grow h-screen overflow-y-scroll scrollbar-hide">
-      <header className="absolute top-5 right-8">
-        <div
-          className="flex items-center bg-black space-x-3 opacity-90 hover:opacity-80
-        cursor-pointer rounded-full p-1 pr-2 text-gray-100"
-          onClick={() => signOut()}
-        >
-          <img
-            src={session?.user.image}
-            alt=""
-            className="rounded-full w-10 h-10"
-          />
-          <h2>{session?.user.name}</h2>
-          <ChevronDown />
-        </div>
-      </header>
-      <section
-        className={`flex items-end space-x-7 bg-gradient-to-b to-black ${color}  h-80 text-white p-8`}
-      >
-        <img
-          className="h-44 w-44 shadow-2xl"
-          src={playlist?.images?.[0]?.url}
-          alt=""
-        />
-        <div>
-          <p>PLAYLIST</p>
-          <h1 className="text-2xl md:text-3xl xl:text-5xl font-bold">
-            {playlist?.name}
-          </h1>
-        </div>
-      </section>
-      <div>
-        <Songs />
-      </div>
-    </div>
-  );
-};
+	return (
+		<div className='flex-grow h-screen overflow-y-scroll scrollbar-hide'>
+			<header className='absolute top-5 right-8'>
+				<div
+					className='flex items-center bg-black space-x-3 opacity-90 hover:opacity-80
+        cursor-pointer rounded-full p-1 pr-2 text-gray-100'
+					onClick={() => signOut()}
+				>
+					<img
+						src={session?.user.image}
+						alt=''
+						className='rounded-full w-10 h-10'
+					/>
+					<h2>{session?.user.name}</h2>
+					<ChevronDown />
+				</div>
+			</header>
+			<section
+				className={`flex items-end space-x-7 bg-gradient-to-b to-black ${color}  h-80 text-white p-8`}
+			>
+				<img
+					className='h-44 w-44 shadow-2xl'
+					src={playlist?.images?.[0]?.url}
+					alt=''
+				/>
+				<div>
+					<p>PLAYLIST</p>
+					<h1 className='text-2xl md:text-3xl xl:text-5xl font-bold'>
+						{playlist?.name}
+					</h1>
+				</div>
+			</section>
+			<div>
+				<Songs />
+			</div>
+		</div>
+	)
+}
 
-export default Center;
+export default Center

components/Login.js

@@ -1,35 +1,47 @@
-import React from "react";
-import Head from "next/head";
-import { signIn } from "next-auth/react";
+import React from 'react'
+import Head from 'next/head'
+import { getProviders, getSession, signIn } from 'next-auth/react'
 
 const Login = ({ providers }) => {
-  return (
-    <div className="flex flex-col items-center bg-black min-h-screen w-full justify-center">
-      <Head>
-        <title>Spotify Clone</title>
-        <meta name="description" content="Generated by create next app" />
-        <link
-          rel="icon"
-          href="https://th.bing.com/th/id/R.fe4bfd3bd082e4fd4d6aca3f255925b1?rik=Hwa9QxFb3%2bIjtw&pid=ImgRaw&r=0"
-        />
-      </Head>
-      <img
-        className="w-52 mb-5"
-        src="https://th.bing.com/th/id/R.fe4bfd3bd082e4fd4d6aca3f255925b1?rik=Hwa9QxFb3%2bIjtw&pid=ImgRaw&r=0"
-        alt="images"
-      />
-      {Object.values(providers).map((provider) => (
-        <div key={provider.name}>
-          <button
-            className="bg-[#18D860] text-white p-5 rounded-lg"
-            onClick={() => signIn(provider.id, { callbackUrl: "/" })}
-          >
-            Login with {provider.name}
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-};
+	return (
+		<div className='flex flex-col items-center bg-black min-h-screen w-full justify-center'>
+			<Head>
+				<title>Spotify Clone</title>
+				<meta name='description' content='Generated by create next app' />
+				<link
+					rel='icon'
+					href='https://th.bing.com/th/id/R.fe4bfd3bd082e4fd4d6aca3f255925b1?rik=Hwa9QxFb3%2bIjtw&pid=ImgRaw&r=0'
+				/>
+			</Head>
+			<img
+				className='w-52 mb-5'
+				src='https://th.bing.com/th/id/R.fe4bfd3bd082e4fd4d6aca3f255925b1?rik=Hwa9QxFb3%2bIjtw&pid=ImgRaw&r=0'
+				alt='images'
+			/>
+			{Object.values(providers).map(provider => (
+				<div key={provider.name}>
+					<button
+						className='bg-[#18D860] text-white p-5 rounded-lg'
+						onClick={() => signIn(provider.id, { callbackUrl: '/' })}
+					>
+						Login with {provider.name}
+					</button>
+				</div>
+			))}
+		</div>
+	)
+}
 
-export default Login;
+export default Login
+
+export async function getServerSideProps(context) {
+	const session = await getSession(context)
+	const providers = await getProviders()
+
+	return {
+		props: {
+			session,
+			providers,
+		},
+	}
+}