Created independent content-management for videos

Author: ladunjexa

app/(root)/resources/[id]/page.tsx

@@ -38,10 +38,7 @@ const Page = async ({ params }: { params: { id: string } }) => {
             </div>
           )}
           <div>
-            <DownloadButton
-              downloadLink={resource.downloadLink}
-              id={resource._id}
-            />
+            <DownloadButton link={resource.link} id={resource._id} />
 
             <div className="relative ml-28 mt-6 hidden h-[218px] w-[425px] lg:flex">
               {resource.sequel && (

app/(root)/resources/page.tsx

@@ -18,9 +18,12 @@ const Page = async ({ searchParams }: Props) => {
     query: searchParams?.query || "",
     category: searchParams?.category || "",
     page: 1,
+    type: "resource",
   });
 
-  const resourcesPlaylist: ResourcePlaylist[] = await getResourcesPlaylist();
+  const resourcesPlaylist: ResourcePlaylist[] = await getResourcesPlaylist({
+    type: "resource",
+  });
 
   return (
     <main className="flex-center paddings mx-auto w-full max-w-screen-2xl flex-col">
@@ -50,7 +53,7 @@ const Page = async ({ searchParams }: Props) => {
                   id={resource._id}
                   image={resource.image}
                   downloadNumber={resource.views}
-                  downloadLink={resource.downloadLink}
+                  link={resource.link}
                 />
               ))
             ) : (
@@ -79,7 +82,7 @@ const Page = async ({ searchParams }: Props) => {
                       id={resource._id}
                       image={resource.image}
                       downloadNumber={resource.views}
-                      downloadLink={resource.downloadLink}
+                      link={resource.link}
                     />
                   ))}
                 </div>

app/(root)/videos/page.tsx

@@ -18,9 +18,12 @@ const Page = async ({ searchParams }: Props) => {
     query: searchParams?.query || "",
     category: searchParams?.category || "",
     page: 1,
+    type: "video",
   });
 
-  const resourcesPlaylist: ResourcePlaylist[] = await getResourcesPlaylist();
+  const resourcesPlaylist: ResourcePlaylist[] = await getResourcesPlaylist({
+    type: "video",
+  });
 
   return (
     <main className="flex-center paddings mx-auto w-full max-w-screen-2xl flex-col">
@@ -49,8 +52,8 @@ const Page = async ({ searchParams }: Props) => {
                   title={resource.title}
                   id={resource._id}
                   image={resource.image}
-                  downloadNumber={resource.views}
-                  downloadLink={resource.downloadLink}
+                  downloadNumber={resource.category}
+                  link={resource.link}
                   isVideo
                 />
               ))
@@ -79,8 +82,8 @@ const Page = async ({ searchParams }: Props) => {
                       title={resource.title}
                       id={resource._id}
                       image={resource.image}
-                      downloadNumber={resource.views}
-                      downloadLink={resource.downloadLink}
+                      downloadNumber={resource.category}
+                      link={resource.link}
                       isVideo
                     />
                   ))}

components/atoms/DownloadButton.tsx

@@ -2,16 +2,16 @@
 
 import { Button } from "@/components/ui/button";
 
-import { incrementDownloadsById } from "@/sanity/actions";
+import { newInteractById } from "@/sanity/actions";
 
 import type { DownloadButtonProps } from "@/types";
 
