Skip to content

Commit

Permalink
Merge pull request #24 from Firebird1029/unify_page
Browse files Browse the repository at this point in the history
Make unify page
  • Loading branch information
Firebird1029 authored Mar 23, 2024
2 parents e4bd28d + 8d87aab commit 5748034
Show file tree
Hide file tree
Showing 15 changed files with 1,100 additions and 179 deletions.
1 change: 1 addition & 0 deletions .env
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ NEXT_PUBLIC_REDIRECT_URI="http://localhost:3000/auth/callback"
NEXT_PUBLIC_AUTH_ENDPOINT="https://accounts.spotify.com/authorize"
NEXT_PUBLIC_RESPONSE_TYPE="token"
NEXT_PUBLIC_BACKEND_URL="http://localhost:3001"
NEXT_PUBLIC_FRONTENT_URL="localhost:3000"
33 changes: 33 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"prepare": "husky install"
},
"dependencies": {
"@nivo/pie": "^0.85.1",
"@nivo/radar": "^0.85.1",
"@supabase/ssr": "^0.1.0",
"@supabase/supabase-js": "^2.39.8",
Expand Down
61 changes: 21 additions & 40 deletions src/app/Index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,54 +3,35 @@
import { useEffect, useState } from "react";

import IndexContent from "@/components/svg-art/index_content";

const CLIENT_ID = process.env.NEXT_PUBLIC_CLIENT_ID;
const REDIRECT_URI = process.env.NEXT_PUBLIC_REDIRECT_URI;
const AUTH_ENDPOINT = process.env.NEXT_PUBLIC_AUTH_ENDPOINT;
const RESPONSE_TYPE = process.env.NEXT_PUBLIC_RESPONSE_TYPE;
import createClient from "@/utils/supabase/client";
import { loginWithSpotify } from "./login/actions";

export default function HomePage() {
const [token, setToken] = useState(null);

const handleLogin = () => {
const params = new URLSearchParams();
params.append("client_id", CLIENT_ID);
params.append("response_type", RESPONSE_TYPE);
params.append("redirect_uri", REDIRECT_URI);
params.append(
"scope",
"user-read-private user-read-email user-library-read user-follow-read user-top-read user-modify-playback-state",
);

const url = `${AUTH_ENDPOINT}?${params.toString()}`;

// Open Spotify login in same window, will redirect back
window.open(url, "_self");
};

const enterCode = () => {
// console.log("enter code");
};

const handleTokenFromCallback = () => {
// Extract the token from the URL hash
const urlParams = new URLSearchParams(window.location.hash.substr(1));
const newToken = urlParams.get("access_token");

if (newToken) {
setToken(newToken);
window.localStorage.setItem("token", newToken);
}
};
const supabase = createClient();

// Check for token in the URL hash when component mounts
// check if user is already logged in
useEffect(() => {
handleTokenFromCallback();
(async () => {
// console.log("use effect running");
const {
data: { user },
} = await supabase.auth.getUser();
// console.log("user: ", user);
if (user) {
// already logged in
// router.replace("/account");
// console.log("user is logged in");
} else {
// console.log("user is not logged in");
}
})().catch((err) => {
console.error(err); // TODO display error message to user
});
}, []);

return (
<div style={{ width: "100vw", height: "100vh" }}>
<IndexContent handleLogin={handleLogin} enterCode={enterCode} />
<IndexContent />
</div>
);
}
16 changes: 14 additions & 2 deletions src/app/auth/callback/route.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ export async function GET(request) {
const redirectTo = request.nextUrl.clone();
redirectTo.searchParams.delete("code");

// console.log("code: ", code);

if (code) {
const supabase = createClient();

Expand Down Expand Up @@ -37,10 +39,17 @@ export async function GET(request) {
return NextResponse.redirect(redirectTo);
}

// console.log("spotify user data: ", spotifyUserData);

// console.log("username: ", spotifyUserData.userProfile.id);

// update DB with Spotify username + Spotify data
const { dbError } = await supabase
.from("profiles")
.update({ username: spotifyUserData.id, spotify_data: spotifyUserData })
.update({
username: spotifyUserData.userProfile.id,
spotify_data: spotifyUserData,
})
.eq("id", data.user.id);

if (dbError) {
Expand All @@ -50,7 +59,10 @@ export async function GET(request) {
}

// once finished, redirect user to account page
redirectTo.pathname = "/account";
redirectTo.pathname = `/user/${spotifyUserData.userProfile.id}`;
return NextResponse.redirect(redirectTo);
}

redirectTo.pathname = "/";
return NextResponse.redirect(redirectTo);
}
33 changes: 33 additions & 0 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,36 @@
font-weight: 400;
font-style: normal;
}

.circle-row {
display: flex;
justify-content: center;
}

.circle {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #d1d5db;
display: flex;
justify-content: center;
align-items: center;
margin: 0 10px;
flex-direction: column;
}

.circle:nth-child(2) {
margin-top: -40px; /* Adjust as needed */
}

.circle-text-large {
font-size: 58px;
color: black;
font-family: "Koulen", sans-serif;
}

.circle-text-small {
font-size: 36px;
color: black;
font-family: "Koulen", sans-serif;
}
34 changes: 6 additions & 28 deletions src/app/login/page.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";

import createClient from "@/utils/supabase/client";
import { login, loginWithSpotify, signup } from "./actions";
import { loginWithSpotify } from "./actions";

export default function LoginPage() {
const router = useRouter();
Expand Down Expand Up @@ -37,35 +37,13 @@ export default function LoginPage() {

return (
!loading && (
<>
<form>
<label htmlFor="email">Email:</label>
<input id="email" name="email" type="email" required />
<label htmlFor="password">Password:</label>
<input id="password" name="password" type="password" required />
<button type="submit" formAction={login}>
Log in
</button>
<button type="submit" formAction={signup}>
Sign up
</button>
</form>
<div>
<p>
NOTE: You will need to confirm your email after signing up! If not,
you will not be able to login.
<button type="button" onClick={() => loginWithSpotify()}>
Login with Spotify
</button>
</p>

<div>
<br />
<br />
<br />
<p>
<button type="button" onClick={() => loginWithSpotify()}>
Login with Spotify
</button>
</p>
</div>
</>
</div>
)
);
}
128 changes: 128 additions & 0 deletions src/app/unify/[users]/page.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
"use client";

import { useEffect, useState } from "react";
import PropTypes from "prop-types";
import createClient from "@/utils/supabase/client";
import UnifyContent from "@/components/UnifyContent";

export default function UnifyPage({ params: { users } }) {
// console.log(users);

const [user1, user2] = users.split("%26");

const supabase = createClient();

const [loading, setLoading] = useState(true);
const [user1Data, setUser1Data] = useState(null);
const [user2Data, setUser2Data] = useState(null);

useEffect(() => {
const fetchData = async () => {
try {
if (!users.includes("%26")) {
// console.log("user: ", users);

// Get current user's information from Supabase
const { data: currentUser, error } = await supabase.auth.getUser();

if (error) {
throw error;
}

// console.log(currentUser);

// console.log("id: ", currentUser.user.id);

supabase
.from("profiles")
.select("username")
.eq("id", currentUser.user.id)
.then(({ data, error2 }) => {
if (error2) {
// TODO
console.error(error2); // TODO display error message to user
}

// console.log(data);

if (data && data.length > 0) {
// Concatenate paramValue with currentUser's ID
const redirectURL = `${users}&${data[0].username}`;

// console.log(redirectURL);

// Redirect to the generated URL
window.location.href = redirectURL;
}
});
}
} catch (error) {
console.error("Error fetching data:", error.message);
}
};

fetchData();

// Cleanup function if necessary
return () => {
// Cleanup code if needed
};
}, []); // Empty dependency array ensures useEffect runs only once

useEffect(() => {
// find user by username (given as URL slug) in DB
supabase
.from("profiles")
.select("spotify_data")
.eq("username", user1)
.then(({ data, error }) => {
if (error) {
// TODO
console.error(error); // TODO display error message to user
}

if (data && data.length > 0) {
setUser1Data(data[0].spotify_data);
}

setLoading(false);
});
}, []);

useEffect(() => {
// find user by username (given as URL slug) in DB
supabase
.from("profiles")
.select("spotify_data")
.eq("username", user2)
.then(({ data, error }) => {
if (error) {
// TODO
console.error(error); // TODO display error message to user
}

if (data && data.length > 0) {
setUser2Data(data[0].spotify_data);
}

setLoading(false);
});
}, []);

return (
<div>
{!loading && user1Data && user2Data && (
<div>
<UnifyContent user1Data={user1Data} user2Data={user2Data} />
</div>
)}
{!loading && (!user1Data || !user2Data) && <div>User not found!</div>}
</div>
);
}

UnifyPage.propTypes = {
params: PropTypes.shape({
users: PropTypes.string.isRequired,
}).isRequired,
};
Loading

0 comments on commit 5748034

Please sign in to comment.