From 47a454c6cc3db33f46a0e7f6b4b08aa2c08e8842 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Thu, 17 Oct 2024 09:23:46 -0500
Subject: [PATCH] show or hide meta tags

---
 .../content/carousels/CoursesCarousel.js      |  2 +-
 .../content/carousels/DocumentsCarousel.js    |  2 +-
 .../content/carousels/VideosCarousel.js       |  2 +-
 .../carousels/templates/CourseTemplate.js     | 17 +++++++++++++----
 .../carousels/templates/DocumentTemplate.js   | 19 ++++++++++++++-----
 .../carousels/templates/VideoTemplate.js      | 19 ++++++++++++++-----
 6 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/src/components/content/carousels/CoursesCarousel.js b/src/components/content/carousels/CoursesCarousel.js
index f7b09ce..093003d 100644
--- a/src/components/content/carousels/CoursesCarousel.js
+++ b/src/components/content/carousels/CoursesCarousel.js
@@ -73,7 +73,7 @@ export default function CoursesCarousel() {
                     itemTemplate={(item) => 
                         !processedCourses.length ? 
                         <TemplateSkeleton key={Math.random()} /> : 
-                        <CourseTemplate key={item.id} course={item} />
+                        <CourseTemplate key={item.id} course={item} showMetaTags={false} />
                     }
                     responsiveOptions={responsiveOptions} />
             </div>
diff --git a/src/components/content/carousels/DocumentsCarousel.js b/src/components/content/carousels/DocumentsCarousel.js
index 8484432..ab61366 100644
--- a/src/components/content/carousels/DocumentsCarousel.js
+++ b/src/components/content/carousels/DocumentsCarousel.js
@@ -94,7 +94,7 @@ export default function DocumentsCarousel() {
                 }}
                 itemTemplate={(item) => 
                         processedDocuments.length > 0 ? 
-                        <DocumentTemplate key={item.id} document={item} isLesson={freeLessons.includes(item.d)} /> : 
+                        <DocumentTemplate key={item.id} document={item} isLesson={freeLessons.includes(item.d)} showMetaTags={false} /> : 
                         <TemplateSkeleton key={Math.random()} />
                 }
                 responsiveOptions={responsiveOptions} />
diff --git a/src/components/content/carousels/VideosCarousel.js b/src/components/content/carousels/VideosCarousel.js
index bc954aa..08eb156 100644
--- a/src/components/content/carousels/VideosCarousel.js
+++ b/src/components/content/carousels/VideosCarousel.js
@@ -92,7 +92,7 @@ export default function VideosCarousel() {
                 itemTemplate={(item) => 
                     !processedVideos.length ? 
                     <TemplateSkeleton key={Math.random()} /> : 
-                    <VideoTemplate key={item.id} video={item} isLesson={freeLessons.includes(item.d)} />
+                    <VideoTemplate key={item.id} video={item} isLesson={freeLessons.includes(item.d)} showMetaTags={false} />
                 }
                 responsiveOptions={responsiveOptions}
             />
diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
index 13612c0..7984766 100644
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ b/src/components/content/carousels/templates/CourseTemplate.js
@@ -15,7 +15,7 @@ import useWindowWidth from "@/hooks/useWindowWidth";
 import GenericButton from "@/components/buttons/GenericButton";
 import appConfig from "@/config/appConfig";
 
-export function CourseTemplate({ course }) {
+export function CourseTemplate({ course, showMetaTags = true }) {
   const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: course });
   const [zapAmount, setZapAmount] = useState(0);
   const [lessonCount, setLessonCount] = useState(0);
@@ -53,6 +53,13 @@ export function CourseTemplate({ course }) {
     }
   }, [course]);
 
+  const shouldShowMetaTags = (topic) => {
+    if (!showMetaTags) {
+      return !["lesson", "document", "video", "course"].includes(topic);
+    }
+    return true;
+  }
+
   if (!nAddress) return <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>
 
   if (zapsError) return <div>Error: {zapsError}</div>;
