Merge pull request #69 from data-students/16-subscription-animations

16 subscription animations

src/app/[slug]/layout.tsx

@@ -1,4 +1,3 @@
-import SubscribeLeaveToggle from "@/components/SubscribeLeaveToggle"
 import { buttonVariants } from "@/components/ui/Button"
 import { getAuthSession } from "@/lib/auth"
 import { db } from "@/lib/db"
@@ -8,14 +7,14 @@ import {
  FileTextIcon,
  InfoIcon,
 } from "lucide-react"
-import Link from "next/link"
 import { notFound } from "next/navigation"
 import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
 } from "@/components/ui/tooltip"
+import SubscribeHeartToggle from "@/components/SubscribeHeartToggle"
 
 const Layout = async ({
  children,
@@ -168,40 +167,20 @@ const Layout = async ({
  </p>
  </div>
  ) : null}
-
- {subject.creatorId !== session?.user?.id ? (
- <SubscribeLeaveToggle
- subjectId={subject.id}
- subjectName={subject.name}
- isSubscribed={isSubscribed}
- />
- ) : null}
-
- <Link
- href={"/submit"}
- className={buttonVariants({
- variant: "outline",
- className: "w-full mb-2",
- })}
- >
- Penja Apunts
- </Link>
-
- <Link
- href={`/${slug}/q`}
- className={buttonVariants({
- variant: "outline",
- className: "w-full mb-6",
- })}
- >
- Llança una pregunta
- </Link>
  </dl>
  </div>
  </TooltipContent>
  </Tooltip>
  </TooltipProvider>
 
+ {subject.creatorId !== session?.user?.id ? (
+ <SubscribeHeartToggle
+ subjectId={subject.id}
+ subjectName={subject.name}
+ isSubscribed={isSubscribed}
+ />
+ ) : null}
+
  <div className="grid grid-cols-1 md:grid-cols-3 gap-y-4 md:gap-x-4 py-6">
  <div className="flex flex-col col-span-3 space-y-6">{children}</div>
  </div>

src/app/page.tsx

@@ -1,16 +1,15 @@
-// import CustomFeed from "@/components/CustomFeed";
 import { buttonVariants } from "@/components/ui/Button"
-// import { getAuthSession } from "@/lib/auth";
+import { getAuthSession } from "@/lib/auth"
 import { FileTextIcon, HelpCircleIcon, HomeIcon, BookIcon } from "lucide-react"
 import Link from "next/link"
 
 import { db } from "@/lib/db"
-// import { HeartIcon, HeartPulseIcon } from "lucide-react";
 import { Badge } from "@/components/ui/Badge"
 import { cn } from "@/lib/utils"
+import SubscribeHeartToggle from "@/components/SubscribeHeartToggle"
 
 export default async function Home() {
- // const session = await getAuthSession();
+ const session = await getAuthSession()
 
  const subjects = await db.subject.findMany({
  select: {
@@ -31,17 +30,41 @@ export default async function Home() {
  },
  })
 
- // const subscription = !session?.user
- // ? undefined
- // : await db.subscription.findFirst({
- // where: {
- // userId: session.user.id,
- // subjectId: subjects.id,
- // },
- // });
+ const subscribedSubjects = await db.subscription.findMany({
+ where: {
+ userId: session?.user.id,
+ },
+ select: {
+ subject: {
+ select: {
+ id: true,
+ acronym: true,
+ name: true,
+ semester: true,
+ posts: {
+ select: {
+ _count: true,
+ },
+ },
+ questions: {
+ select: {
+ _count: true,
+ },
+ },
+ },
+ },
+ },
+ orderBy: {
+ subject: {
+ semester: "asc",
+ },
+ },
+ })
 
- // const isSubscribed = !!subscription;
- // const ColorClass = isSubscribed ? "text-red-500" : "text-black";
+ const notSubscribedSubjects = subjects.filter(
+ (subject) =>
+ !subscribedSubjects.some((sub) => sub.subject.id === subject.id),
+ )
 
  function semesterColor(semester: string) {
  switch (semester) {
@@ -66,35 +89,6 @@ export default async function Home() {
  <>
  <h1 className="font-bold text-3xl md:text-4xl">El teu espai</h1>
  <div className="grid grid-cols-1 md:grid-cols-3 gap-y-4 md:gap-x-4 py-6">
- {/* Feed
- {session ? <CustomFeed /> : null} */}
-
- {/* subjects info */}
- {/* <div className="overflow-hidden h-fit rounded-lg border border-gray-200 order-first md:order-last mb-4">
- <div className="bg-emerald-100 px-6 py-4">
- <p className="font-semibold py-3 flex items-center gap-1.5">
- <HomeIcon className="w-4 h-4" />
- Home
- </p>
- </div>
-
- <div className="-my-3 divide-y divide-gray-100 px-6 py-4 text-sm leading-6">
- <div className="flex justify-between gap-x-4 py-3">
- <p className="text-zinc-500">
- La teva pàgina d Apunts de Dades. Accedeix aquí per a veure els apunts de les assignatures que
- t interessen.
- </p>
- </div>
-
- <Link
- className={buttonVariants({
- className: "w-full mt-4 mb-6",
- })}
- href="/create">
- Crea una assignatura
- </Link>
- </div>
- </div> */}
  <div className="overflow-hidden h-fit rounded-lg border border-gray-200 order-first mb-4">
  <div className="bg-pink-100 px-6 py-4">
  <p className="font-semibold py-3 flex items-center gap-1.5">
@@ -137,7 +131,55 @@ export default async function Home() {
  </div>
 
  <div className="grid grid-cols-1 md:grid-cols-3 gap-y-4 md:gap-x-4 py-6">
- {subjects.map((subject, index) => {
+ {subscribedSubjects.map((subscription, index) => {
+ return (
+ <Link
+ key={index}
+ className="w-full mt-4 mb-6"
+ href={`/${subscription.subject.acronym}`}
+ >
+ <div className="overflow-hidden h-fit rounded-lg border border-gray-200 order-first md:order-last">
+ <div
+ className={cn(
+ "px-6 py-2 flex justify-between items-center",
+ semesterColor(subscription.subject.semester),
+ )}
+ >
+ <p className="py-1 flex items-center gap-1.5">
+ <BookIcon className="w-4 h-4" />
+ {subscription.subject.name}
+ </p>
+ <SubscribeHeartToggle
+ subjectId={subscription.subject.id}
+ subjectName={subscription.subject.name}
+ isSubscribed={true}
+ />
+ </div>
+
+ <div className="-my-3 divide-y divide-gray-100 px-6 py-4 text-sm leading-6 space-x-2">
+ <Badge variant="outline">
+ {subscription.subject.semester}
+ </Badge>
+ <Badge variant="secondary">
+ {subscription.subject.acronym}
+ </Badge>
+ <Badge variant="outline">
+ {subscription.subject.posts.length}
+ <FileTextIcon className="w-3 h-3 ml-2" />
+ </Badge>
+ <Badge variant="outline">
+ {subscription.subject.questions.length}
+ <HelpCircleIcon className="w-3 h-3 ml-2" />
+ </Badge>
+ </div>
+ </div>
+ </Link>
+ )
+ })}
+ </div>
+
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-y-4 md:gap-x-4 py-6">
+ {notSubscribedSubjects.map((subject, index) => {
  return (
  <Link
  key={index}
@@ -146,13 +188,20 @@ export default async function Home() {
  >
  <div className="overflow-hidden h-fit rounded-lg border border-gray-200 order-first md:order-last">
  <div
- className={cn("px-6 py-2", semesterColor(subject.semester))}
+ className={cn(
+ "px-6 py-2 flex justify-between items-center",
+ semesterColor(subject.semester),
+ )}
  >
  <p className="py-1 flex items-center gap-1.5">
  <BookIcon className="w-4 h-4" />
  {subject.name}
- {/* <HeartIcon className={cn("h-5 w-5", ColorClass)} /> */}
  </p>
+ <SubscribeHeartToggle
+ subjectId={subject.id}
+ subjectName={subject.name}
+ isSubscribed={false}
+ />
  </div>
 
  <div className="-my-3 divide-y divide-gray-100 px-6 py-4 text-sm leading-6 space-x-2">

src/components/SubscribeLeaveToggle.tsx → src/components/SubscribeHeartToggle.tsx

@@ -8,6 +8,7 @@ import axios, { AxiosError } from "axios"
 import { toast } from "@/hooks/use-toast"
 import { useRouter } from "next/navigation"
 import { useCustomToasts } from "@/hooks/use-custom-toasts"
+import { Heart, HeartIcon } from "lucide-react"
 
 interface SubscribeLeaveToggleProps {
  subjectId: string
@@ -100,18 +101,28 @@ const SubscribeLeaveToggle: FC<SubscribeLeaveToggleProps> = ({
  return isSubscribed ? (
  <Button
  isLoading={isUnsubLoading}
- onClick={() => unsubscribe()}
- className="w-full mt-1 mb-4"
+ onClick={(e) => {
+ e.preventDefault()
+ unsubscribe()
+ }}
+ size="sm"
+ variant="ghost"
+ aria-label="unsubscribe"
  >
- Deixar de seguir
+ <Heart fill="red" strokeWidth={0} className="h-5 w-5" />
  </Button>
  ) : (
  <Button
  isLoading={isSubLoading}
- onClick={() => subscribe()}
- className="w-full mt-1 mb-4"
+ onClick={(e) => {
+ e.preventDefault()
+ subscribe()
+ }}
+ size="sm"
+ variant="ghost"
+ aria-label="subscribe"
  >
- Seguir
+ <HeartIcon className="h-5 w-5" />
  </Button>
  )
 }