Skip to content

Commit 92ab300

Browse files
Gaurav242007Gaurav242007
committed
Added Authentication and fetched user data from backend
1 parent 36f6d26 commit 92ab300

File tree

11 files changed

+166
-116
lines changed

11 files changed

+166
-116
lines changed

‎client.js renamed to ‎SupabaseClient.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { createClient } from "@supabase/supabase-js";
2-
3-
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
4-
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANNON_KEY;
5-
6-
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
1+
import { createClient } from "@supabase/supabase-js";
2+
3+
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
4+
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANNON_KEY;
5+
6+
export const supabase = createClient(supabaseUrl, supabaseAnonKey);

‎components/AutoComplete.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import { ClockIcon } from "@heroicons/react/24/outline";
2+
import { useChannelState } from "../context/ChannelState";
23

34
export default function AutoComplete({
45
searchString,
56
setSearchString,
67
setInput,
7-
searches,
88
}) {
9+
const { currentChannel } = useChannelState();
10+
const searches = currentChannel?.channelSearches;
911
const filteredSearches = searches?.filter((search) =>
1012
search
1113
?.toString()

‎components/Channel/ChannelAbout.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const ChannelAbout = () => {
77
const {
88
activeChannel: { joinedDate, views, description, location, socialLinks },
99
} = useStateContext();
10+
1011
return (
1112
<div className="w-full flex items-start justify-between p-4 mt-10 dark:text-white h-screen">
1213
<div className="w-9/12 mr-8 flex flex-col">
@@ -60,7 +61,7 @@ const ChannelAbout = () => {
6061
<div className="border-b border-1 w-full border-b-gray-300 dark:border-b-gray-600"></div>
6162

6263
<p className="font-semibold text-sm">
63-
Joined {joinedDate?.toDateString()?.slice(4, 100000)}
64+
Joined {new Date(joinedDate)?.toDateString()?.slice(4, 100000)}
6465
</p>
6566
<div className="border-b border-1 w-full border-b-gray-300 dark:border-b-gray-600"></div>
6667

‎components/ChannelHeader.jsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
ChevronRightIcon,
55
MagnifyingGlassIcon,
66
} from "@heroicons/react/24/outline";
7-
import React, { useRef, useState } from "react";
7+
import React, { useEffect, useRef, useState } from "react";
88
import { useStateContext } from "../context/StateContext";
99
import Tooltip from "./Tooltip";
1010
import { numify } from "numify";
@@ -37,9 +37,9 @@ const ChannelHeader = () => {
3737
setLoading(false);
3838
setChannelTab(tab);
3939
}, 1000);
40-
}
41-
const {channelSearch, setChannelSearch} = useChannelState();
42-
const {Subscribe, UnSubscribe} = useChannelState();
40+
};
41+
const { channelSearch, setChannelSearch } = useChannelState();
42+
const { Subscribe, UnSubscribe } = useChannelState();
4343
const inputRef = useRef();
4444
const [isInput, setIsInput] = useState(false);
4545

@@ -157,7 +157,6 @@ const ChannelHeader = () => {
157157
/>
158158
</div>
159159
<div className="border-b -mt-4 border-1 border-b-gray-300 dark:border-b-gray-600"></div>
160-
161160
</div>
162161
);
163162
};

‎components/Navbar.jsx

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ import { useRouter } from "next/router";
2020
import { useChannelState } from "../context/ChannelState";
2121

