From c88a07fe0671e7252efe20222fb43d4748a4dfc3 Mon Sep 17 00:00:00 2001
From: Matteo <Matteo.lorenzoq@gmail.com>
Date: Tue, 3 Sep 2024 22:40:12 +0200
Subject: [PATCH] update: redefined shortcut to only contains chapters.

---
 .../actions/get-categories-and-lessons.tsx    |  36 ++++++
 src/app/actions/get-lessons-for-shortcut.tsx  |  12 ++
 src/components/dashboard/feedback-menu.tsx    |   2 +-
 src/components/dashboard/user-card.tsx        |   6 +-
 .../headerDashboard/headerDashboard.tsx       |   9 +-
 src/components/layout/searchInput.tsx         | 110 ++++++------------
 src/components/sheet/sheetLessons.tsx         |  35 +++---
 src/components/ui/command.tsx                 |  23 ++--
 8 files changed, 119 insertions(+), 114 deletions(-)
 create mode 100644 src/app/actions/get-categories-and-lessons.tsx
 create mode 100644 src/app/actions/get-lessons-for-shortcut.tsx

diff --git a/src/app/actions/get-categories-and-lessons.tsx b/src/app/actions/get-categories-and-lessons.tsx
new file mode 100644
index 0000000..ca13e64
--- /dev/null
+++ b/src/app/actions/get-categories-and-lessons.tsx
@@ -0,0 +1,36 @@
+import prisma from "@/lib/prisma";
+
+export default async function getCategoriesWithLessons() {
+  const categories = await prisma.categories.findMany({
+    where: {
+      Lessons: {
+        some: {
+          draft: false,
+        },
+      },
+    },
+    orderBy: {
+      sort_number: "asc",
+    },
+    include: {
+      Lessons: {
+        where: {
+          draft: false,
+          sort_number: {
+            gt: 0,
+          },
+        },
+        orderBy: {
+          sort_number: "asc",
+        },
+        select: {
+          id: true,
+          title: true,
+          slug: true
+        }
+      },
+    },
+  });
+
+  return categories;
+}
\ No newline at end of file
diff --git a/src/app/actions/get-lessons-for-shortcut.tsx b/src/app/actions/get-lessons-for-shortcut.tsx
new file mode 100644
index 0000000..f7c7680
--- /dev/null
+++ b/src/app/actions/get-lessons-for-shortcut.tsx
@@ -0,0 +1,12 @@
+import prisma from "@/lib/prisma";
+
+export async function getLessonsForShortcut() {
+  const res = await prisma.lessons.findMany({
+    select: {
+      id: true,
+      title: true,
+      slug: true, 
+    }
+  })
+  return res;
+}
\ No newline at end of file
diff --git a/src/components/dashboard/feedback-menu.tsx b/src/components/dashboard/feedback-menu.tsx
index 60ec888..87b8771 100644
--- a/src/components/dashboard/feedback-menu.tsx
+++ b/src/components/dashboard/feedback-menu.tsx
@@ -59,7 +59,7 @@ const FeedbackMenu = () => {
                     <FormControl>
                       <Textarea
                         placeholder="Ton feedback..."
-                        className="w-full h-24 resize-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-gray-200"
+                        className="w-full h-24 resize-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-gray-400"
                         autoFocus
                         {...field}
                       >
diff --git a/src/components/dashboard/user-card.tsx b/src/components/dashboard/user-card.tsx
index 51a5caa..8363830 100644
--- a/src/components/dashboard/user-card.tsx
+++ b/src/components/dashboard/user-card.tsx
@@ -28,9 +28,9 @@ const UserCard = async ({ user, numberOfLessons, lessonsCompleted }: UserCardPro
           <p className="font-semibold text-sm text-gray-500 max-md:mt-1">Membre</p> 
           <Link 
             href="/account/details" 
-            className="z-50 mt-4 inline-flex border border-white/10 rounded-md px-3.5 py-2.5 text-xs md:text-sm
-            text-gray-200 shadow-sm hover:bg-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 
-            focus-visible:outline-indigo-500"
+            className="z-50 mt-4 inline-flex border-gray-800 rounded-md px-3.5 py-2.5 text-xs md:text-sm
+             shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 
+            focus-visible:outline-indigo-500 border text-gray-300 bg-gray-950 hover:bg-black hover:border-gray-800 transition-none"
             >
             Compte
           </Link>
diff --git a/src/components/layout/headerDashboard/headerDashboard.tsx b/src/components/layout/headerDashboard/headerDashboard.tsx
index 24ac5d0..696b386 100644
--- a/src/components/layout/headerDashboard/headerDashboard.tsx
+++ b/src/components/layout/headerDashboard/headerDashboard.tsx
@@ -1,6 +1,6 @@
+import getCategoriesWithLessons from "@/app/actions/get-categories-and-lessons";
 import FeedbackMenu from "@/components/dashboard/feedback-menu";
 import { currentUserType } from "@/lib/current-user";
-import { getLessons } from "@/lib/utils";
 import Image from "next/image";
 import Link from "next/link";
 import SearchInput from "../searchInput";
@@ -9,7 +9,6 @@ import UserDropdown from "./userDropDown";
 interface HeaderDashboardProps {
   user: currentUserType;
   title: string;
-
 }
 
 export default async function HeaderDashboard({
@@ -20,8 +19,8 @@ export default async function HeaderDashboard({
   const isAvatar = user?.image ? true : false;
   const isAdmin = user?.admin;
 
-  const lesson = await getLessons();
-
+  const categories = await getCategoriesWithLessons();
+  
   return (
     <header className="z-10 bg-bg-primary shadow backdrop-blur border-b-2 border-gray-900 py-2 mb-5 px-6 md:px-8">
       <div className="max-w-[1436px] w-full mx-auto flex h-14 items-center">
@@ -37,7 +36,7 @@ export default async function HeaderDashboard({
         <div className="flex flex-1 items-center space-x-2 justify-end gap-4">
           <div className="hidden lg:flex items-center gap-2">
             <FeedbackMenu />
-            <SearchInput lessons={lesson}/>
+            <SearchInput categories={categories}/>
           </div>
           <UserDropdown user={user} isAdmin={isAdmin} isAvatar={isAvatar} />
         </div>
diff --git a/src/components/layout/searchInput.tsx b/src/components/layout/searchInput.tsx
index 9f17f35..c79ee43 100644
--- a/src/components/layout/searchInput.tsx
+++ b/src/components/layout/searchInput.tsx
@@ -1,12 +1,5 @@
 "use client";
 
-import {
-  LayoutDashboard,
-  Loader,
-  Settings,
-  User
-} from "lucide-react";
-
 import {
   Command,
   CommandDialog,
@@ -15,30 +8,40 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-  CommandSeparator,
-  CommandShortcut,
+  CommandSeparator
 } from "@/components/ui/command";
+import { Lessons_level } from "@prisma/client";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Button } from "../ui/button";
+import { Separator } from "../ui/separator";
 
-interface Lesson {
-  id: string;
-  title: string;
-  slug: string;
+type Lesson = {
+  id: string, 
+  title: string,
+  slug: string,
 }
 
-export default function SearchInput({
-  lessons,
- 
-}: {
-  lessons: Lesson[];
+interface SearchInputProps {
+  categories: {
+    id: string;
+    name: string;
+    createdAt: Date;
+    sort_number: number | null;
+    level: Lessons_level | null;
+    description: string | null;
+    Lessons: Lesson[];
+  }[];
+}
 
-}) {
+export default function SearchInput( { categories } : SearchInputProps) {
   const [open, setOpen] = useState(false);
   const router = useRouter();
 
+  console.log(categories);
+  
+
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
@@ -75,65 +78,24 @@ export default function SearchInput({
       </Button>
       <CommandDialog open={open} onOpenChange={setOpen}>
         <Command className="bg-bg-primary text-white">
-          <CommandInput placeholder="Rechercher ..." />
+          <CommandInput placeholder="Rechercher un cours..." />
           <CommandList className="no-scrollbar">
             <CommandEmpty>Pas de résultat trouvé</CommandEmpty>
-            <CommandGroup heading="Suggestions">
-              <Link href="/dashboard">
-                <CommandItem className="flex items-center justify-between w-full cursor-pointer">
-                  <div className="flex items-center">
-                    <LayoutDashboard className="mr-2 h-4 w-4" />
-                    <span>Tableau de bord</span>
-                  </div>
-                  <div className="">
-                    <CommandShortcut>⌘O</CommandShortcut>
-                  </div>
-                </CommandItem>
-              </Link>
-              <Link href="/changelog">
-                <CommandItem className="flex items-center justify-between w-full cursor-pointer">
-                  <div className="flex items-center">
-                    <Loader className="mr-2 h-4 w-4" />
-                    <span>Journal des modifications</span>
-                  </div>
-                  <div className="">
-                    <CommandShortcut>⌘J</CommandShortcut>
-                  </div>
-                </CommandItem>
-              </Link>
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup heading="Settings">
-              <Link href="/profile">
-                <CommandItem className="flex items-center w-full cursor-pointer">
-                  <User className="mr-2 h-4 w-4" />
-                  <span>Profil</span>
-                </CommandItem>
-              </Link>
-              <Link href="/settings">
-                <CommandItem className="flex items-center w-full cursor-pointer">
-                  <Settings className="mr-2 h-4 w-4" />
-                  <span>Paramètres</span>
-                </CommandItem>
-              </Link>
-              <Link href="/changelog">
-                <CommandItem className="flex items-center w-full cursor-pointer">
-                  <Loader className="mr-2 h-4 w-4" />
-                  <span>Journal des modifications</span>
-                </CommandItem>
-              </Link>
-            </CommandGroup>
             <CommandSeparator />
-            <CommandGroup heading="Cours">
-              {lessons.map((lesson) => (
-                <Link href={`/cours/${lesson.slug}`} key={lesson.id}>
-                  <CommandItem className="text-white">
-                    {lesson.title}
-                  </CommandItem>
-                </Link>
+              {categories.map((category, index) => (
+                <>
+                  { index !== 0 && <Separator /> }
+                  <CommandGroup key={`shortcut:cat:${category.id}`} heading={`${index + 1}. ${category.name}`}>
+                    {category.Lessons.map(lesson => (
+                      <Link key={`shortcut:lesson:${lesson.id}`} href={`/cours/${lesson.slug}`}>
+                        <CommandItem className="text-gray-50">
+                          {lesson.title}
+                        </CommandItem>
+                      </Link>
+                    ))}
+                  </CommandGroup>
+                </>
               ))}
-            </CommandGroup>
-
           </CommandList>
         </Command>
       </CommandDialog>
diff --git a/src/components/sheet/sheetLessons.tsx b/src/components/sheet/sheetLessons.tsx
index d2f76c3..84129b7 100644
--- a/src/components/sheet/sheetLessons.tsx
+++ b/src/components/sheet/sheetLessons.tsx
@@ -16,6 +16,24 @@ type userIdProps = {
   userId: string;
 };
 
+type LessonWithFormattedSortNumber = {
+  id: string;
+  title: string;
+  slug: string;
+  categoryId: string;
+  description: string | null;
+  playbackId: string | null;
+  duration: string | null;
+  repository_url: string | null;
+  sort_number: number;
+  draft: boolean;
+  newLesson: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+  formatted_sort_number?: string;
+  status?: number;
+};
+
 export default async function SheetLessons({ userId }: userIdProps) {
   const categories = await prisma.categories.findMany({
     where: {
@@ -43,23 +61,6 @@ export default async function SheetLessons({ userId }: userIdProps) {
     },
   });
 
-  type LessonWithFormattedSortNumber = {
-    id: string;
-    title: string;
-    slug: string;
-    categoryId: string;
-    description: string | null;
-    playbackId: string | null;
-    duration: string | null;
-    repository_url: string | null;
-    sort_number: number;
-    draft: boolean;
-    newLesson: boolean;
-    createdAt: Date;
-    updatedAt: Date;
-    formatted_sort_number?: string;
-    status?: number;
-  };
 
   categories.sort((a, b) => (a.sort_number ?? 0) - (b.sort_number ?? 0));
 
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 9244f4e..7fe4982 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -1,12 +1,12 @@
 "use client"
 
-import * as React from "react"
 import { type DialogProps } from "@radix-ui/react-dialog"
 import { Command as CommandPrimitive } from "cmdk"
 import { Search } from "lucide-react"
+import * as React from "react"
 
-import { cn } from "@/lib/utils"
 import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils"
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -29,7 +29,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-white [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-400 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -89,7 +89,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-white [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-white",
+      "overflow-hidden p-1 text-gray-50 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-400",
       className
     )}
     {...props}
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none ",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground",
       className
     )}
     {...props}
@@ -133,7 +133,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest [&_[cmdk-group-heading]]:text-white",
+        "ml-auto text-xs tracking-widest [&_[cmdk-group-heading]]:text-gray-400",
         className
       )}
       {...props}
@@ -144,12 +144,7 @@ CommandShortcut.displayName = "CommandShortcut"
 
 export {
   Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
+  CommandDialog, CommandEmpty,
+  CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut
 }
+