fixed multiple instances of singleton

src/components/Courses.tsx

@@ -3,7 +3,6 @@
 import { Course } from '@prisma/client';
 import { CourseCard } from './CourseCard';
 import { useRouter } from 'next/navigation';
-import { RefreshDb } from './RefreshDb';
 
 export const Courses = ({ courses }: { courses: Course[] }) => {
   const router = useRouter();
@@ -27,7 +26,6 @@ export const Courses = ({ courses }: { courses: Course[] }) => {
           />
         ))}
       </div>
-      <RefreshDb />
     </section>
   );
 };

src/components/MyCourses.tsx

@@ -3,6 +3,8 @@ import { authOptions } from '@/lib/auth';
 import { getPurchases } from '@/utiles/appx';
 import { getServerSession } from 'next-auth';
 import { Logout } from './Logout';
+import { RefreshDb } from './RefreshDb';
+import { refreshDb } from '@/actions/refresh-db';
 const getCourses = async () => {
   const session = await getServerSession(authOptions);
   const purchases = await getPurchases(session?.user.email || '');
@@ -22,5 +24,10 @@ export const MyCourses = async () => {
         <Logout />
       </div>
     );
-  return <Courses courses={purchases} />;
+  return (
+    <>
+      <Courses courses={purchases} />
+      <RefreshDb refreshDb={refreshDb} />
+    </>
+  );
 };

src/components/RefreshDb.tsx

@@ -1,10 +1,10 @@
 'use client';
-import { refreshDb } from '@/actions/refresh-db';
 import { Button } from './ui/button';
 import { toast } from 'sonner';
 import { useSession } from 'next-auth/react';
 
-export function RefreshDb() {
+//@ts-ignore
+export function RefreshDb({ refreshDb }) {
   const session = useSession();
   console.log(session);
 
@@ -21,7 +21,7 @@ export function RefreshDb() {
   if (session.status === 'loading') return <>Loading...</>;
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-2 mx-auto">
       <h1>Don't see all your courses?</h1>
       <Button className="dark:text-white" onClick={handleClick}>
         Refresh Database

src/components/VideoPlayer2.tsx

@@ -159,7 +159,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
             player.volume(0);
           }
           event.stopPropagation();
-          break; 
+          break;
         case 'KeyK': // 'K' key for play/pause toggle
           if (player.paused()) {
             player.play();
@@ -169,11 +169,15 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
           event.stopPropagation();
           break;
         case 'KeyJ': // 'J' key for seeking backward 10 seconds multiplied by the playback rate
-          player.currentTime(player.currentTime() - (10 * player.playbackRate()));
+          player.currentTime(
+            player.currentTime() - 10 * player.playbackRate(),
+          );
           event.stopPropagation();
           break;
         case 'KeyL': // 'L' key for seeking forward 10 seconds multiplied by the playback rate
-          player.currentTime(player.currentTime() + (10 * player.playbackRate()));
+          player.currentTime(
+            player.currentTime() + 10 * player.playbackRate(),
+          );
           event.stopPropagation();
           break;
         }