From d30bd50e1a18db4df4b47cf40b4e9dfa60bc264e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= Date: Fri, 16 Feb 2024 21:56:41 +0100 Subject: [PATCH] enabled i18n for all components --- app/ui/AddLocationButton.tsx | 28 ++++++++++++-------- app/ui/AddMonthButton.tsx | 26 ++++++++++++------- app/ui/BillDeleteForm.tsx | 17 ++++++++---- app/ui/BillEditForm.tsx | 19 ++++++++------ app/ui/LocationCard.tsx | 15 ++++++++--- app/ui/LocationDeleteForm.tsx | 16 +++++++++--- app/ui/LocationEditForm.tsx | 12 +++++---- app/ui/MonthCard.tsx | 5 ++-- app/ui/SignInButton.tsx | 16 ++++++++---- messages/en.json | 49 +++++++++++++++++++++++++++++++++++ package-lock.json | 2 +- 11 files changed, 150 insertions(+), 55 deletions(-) diff --git a/app/ui/AddLocationButton.tsx b/app/ui/AddLocationButton.tsx index becd871..2f68524 100644 --- a/app/ui/AddLocationButton.tsx +++ b/app/ui/AddLocationButton.tsx @@ -2,20 +2,26 @@ import { PlusCircleIcon, HomeIcon } from "@heroicons/react/24/outline"; import { YearMonth } from "../lib/db-types"; import { formatYearMonth } from "../lib/format"; import Link from "next/link"; - +import { useTranslations } from 'next-intl'; export interface AddLocationButtonProps { /** year and month at which the new billing location should be addes */ yearMonth: YearMonth } -export const AddLocationButton:React.FC = ({yearMonth}) => -
- - - - - Add now
realestate - - -
; \ No newline at end of file +export const AddLocationButton:React.FC = ({yearMonth}) => { + + const t = useTranslations("home-page.add-location-button"); + + return( +
+ + + + + {t("tooltip")} + + +
+ ); +} \ No newline at end of file diff --git a/app/ui/AddMonthButton.tsx b/app/ui/AddMonthButton.tsx index 204df8c..f1afa8b 100644 --- a/app/ui/AddMonthButton.tsx +++ b/app/ui/AddMonthButton.tsx @@ -3,18 +3,24 @@ import React from "react"; import { formatYearMonth } from "../lib/format"; import { YearMonth } from "../lib/db-types"; import Link from "next/link"; +import { useTranslations } from 'next-intl'; export interface AddMonthButtonProps { yearMonth: YearMonth; } -export const AddMonthButton:React.FC = ({ yearMonth }) => -
- - - - - Add next
month - - -
; +export const AddMonthButton:React.FC = ({ yearMonth }) => { + + const t = useTranslations("home-page.add-month-button"); + + return( +
+ + + + + {t("tooltip")} + + +
); +} diff --git a/app/ui/BillDeleteForm.tsx b/app/ui/BillDeleteForm.tsx index 7317d8f..fcb39d9 100644 --- a/app/ui/BillDeleteForm.tsx +++ b/app/ui/BillDeleteForm.tsx @@ -1,11 +1,12 @@ "use client"; -import { FC } from "react"; +import { FC, ReactNode } from "react"; import { Bill, BillingLocation } from "../lib/db-types"; import { useFormState } from "react-dom"; import { Main } from "./Main"; import { deleteBillById } from "../lib/actions/billActions"; import Link from "next/link"; +import { useTranslations } from "next-intl"; export interface BillDeleteFormProps { bill: Bill, @@ -17,18 +18,24 @@ export const BillDeleteForm:FC = ({ bill, location }) => { const { year, month } = location.yearMonth; const handleAction = deleteBillById.bind(null, location._id, bill._id, year, month); const [ state, dispatch ] = useFormState(handleAction, null); - + const t = useTranslations("bill-delete-form"); return(

- Please confirm deletion of bill “{bill.name}” at “{location.name}”. + { + t.rich("text", { + bill_name:bill.name, + location_name:location.name, + strong: (chunks:ReactNode) => `${chunks}`, + }) + }

- - Cancel + + {t("cancel-button")}
diff --git a/app/ui/BillEditForm.tsx b/app/ui/BillEditForm.tsx index 10fd36a..d27ba87 100644 --- a/app/ui/BillEditForm.tsx +++ b/app/ui/BillEditForm.tsx @@ -8,6 +8,7 @@ import { updateOrAddBill } from "../lib/actions/billActions"; import Link from "next/link"; import { formatYearMonth } from "../lib/format"; import { findDecodePdf417 } from "../lib/pdf/barcodeDecoder"; +import { useTranslations } from "next-intl"; // Next.js does not encode an utf-8 file name correctly when sending a form with a file attachment // This is a workaround for that @@ -25,6 +26,8 @@ export interface BillEditFormProps { export const BillEditForm:FC = ({ location, bill }) => { + const t = useTranslations("bill-edit-form"); + const { _id: billID, name, paid, attachment, notes, payedAmount: initialPayedAmount, barcodeImage: initialBarcodeImage } = bill ?? { _id:undefined, name:"", paid:false, notes:"" }; const { yearMonth:{year: billYear, month: billMonth}, _id: locationID } = location; @@ -69,12 +72,12 @@ export const BillEditForm:FC = ({ location, bill }) => { { // don't show the delete button if we are adding a new bill bill ? - + : null } - +
{state.errors?.billName && state.errors.billName.map((error: string) => ( @@ -107,13 +110,13 @@ export const BillEditForm:FC = ({ location, bill }) => {
@@ -134,11 +137,11 @@ export const BillEditForm:FC = ({ location, bill }) => { -

After scanning the code make sure the information is correct.
We are not liable in case of an incorrect payment.

+

{t.rich('barcode-disclaimer', { br: () =>
})}

: null } - +
{state.errors?.billNotes && state.errors.billNotes.map((error: string) => ( @@ -149,8 +152,8 @@ export const BillEditForm:FC = ({ location, bill }) => {
- - Cancel + + {t("cancel-button")}
diff --git a/app/ui/LocationCard.tsx b/app/ui/LocationCard.tsx index ae1d556..1f1120d 100644 --- a/app/ui/LocationCard.tsx +++ b/app/ui/LocationCard.tsx @@ -1,12 +1,13 @@ 'client only'; import { Cog8ToothIcon, PlusCircleIcon } from "@heroicons/react/24/outline"; -import { FC } from "react"; +import { FC, ReactNode } from "react"; import { BillBadge } from "./BillBadge"; import { BillingLocation } from "../lib/db-types"; import { formatYearMonth } from "../lib/format"; import { formatCurrency } from "../lib/formatStrings"; import Link from "next/link"; +import { useTranslations } from "next-intl"; export interface LocationCardProps { location: BillingLocation @@ -14,13 +15,15 @@ export interface LocationCardProps { export const LocationCard:FC = ({location: { _id, name, yearMonth, bills }}) => { + const t = useTranslations("home-page.location-card"); + // sum all the billAmounts const monthlyExpense = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0); return(
- +

{formatYearMonth(yearMonth)} {name}

@@ -28,14 +31,18 @@ export const LocationCard:FC = ({location: { _id, name, yearM { bills.map(bill => ) } - +
{ monthlyExpense > 0 ?

- Payed total: { formatCurrency(monthlyExpense) } + { + t.rich("payed-total", { + amount: formatCurrency(monthlyExpense), + strong: (chunks:ReactNode) => `${chunks}` + })}

: null } diff --git a/app/ui/LocationDeleteForm.tsx b/app/ui/LocationDeleteForm.tsx index 7f6651d..d3b8c6e 100644 --- a/app/ui/LocationDeleteForm.tsx +++ b/app/ui/LocationDeleteForm.tsx @@ -1,11 +1,12 @@ "use client"; -import { FC } from "react"; +import { FC, ReactNode } from "react"; import { BillingLocation } from "../lib/db-types"; import { deleteLocationById } from "../lib/actions/locationActions"; import { useFormState } from "react-dom"; import { gotoUrl } from "../lib/actions/navigationActions"; import Link from "next/link"; +import { useTranslations } from "next-intl"; export interface LocationDeleteFormProps { /** location which should be deleted */ @@ -16,6 +17,8 @@ export const LocationDeleteForm:FC = ({ location }) => { const handleAction = deleteLocationById.bind(null, location._id, location.yearMonth); const [ state, dispatch ] = useFormState(handleAction, null); + const t = useTranslations("location-delete-form"); + const handleCancel = () => { gotoUrl(`/location/${location._id}/edit/`); @@ -26,11 +29,16 @@ export const LocationDeleteForm:FC = ({ location }) =>

- Please confirm deletion of location “{location.name}”. + { + t.rich("text", { + name:location.name, + strong: (chunks:ReactNode) => `${chunks}`, + }) + }

- - Cancel + + {t("cancel-button")}
diff --git a/app/ui/LocationEditForm.tsx b/app/ui/LocationEditForm.tsx index 78a5af5..ae8e144 100644 --- a/app/ui/LocationEditForm.tsx +++ b/app/ui/LocationEditForm.tsx @@ -6,6 +6,7 @@ import { BillingLocation, YearMonth } from "../lib/db-types"; import { updateOrAddLocation } from "../lib/actions/locationActions"; import { useFormState } from "react-dom"; import Link from "next/link"; +import { useTranslations } from "next-intl"; export type LocationEditFormProps = { /** location which should be edited */ @@ -24,6 +25,7 @@ export const LocationEditForm:FC = ({ location, yearMonth const initialState = { message: null, errors: {} }; const handleAction = updateOrAddLocation.bind(null, location?._id, location?.yearMonth ?? yearMonth); const [ state, dispatch ] = useFormState(handleAction, initialState); + const t = useTranslations("location-edit-form"); let { year, month } = location ? location.yearMonth : yearMonth; @@ -33,11 +35,11 @@ export const LocationEditForm:FC = ({ location, yearMonth
{ location && - + } - +
{state.errors?.locationName && state.errors.locationName.map((error: string) => ( @@ -47,7 +49,7 @@ export const LocationEditForm:FC = ({ location, yearMonth ))}
- +
{state.errors?.locationNotes && state.errors.locationNotes.map((error: string) => ( @@ -66,8 +68,8 @@ export const LocationEditForm:FC = ({ location, yearMonth }
- - Cancel + + {t("cancel-button")}
diff --git a/app/ui/MonthCard.tsx b/app/ui/MonthCard.tsx index 41e25ed..25e2583 100644 --- a/app/ui/MonthCard.tsx +++ b/app/ui/MonthCard.tsx @@ -4,7 +4,7 @@ import { FC, useEffect, useRef } from "react"; import { formatYearMonth } from "../lib/format"; import { YearMonth } from "../lib/db-types"; import { formatCurrency } from "../lib/formatStrings"; - +import { useTranslations } from "next-intl"; export interface MonthCardProps { yearMonth: YearMonth, @@ -17,6 +17,7 @@ export interface MonthCardProps { export const MonthCard:FC = ({ yearMonth, children, monthlyExpense, expanded, onToggle }) => { const elRef = useRef(null); + const t = useTranslations("home-page.month-card"); // Setting the `month` will activate the accordion belonging to that month // If the accordion is already active, it will collapse it @@ -37,7 +38,7 @@ export const MonthCard:FC = ({ yearMonth, children, monthlyExpen { monthlyExpense>0 ?

- Total monthly expenditure: { formatCurrency(monthlyExpense) } + {t("payed-total-label")} { formatCurrency(monthlyExpense) }

: null }
diff --git a/app/ui/SignInButton.tsx b/app/ui/SignInButton.tsx index abfda18..c0c9940 100644 --- a/app/ui/SignInButton.tsx +++ b/app/ui/SignInButton.tsx @@ -1,6 +1,7 @@ "use client"; import { signIn } from "next-auth/react" +import { useTranslations } from "next-intl"; import Image from "next/image"; const providerLogo = (provider: {id:string, name:string}) => { @@ -14,10 +15,15 @@ const providerLogo = (provider: {id:string, name:string}) => { } } -export const SignInButton:React.FC<{ provider: {id:string, name:string} }> = ({ provider }) => - +export const SignInButton:React.FC<{ provider: {id:string, name:string} }> = ({ provider }) => { + const t = useTranslations("login-page"); + return( + + ); +} \ No newline at end of file diff --git a/messages/en.json b/messages/en.json index c7d9df5..47efa3c 100644 --- a/messages/en.json +++ b/messages/en.json @@ -40,6 +40,55 @@ "video-url": "/welcome-demo-vp9-25fps-1500bps.webm", "image-url": "/bar-code-demo.png", "video-title": "Demo osnovnih koraka u aplikaciji" + }, + "sign-in-button": "Sign in with" + }, + "home-page": { + "add-location-button": { + "tooltop": "Add a new realestate" + }, + "add-month-button": { + "tooltop": "Add next mont" + }, + "location-card": { + "edit-card-tooltip": "Edit realestate", + "add-bill-button-tooltip": "Add a new bill", + "payed-total": "Payed total: {amount}" + }, + "month-card": { + "payed-total-label": "Total monthly expenditure:" } + }, + "bill-delete-form": + { + "text": "Please confirm deletion of bill “{bill_name}” at “{location_name}”.", + "cancel-button": "Cancel", + "confirm-button": "Confirm" + }, + "bill-edit-form": + { + "bill-name-placeholder": "Bill name", + "paid-checkbox":"Paid", + "payed-amount": "Amount", + "barcode-disclaimer": "After scanning the code make sure the information is correct.
We are not liable in case of an incorrect payment.", + "notes-placeholder": "Notes", + "save-button": "Save", + "cancel-button": "Cancel", + "delete-tooltip": "Delete bill" + }, + "location-delete-form": + { + "text": "Please confirm deletion of realestate “{name}””.", + "cancel-button": "Cancel", + "confirm-button": "Confirm" + }, + "location-edit-form": + { + "location-name-placeholder": "Realestate name", + "notes-placeholder": "Notes", + "save-button": "Save", + "cancel-button": "Cancel", + "delete-tooltip": "Delete realestate" + } } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e7af0ed..82075a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "rezije", + "name": "evidencija-rezija", "lockfileVersion": 3, "requires": true, "packages": {