Skip to content

Commit 3d754c4

Browse files
0xTxbi0xTxbi
committed
feat: migrate pages to app directory
1 parent 3a60506 commit 3d754c4

8 files changed

Lines changed: 432 additions & 371 deletions

File tree

‎app/page.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
"use client";
2+
3+
import { useSession } from "next-auth/react";
4+
import AuthenticatedScreen from "../components/AuthenticatedScreen";
5+
import UnauthenticatedScreen from "../components/UnauthenticatedScreen";
6+
import { useEffect, useState } from "react";
7+
8+
export default function Home() {
9+
const { status } = useSession();
10+
11+
console.log(status);
12+
13+
if (status === "authenticated") {
14+
return <AuthenticatedScreen />;
15+
} else {
16+
return <UnauthenticatedScreen />;
17+
}
18+
}

‎app/profile/page.tsx‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import HomeHeader from "../components/HomeHeader";
2+
import {
3+
Container,
4+
Stack,
5+
Heading,
6+
Text,
7+
Box,
8+
Button,
9+
Center,
10+
useDisclosure,
11+
} from "@chakra-ui/react";
12+
import OverviewPageModal from "../components/OverviewPageModal";
13+
import { useState } from "react";
14+
import { useUserProfile } from "../hooks/user/useUserProfile";
15+
16+
interface ProfileProps {}
17+
18+
export default function Profile(props: ProfileProps) {
19+
const { isOpen, onOpen, onClose } = useDisclosure();
20+
const [modalTitle, setModalTitle] = useState<string>("");
21+
const [modalContent, setModalContent] = useState<string>("");
22+
23+
const { user, isLoading, isError } = useUserProfile();
24+
25+
return (
26+
<>
27+
{/* Header */}
28+
<HomeHeader />
29+
<Center height={"80vh"}>
30+
<Container maxW={"3xl"}>
31+
<Stack
32+
as={Box}
33+
textAlign={"center"}
34+
spacing={{ base: 8, md: 14 }}
35+
py={{ base: 20, md: 36 }}
36+
>
37+
<Heading
38+
fontWeight={600}
39+
fontSize={{
40+
base: "xl",
41+
sm: "2xl",
42+
md: "4xl",
43+
}}
44+
lineHeight={"110%"}
45+
>
46+
Welcome,{" "}
47+
{user?.display_name}
48+
</Heading>
49+
<Text>
50+
Select any of the
51+
buttons to proceed 👇🏽
52+
</Text>
53+
<Stack
54+
direction={"row"}
55+
spacing={3}
56+
align={"center"}
57+
alignSelf={"center"}
58+
position={"relative"}
59+
>
60+
<Button
61+
colorScheme={
62+
"green"
63+
}
64+
onClick={() => {
65+
setModalTitle(
66+
"Top Tracks"
67+
);
68+
setModalContent(
69+
"TT"
70+
);
71+
onOpen();
72+
}}
73+
bg={"green.400"}
74+
rounded={"full"}
75+
px={6}
76+
_hover={{
77+
bg: "green.500",
78+
}}
79+
>
80+
Top Tracks
81+
</Button>
82+
83+
<Button
84+
colorScheme={
85+
"green"
86+
}
87+
onClick={() => {
88+
setModalTitle(
89+
"Top Artists"
90+
);
91+
setModalContent(
92+
"TA"
93+
);
94+
onOpen();
95+
}}
96+
variant={
97+
"outline"
98+
}
99+
rounded={"full"}
100+
px={6}
101+
>
102+
Top Artists
103+
</Button>
104+
105+
<Button
106+
colorScheme={
107+
"green"
108+
}
109+
onClick={() => {
110+
setModalTitle(
111+
"Your Playlists"
112+
);
113+
setModalContent(
114+
"PL"
115+
);
116+
onOpen();
117+
}}
118+
bg={"green.400"}
119+
rounded={"full"}
120+
px={6}
121+
_hover={{
122+
bg: "green.500",
123+
}}
124+
>
125+
Your Playlists
126+
</Button>
127+
</Stack>
128+
</Stack>
129+
130+
{/* Modals */}
131+
<OverviewPageModal
132+
content={modalContent}
133+
title={modalTitle}
134+
isOpen={isOpen}
135+
onOpen={onOpen}
136+
onClose={onClose}
137+
/>
138+
</Container>
139+
</Center>
140+
</>
141+
);
142+
}

‎components/AuthenticatedScreen.js‎

Lines changed: 123 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import {
2-
Box,
3-
Button,
4-
Container,
5-
Heading,
6-
Icon,
7-
Link,
8-
Stack,
9-
Text,
10-
useToast,
2+
Box,
3+
Button,
4+
Container,
5+
Heading,
6+
Icon,
7+
Link,
8+
Stack,
9+
Text,
10+
useToast,
1111
} from "@chakra-ui/react";
1212
import { signOut, useSession } from "next-auth/react";
1313
import React, { useEffect } from "react";
@@ -16,95 +16,124 @@ import { GiRocketThruster } from "react-icons/gi";
1616
import axios from "axios";
1717