2222
const Header = () => {
23-
const { isSidebar, setIsSidebar, user, searchString, setSearchString } =
23+
const { isSidebar, setIsSidebar, searchString, setSearchString, setLoading, setLoadingProgress } =
2424
useStateContext();
25-
const { channelSearches } = useChannelState();
25+
const { channelSearches, currentChannel, handleLogin , startLoadingBar} = useChannelState();
2626
const [hasFocused, setHasFocused] = useState(false);
2727
const [input, setInput] = useState(searchString);
2828
const router = useRouter();
@@ -44,11 +44,12 @@ const Header = () => {
4444
className={`flex items-center justify-between w-full h-[10vh] fixed top-0 z-[10000] bg-white dark:bg-neutral-900 p-2`}
4545
>
4646
<div className="flex items-center">
47-
{isSidebar ? (
48-
<XMarkIcon className="icon" onClick={() => setIsSidebar(false)} />
49-
) : (
50-
<Bars3Icon className="icon" onClick={() => setIsSidebar(true)} />
51-
)}
47+
{currentChannel &&
48+
(isSidebar ? (
49+
<XMarkIcon className="icon" onClick={() => setIsSidebar(false)} />
50+
) : (
51+
<Bars3Icon className="icon" onClick={() => setIsSidebar(true)} />
52+
))}
5253
<Link
5354
href="/"
5455
className="cursor-pointer icon w-12 h-12 items-center flex gap-1"
@@ -121,18 +122,24 @@ const Header = () => {
121122
</div>
122123
<div className="flex items-center">
123124
<Tooltip
124-
element={<VideoCameraIcon onClick={() => router.push('/studio?create=true')} className="clickable-icon" />}
125+
element={
126+
<VideoCameraIcon
127+
onClick={() => router.push("/studio?create=true")}
128+
className="clickable-icon"
129+
/>
130+
}
125131
hoverText="Create"
126132
/>
127133
<Tooltip
128134
element={<BellIcon className="clickable-icon" />}
129135
hoverText="Notifications"
130136
/>
131-
{user ? (
137+
{currentChannel ? (
132138
<ProfileMenu />
133139
) : (
134140
<button
135141
type="button"
142+
onClick={() => startLoadingBar(setLoading, setLoadingProgress, () => handleLogin())}
136143
className="text-red-400 hover:text-white border border-red-400 hover:bg-red-400 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-3 py-1.5 text-center mr-2"
137144
>
138145
Login

‎components/ProfileMenu.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useChannelState } from "../context/ChannelState";
66

77
export default function ProfileMenu() {
88
const {ProfileMenuIcons} = useStateContext();
9-
const {currentChannel: {channelImage, channelName}} = useChannelState();
9+
const {currentChannel: {channelImage, channelName, channelDisplayName}} = useChannelState();
1010

1111
return (
1212
<div>
@@ -35,11 +35,11 @@ export default function ProfileMenu() {
3535
<div className="flex items-center justify-center flex-col mb-2">
3636
<div className="flex items-center justify-center pr-20">
3737
<img
38-
src="https://avatars.githubusercontent.com/u/88154142?v=4"
38+
src={channelImage}
3939
alt="profile picture"
4040
className="icon w-14 h-14 hover:bg-gray-100 dark:hover:bg-white/10"
4141
/>
42-
<span className="font-semibold text-xl">Gaurav</span>
42+
<span className="font-semibold text-xl">{channelDisplayName}</span>
4343
</div>
4444
<Link
4545
href={"/"}

‎components/Sidebar.jsx

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ const Sidebar = () => {
1515
setActiveSubscription,
1616
} = useStateContext();
1717
const router = useRouter();
18-
const { currentChannel, fetchChannelDetails, GetUid, startLoadingBar } = useChannelState();
18+
const { currentChannel, fetchChannelDetails, GetUid, startLoadingBar } =
19+
useChannelState();
1920
const [subscriptions, setSubscriptions] = useState();
2021

2122
useEffect(() => {
@@ -79,20 +80,15 @@ const Sidebar = () => {
7980
{subscriptions?.map((channelRef) => (
8081
<div
8182
onClick={() => {
82-
startLoadingBar(
83-
setLoading,
84-
setLoadingProgress,
85-
() =>
86-
setActiveSubscription(
87-
fetchChannelDetails(channelRef)?.channelDisplayName
88-
)
83+
startLoadingBar(setLoading, setLoadingProgress, () =>
84+
setActiveSubscription(
85+
fetchChannelDetails(channelRef)?.channelDisplayName
86+
)
8987
);
90-
88+
9189
router.push(
92-
`/${
93-
fetchChannelDetails(channelRef)?.channelDisplayName
94-
}`
95-
)
90+
`/${fetchChannelDetails(channelRef)?.channelDisplayName}`
91+
);
9692
}}
9793
className={`${
9894
isSidebar ? "rounded-lg" : "rounded-full"

‎context/ChannelState.jsx

Lines changed: 56 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,62 @@
11
import { useContext, createContext, useState } from "react";
22
import UIDGenerator from "uid-generator";
3+
import { supabase } from "../SupabaseClient";
34
export const ChannelState = createContext();
45

56
export const ChannelStateProvider = ({ children }) => {
6-
const [currentChannel, setCurrentChannel] = useState({
7-
channelName: "Gaurav",
8-
channelImage: "https://avatars.githubusercontent.com/u/88154142?v=4",
9-
channelBannerImage:
10-
"https://cdn.pixabay.com/photo/2017/10/31/19/05/web-design-2906159__480.jpg",
11-
subscribers: 1301310301,
12-
uid: "a00c3e26-aa9b-11fa-afa1-0242ac120003",
13-
channelDisplayName: "Gaurav",
14-
socialLinks: [
15-
{
16-
name: "facebook",
17-
logo: "https://cdn-icons-png.flaticon.com/128/5968/5968764.png",
18-
url: "http://www.facebook.com",
19-
},
20-
{
21-
name: "instagram",
22-
logo: "https://cdn-icons-png.flaticon.com/128/174/174855.png",
23-
url: "http://www.instagram.com",
24-
},
25-
{
26-
name: "twitter",
27-
logo: "https://cdn-icons-png.flaticon.com/128/733/733579.png",
28-
url: "http://www.twitter.com",
29-
},
30-
],
31-
views: 23242323232323,
32-
joinedDate: new Date(),
33-
description: `This is my brand new Channel`,
34-
location: "United States",
35-
subscriptions: [
36-
"a20c3a26-aa9b-11wa-afa1-0442ac120009",
37-
"a00c3e26-aa9b-11ed-afa1-0242ac120002",
38-
],
39-
email: "gaurav@gmail.com",
40-
playlists: [
41-
{
42-
name: "MyPlaylist",
43-
videos: [],
44-
}, {
45-
name: "My Playlist 2 ",
46-
videos: ["449112141"],
47-
},
48-
],
49-
});
7+
const [currentChannel, setCurrentChannel] = useState();
508

519
const [channelSearch, setChannelSearch] = useState("");
5210
const [commentOption, setCommentOption] = useState("");
5311
const [likedVideos, setLikedVideos] = useState([]);
5412

13+
// deffault channel
14+
/*
15+
{
16+
channelName: "Gaurav",
17+
channelImage: "https://avatars.githubusercontent.com/u/88154142?v=4",
18+
channelBannerImage:
19+
"https://cdn.pixabay.com/photo/2017/10/31/19/05/web-design-2906159__480.jpg",
20+
subscribers: 1301310301,
21+
uid: "a00c3e26-aa9b-11fa-afa1-0242ac120003",
22+
channelDisplayName: "Gaurav",
23+
socialLinks: [
24+
{
25+
name: "facebook",
26+
logo: "https://cdn-icons-png.flaticon.com/128/5968/5968764.png",
27+
url: "http://www.facebook.com",
28+
},
29+
{
30+
name: "instagram",
31+
logo: "https://cdn-icons-png.flaticon.com/128/174/174855.png",
32+
url: "http://www.instagram.com",
33+
},
34+
{
35+
name: "twitter",
36+
logo: "https://cdn-icons-png.flaticon.com/128/733/733579.png",
37+
url: "http://www.twitter.com",
38+
},
39+
],
40+
views: 23242323232323,
41+
joinedDate: new Date(),
42+
description: `This is my brand new Channel`,
43+
location: "United States",
44+
subscriptions: [
45+
"a20c3a26-aa9b-11wa-afa1-0442ac120009",
46+
"a00c3e26-aa9b-11ed-afa1-0242ac120002",
47+
],
48+
email: "gaurav@gmail.com",
49+
playlists: [
50+
{
51+
name: "MyPlaylist",
52+
videos: [],
53+
}, {
54+
name: "My Playlist 2 ",
55+
videos: ["449112141"],
56+
},
57+
],
58+
}*/
59+
5560
const [News, setNews] = useState([
5661
{
5762
image: "https://avatars.githubusercontent.com/u/88154142?v=4",
@@ -247,6 +252,12 @@ export const ChannelStateProvider = ({ children }) => {
247252
const [videoDetailSidebar, setVideoDetailSidebar] = useState("Edit");
248253
const [editDialog, setEditDialog] = useState(false);
249254
const [thumbnailDialog, setThumbnailDialog] = useState(false);
255+
256+
const handleLogin = async () => {
257+
await supabase.auth.signInWithOAuth({
258+
provider: 'google'
259+
})
260+
}
250261

251262
const fetchChannelVideos = (videos) => {
252263
return videos.filter((video) => currentChannel?.uid === video?.channelRef);
@@ -406,6 +417,7 @@ export const ChannelStateProvider = ({ children }) => {
406417
editDialog,
407418
thumbnailDialog,
408419
setThumbnailDialog,
420+
handleLogin
409421
}}
410422
>
411423
{children}

‎context/StateContext.jsx

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
FaceSmileIcon,
3333
} from "@heroicons/react/24/solid";
3434
import { useRouter } from "next/router";
35+
import { supabase } from "../SupabaseClient";
3536

3637
export const StateContext = createContext();
3738

@@ -96,8 +97,9 @@ export const StateProvider = ({ children }) => {
9697
{
9798
name: "Sign Out",
9899
icon: <ArrowLeftOnRectangleIcon className="icon" />,
99-
onClick: () => {
100-
router.push("/login");
100+
onClick: async () => {
101+
await supabase.auth.signOut();
102+
window.location.reload();
101103
},
102104
},
103105
{
@@ -188,15 +190,6 @@ export const StateProvider = ({ children }) => {
188190
},
189191
];
190192

191-
const [subscriptions, setSubscription] = useState([
192-
{
193-
channelName: "CleverProgrammer",
194-
channelDisplayName: "Clever Programmer",
195-
channelImage:
196-
"https://yt3.ggpht.com/ytc/AL5GRJXoWnTXp_oljCbsD07kYmc6Vktj3J0Vs64ALooxgA=s68-c-k-c0x00ffffff-no-rj",
197-
},
198-
]);
199-
200193
const [videos, setVideos] = useState([
201194
{
202195
thumbnail:
@@ -354,7 +347,6 @@ export const StateProvider = ({ children }) => {
354347
setUser,
355348
activeSidebar,
356349
setActiveSidebar,
357-
subscriptions,
358350
activeSubscription,
359351
setActiveSubscription,
360352
Cataegories,

0 commit comments

Comments
 (0)