Fixes the profile route so that it works on mobile devices and addres…

…ses a few bugs
deepsingh132 · Jun 29, 2024 · ea2b1d5 · ea2b1d5
1 parent b716b6c
commit ea2b1d5
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 19 deletions.
diff --git a/app/(root)/profile/[profileId]/page.tsx b/app/(root)/profile/[profileId]/page.tsx
@@ -7,6 +7,7 @@ import LoaderSpinner from "@/components/LoaderSpinner";
 import PodcastCard from "@/components/PodcastCard";
 import ProfileCard from "@/components/ProfileCard";
 import { api } from "@/convex/_generated/api";
+import { ProfilePodcastProps } from "@/types";
 
 const ProfilePage = ({
   params,
@@ -20,7 +21,7 @@ const ProfilePage = ({
   });
   const podcastsData = useQuery(api.podcasts.getPodcastByAuthorId, {
     authorId: params.profileId,
-  });
+  }) as ProfilePodcastProps;
 
   if (!user || !podcastsData) return <LoaderSpinner />;
 
@@ -32,7 +33,7 @@ const ProfilePage = ({
       <div className="mt-6 flex flex-col gap-6 max-md:items-center md:flex-row">
         <ProfileCard
           profileId={params.profileId}
-          podcastData={podcastsData!}
+          podcastData={podcastsData}
           imageUrl={user?.imageUrl!}
           userFirstName={user?.name!}
         />

diff --git a/app/(root)/profile/page.tsx b/app/(root)/profile/page.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { useQuery } from "convex/react";
+
+import EmptyState from "@/components/EmptyState";
+import LoaderSpinner from "@/components/LoaderSpinner";
+import PodcastCard from "@/components/PodcastCard";
+import ProfileCard from "@/components/ProfileCard";
+import { api } from "@/convex/_generated/api";
+import { ProfilePodcastProps } from "@/types";
+import { useClerk } from "@clerk/nextjs";
+
+const MyProfilePage = () => {
+
+  const { user } = useClerk();
+
+  const podcastsData = useQuery(api.podcasts.getPodcastByAuthorId, {
+    authorId: user?.id!,
+  }) as ProfilePodcastProps;
+
+  if (!user || !podcastsData) return <LoaderSpinner />;
+
+  return (
+    <section className="mt-9 flex flex-col">
+      <h1 className="text-20 font-bold text-white-1 max-md:text-center">
+        My Profile
+      </h1>
+      <div className="mt-6 flex flex-col gap-6 max-md:items-center md:flex-row">
+        <ProfileCard
+          profileId={user.id}
+          podcastData={podcastsData}
+          imageUrl={user?.imageUrl!}
+          userFirstName={user.firstName!}
+        />
+      </div>
+      <section className="mt-9 flex flex-col gap-5">
+        <h1 className="text-20 font-bold text-white-1">All Podcasts</h1>
+        {podcastsData && podcastsData.podcasts.length > 0 ? (
+          <div className="podcast_grid">
+            {podcastsData?.podcasts
+              ?.slice(0, 4)
+              .map((podcast) => (
+                <PodcastCard
+                  key={podcast._id}
+                  imgUrl={podcast.imageUrl!}
+                  title={podcast.podcastTitle!}
+                  description={podcast.podcastDescription}
+                  podcastId={podcast._id}
+                />
+              ))}
+          </div>
+        ) : (
+          <EmptyState
+            title="You have not created any podcasts yet"
+            buttonLink="/create-podcast"
+            buttonText="Create Podcast"
+          />
+        )}
+      </section>
+    </section>
+  );
+};
+
+export default MyProfilePage;
diff --git a/app/globals.css b/app/globals.css
@@ -8,15 +8,17 @@
   box-sizing: border-box;
 }
 
-html {
-  background-color: #201114;
-}
+
 
 :root {
   --primary-color: #00040e;
   --accent-color: #00BCD4;
 }
 
+html {
+  background-color: var(--primary-color);
+}
+
 @layer utilities {
   .input-class {
     @apply text-16 placeholder:text-16 bg-black-1 rounded-[6px] placeholder:text-gray-1 border-none text-gray-1;
@@ -25,10 +27,10 @@ html {
     @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4;
   }
   .right_sidebar {
-    @apply sticky right-0 top-0 flex w-[310px] flex-col overflow-y-hidden border-none bg-black-1 px-[30px] pt-8 max-xl:hidden;
+    @apply sticky right-0 top-0 flex w-[310px] flex-col rounded-l-xl overflow-y-hidden border-none bg-black-1 px-[30px] pt-8 max-xl:hidden;
   }
   .left_sidebar {
-    @apply sticky left-0 top-0 flex w-fit flex-col  justify-between  border-none  bg-black-1 pt-8 text-white-1 max-md:hidden lg:w-[270px] lg:pl-8;
+    @apply sticky left-0 top-0 flex w-fit flex-col rounded-r-xl justify-between  border-none  bg-black-1 pt-8 text-white-1 max-md:hidden lg:w-[270px] lg:pl-8;
   }
   .generate_thumbnail {
     @apply mt-[30px] flex w-full max-w-[520px] flex-col justify-between gap-2 rounded-lg border border-black-6 bg-black-1 px-2.5 py-2 md:flex-row md:gap-0;
@@ -117,6 +119,11 @@ html {
 /* ======= clerk overrides ======== */
 .cl-socialButtonsIconButton {
   border: 2px solid #222429;
+  background-color: #222429;
+}
+.cl-socialButtonsIconButton:hover {
+  background-color: rgba(34, 36, 41, 0.2);
+  border: 2px solid #00BCD4;
 }
 .cl-button {
   color: white;

diff --git a/app/plans/page.tsx b/app/plans/page.tsx
@@ -236,8 +236,8 @@ export default function Payments() {
                     Plan details
                   </h2>
                   <div className="flex flex-col w-full mx-auto">
-                    <p className="flex relative justify-between items-center text-base text-slate-300">
-                      <div className="flex items-center self-start gap-2">
+                    <p className="flex md:flex-row flex-col relative justify-between md:items-center text-base text-slate-300">
+                      <span className="flex items-center self-start gap-2">
                         Your current plan is the {planDetails.plan} plan{" "}
                         {
                           // display billed annually if the planDetails.endsOn date is greater than 30 days from now
@@ -248,9 +248,9 @@ export default function Payments() {
                             </span>
                           ) : null
                         }
-                      </div>
+                      </span>
                       {
-                        <div className="flex gap-4">
+                        <span className="flex items-center justify-stretch md:my-0 my-4 gap-4">
                           <Button
                             onClick={() => handleManageSubscription()}
                             title="Manage"
@@ -272,7 +272,7 @@ export default function Payments() {
                             ) : null}
                             Cancel
                           </Button>
-                        </div>
+                        </span>
                       }
                     </p>
 

diff --git a/components/LeftSidebar.tsx b/components/LeftSidebar.tsx
@@ -15,7 +15,6 @@ const LeftSidebar = () => {
   const router = useRouter();
   const { signOut } = useClerk();
   const { audio } = useAudio();
-  const { user } = useClerk();
 
   return (
     <section className={cn("left_sidebar h-[calc(100vh-1px)]", {
@@ -30,9 +29,7 @@ const LeftSidebar = () => {
         {sidebarLinks.map(({ route, label, imgURL }) => {
           const isActive = pathname === route || pathname.startsWith(`${route}/`);
 
-          return <Link href={
-            route === '/profile' && user?.id ? `${route}/${user?.id}` : route
-          } key={label} className={cn("flex gap-3 items-center py-4 max-lg:px-4 justify-center lg:justify-start", {
+          return <Link href={route} key={label} className={cn("flex gap-3 items-center py-4 max-lg:px-4 justify-center lg:justify-start", {
             'bg-nav-focus border-r-4 border-[--accent-color]': isActive
           })}>
             <Image src={imgURL} alt={label} width={24} height={24} />

diff --git a/components/SearchParams.tsx b/components/SearchParams.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import { useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import { useRouter } from "next/navigation";
 import { useToast } from "./ui/use-toast";
 import { useIsSubscribed } from "@/hooks/useIsSubscribed";
@@ -15,6 +15,7 @@ export default function SearchParams({ setSuccess } : { setSuccess: (value: bool
   const { user } = useClerk();
   const isSubscribed = useIsSubscribed(user?.id ?? "");
   const isFetching = useIsFetching();
+  const pathname = usePathname();
 
   // if the payment was successful, the user will be redirected to the plans page with a query parameter.
   // This block checks for the query parameter and displays a success message to the user.
@@ -29,10 +30,12 @@ export default function SearchParams({ setSuccess } : { setSuccess: (value: bool
     }
     // remove the query parameter from the URL and update the state after 5 seconds.
     setTimeout(() => {
+      if (pathname !== "/plans" || !searchParams.get("session_id")) return;
+
       router.replace("/plans");
       setSuccess(false);
     }, 5000);
-  }, [isFetching, isSubscribed, router, searchParams, setSuccess, toast]);
+  }, []);
 
   return null;
 }
diff --git a/providers/ConvexClerkProvider.tsx b/providers/ConvexClerkProvider.tsx
@@ -11,7 +11,7 @@ const ConvexClerkProvider = ({ children }: { children: ReactNode }) => (
   <ClerkProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY as string} appearance={{
     layout: {
       socialButtonsVariant: 'iconButton',
-      logoImageUrl: '/icons/miclogo.svg'
+      logoImageUrl: '/icons/miclogo.svg',
     },
     variables: {
       colorBackground: '#15171c',