1818
function AuthenticatedScreen() {
19-
const { status, data: session } = useSession();
20-
const toast = useToast();
21-
const id = "auth-toast";
19+
const { status, data: session } = useSession();
20+
const toast = useToast();
21+
const id = "auth-toast";
2222

23-
/* Display toast component on successful sign in */
24-
{
25-
status === "authenticated" && !toast.isActive(id)
26-
? toast({
27-
id,
28-
title: "You're signed in with your Spotify account.",
29-
description: "click 'Get Started' to proceed.",
30-
status: "success",
31-
duration: 1000,
32-
isClosable: true,
33-
colorScheme: "green.400",
34-
})
35-
: "";
36-
}
23+
/* Display toast component on successful sign in */
24+
{
25+
status === "authenticated" && !toast.isActive(id)
26+
? toast({
27+
id,
28+
title: "You're signed in with your Spotify account.",
29+
description:
30+
"click 'Get Started' to proceed.",
31+
status: "success",
32+
duration: 1000,
33+
isClosable: true,
34+
colorScheme: "green.400",
35+
})
36+
: "";
37+
}
3738

38-
useEffect(() => {
39-
const ISSERVER = typeof window === "undefined";
40-
if (!ISSERVER) sessionStorage?.setItem("userToken", session?.accessToken);
41-
}, [session]);
39+
useEffect(() => {
40+
const ISSERVER = typeof window === "undefined";
41+
if (!ISSERVER)
42+
sessionStorage?.setItem(
43+
"userToken",
44+
session?.accessToken
45+
);
46+
}, [session]);
4247

43-
return (
44-
<Container maxW={"3xl"}>
45-
<Stack
46-
as={Box}
47-
textAlign={"center"}
48-
spacing={{ base: 8, md: 14 }}
49-
py={{ base: 20, md: 36 }}
50-
>
51-
<Heading
52-
fontWeight={600}
53-
fontSize={{ base: "2xl", sm: "4xl", md: "6xl" }}
54-
lineHeight={"110%"}
55-
>
56-
This is <br />
57-
<Text as={"span"}>
58-
Octo<span style={{ color: "#48bb78" }}>Play</span>.
59-
</Text>
60-
</Heading>
61-
<Text color={"gray.500"}>
62-
the essential Spotify analytics tool built on its{" "}
63-
<a href="https://developer.spotify.com/documentation/web-api/">
64-
official API
65-
</a>
66-
</Text>
48+
return (
49+
<Container maxW={"3xl"}>
50+
<Stack
51+
as={Box}
52+
textAlign={"center"}
53+
spacing={{ base: 8, md: 14 }}
54+
py={{ base: 20, md: 36 }}
55+
>
56+
<Heading
57+
fontWeight={600}
58+
fontSize={{
59+
base: "2xl",
60+
sm: "4xl",
61+
md: "6xl",
62+
}}
63+
lineHeight={"110%"}
64+
>
65+
This is <br />
66+
<Text as={"span"}>
67+
Octo
68+
<span
69+
style={{
70+
color: "#48bb78",
71+
}}
72+
>
73+
Play
74+
</span>
75+
.
76+
</Text>
77+
</Heading>
78+
<Text color={"gray.500"}>
79+
the essential Spotify analytics tool
80+
built on its{" "}
81+
<a href="https://developer.spotify.com/documentation/web-api/">
82+
official API
83+
</a>
84+
</Text>
6785

68-
<Stack
69-
direction={"column"}
70-
spacing={3}
71-
align={"center"}
72-
alignSelf={"center"}
73-
position={"relative"}
74-
>
75-
<NextLink href="/profile">
76-
<Button
77-
colorScheme={"green"}
78-
rightIcon={<Icon as={GiRocketThruster} />}
79-
bg={"green.400"}
80-
rounded={"full"}
81-
px={6}
82-
_hover={{
83-
bg: "green.500",
84-
}}
85-
>
86-
Get Started
87-
</Button>
88-
</NextLink>
89-
<Text>or</Text>
90-
<Button
91-
onClick={() => {
92-
const ISSERVER = typeof window === "undefined";
93-
if (!ISSERVER) sessionStorage.removeItem("userToken");
94-
signOut({
95-
redirect: "false",
96-
});
97-
}}
98-
variant={"link"}
99-
colorScheme={"blue"}
100-
size={"sm"}
101-
>
102-
Sign out
103-
</Button>
104-
</Stack>
105-
</Stack>
106-
</Container>
107-
);
86+
<Stack
87+
direction={"column"}
88+
spacing={3}
89+
align={"center"}
90+
alignSelf={"center"}
91+
position={"relative"}
92+
>
93+
<NextLink href="/profile">
94+
<Button
95+
colorScheme={"green"}
96+
rightIcon={
97+
<Icon
98+
as={
99+
GiRocketThruster
100+
}
101+
/>
102+
}
103+
bg={"green.400"}
104+
rounded={"full"}
105+
px={6}
106+
_hover={{
107+
bg: "green.500",
108+
}}
109+
>
110+
Get Started
111+
</Button>
112+
</NextLink>
113+
<Text>or</Text>
114+
<Button
115+
onClick={() => {
116+
const ISSERVER =
117+
typeof window ===
118+
"undefined";
119+
if (!ISSERVER)
120+
sessionStorage.removeItem(
121+
"userToken"
122+
);
123+
signOut({
124+
redirect: "false",
125+
});
126+
}}
127+
variant={"link"}
128+
colorScheme={"blue"}
129+
size={"sm"}
130+
>
131+
Sign out
132+
</Button>
133+
</Stack>
134+
</Stack>
135+
</Container>
136+
);
108137
}
109138

110139
export default AuthenticatedScreen;

0 commit comments

Comments
 (0)