From 800ac8f0089be133e2c8d4911a4380177bdf6ef4 Mon Sep 17 00:00:00 2001 From: DevMirza Date: Sat, 6 Jan 2024 15:12:15 +0000 Subject: [PATCH 01/14] feat: Stream About card From b0c185c0a0f1101f954a8f9db02a01334ed1b631 Mon Sep 17 00:00:00 2001 From: DevMirza Date: Sun, 7 Jan 2024 13:58:48 +0000 Subject: [PATCH 02/14] create AboutCard component --- components/stream-player/about-card.tsx | 15 +++++++++++++++ components/stream-player/index.tsx | 10 +++++++++- lib/user-service.ts | 5 +++++ 3 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 components/stream-player/about-card.tsx diff --git a/components/stream-player/about-card.tsx b/components/stream-player/about-card.tsx new file mode 100644 index 0000000..9b431d3 --- /dev/null +++ b/components/stream-player/about-card.tsx @@ -0,0 +1,15 @@ +"use client"; + +import React from "react"; + +interface AboutCardProps { + hostName: string; + hostIdentity: string; + viewerIdentity: string; + bio: string | null; + followedByCount: number; +} + +export const AboutCard = ({}: AboutCardProps) => { + return
AboutCard
; +}; diff --git a/components/stream-player/index.tsx b/components/stream-player/index.tsx index a9676f3..f37d63d 100644 --- a/components/stream-player/index.tsx +++ b/components/stream-player/index.tsx @@ -10,9 +10,10 @@ import { ChatToggle } from "./chat-toggle"; import { Video, VideoSkeleton } from "./video"; import { Header, HeaderSkeleton } from "./header"; import { InfoCard } from "./info-card"; +import { AboutCard } from "./about-card"; interface StreamPlayerProps { - user: User & { stream: Stream | null }; + user: User & { stream: Stream | null; _count: { followedBy: number } }; stream: Stream; isFollowing: boolean; } @@ -60,6 +61,13 @@ export const StreamPlayer = ({ name={stream.name} thumbnailUrl={stream.thumbnailUrl} /> +
{ }, include: { stream: true, + _count: { + select: { + followedBy: true, + }, + }, }, }); From b4d5f40b19a62202894f02abe2fb89c99bff5747 Mon Sep 17 00:00:00 2001 From: DevMirza Date: Sun, 7 Jan 2024 14:13:47 +0000 Subject: [PATCH 03/14] update --- components/stream-player/about-card.tsx | 35 +++++++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/components/stream-player/about-card.tsx b/components/stream-player/about-card.tsx index 9b431d3..fd55625 100644 --- a/components/stream-player/about-card.tsx +++ b/components/stream-player/about-card.tsx @@ -1,6 +1,7 @@ "use client"; import React from "react"; +import { VerifiedMark } from "../verified-mark"; interface AboutCardProps { hostName: string; @@ -10,6 +11,36 @@ interface AboutCardProps { followedByCount: number; } -export const AboutCard = ({}: AboutCardProps) => { - return
AboutCard
; +export const AboutCard = ({ + hostName, + hostIdentity, + viewerIdentity, + bio, + followedByCount, +}: AboutCardProps) => { + const hostAsViewer = `host-${hostIdentity}`; + const isHost = viewerIdentity === hostAsViewer; + + const followedByLabel = followedByCount === 1 ? "Follower" : "Followers"; + + return ( +
+
+
+
+ About {hostName} + +
+ {isHost &&

Edit

} +
+
+ {followedByCount}{" "} + {followedByLabel} +
+

+ {bio || "This user prefers to keep an air of mystery about them."} +

+
+
+ ); }; From e8200a820552023d2a9c408219e72c6a7ff3e0b3 Mon Sep 17 00:00:00 2001 From: DevMirza Date: Sun, 7 Jan 2024 15:19:02 +0000 Subject: [PATCH 04/14] BioModal component for about --- components/stream-player/bio-modal copy.tsx | 147 ++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 components/stream-player/bio-modal copy.tsx diff --git a/components/stream-player/bio-modal copy.tsx b/components/stream-player/bio-modal copy.tsx new file mode 100644 index 0000000..65b4c92 --- /dev/null +++ b/components/stream-player/bio-modal copy.tsx @@ -0,0 +1,147 @@ +"use client"; + +import { updateStream } from "@/actions/stream"; +import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogClose, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { UploadDropzone } from "@/lib/uploadthing"; +import Image from "next/image"; +import { useRouter } from "next/navigation"; +import React, { ElementRef, useRef, useState, useTransition } from "react"; +import { toast } from "sonner"; +import { Hint } from "../hint"; +import { Trash } from "lucide-react"; + +interface BioModalProps { + initialName: string; + initialThumbnailUrl: string | null; +} + +export const BioModal = ({ + initialName, + initialThumbnailUrl, +}: BioModalProps) => { + const router = useRouter(); + const closeRef = useRef>(null); + + const [isPending, startTransition] = useTransition(); + const [name, setName] = useState(initialName); + const [thumbnailUrl, setThumbnailUrl] = useState(initialThumbnailUrl); + + const onRemove = () => { + startTransition(() => { + updateStream({ thumbnailUrl: null }) + .then(() => { + toast.success("Thumbnail removed"); + setThumbnailUrl(""); + closeRef?.current?.click(); + }) + .catch(() => toast.error("Something went wrong!")); + }); + }; + + const onSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + startTransition(() => { + updateStream({ name: name }) + .then(() => { + toast.success("Stream settings updated"); + closeRef?.current?.click(); + }) + .catch(() => toast.error("Something went wrong!")); + }); + }; + + const onChange = (e: React.ChangeEvent) => { + setName(e.target.value); + }; + + return ( + + + + + + + Edit Stream Info + +
+
+ + +
+
+ + {thumbnailUrl ? ( +
+
+ + + +
+ thumbnail +
+ ) : ( +
+ { + setThumbnailUrl(res?.[0]?.url); + router.refresh(); + closeRef?.current?.click(); + }} + /> +
+ )} +
+
+ + + + +
+
+ + + ); +}; From b2826fc8db02b0f4c947bdb201e6520862348df9 Mon Sep 17 00:00:00 2001 From: DevMirza Date: Mon, 8 Jan 2024 16:51:35 +0000 Subject: [PATCH 05/14] create user server action --- actions/user.ts | 32 +++++++++++++++++++ .../{bio-modal copy.tsx => bio-modal.tsx} | 0 2 files changed, 32 insertions(+) create mode 100644 actions/user.ts rename components/stream-player/{bio-modal copy.tsx => bio-modal.tsx} (100%) diff --git a/actions/user.ts b/actions/user.ts new file mode 100644 index 0000000..0b50ec7 --- /dev/null +++ b/actions/user.ts @@ -0,0 +1,32 @@ +"use server"; + +import { getSelf } from "@/lib/auth-service"; +import { db } from "@/lib/db"; +import { User } from "@prisma/client"; +import { revalidatePath } from "next/cache"; + +export const updateUser = async (values: Partial) => { + try { + const self = await getSelf(); + + const validateData = { + bio: values.bio, + }; + + const user = await db.user.update({ + where: { + id: self.id, + }, + data: { + ...validateData, + }, + }); + + revalidatePath(`/${self.username}`); + revalidatePath(`/u/${self.username}`); + + return user; + } catch (error) { + throw new Error("Something went wrong"); + } +}; diff --git a/components/stream-player/bio-modal copy.tsx b/components/stream-player/bio-modal.tsx similarity index 100% rename from components/stream-player/bio-modal copy.tsx rename to components/stream-player/bio-modal.tsx From 2ad4ff191a26d5a87b9f271597e08d7e4939e242 Mon Sep 17 00:00:00 2001 From: DevMirza Date: Mon, 8 Jan 2024 19:29:44 +0000 Subject: [PATCH 06/14] update BioModal --- components/stream-player/about-card.tsx | 3 +- components/stream-player/bio-modal.tsx | 92 ++----------------------- 2 files changed, 8 insertions(+), 87 deletions(-) diff --git a/components/stream-player/about-card.tsx b/components/stream-player/about-card.tsx index fd55625..6e66094 100644 --- a/components/stream-player/about-card.tsx +++ b/components/stream-player/about-card.tsx @@ -2,6 +2,7 @@ import React from "react"; import { VerifiedMark } from "../verified-mark"; +import { BioModal } from "./bio-modal"; interface AboutCardProps { hostName: string; @@ -31,7 +32,7 @@ export const AboutCard = ({ About {hostName}
- {isHost &&

Edit

} + {isHost && }
{followedByCount}{" "} diff --git a/components/stream-player/bio-modal.tsx b/components/stream-player/bio-modal.tsx index 65b4c92..215eeab 100644 --- a/components/stream-player/bio-modal.tsx +++ b/components/stream-player/bio-modal.tsx @@ -1,6 +1,6 @@ "use client"; -import { updateStream } from "@/actions/stream"; +import { updateUser } from "@/actions/user"; import { Button } from "@/components/ui/button"; import { Dialog, @@ -10,61 +10,34 @@ import { DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; -import { Input } from "@/components/ui/input"; -import { Label } from "@/components/ui/label"; -import { UploadDropzone } from "@/lib/uploadthing"; -import Image from "next/image"; import { useRouter } from "next/navigation"; import React, { ElementRef, useRef, useState, useTransition } from "react"; import { toast } from "sonner"; -import { Hint } from "../hint"; -import { Trash } from "lucide-react"; interface BioModalProps { - initialName: string; - initialThumbnailUrl: string | null; + initialValue: string; } -export const BioModal = ({ - initialName, - initialThumbnailUrl, -}: BioModalProps) => { +export const BioModal = ({ initialValue }: BioModalProps) => { const router = useRouter(); const closeRef = useRef>(null); const [isPending, startTransition] = useTransition(); - const [name, setName] = useState(initialName); - const [thumbnailUrl, setThumbnailUrl] = useState(initialThumbnailUrl); - - const onRemove = () => { - startTransition(() => { - updateStream({ thumbnailUrl: null }) - .then(() => { - toast.success("Thumbnail removed"); - setThumbnailUrl(""); - closeRef?.current?.click(); - }) - .catch(() => toast.error("Something went wrong!")); - }); - }; + const [value, setValue] = useState(initialValue); const onSubmit = (e: React.FormEvent) => { e.preventDefault(); startTransition(() => { - updateStream({ name: name }) + updateUser({ bio: value }) .then(() => { - toast.success("Stream settings updated"); + toast.success("Your Bio has successfully updated!"); closeRef?.current?.click(); }) .catch(() => toast.error("Something went wrong!")); }); }; - const onChange = (e: React.ChangeEvent) => { - setName(e.target.value); - }; - return ( @@ -77,59 +50,6 @@ export const BioModal = ({ Edit Stream Info
-
- - -
-
- - {thumbnailUrl ? ( -
-
- - - -
- thumbnail -
- ) : ( -
- { - setThumbnailUrl(res?.[0]?.url); - router.refresh(); - closeRef?.current?.click(); - }} - /> -
- )} -