Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(i18n): use dictionary in components
Browse files Browse the repository at this point in the history
vmnog committed May 19, 2024
1 parent 26719ad commit 74d406e
Showing 40 changed files with 367 additions and 180 deletions.
Original file line number Diff line number Diff line change
@@ -61,13 +61,13 @@ export default function ViewsCountChart({
gradient:
resolvedTheme === 'light'
? {
opacityFrom: 0.8,
opacityTo: 0.4,
}
opacityFrom: 0.8,
opacityTo: 0.4,
}
: {
opacityFrom: 0.4,
opacityTo: 0.1,
},
opacityFrom: 0.4,
opacityTo: 0.1,
},
},
dataLabels: {
enabled: false,
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { dayjs } from '@nivo/dayjs'
import { Dictionary } from '@nivo/i18n'
import { Eye } from 'lucide-react'
import dynamic from 'next/dynamic'
import Link from 'next/link'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { serverClient } from '@/lib/trpc/server'
import { Dictionary } from '@nivo/i18n'

const ViewsCountChart = dynamic(() => import('./views-count-chart'), {
ssr: false,
@@ -26,7 +26,9 @@ export async function ViewsCount({ dictionary }: { dictionary: Dictionary }) {
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-base font-medium">
{dictionary.views_count_title}{' '}
<span className="text-xs text-muted-foreground">{dictionary.views_count_subtitle}</span>
<span className="text-xs text-muted-foreground">
{dictionary.views_count_subtitle}
</span>
</CardTitle>
<Eye className="h-4 w-4 text-muted-foreground" />
</CardHeader>
15 changes: 11 additions & 4 deletions apps/web/src/app/[locale]/app/batches/[id]/batch-upload-list.tsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,6 @@ import { SymbolIcon } from '@radix-ui/react-icons'
import { Cable, CopyIcon, Loader2, ReceiptText } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import { useDictionary } from '@/state/dictionary'

import { CopyButton } from '@/components/copy-button'
import { TranscriptionPreview } from '@/components/transcription-preview'
@@ -24,6 +23,7 @@ import {
} from '@/components/ui/tooltip'
import { UploadItemActions } from '@/components/upload-item-actions'
import { trpc } from '@/lib/trpc/react'
import { useDictionary } from '@/state/dictionary'
import { formatBytes } from '@/utils/format-bytes'
import { formatSecondsToMinutes } from '@/utils/format-seconds-to-minutes'

@@ -65,8 +65,12 @@ export function BatchUploadList({ batchId }: BatchUploadListProps) {
)}
</div>
</TableHead>
<TableHead style={{ width: 120 }}>{dictionary.batch_upload_list_duration_column}</TableHead>
<TableHead style={{ width: 140 }}>{dictionary.batch_upload_list_size_column}</TableHead>
<TableHead style={{ width: 120 }}>
{dictionary.batch_upload_list_duration_column}
</TableHead>
<TableHead style={{ width: 140 }}>
{dictionary.batch_upload_list_size_column}
</TableHead>
<TableHead style={{ width: 200 }}>
<div className="flex items-center gap-2">
<ReceiptText className="size-4" />
@@ -178,7 +182,10 @@ export function BatchUploadList({ batchId }: BatchUploadListProps) {
</div>
</TableCell>
<TableCell>
<UploadItemActions videoId={video.id} uploadBatchId={null} />
<UploadItemActions
videoId={video.id}
uploadBatchId={null}
/>
</TableCell>
</TableRow>
))
8 changes: 5 additions & 3 deletions apps/web/src/app/[locale]/app/batches/[id]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { getDictionary, Locale } from '@nivo/i18n'
import { Metadata } from 'next'

import { BatchUploadList } from './batch-upload-list'
import { Locale, getDictionary } from '@nivo/i18n'

interface BatchPageProps {
params: { id: string, locale: Locale }
params: { id: string; locale: Locale }
}

export async function generateMetadata({
@@ -24,7 +24,9 @@ export default async function BatchPage({ params }: BatchPageProps) {
return (
<>
<div className="flex items-center justify-between">
<h2 className="text-3xl font-bold tracking-tight">{dictionary.batch_page_header_title}</h2>
<h2 className="text-3xl font-bold tracking-tight">
{dictionary.batch_page_header_title}
</h2>

<div className="flex items-center gap-4">
<span className="text-sm text-muted-foreground">
7 changes: 4 additions & 3 deletions apps/web/src/app/[locale]/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { getDictionary, Locale } from '@nivo/i18n'

import { Header } from '@/components/header'
import { Locale, getDictionary } from '@nivo/i18n'

export default async function AppLayout({
children,
params: { locale }
params: { locale },
}: {
children: React.ReactNode,
children: React.ReactNode
params: {
locale: Locale
}
4 changes: 2 additions & 2 deletions apps/web/src/app/[locale]/app/upload/page.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { getDictionary, Locale } from '@nivo/i18n'
import { AlertCircle } from 'lucide-react'
import Head from 'next/head'
import Link from 'next/link'

import { serverClient } from '@/lib/trpc/server'

import { UploadList } from './upload-list'
import { Locale, getDictionary } from '@nivo/i18n'
import Head from 'next/head'

export default async function Upload({
params: { locale },
Original file line number Diff line number Diff line change
@@ -18,11 +18,11 @@ import {
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { useDictionary } from '@/state/dictionary'
import {
addToAudioConversionQueueAtom,
audioConversionAtom,
} from '@/state/uploads'
import { useDictionary } from '@/state/dictionary'

export interface AudioConversionProgressColumnProps {
uploadId: string
@@ -68,12 +68,16 @@ export function AudioConversionProgressColumn({
) : progress === 100 ? (
<>
<CheckCircledIcon className="h-4 w-4 text-emerald-500" />
<span className="text-emerald-500">{dictionary.audio_conversion_complete}</span>
<span className="text-emerald-500">
{dictionary.audio_conversion_complete}
</span>
</>
) : (
<>
<DotsHorizontalIcon className="h-4 w-4" />
<span className="text-muted-foreground">{dictionary.audio_conversion_waiting}</span>
<span className="text-muted-foreground">
{dictionary.audio_conversion_waiting}
</span>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
Original file line number Diff line number Diff line change
@@ -11,8 +11,8 @@ import { useCallback } from 'react'

import { Button } from '@/components/ui/button'
import { Progress } from '@/components/ui/progress'
import { audioUploadAtom, startAudioUploadAtom } from '@/state/uploads'
import { useDictionary } from '@/state/dictionary'
import { audioUploadAtom, startAudioUploadAtom } from '@/state/uploads'

export interface AudioUploadProgressColumnProps {
uploadId: string
@@ -46,7 +46,9 @@ export function AudioUploadProgressColumn({
{progress === 0 && !error ? (
<>
<DotsHorizontalIcon className="mr-2 h-4 w-4" />
<span className="text-muted-foreground">{dictionary.audio_upload_waiting}</span>
<span className="text-muted-foreground">
{dictionary.audio_upload_waiting}
</span>
</>
) : error ? (
<>
@@ -65,7 +67,9 @@ export function AudioUploadProgressColumn({
) : (
<>
<CheckCircledIcon className="mr-2 h-4 w-4 text-emerald-500" />
<span className="text-emerald-500">{dictionary.audio_upload_complete}</span>
<span className="text-emerald-500">
{dictionary.audio_upload_complete}
</span>
</>
)}
</div>
Original file line number Diff line number Diff line change
@@ -8,10 +8,10 @@ import {
import { useAtomValue, useSetAtom } from 'jotai'
import { selectAtom } from 'jotai/utils'
import { useCallback } from 'react'
import { useDictionary } from '@/state/dictionary'

import { Button } from '@/components/ui/button'
import { Progress } from '@/components/ui/progress'
import { useDictionary } from '@/state/dictionary'
import { startVideoUploadAtom, videoUploadAtom } from '@/state/uploads'

export interface VideoUploadProgressColumnProps {
@@ -46,7 +46,9 @@ export function VideoUploadProgressColumn({
{progress === 0 && !error ? (
<>
<DotsHorizontalIcon className="mr-2 h-4 w-4" />
<span className="text-muted-foreground">{dictionary.video_upload_waiting}</span>
<span className="text-muted-foreground">
{dictionary.video_upload_waiting}
</span>
</>
) : error ? (
<>
@@ -65,7 +67,9 @@ export function VideoUploadProgressColumn({
) : (
<>
<CheckCircledIcon className="mr-2 h-4 w-4 text-emerald-500" />
<span className="text-emerald-500">{dictionary.video_upload_complete}</span>
<span className="text-emerald-500">
{dictionary.video_upload_complete}
</span>
</>
)}
</div>
12 changes: 8 additions & 4 deletions apps/web/src/app/[locale]/app/upload/upload-list/header.tsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,6 @@ import axios from 'axios'
import { useAtom, useAtomValue, useSetAtom } from 'jotai'
import { ChevronDownIcon, Loader2 } from 'lucide-react'
import { useFormContext } from 'react-hook-form'
import { useDictionary } from '@/state/dictionary'

import {
AlertDialog,
@@ -22,10 +21,11 @@ import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuTrigger,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Separator } from '@/components/ui/separator'
import { useDictionary } from '@/state/dictionary'
import {
amountOfUploadsAtom,
areUploadsEmptyAtom,
@@ -131,13 +131,17 @@ export function Header({ onSubmit }: HeaderProps) {
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{dictionary.alert_dialog_title}</AlertDialogTitle>
<AlertDialogTitle>
{dictionary.alert_dialog_title}
</AlertDialogTitle>
<AlertDialogDescription>
{dictionary.alert_dialog_description}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{dictionary.alert_dialog_cancel}</AlertDialogCancel>
<AlertDialogCancel>
{dictionary.alert_dialog_cancel}
</AlertDialogCancel>
<AlertDialogAction onClick={clearUploads}>
{dictionary.alert_dialog_proceed}
</AlertDialogAction>
35 changes: 19 additions & 16 deletions apps/web/src/app/[locale]/app/upload/upload-list/index.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,36 @@
'use client'

import { zodResolver } from '@hookform/resolvers/zod'
import { Dictionary } from '@nivo/i18n'
import { useRouter } from 'next/navigation'
import { FormProvider, useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { z } from 'zod'
import { useDictionary } from '@/state/dictionary'

import { trpc } from '@/lib/trpc/react'
import { useDictionary } from '@/state/dictionary'

import { Header } from './header'
import { UploadDropArea } from './upload-drop-area'
import { UploadTable } from './upload-table'
import { Dictionary } from '@nivo/i18n'

const uploadsFormSchema = (dictionary: Dictionary) => z.object({
files: z
.array(
z.object({
id: z.string(),
title: z.string().min(1),
duration: z.coerce.number().transform(Math.round),
language: z.enum(['pt', 'es']),
sizeInBytes: z.coerce.number(),
tags: z.array(z.string()).min(1, { message: dictionary.upload_list_at_least_one_tag }),
}),
)
.min(0),
})
const uploadsFormSchema = (dictionary: Dictionary) =>
z.object({
files: z
.array(
z.object({
id: z.string(),
title: z.string().min(1),
duration: z.coerce.number().transform(Math.round),
language: z.enum(['pt', 'es']),
sizeInBytes: z.coerce.number(),
tags: z
.array(z.string())
.min(1, { message: dictionary.upload_list_at_least_one_tag }),
}),
)
.min(0),
})

export type UploadsFormSchema = z.infer<ReturnType<typeof uploadsFormSchema>>

Original file line number Diff line number Diff line change
@@ -4,8 +4,8 @@ import { UploadIcon } from '@radix-ui/react-icons'
import { useSetAtom } from 'jotai'
import { useDropzone } from 'react-dropzone'

import { addUploadsAtom } from '@/state/uploads'
import { useDictionary } from '@/state/dictionary'
import { addUploadsAtom } from '@/state/uploads'

export function UploadDropArea() {
const dictionary = useDictionary()
@@ -30,8 +30,12 @@ export function UploadDropArea() {
>
<UploadIcon className="h-4 w-4" />
<div className="flex flex-col gap-1 text-center">
<span className="font-medium">{dictionary.upload_drop_area_drop_here}</span>
<span className="text-xs text-zinc-400">{dictionary.upload_drop_area_accept_mp4}</span>
<span className="font-medium">
{dictionary.upload_drop_area_drop_here}
</span>
<span className="text-xs text-zinc-400">
{dictionary.upload_drop_area_accept_mp4}
</span>
</div>
</label>

Loading

0 comments on commit 74d406e

Please sign in to comment.