Merge pull request #363 from and-voila/srizvi/issue300

chore: consolidate definitions #300
srizvi · Nov 6, 2023 · 7ac8fe5 · 7ac8fe5
2 parents ddd30e1 + a5ce61f
commit 7ac8fe5
Show file tree

Hide file tree

Showing 20 changed files with 151 additions and 158 deletions.
diff --git a/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/page.tsx b/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/page.tsx
@@ -2,7 +2,6 @@ import { redirect } from 'next/navigation';
 
 import { getDashboardCourses } from '@/app/lib/actions/get-dashboard-courses';
 import { getCurrentUser } from '@/app/lib/session';
-import { Icons } from '@/app/ui/icons';
 import { CoursesList } from '@/app/ui/learn/courses/courses-list';
 import { InfoCard } from '@/app/ui/learn/dashboard/info-card';
 
@@ -21,12 +20,12 @@ export default async function Dashboard() {
     <div className="space-y-8 p-6">
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 max-w-5xl mx-auto">
         <InfoCard
-          icon={Icons.clock}
+          icon="clock"
           label="In Progress"
           numberOfItems={coursesInProgress.length}
         />
         <InfoCard
-          icon={Icons.circleChecked}
+          icon="circleChecked"
           label="Completed"
           numberOfItems={completedCourses.length}
           variant="default"

diff --git a/...board)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/chapters/[chapterId]/page.tsx b/...board)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/chapters/[chapterId]/page.tsx
@@ -87,7 +87,7 @@ const ChapterIdPage = async ({
           <div className="space-y-4">
             <div>
               <div className="flex items-center gap-x-2">
-                <IconBadge icon={Icons.magic} />
+                <IconBadge icon="magic" />
                 <h2 className="font-display tracking-tight text-xl">
                   Customize your play
                 </h2>
@@ -106,7 +106,7 @@ const ChapterIdPage = async ({
           </div>
           <div>
             <div className="mt-16 flex items-center gap-x-2">
-              <IconBadge icon={Icons.youtube} />
+              <IconBadge icon="youtube" />
               <h2 className="font-display tracking-tight text-xl">
                 Add a video
               </h2>

diff --git a/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/page.tsx b/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/page.tsx
@@ -5,7 +5,6 @@ import { getCurrentUser } from '@/app/lib/session';
 import { isTeacher } from '@/app/lib/teacher';
 import { Banner } from '@/app/ui/banner';
 import { IconBadge } from '@/app/ui/icon-badge';
-import { Icons } from '@/app/ui/icons';
 import { Actions } from '@/app/ui/learn/teacher/courses/actions';
 import { AttachmentForm } from '@/app/ui/learn/teacher/courses/attachment-form';
 import { CategoryForm } from '@/app/ui/learn/teacher/courses/category-form';
@@ -93,7 +92,7 @@ const CourseIdPage = async ({ params }: { params: { courseId: string } }) => {
         <div className="mt-16">
           <div>
             <div className="flex items-center gap-x-2">
-              <IconBadge icon={Icons.magic} />
+              <IconBadge icon="magic" />
               <h2 className="font-display tracking-tight text-lg">
                 Customize your playbook
               </h2>
@@ -114,7 +113,7 @@ const CourseIdPage = async ({ params }: { params: { courseId: string } }) => {
           <div className="mt-16 space-y-6">
             <div>
               <div className="flex items-center gap-x-2">
-                <IconBadge icon={Icons.activity} />
+                <IconBadge icon="activity" />
                 <h2 className="font-display tracking-tight text-lg">
                   Playbook chapters
                 </h2>
@@ -123,7 +122,7 @@ const CourseIdPage = async ({ params }: { params: { courseId: string } }) => {
             </div>
             <div>
               <div className="mt-16 flex items-center gap-x-2">
-                <IconBadge icon={Icons.rocket} />
+                <IconBadge icon="rocket" />
                 <h2 className="font-display tracking-tight text-lg">
                   Playbook pricing
                 </h2>
@@ -132,7 +131,7 @@ const CourseIdPage = async ({ params }: { params: { courseId: string } }) => {
             </div>
             <div>
               <div className="mt-16 flex items-center gap-x-2">
-                <IconBadge icon={Icons.file} />
+                <IconBadge icon="file" />
                 <h2 className="font-display tracking-tight text-lg">
                   Resources & Attachments
                 </h2>

diff --git a/apps/lms/app/config/sidebar-routes.tsx b/apps/lms/app/config/sidebar-routes.tsx
@@ -2,11 +2,9 @@
 
 import { usePathname } from 'next/navigation';
 
-import { Route } from '@/app/lib/definitions';
+import { Route } from '@/app/lib/types';
 import { SidebarItem } from '@/app/ui/sidebar-item';
 
-import { Icons } from '../ui/icons';
-
 const dashboardRoutes: Route[] = [
   {
     id: 'dashboard',
@@ -123,7 +121,7 @@ export const SidebarRoutes = () => {
       {routes.map((route) => (
         <SidebarItem
           key={route.id}
-          icon={Icons[route.icon]}
+          icon={route.icon}
           label={route.label}
           href={route.href}
         />

diff --git a/apps/lms/app/lib/actions/get-dashboard-courses.ts b/apps/lms/app/lib/actions/get-dashboard-courses.ts
@@ -4,7 +4,7 @@ import { checkSubscription } from '@/app/lib/actions/check-subscription';
 import { getProgress } from '@/app/lib/actions/get-progress';
 import { db } from '@/app/lib/db';
 
-type CourseWithProgressWithCategory = Course & {
+type DashboardCourseWithProgressWithCategory = Course & {
   category: Category;
   chapters: Chapter[];
   progress: number | null;
@@ -13,8 +13,8 @@ type CourseWithProgressWithCategory = Course & {
 };
 
 type DashboardCourses = {
-  completedCourses: CourseWithProgressWithCategory[];
-  coursesInProgress: CourseWithProgressWithCategory[];
+  completedCourses: DashboardCourseWithProgressWithCategory[];
+  coursesInProgress: DashboardCourseWithProgressWithCategory[];
 };
 
 export const getDashboardCourses = async (
@@ -63,7 +63,7 @@ export const getDashboardCourses = async (
           progress,
           purchased,
           isPaidMember,
-        } as CourseWithProgressWithCategory;
+        } as DashboardCourseWithProgressWithCategory;
       }),
     );
 

diff --git a/apps/lms/app/lib/definitions.ts b/apps/lms/app/lib/definitions.ts
diff --git a/apps/lms/app/lib/types/index.d.ts b/apps/lms/app/lib/types/index.d.ts
@@ -1,9 +1,35 @@
-import { User } from '@prisma/client';
+import { Chapter, Course, User, UserProgress } from '@prisma/client';
 
 import { Icons } from '@/app/ui/icons';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export type RadixIconProps = React.SVGProps<SVGSVGElement>;
+// -----------------------------------------------------------------------------
+// SECTION: Icon Types
+// -----------------------------------------------------------------------------
+
+export type SocialIcon = keyof typeof Icons;
+
+export type SocialItem = {
+  name: string;
+  href: string;
+  icon: SocialIcon;
+};
+
+export type SocialConfig = {
+  social: SocialItem[];
+};
+
+export type IconKey = keyof typeof Icons;
+
+// -----------------------------------------------------------------------------
+// SECTION: Navigation Types
+// -----------------------------------------------------------------------------
+
+export type Route = {
+  id: string;
+  icon?: IconName;
+  label: string;
+  href: string;
+};
 
 export type NavItem = {
   id: string;
@@ -31,6 +57,67 @@ export type SidebarNavItem = {
     }
 );
 
+export interface SidebarItemProps {
+  icon: IconName;
+  label: string;
+  href: string;
+}
+
+export interface SidebarProps {
+  apiLimitCount: number;
+  isPaidMember: boolean;
+}
+
+export interface MobileSidebarProps {
+  apiLimitCount: number;
+  isPaidMember: boolean;
+}
+
+export interface CourseSidebarItemProps {
+  label: string;
+  id: string;
+  isCompleted: boolean;
+  courseId: string;
+  isLocked: boolean;
+}
+
+export interface CourseSidebarProps {
+  course: Course & {
+    chapters: (Chapter & {
+      userProgress: UserProgress[] | null;
+    })[];
+  };
+  progressCount: number;
+  apiLimitCount: number;
+  isPaidMember: boolean;
+}
+
+export interface CourseMobileSidebarProps {
+  course: Course & {
+    chapters: (Chapter & {
+      userProgress: UserProgress[] | null;
+    })[];
+  };
+  progressCount: number;
+  isPaidMember: boolean;
+  apiLimitCount: number;
+}
+
+export interface CourseNavbarProps {
+  course: Course & {
+    chapters: (Chapter & {
+      userProgress: UserProgress[] | null;
+    })[];
+  };
+  progressCount: number;
+  apiLimitCount: number;
+  isPaidMember: boolean;
+}
+
+// -----------------------------------------------------------------------------
+// SECTION: Config Types
+// -----------------------------------------------------------------------------
+
 export type SiteConfig = {
   company: string;
   name: string;
@@ -43,24 +130,28 @@ export type SiteConfig = {
   };
 };
 
-export type DocsConfig = {
+export type MarketingConfig = {
   mainNav: MainNavItem[];
-  sidebarNav: SidebarNavItem[];
-};
-
-export type FooterConfig = {
-  footerNav: MainNavItem[];
 };
 
-export type MarketingConfig = {
+export type DashboardConfig = {
   mainNav: MainNavItem[];
+  sidebarNav: SidebarNavItem[];
 };
 
-export type DashboardConfig = {
+export type DocsConfig = {
   mainNav: MainNavItem[];
   sidebarNav: SidebarNavItem[];
 };
 
+export type FooterConfig = {
+  footerNav: MainNavItem[];
+};
+
+// -----------------------------------------------------------------------------
+// SECTION: Subscription related Types
+// -----------------------------------------------------------------------------
+
 export type SubscriptionPlan = {
   name: string;
   description: string;
@@ -73,24 +164,14 @@ export type UserSubscriptionPlan = SubscriptionPlan &
     isPaidMember: boolean;
   };
 
+// -----------------------------------------------------------------------------
+// SECTION: Miscellaneous Types
+// -----------------------------------------------------------------------------
+
 export type MarketingBenefitsProps = {
   id: string;
   title: string;
   description: string;
   emoji: string;
   emojiDescription: string;
 };
-
-export type SocialIcon = keyof typeof Icons;
-
-export type SocialItem = {
-  name: string;
-  href: string;
-  icon: SocialIcon;
-};
-
-export type SocialConfig = {
-  social: SocialItem[];
-};
-
-export type IconKey = keyof typeof Icons;
diff --git a/apps/lms/app/lib/types/next-auth.d.ts b/apps/lms/app/lib/types/next-auth.d.ts
@@ -1,3 +1,7 @@
+// -----------------------------------------------------------------------------
+// SECTION: Module augmentation Types for Auth
+// -----------------------------------------------------------------------------
+
 import { User } from 'next-auth';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { JWT } from 'next-auth/jwt';

diff --git a/apps/lms/app/ui/heading.tsx b/apps/lms/app/ui/heading.tsx
diff --git a/apps/lms/app/ui/icon-badge.tsx b/apps/lms/app/ui/icon-badge.tsx
@@ -1,6 +1,6 @@
 import { cn, cva, VariantProps } from '@ui/index';
 
-import { IconComponent } from './icons';
+import { IconName, Icons } from './icons';
 
 const backgroundVariants = cva('rounded-xl flex items-center justify-center', {
   variants: {
@@ -40,10 +40,11 @@ type BackgroundVariantsProps = VariantProps<typeof backgroundVariants>;
 type IconVariantsProps = VariantProps<typeof iconVariants>;
 
 interface IconBadgeProps extends BackgroundVariantsProps, IconVariantsProps {
-  icon: IconComponent;
+  icon: IconName;
 }
 
-export const IconBadge = ({ icon: Icon, variant, size }: IconBadgeProps) => {
+export const IconBadge = ({ icon, variant, size }: IconBadgeProps) => {
+  const Icon = Icons[icon];
   return (
     <div className={cn(backgroundVariants({ variant, size }))}>
       <Icon className={cn(iconVariants({ variant, size }))} />

diff --git a/apps/lms/app/ui/icons.tsx b/apps/lms/app/ui/icons.tsx
@@ -1,14 +1,8 @@
-import { FunctionComponent, SVGProps } from 'react';
+import { SVGProps } from 'react';
 
 export type IconProps = SVGProps<SVGSVGElement>;
 
-export type IconComponent = FunctionComponent<IconProps>;
-
-function createIcons<T extends Record<string, IconComponent>>(icons: T): T {
-  return icons;
-}
-
-export const Icons = createIcons({
+export const Icons = {
   // Phosphor list-checks
   activity: (props: IconProps) => (
     <svg
@@ -824,4 +818,6 @@ export const Icons = createIcons({
       <path d="M164.44,121.34l-48-32A8,8,0,0,0,104,96v64a8,8,0,0,0,12.44,6.66l48-32a8,8,0,0,0,0-13.32ZM120,145.05V111l25.58,17ZM234.33,69.52a24,24,0,0,0-14.49-16.4C185.56,39.88,131,40,128,40s-57.56-.12-91.84,13.12a24,24,0,0,0-14.49,16.4C19.08,79.5,16,97.74,16,128s3.08,48.5,5.67,58.48a24,24,0,0,0,14.49,16.41C69,215.56,120.4,216,127.34,216h1.32c6.94,0,58.37-.44,91.18-13.11a24,24,0,0,0,14.49-16.41c2.59-10,5.67-28.22,5.67-58.48S236.92,79.5,234.33,69.52Zm-15.49,113a8,8,0,0,1-4.77,5.49c-31.65,12.22-85.48,12-86.12,12s-54.37.18-86-12a8,8,0,0,1-4.77-5.49C34.8,173.39,32,156.57,32,128s2.8-45.39,5.16-54.47A8,8,0,0,1,41.93,68C73.58,55.82,127.4,56,128.05,56s54.37-.18,86,12a8,8,0,0,1,4.77,5.49C221.2,82.61,224,99.43,224,128S221.2,173.39,218.84,182.47Z" />
     </svg>
   ),
-});
+};
+
+export type IconName = keyof typeof Icons;