From f712e95a13d0f9293cbd9097dcc9136f79533bf9 Mon Sep 17 00:00:00 2001 From: chibuike-19 Date: Thu, 5 Dec 2024 11:53:10 +0100 Subject: [PATCH 1/2] feat: added disconnect functionality for connected platforms --- .../src/network/streams/streams-api.tsx | 7 ++ .../routes/dashboard/destination/index.tsx | 93 +++++++++++++++++-- 2 files changed, 94 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/network/streams/streams-api.tsx b/packages/frontend/src/network/streams/streams-api.tsx index 158517f..34f1d98 100644 --- a/packages/frontend/src/network/streams/streams-api.tsx +++ b/packages/frontend/src/network/streams/streams-api.tsx @@ -49,3 +49,10 @@ export const validateTwitch = async (code: string) => { }; } }; + +export const disconnectPlatform = async (platform: "Twitch" | "Youtube") => { + const { data } = await instance.delete("/auth/profile/remove-platform", { + data: { platform }, + }); + return data; +}; diff --git a/packages/frontend/src/routes/dashboard/destination/index.tsx b/packages/frontend/src/routes/dashboard/destination/index.tsx index b4f6894..f48294c 100644 --- a/packages/frontend/src/routes/dashboard/destination/index.tsx +++ b/packages/frontend/src/routes/dashboard/destination/index.tsx @@ -1,24 +1,50 @@ -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import Layout from "../layout"; import { MdOutlineLinkOff } from "react-icons/md"; import { IoIosArrowBack, IoLogoYoutube } from "react-icons/io"; import SocialMediaCards from "../../../lib/components/socialCards"; import { + disconnectPlatform, validateTwitch, validateYouTube, } from "../../../network/streams/streams-api"; -import { useLocation} from "react-router-dom"; +import { useLocation } from "react-router-dom"; import { ImTwitch } from "react-icons/im"; import { toast } from "react-toastify"; import { fetchPlatforms } from "../../../network/projects/projects"; import { EmptyCard } from "../../../lib/components/emptyCard"; +import { FaEllipsisVertical } from "react-icons/fa6"; import { Loader } from "../../../lib/Loader"; export const Destination = () => { const [viewDestinations, setViewDestinations] = useState(true); const [destinationData, setDestinationData] = useState([]); const [loading, setLoading] = useState(false); + const [openDisconnected, setOpenDisconnected] = useState({ + twitch: false, + youtube: false, + }); + const dropdownRef = useRef(null); + + const OutsideClickListener = (ref: any, callback: () => void) => { + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (ref.current && !ref.current.contains(event.target)) { + callback(); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [ref, callback]); + }; + + OutsideClickListener(dropdownRef, () => { + setOpenDisconnected({ youtube: false, twitch: false }); + }); const location = useLocation(); // Access the location object const queryParams = new URLSearchParams(location.search); @@ -81,6 +107,17 @@ export const Destination = () => { } }, []); + const handleDisconnect = async (platform: "Twitch" | "Youtube") => { + try { + const response = await disconnectPlatform(platform); + toast.success(response?.message); + setOpenDisconnected({ twitch: false, youtube: false }); + window.location.reload(); + } catch (error: any) { + toast.error(error?.message) || toast.error("An error occured"); + } + }; + return (
@@ -95,7 +132,9 @@ export const Destination = () => { )} {viewDestinations && (
-

Connect seemlessly to other social platforms

+

+ Connect seemlessly to other social platforms{" "} +

+ {openDisconnected && ( + + )}
) : platform == "Youtube" ? ( -
+
YouTube Channel + + {openDisconnected.youtube && ( + + )}
) : ( "" From 835ab40adbe5df32227b21951662350e985af747 Mon Sep 17 00:00:00 2001 From: chibuike-19 Date: Thu, 5 Dec 2024 18:12:51 +0100 Subject: [PATCH 2/2] fix: added type for platforms --- packages/frontend/src/network/projects/types.ts | 5 ++++- packages/frontend/src/routes/dashboard/destination/index.tsx | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/network/projects/types.ts b/packages/frontend/src/network/projects/types.ts index 99cf1f1..ebadc29 100644 --- a/packages/frontend/src/network/projects/types.ts +++ b/packages/frontend/src/network/projects/types.ts @@ -12,4 +12,7 @@ export type UpdateProjectProps = { export type InvitePeerProps = { users: { role: "co-Host" | "Subscriber"; userId: string }[]; -}; \ No newline at end of file +}; + + +export type platforms = "Twitch" | "Youtube" diff --git a/packages/frontend/src/routes/dashboard/destination/index.tsx b/packages/frontend/src/routes/dashboard/destination/index.tsx index f48294c..d781840 100644 --- a/packages/frontend/src/routes/dashboard/destination/index.tsx +++ b/packages/frontend/src/routes/dashboard/destination/index.tsx @@ -15,6 +15,7 @@ import { fetchPlatforms } from "../../../network/projects/projects"; import { EmptyCard } from "../../../lib/components/emptyCard"; import { FaEllipsisVertical } from "react-icons/fa6"; import { Loader } from "../../../lib/Loader"; +import { platforms } from "../../../network/projects/types"; export const Destination = () => { const [viewDestinations, setViewDestinations] = useState(true); @@ -107,7 +108,7 @@ export const Destination = () => { } }, []); - const handleDisconnect = async (platform: "Twitch" | "Youtube") => { + const handleDisconnect = async (platform: platforms) => { try { const response = await disconnectPlatform(platform); toast.success(response?.message);