@@ -87,9 +94,11 @@ export function CourseTemplate({ course }) {
       <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}>
         <div className="flex flex-wrap gap-2 max-w-[65%]">
           {course && course.topics && course.topics.map((topic, index) => (
-            <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
-              {topic}
-            </Tag>
+            shouldShowMetaTags(topic) && (
+              <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
+                {topic}
+              </Tag>
+            )
           ))}
         </div>
         <div className="flex flex-col items-end">
diff --git a/src/components/content/carousels/templates/DocumentTemplate.js b/src/components/content/carousels/templates/DocumentTemplate.js
index e9a9bd1..a13672e 100644
--- a/src/components/content/carousels/templates/DocumentTemplate.js
+++ b/src/components/content/carousels/templates/DocumentTemplate.js
@@ -14,7 +14,7 @@ import useWindowWidth from "@/hooks/useWindowWidth";
 import GenericButton from "@/components/buttons/GenericButton";
 import appConfig from "@/config/appConfig";
 
-export function DocumentTemplate({ document, isLesson }) {
+export function DocumentTemplate({ document, isLesson, showMetaTags }) {
     const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: document });
     const [nAddress, setNAddress] = useState(null);
     const [zapAmount, setZapAmount] = useState(0);
@@ -42,6 +42,13 @@ export function DocumentTemplate({ document, isLesson }) {
         }
     }, [zaps, document]);
 
+    const shouldShowMetaTags = (topic) => {
+        if (!showMetaTags) {
+            return !["lesson", "document", "video", "course"].includes(topic);
+        }
+        return true;
+    }
+
     if (zapsError) return <div>Error: {zapsError}</div>;
 
     return (
@@ -74,11 +81,13 @@ export function DocumentTemplate({ document, isLesson }) {
             <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}>
                 <div className="flex flex-wrap gap-2 max-w-[65%]">
                     {document?.topics?.map((topic, index) => (
-                        <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
-                            {topic}
-                        </Tag>
+                        shouldShowMetaTags(topic) && (
+                            <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
+                                {topic}
+                            </Tag>
+                        )
                     ))}
-                    {isLesson && <Tag size="small" className="px-2 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
+                    {isLesson && showMetaTags && <Tag size="small" className="px-2 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
                 </div>
                 <div className="flex flex-col items-end">
                     <p className="font-bold text-gray-300">{document?.readTime || "5 min"} read</p>
diff --git a/src/components/content/carousels/templates/VideoTemplate.js b/src/components/content/carousels/templates/VideoTemplate.js
index 571b944..af57677 100644
--- a/src/components/content/carousels/templates/VideoTemplate.js
+++ b/src/components/content/carousels/templates/VideoTemplate.js
@@ -15,7 +15,7 @@ import useWindowWidth from "@/hooks/useWindowWidth";
 import GenericButton from "@/components/buttons/GenericButton";
 import appConfig from "@/config/appConfig";
 
-export function VideoTemplate({ video, isLesson }) {
+export function VideoTemplate({ video, isLesson, showMetaTags }) {
     const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: video });
     const [nAddress, setNAddress] = useState(null);
     const [zapAmount, setZapAmount] = useState(0);
@@ -43,6 +43,13 @@ export function VideoTemplate({ video, isLesson }) {
         }
     }, [zaps, video]);
 
+    const shouldShowMetaTags = (topic) => {
+        if (!showMetaTags) {
+            return !["lesson", "document", "video", "course"].includes(topic);
+        }
+        return true;
+    }
+
     if (zapsError) return <div>Error: {zapsError}</div>;
 
     return (
@@ -75,11 +82,13 @@ export function VideoTemplate({ video, isLesson }) {
             <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}>
                 <div className="flex flex-wrap gap-2 max-w-[65%]">
                     {video?.topics?.map((topic, index) => (
-                        <Tag size="small" key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
-                            {topic}
-                        </Tag>
+                        shouldShowMetaTags(topic) && (
+                            <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
+                                {topic}
+                            </Tag>
+                        )
                     ))}
-                    {isLesson && <Tag size="small" className="px-3 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
+                    {isLesson && showMetaTags && <Tag size="small" className="px-3 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
                 </div>
                 <div className="flex flex-col items-end">
                     <p className="font-bold text-gray-300">{video?.duration || "5 min"} watch</p>