Skip to content

Commit af72d90

Browse files
guillermoscriptguillermoscript
authored
Merge pull request #164 from guillermoscript:163-teacher-dashboard
Refactor TeacherPage and components for localization and ScopedHeader component
2 parents 3dab7dd + 1082656 commit af72d90

File tree

27 files changed

+684
-292
lines changed

27 files changed

+684
-292
lines changed

‎app/[locale]/dashboard/teacher/courses/[courseId]/lessons/[lessonId]/edit/page.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { getI18n } from '@/app/locales/server'
12
import BreadcrumbComponent from '@/components/dashboards/student/course/BreadcrumbComponent'
23
import LessonForm from '@/components/dashboards/teacher/lessons/LessonForm'
34
import { createClient } from '@/utils/supabase/server'
@@ -22,28 +23,30 @@ export default async function EditLessonPage({
2223
console.log(lesson.error.message)
2324
}
2425

26+
const t = await getI18n()
27+
2528
return (
2629
<>
2730
<BreadcrumbComponent
2831
links={[
29-
{ href: '/dashboard', label: 'Dashboard' },
30-
{ href: '/dashboard/teacher', label: 'Teacher' },
31-
{ href: '/dashboard/teacher/courses', label: 'Courses' },
32+
{ href: '/dashboard', label: t('BreadcrumbComponent.dashboard') },
33+
{ href: '/dashboard/teacher', label: t('BreadcrumbComponent.teacher') },
34+
{ href: '/dashboard/teacher/courses', label: t('BreadcrumbComponent.course') },
3235
{
3336
href: `/dashboard/teacher/courses/${params.courseId}`,
3437
label: lesson?.data?.courses?.title,
3538
},
3639
{
3740
href: `/dashboard/teacher/courses/${params.courseId}/lessons`,
38-
label: 'Lessons',
41+
label: t('BreadcrumbComponent.lesson'),
3942
},
4043
{
4144
href: `/dashboard/teacher/courses/${params.courseId}/lessons/${params.lessonId}`,
4245
label: lesson?.data?.title,
4346
},
4447
{
4548
href: `/dashboard/teacher/courses/${params.courseId}/lessons/${params.lessonId}/edit`,
46-
label: 'Edit',
49+
label: t('BreadcrumbComponent.edit'),
4750
},
4851
]}
4952
/>

‎app/[locale]/dashboard/teacher/courses/[courseId]/lessons/[lessonId]/page.tsx

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { generateId } from 'ai'
2+
import { Edit } from 'lucide-react'
23
import Link from 'next/link'
34

45
import { TaskSandboxActions } from '@/actions/dashboard/AI/TaskSandboxActions'
6+
import { getI18n } from '@/app/locales/server'
57
import SidebarLessons from '@/components/dashboards/Common/lessons/SidebarLessons'
68
import BreadcrumbComponent from '@/components/dashboards/student/course/BreadcrumbComponent'
79
import LessonPage from '@/components/dashboards/student/course/lessons/LessonPage'
@@ -39,6 +41,8 @@ export default async function TeacherLessonPage ({
3941
{ role: 'system', content: lesson.data?.lessons_ai_tasks[0].system_prompt, id: generateId() },
4042
]
4143

44+
const t = await getI18n()
45+
4246
return (
4347
<LessonPage
4448
sideBar={
@@ -52,11 +56,11 @@ export default async function TeacherLessonPage ({
5256
<div className="flex-1 md:p-8 overflow-y-auto w-full space-y-4">
5357
<BreadcrumbComponent
5458
links={[
55-
{ href: '/dashboard', label: 'Dashboard' },
56-
{ href: '/dashboard/teacher', label: 'Teacher' },
59+
{ href: '/dashboard', label: t('BreadcrumbComponent.dashboard') },
60+
{ href: '/dashboard/teacher', label: t('BreadcrumbComponent.teacher') },
5761
{
5862
href: '/dashboard/teacher/courses',
59-
label: 'Courses',
63+
label: t('BreadcrumbComponent.course'),
6064
},
6165
{
6266
href: `/dashboard/teacher/courses/${params.courseId}`,
@@ -71,21 +75,24 @@ export default async function TeacherLessonPage ({
7175
<div className="flex flex-col gap-8 w-full">
7276
<div className="flex justify-between items-center w-full">
7377
<h1 className="text-2xl font-semibold mb-4">
74-
Lesson: {lesson?.data?.title}
78+
{lesson?.data?.title}
7579
</h1>
7680
<Link
7781
href={`/dashboard/teacher/courses/${params.courseId}/lessons/${params.lessonId}/edit`}
7882
className={buttonVariants({ variant: 'link' })}
7983
>
80-
Edit
84+
<Edit className="h-6 w-6" />
8185
</Link>
8286
</div>
8387

8488
<h3 className="text-lg font-semibold mt-4">
85-
Status: {lesson?.data?.status}
89+
{t('dashboard.teacher.TeacherLessonPage.status')}: {' '}
90+
{lesson?.data?.status}
8691
</h3>
8792
<h3 className="text-lg font-semibold mt-4">
88-
Sequence: {lesson?.data?.sequence}
93+
{
94+
t('dashboard.teacher.TeacherLessonPage.sequence')
95+
}: {lesson?.data?.sequence}
8996
</h3>
9097
<p>{lesson?.data?.description}</p>
9198

@@ -94,7 +101,7 @@ export default async function TeacherLessonPage ({
94101
{lesson.data?.video_url && (
95102
<>
96103
<h3 className="text-xl font-semibold mt-4">
97-
Youtube Video
104+
{t('dashboard.teacher.TeacherLessonPage.video')}
98105
</h3>
99106
<iframe
100107
className="w-full"
@@ -112,7 +119,7 @@ export default async function TeacherLessonPage ({
112119
{lesson.data?.embed_code ? (
113120
<div className="flex flex-col mb-10 gap-4">
114121
<h3 className="text-xl font-semibold mt-4">
115-
Embeded Code
122+
{t('dashboard.teacher.TeacherLessonPage.embed')}
116123
</h3>
117124
<iframe
118125
src={lesson.data?.embed_code}
@@ -133,7 +140,9 @@ export default async function TeacherLessonPage ({
133140
) : null}
134141

135142
<div className="flex flex-col mb-10 gap-4">
136-
<h3 className="text-xl font-semibold mt-4">Content</h3>
143+
<h3 className="text-xl font-semibold mt-4">
144+
{t('dashboard.teacher.TeacherLessonPage.content')}
145+
</h3>
137146
<ViewMarkdown
138147
markdown={lesson.data?.content}
139148
/>
@@ -144,7 +153,7 @@ export default async function TeacherLessonPage ({
144153
{lesson.data?.lessons_ai_tasks[0].system_prompt && (
145154
<>
146155
<h3 className="text-xl font-semibold mt-4">
147-
System Prompt
156+
{t('dashboard.teacher.TeacherLessonPage.systemPrompt')}
148157
</h3>
149158

150159
<ViewMarkdown
@@ -158,7 +167,7 @@ export default async function TeacherLessonPage ({
158167
/>
159168

160169
<h3 className="text-xl font-semibold mt-4">
161-
Try the chat sandbox
170+
{t('dashboard.teacher.TeacherLessonPage.tryItOut')}
162171
</h3>
163172

164173
<TaskSandboxActions

‎app/[locale]/dashboard/teacher/courses/[courseId]/lessons/page.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { getI18n } from '@/app/locales/server'
12
import BreadcrumbComponent from '@/components/dashboards/student/course/BreadcrumbComponent'
23
import LessonForm from '@/components/dashboards/teacher/lessons/LessonForm'
34
import { createClient } from '@/utils/supabase/server'
@@ -20,16 +21,18 @@ export default async function CreateLessonPage ({
2021
console.log(course.error.message)
2122
throw new Error(course.error.message)
2223
}
24+
25+
const t = await getI18n()
2326
console.log(course)
2427
return (
2528
<>
2629
<BreadcrumbComponent
2730
links={[
28-
{ href: '/dashboard', label: 'Dashboard' },
29-
{ href: '/dashboard/teacher', label: 'Teacher' },
30-
{ href: '/dashboard/teacher/courses', label: 'Courses' },
31+
{ href: '/dashboard', label: t('BreadcrumbComponent.dashboard') },
32+
{ href: '/dashboard/teacher', label: t('BreadcrumbComponent.teacher') },
33+
{ href: '/dashboard/teacher/courses', label: t('BreadcrumbComponent.course') },
3134
{ href: `/dashboard/teacher/courses/${params.courseId}`, label: course?.data?.title },
32-
{ href: `/dashboard/teacher/courses/${params.courseId}/lessons`, label: 'Lessons' }
35+
{ href: `/dashboard/teacher/courses/${params.courseId}/lessons`, label: t('BreadcrumbComponent.lesson') }
3336
]}
3437
/>
3538

‎app/[locale]/dashboard/teacher/courses/[courseId]/lessonsCols.tsx

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
'use client'
22

33
import { ColumnDef } from '@tanstack/react-table'
4-
import { MoreHorizontal } from 'lucide-react'
4+
import { Eye, MoreHorizontal, View } from 'lucide-react'
55
import Link from 'next/link'
66

7+
import ScopedHeader from '@/components/dashboards/Common/table/ScopedHeader'
78
import DeleteLessonAlert from '@/components/dashboards/teacher/lessons/DeleteLessonAlert'
89
import { Button, buttonVariants } from '@/components/ui/button'
910
import {
@@ -12,7 +13,6 @@ import {
1213
DropdownMenuLabel,
1314
DropdownMenuTrigger,
1415
} from '@/components/ui/dropdown-menu'
15-
import { DataTableColumnHeader } from '@/components/ui/Table/DataTableColumnHeader'
1616

1717
interface Lessons {
1818
id: bigint | number
@@ -28,12 +28,14 @@ export const lessonsCols: Array<ColumnDef<Lessons>> = [
2828
{
2929
accessorKey: 'id',
3030
header: ({ column }) => (
31-
<DataTableColumnHeader column={column} title="ID" />
31+
<ScopedHeader scoped="lessonsCols" column={column} word="id" />
3232
),
3333
},
3434
{
3535
accessorKey: 'title',
36-
header: 'Title',
36+
header: ({ column }) => (
37+
<ScopedHeader scoped="lessonsCols" column={column} word="title" />
38+
),
3739
cell: ({ row }) => {
3840
const rowData = row.original
3941

@@ -49,24 +51,34 @@ export const lessonsCols: Array<ColumnDef<Lessons>> = [
4951
},
5052
{
5153
accessorKey: 'description',
52-
header: 'Description',
54+
header: ({ column }) => (
55+
<ScopedHeader
56+
scoped="lessonsCols"
57+
column={column}
58+
word="description"
59+
/>
60+
),
5361
},
5462
{
5563
accessorKey: 'sequence',
5664
header: ({ column }) => (
57-
<DataTableColumnHeader column={column} title="Sequence" />
65+
<ScopedHeader
66+
scoped="lessonsCols"
67+
column={column}
68+
word="sequence"
69+
/>
5870
),
5971
},
6072
{
6173
accessorKey: 'date',
6274
header: ({ column }) => (
63-
<DataTableColumnHeader column={column} title="Date" />
75+
<ScopedHeader scoped="lessonsCols" column={column} word="date" />
6476
),
6577
},
6678
{
6779
accessorKey: 'actions',
6880
header: ({ column }) => (
69-
<DataTableColumnHeader column={column} title="Actions" />
81+
<ScopedHeader scoped="lessonsCols" column={column} word="actions" />
7082
),
7183
cell: ({ row }) => {
7284
const rowData = row.original
@@ -75,7 +87,9 @@ export const lessonsCols: Array<ColumnDef<Lessons>> = [
7587
<DropdownMenu>
7688
<DropdownMenuTrigger asChild>
7789
<Button variant="ghost" className="h-8 w-8 p-0">
78-
<span className="sr-only">Open menu</span>
90+
<span className="sr-only">
91+
<Eye />
92+
</span>
7993
<MoreHorizontal className="h-4 w-4" />
8094
</Button>
8195
</DropdownMenuTrigger>
@@ -85,7 +99,7 @@ export const lessonsCols: Array<ColumnDef<Lessons>> = [
8599
<Link
86100
href={`/dashboard/teacher/courses/${rowData.courseId}/lessons/${rowData.id}`}
87101
>
88-
View details
102+
<View className="h-4 w-4" />
89103
</Link>
90104
</Button>
91105
</DropdownMenuLabel>

‎app/[locale]/dashboard/teacher/courses/[courseId]/page.tsx

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import dayjs from 'dayjs'
22
import Link from 'next/link'
33

4+
import { getI18n } from '@/app/locales/server'
45
import BreadcrumbComponent from '@/components/dashboards/student/course/BreadcrumbComponent'
56
import { buttonVariants } from '@/components/ui/button'
67
import { Separator } from '@/components/ui/separator'
@@ -28,6 +29,8 @@ export default async function CreateCourseLessonPage({
2829
console.log(course.error.message)
2930
}
3031

32+
const t = await getI18n()
33+
3134
const lessonRow = course.data?.lessons?.map((lesson) => {
3235
return {
3336
id: lesson.id,
@@ -58,34 +61,40 @@ export default async function CreateCourseLessonPage({
5861
<div className="flex-1 p-8 overflow-y-auto w-full space-y-4">
5962
<BreadcrumbComponent
6063
links={[
61-
{ href: '/dashboard', label: 'Dashboard' },
62-
{ href: '/dashboard/teacher', label: 'Teacher' },
63-
{ href: '/dashboard/teacher/courses', label: 'Courses' },
64+
{ href: '/dashboard', label: t('BreadcrumbComponent.dashboard') },
65+
{ href: '/dashboard/teacher', label: t('BreadcrumbComponent.teacher') },
66+
{ href: '/dashboard/teacher/courses', label: t('BreadcrumbComponent.course') },
6467
{ href: `/dashboard/teacher/courses/${params.courseId}`, label: course?.data?.title }
6568
]}
6669
/>
6770
<h1 className="text-2xl font-semibold mb-4">
68-
Course: {course?.data?.title}
71+
{course?.data?.title}
6972
</h1>
7073
<p>{course?.data?.description}</p>
7174

7275
<Separator className="my-4 " />
7376
<Tabs defaultValue="lessons" className="w-full space-y-4">
7477
<TabsList>
75-
<TabsTrigger value="lessons">Lessons</TabsTrigger>
76-
<TabsTrigger value="tests">Tests</TabsTrigger>
78+
<TabsTrigger value="lessons">
79+
{t('dashboard.teacher.CreateCourseLessonPage.tabs.lessons')}
80+
</TabsTrigger>
81+
<TabsTrigger value="tests">
82+
{t('dashboard.teacher.CreateCourseLessonPage.tabs.exams')}
83+
</TabsTrigger>
7784
</TabsList>
7885
<TabsContent
7986
className="flex flex-col w-full gap-4"
8087
value="lessons"
8188
>
8289
<div className="flex items-center justify-between">
83-
<h3 className="text-xl font-semibold">Lessons</h3>
90+
<h3 className="text-xl font-semibold">
91+
{t('dashboard.teacher.CreateCourseLessonPage.tabs.lessons')}
92+
</h3>
8493
<Link
8594
className={buttonVariants({ variant: 'link' })}
8695
href={`/dashboard/teacher/courses/${params.courseId}/lessons/`}
8796
>
88-
Create Lesson
97+
{t('dashboard.teacher.CreateCourseLessonPage.tabs.createLesson')}
8998
</Link>
9099
</div>
91100
<DataTable columns={lessonsCols} data={lessonRow as any[]} />
@@ -95,12 +104,14 @@ export default async function CreateCourseLessonPage({
95104
value="tests"
96105
>
97106
<div className="flex items-center justify-between">
98-
<h3 className="text-xl font-semibold">Tests</h3>
107+
<h3 className="text-xl font-semibold">
108+
{t('dashboard.teacher.CreateCourseLessonPage.tabs.tests')}
109+
</h3>
99110
<Link
100111
className={buttonVariants({ variant: 'link' })}
101112
href={`/dashboard/teacher/courses/${params.courseId}/tests/`}
102113
>
103-
Create Test
114+
{t('dashboard.teacher.CreateCourseLessonPage.tabs.createTest')}
104115
</Link>
105116
</div>
106117

0 commit comments

Comments
 (0)