From 68b2591f4000bf9e9d67bd3f95f79d0b81148820 Mon Sep 17 00:00:00 2001 From: Knee Cola Date: Wed, 24 Dec 2025 21:26:09 +0100 Subject: [PATCH] refactor: restructure landing page with component extraction and fix Server Component hooks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Extract reusable components: EnterOrSignInButton, paragraphFormatFactory, getProviders - Fix React hooks usage: remove useMemo from async Server Components - Update landing page content for Croatian and English translations - Reorganize terms/policy pages into locale-aware directories - Update PageFooter to use locale-aware links and make component async 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- app/[locale]/page.tsx | 126 ++++-------------- .../{policy => privacy-policy}/page.tsx | 0 .../{terms => terms-of-service}/page.tsx | 0 app/lib/getProviders.ts | 28 ++++ app/lib/paragraphFormatFactory.tsx | 13 ++ app/ui/EnterOrSignInButton.tsx | 38 ++++++ app/ui/PageFooter.tsx | 8 +- messages/en.json | 4 +- messages/hr.json | 37 ++--- 9 files changed, 126 insertions(+), 128 deletions(-) rename app/[locale]/{policy => privacy-policy}/page.tsx (100%) rename app/[locale]/{terms => terms-of-service}/page.tsx (100%) create mode 100644 app/lib/getProviders.ts create mode 100644 app/lib/paragraphFormatFactory.tsx create mode 100644 app/ui/EnterOrSignInButton.tsx diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index fcb511e..ada195f 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -1,95 +1,42 @@ -import { FC, ReactNode } from 'react'; +import { FC } from 'react'; import { Main } from '@/app/ui/Main'; - -import { authConfig, myAuth } from "@/app/lib/auth"; -import { SignInButton } from '@/app/ui/SignInButton'; +import { myAuth } from "@/app/lib/auth"; import Image from 'next/image'; import { getTranslations, getLocale } from "next-intl/server"; import isWebview from "is-ua-webview"; import { headers } from 'next/headers'; import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; -import Link from 'next/link'; -import { MultiParagraphText } from '../ui/MultiParagrpahText'; +import { paragraphFormatFactory } from '../lib/paragraphFormatFactory'; +import { getAuthProviders } from '../lib/getProviders'; +import { EnterOrSignInButton } from '../ui/EnterOrSignInButton'; -type Provider = { - id: string; - name: string; - type: string; - style: { - logo: string; - bg: string; - text: string; - }; -}; +const h1ClassName = "text-3xl font-bold max-w-[38rem] mx-auto text-neutral-50"; +const h2ClassName = h1ClassName + " mt-8"; -function getProviders(): Provider[] { - const providerKeys: (keyof Provider)[] = ["id", "name", "type", "style"]; - return authConfig.providers.map((provider) => - getKeyValuesFromObject(provider, providerKeys) - ); -} +const Page: FC = async () => { -function getKeyValuesFromObject(obj: any, keys: (keyof T)[]): T { - return keys.reduce((acc, key) => { - if (obj[key]) { - acc[key] = obj[key]; - } - return acc; - }, {} as T); -} - -const Page:FC = async () => { - - const session = await myAuth(); const locale = await getLocale(); - const providers = await getProviders(); - const t = await getTranslations("login-page"); - // get userAgent from NextJS + const paragraphFormat = paragraphFormatFactory(locale); + const t = await getTranslations("login-page"); + const session = await myAuth(); + const providers = getAuthProviders(); + + // get userAgent from NextJS const headersList = headers(); const userAgent = headersList.get("user-agent") as string; const insideWebeview = isWebview(userAgent); - return ( + return (
-

- {t("main-card.title-1")} - {t("main-card.title-2")} - {t("main-card.title-3")} +

+ {t.rich("main-card.title", paragraphFormat)}

- {t.rich("main-card.text-1", { - strong: (chunks) => {chunks}, - p: (chunks) =>

{chunks}

- })} + {t.rich("main-card.text", paragraphFormat)} + {t("main-card.image-alt")} - Man burried under bills - - Robot sortira papire - { - t("main-card.text-2").split("\n").map((line, index) => ( -

{line}

- )) - } - - - { - session ? ( - - {t("main-card.cta-try-it-for-free")} - - ) : ( - Object.values(providers).map((provider) => ( -
- -
- )) - ) - } - + { // Google will refuse OAuth signin if it's inside a webview (i.e. Facebook) @@ -99,38 +46,21 @@ const Page:FC = async () => {
- { - t.rich("main-card.in-app-browser-warning", { - br: () =>
, - strong: (chunks:ReactNode) => {chunks}, - hint: (chunks:ReactNode) => {chunks} - }) - } + {t.rich("main-card.in-app-browser-warning", paragraphFormat)}
} +

{t.rich("card-1.title", paragraphFormat)}

+ {t.rich("card-1.text", paragraphFormat)} + {t("card-1.image-alt")} - man-burried-under-paper.png +

{t.rich("card-2.title", paragraphFormat)}

+ {t.rich("card-2.text", paragraphFormat)} + {t.rich("card-2.text", paragraphFormat, {})} - + -

{t("card-1.title")}

-

{t("card-1.text")}

- -

{t("card-2.title")}

-

{t("card-2.text")}

- Boje označavaju status računa - -

{t("card-3.title")}

-

{t("card-3.text")}

-
); } diff --git a/app/[locale]/policy/page.tsx b/app/[locale]/privacy-policy/page.tsx similarity index 100% rename from app/[locale]/policy/page.tsx rename to app/[locale]/privacy-policy/page.tsx diff --git a/app/[locale]/terms/page.tsx b/app/[locale]/terms-of-service/page.tsx similarity index 100% rename from app/[locale]/terms/page.tsx rename to app/[locale]/terms-of-service/page.tsx diff --git a/app/lib/getProviders.ts b/app/lib/getProviders.ts new file mode 100644 index 0000000..9b8994c --- /dev/null +++ b/app/lib/getProviders.ts @@ -0,0 +1,28 @@ +import { authConfig } from "./auth"; + +export type AuthProvider = { + id: string; + name: string; + type: string; + style: { + logo: string; + bg: string; + text: string; + }; +}; + +export function getAuthProviders(): AuthProvider[] { + const providerKeys: (keyof AuthProvider)[] = ["id", "name", "type", "style"]; + return authConfig.providers.map((provider) => + getKeyValuesFromObject(provider, providerKeys) + ); +} + +export function getKeyValuesFromObject(obj: any, keys: (keyof T)[]): T { + return keys.reduce((acc, key) => { + if (obj[key]) { + acc[key] = obj[key]; + } + return acc; + }, {} as T); +} \ No newline at end of file diff --git a/app/lib/paragraphFormatFactory.tsx b/app/lib/paragraphFormatFactory.tsx new file mode 100644 index 0000000..65f027e --- /dev/null +++ b/app/lib/paragraphFormatFactory.tsx @@ -0,0 +1,13 @@ +import Link from "next/link"; +import { ReactNode } from "react" + +export const paragraphFormatFactory = (locale: string) => ({ + strong: (chunks: ReactNode) => {chunks}, + bold: (chunks: ReactNode) => {chunks}, + indigo: (chunks: ReactNode) => {chunks} , + p: (chunks: ReactNode) =>

{chunks}

, + disclaimer: (chunks: ReactNode) =>

{chunks}

, + hint: (chunks: ReactNode) => {chunks}, + linkTermsOfService: (chunks: ReactNode) => {chunks}, + linkPrivacyPolicy: (chunks: ReactNode) => {chunks} +}); \ No newline at end of file diff --git a/app/ui/EnterOrSignInButton.tsx b/app/ui/EnterOrSignInButton.tsx new file mode 100644 index 0000000..aa31a44 --- /dev/null +++ b/app/ui/EnterOrSignInButton.tsx @@ -0,0 +1,38 @@ +import { FC } from 'react'; + +import { SignInButton } from '@/app/ui/SignInButton'; +import Image from 'next/image'; +import { getTranslations } from "next-intl/server"; +import Link from 'next/link'; +import { paragraphFormatFactory } from '../lib/paragraphFormatFactory'; +import { AuthProvider } from '../lib/getProviders'; + +export const EnterOrSignInButton: FC<{ session: any, locale: string, providers: AuthProvider[] }> = async ({ session, locale, providers }) => { + const paragraphFormat = paragraphFormatFactory(locale); + + const t = await getTranslations("login-page"); + + return ( + <> + + { + session ? ( + + logo + {t("main-card.go-to-app")} + + ) : ( + Object.values(providers).map((provider) => ( +
+ +
+ )) + ) + } + + {t.rich("disclaimer", paragraphFormat)} + ); +}; \ No newline at end of file diff --git a/app/ui/PageFooter.tsx b/app/ui/PageFooter.tsx index cd776d3..4c251f7 100644 --- a/app/ui/PageFooter.tsx +++ b/app/ui/PageFooter.tsx @@ -2,10 +2,12 @@ import Image from "next/image"; import Link from "next/link"; import React from "react"; import { useTranslations } from "next-intl"; +import { getLocale } from "next-intl/server"; -export const PageFooter: React.FC = () => { +export const PageFooter: React.FC = async () => { const t = useTranslations("PageFooter"); + const locale = await getLocale(); return(
@@ -17,8 +19,8 @@ export const PageFooter: React.FC = () => {

{t('app-description')}

{t('links.home')} - {t('links.privacy-policy')} - {t('links.terms-of-service')} + {t('links.privacy-policy')} + {t('links.terms-of-service')}
documents diff --git a/messages/en.json b/messages/en.json index d38caeb..9315f60 100644 --- a/messages/en.json +++ b/messages/en.json @@ -18,9 +18,7 @@ }, "login-page": { "main-card": { - "title-1": "Which bills are due?", - "title-2": "Which are payed?", - "title-3": "How much are my expenses?", + "title": "Bill management made easy for landlords", "text-1": "These are the questions this simple and free app will help you with ...", "text-2": "... try it & use it completly free!", "go-to-app": "Go to the App", diff --git a/messages/hr.json b/messages/hr.json index bbc62a2..bfad460 100644 --- a/messages/hr.json +++ b/messages/hr.json @@ -18,40 +18,29 @@ }, "login-page": { "main-card": { - "title-1": "Jednostavno ", - "title-2": "upravljanje režijama", - "title-3": "za iznajmljivače", - "text-1": "Iznajmljujete stan ili kuću? Teško vam je pratiti koji računi su stigli, koje ste poslali podstanarima, koji su plaćeni? Ne znate kako organizirati sve te papire i datoteke na računalu? Niste jedini!", - "text-2": "Režije.app je tu da vam pomogne! Pustite da vam ovaj besplatni alat pomogne u upravljanju režijama za sve vaše nekretnine na jednom mjestu. Zaboravite na papirnate račune i zbrku u papirima - sada sve možete pratiti digitalno, brzo i efikasno.", - "text-3": "Pratite i naplatite troškove režija bez muke. Ova web aplikacija pomaže najmodavcima organizirati mjesečne račune za stanove i kuće koje iznajmljuju.\nPošaljite podstanaru sve režije digitalno, pratite u stvarnom vremenu koje su plaćene, a koje čekaju uplatu, te pojednostavite si financijsko upravljanje nekretninama.\nUštedite vrijeme uz automatske podsjetnike i arhivu računa - i to potpuno besplatno.", - "cta-try-it-for-free": "Isprobaj besplatno", + "title": "Upravljanje režijama za najmodavce", + "text": "

Svima koji imaju rentaju stan ili kuću, najdraži trenutak je kada podstanar plati najam. Vođenje režija međutim je mrzak posao.

Računi kapaju jedan po jedan, papiri se gomilaju, treba ih razvrstati, pratiti što je stiglo, što je plaćeno, a što nije...

Slijedi prikupljanje i slanje računa podstanaru, vođenje evidencije o tome je li platio ... dosadan posao koji traži preciznost.

", "go-to-app": "Uđi u Aplikaciju", - "in-app-browser-warning": "UPOZORENJE!

Detektirali smo da je web stranica otvorena u in-app pregledniku. To može dovesti do probleme u radu ove web aplikacije. Molimo otvori web aplikaciju u normalnom web pregledniku (rezije.app) 😉", + "in-app-browser-warning": "UPOZORENJE! Detektirali smo da je web stranica otvorena u in-app pregledniku. To može dovesti do probleme u radu ove web aplikacije. Molimo otvori web aplikaciju u normalnom web pregledniku (rezije.app) 😉", + "image-url": "/man-burried-under-paper.png", + "image-alt": "Čovjek zatrpan papirima", "video-url": "/welcome-demo-vp9-25fps-1500bps.webm", - "image-url": "/hero.png", "video-title": "Demo osnovnih koraka u aplikaciji" }, "card-1": { - "title": "Prijenos režija u idući mjesec", - "text": "Sve tvoje nekretnine i pripadajuće režije se automatski prenose u idući mjesec, tako da ne moraš svaki mjesec ponovno unositi iste podatke.", + "title": "Može li bolje?", + "text": "

Imate sreće - režije.app je besplatni alat je izrađen da rješava upravo navedene probleme!

Ovaj alat će vam omogućiti laku i preglednu evidenciju dospjelih i plaćenih računa. Sve digitalno, efikasno i pedantno!

Uz to ovaj alat nudi moogućnost automatskog slanja mjesečnog obračuna podstanarima, koji uključuje bar koda za brzo plaćanje najamnine i režija na vaš IBAN ili Revolute.

", "video-url": "/kopiranje-mjeseca-demo.webm", - "image-url": "/status-color-demo.png", + "image-url": "/robot-sorting-papers.png", + "image-alt": "Robot sortira papire", "video-title": "Demo kopiranja mjeseca" }, "card-2": { - "title": "Boja signalizira status", - "text": "Jednim pogledom možete vidjeti koji računi su plaćeni, a koji nisu. U tome vam pomaže boja koja označava status računa.", - "image-url": "/bar-code-demo.png", - "image-alt": "Boje označavaju status računa" + "title": "Što mi treba za početak?", + "text": "

Ne morate popunjavati formulate za registraciju, ni potvrđivati svoju email adresu.

Dovoljan je samo Gmail račun za prijavu i možete odmah početi koristi alat - sjedi i vozi, ključ u ruke!

" }, - "card-3": { - "title": "Prikaz bar koda za plaćanje", - "text": "Ako priloženi dokument sadrži 2D barkod, on se automatski izvlači i prikazuje na stranici, tako da ga možete skenirati bez otvaranja PDF dokumenta.", - "video-url": "/bar-code-demo.webm", - "image-url": "/bar-code-demo.png", - "video-title": "Demo osnovnih koraka u aplikaciji" - }, - "sign-in-button": "Prijavi se pomoću" + "sign-in-button": "Prijavi se pomoću", + "disclaimer": "Napomena: činom prijave u ovu web aplikaciju prihvaćate Uvjete korištenja i Pravila privatnosti." }, "home-page": { "add-location-button": {