-const DownloadButton = ({ downloadLink, id }: DownloadButtonProps) => {
+const DownloadButton = ({ link, id }: DownloadButtonProps) => {
   const handleClick = async (): Promise<void> => {
-    await incrementDownloadsById({ id });
+    await newInteractById({ id });
 
     const newWindow: Window | null = window.open(
-      downloadLink,
+      link,
       "_blank",
       "noopener,noreferrer"
     );

components/shared/ContentCard.tsx

@@ -10,10 +10,10 @@ const ContentCard = ({
   title,
   image,
   downloadNumber,
-  downloadLink,
+  link,
   isVideo,
 }: ContentCardProps) => {
-  const href = isVideo ? downloadLink : `/resources/${id}`;
+  const href = isVideo ? link : `/resources/${id}`;
 
   return (
     <Card
@@ -62,20 +62,28 @@ const ContentCard = ({
         </CardHeader>
       </Link>
       <CardContent className="flex-between mt-4 p-0">
-        <div className="flex-center body-medium gap-1.5 text-slate-950 dark:text-white">
-          <Image
-            src="/assets/icons/downloads.svg"
-            width={20}
-            height={20}
-            alt="download"
-          />
+        <div
+          className={`flex-center body-medium gap-1.5 ${
+            isVideo
+              ? "capitalize text-slate-400 dark:text-white-500"
+              : "text-slate-950 dark:text-white"
+          }`}
+        >
+          {!isVideo && (
+            <Image
+              src="/assets/icons/downloads.svg"
+              width={20}
+              height={20}
+              alt="download"
+            />
+          )}
           {downloadNumber}
         </div>
         <Link
           href={href}
           className="flex-center text-gradient_purple-blue body-semibold gap-1.5"
         >
-          Download Now
+          {isVideo ? "Watch" : "Download"} Now
           <Image
             src="/assets/icons/arrow-blue.svg"
             width={13}

components/shared/SearchForm.tsx

@@ -34,7 +34,6 @@ const SearchForm = () => {
       }
 
       router.push(newUrl, { scroll: false });
-      console.log("newUrl", newUrl);
     }, 300);
 
     return () => clearTimeout(delayDebounceFn);

constants/index.ts

@@ -44,7 +44,14 @@ export const filterOptions: string[] = [
   "all",
   "math",
   "computer science",
-  "Software Engineering",
+  "software engineering",
+];
+
+export const videoFilterOptions: string[] = [
+  "frontend",
+  "backend",
+  "fullstack",
+  "hybrid",
 ];
 
 /**

sanity/actions.ts

@@ -2,7 +2,7 @@ import { groq } from "next-sanity";
 import { readClient, writeClient } from "./lib/client";
 import { buildQuery } from "./utils";
 
-import type { GetResourcesParams } from "@/types";
+import type { DocTypeParams, GetResourcesParams } from "@/types";
 
 /**
  * Fetch a list of resources based on search criteria.
@@ -11,26 +11,27 @@ import type { GetResourcesParams } from "@/types";
  * @param {string} params.query - The search query to filter resources by title or content.
  * @param {string | undefined} params.category - The category to filter resources by.
  * @param {number} params.page - The page number for paginated results.
+ * @param {string} params.type - The type of resource to fetch.
  * @returns {Promise<Object[] | undefined>} A promise that resolves to an array of resource objects if found, or undefined if an error occurred.
  *
  * @throws {Error} Throws an error if there was an issue fetching the resources.
  */
 export const getResources = async (
   params: GetResourcesParams
 ): Promise<Object[] | undefined | any> => {
-  const { query, category, page }: GetResourcesParams = params;
+  const { query, category, page, type }: GetResourcesParams = params;
 
   try {
     const resources = await readClient.fetch(
       groq`${buildQuery({
-        type: "resource",
+        type,
         query,
         category,
-        page: page,
+        page,
       })}{
         _id,
         title,
-        downloadLink,
+        link,
         "image": poster.asset->url,
         views,
         slug,
@@ -58,18 +59,22 @@ export const getResources = async (
  *
  * @throws {Error} Throws an error if there was an issue fetching the playlist.
  */
-export const getResourcesPlaylist = async (): Promise<
-  Object[] | undefined | any
-> => {
+export const getResourcesPlaylist = async (
+  params: DocTypeParams
+): Promise<Object[] | undefined | any> => {
+  const { type }: DocTypeParams = params;
+
   try {
     const resources = await readClient.fetch(
-      groq`*[_type == "resourcePlaylist"]{
+      groq`*[_type == "${
+        type === "video" ? "videoPlaylist" : "resourcePlaylist"
+      }"]{
         _id,
         title,
         resources[0...6]->{
           title,
           _id,
-          downloadLink,
+          link,
           "image": poster.asset->url,
           views,
           category
@@ -101,7 +106,7 @@ export const getResourceById = async ({
       groq`*[_type == "resource" && _id == "${id}"]{
         _id,
         title,
-        downloadLink,
+        link,
         "image": poster.asset->url,
         views,
         slug,
@@ -129,7 +134,7 @@ export const getResourceById = async ({
  *
  * @throws {Error} Throws an error if there was an issue incrementing the download count.
  */
-export const incrementDownloadsById = async ({
+export const newInteractById = async ({
   id,
 }: {
   id: string;
@@ -145,9 +150,9 @@ export const incrementDownloadsById = async ({
       throw new Error(`Resource with ID ${id} not found.`);
     }
 
-    const views = resource[0].views + 1;
+    const updatedValue = resource[0].views + 1;
 
-    await writeClient.patch(id).set({ views }).commit();
+    await writeClient.patch(id).inc({ views: updatedValue });
   } catch (error) {
     console.error(error);
   }

sanity/schemas/index.ts

@@ -1,6 +1,8 @@
 import resource from "./resource.schema";
+import video from "./video.schema";
 import resourcePlaylist from "./resource-playlist.schema";
+import videoPlaylist from "./video-playlist.schema";
 
-const schemas = [resource, resourcePlaylist];
+const schemas = [resource, resourcePlaylist, video, videoPlaylist];
 
 export default schemas;

sanity/schemas/resource.schema.ts

@@ -40,8 +40,8 @@ const schema = {
       to: [{ type: "resource" }],
     },
     {
-      name: "downloadLink",
-      title: "Download Link",
+      name: "link",
+      title: "Link",
       type: "url",
       validation: (Rule: any) => Rule.required(),
     },