From 6deb48239e55b825dfd505772a87899bc365774b Mon Sep 17 00:00:00 2001 From: Umar Adilov <99314948+adilovcode@users.noreply.github.com> Date: Thu, 1 May 2025 23:25:37 +0500 Subject: [PATCH] Fixed issue with SSR --- src/app/about/page.tsx | 4 +- src/app/api/bonus/info/route.ts | 2 +- .../middlewares/error-handler.middleware.ts | 4 +- src/app/api/pages/about-us/route.ts | 28 --- src/app/api/pages/main/route.ts | 28 --- src/app/api/text/route.ts | 14 -- src/app/layout.tsx | 2 +- src/app/page.tsx | 2 +- src/features/map/ui/gas-station-map.tsx | 2 +- src/features/pages/api/pages.api.ts | 56 +++++- src/pages-templates/login/index.tsx | 171 ++++++++++-------- src/shared/api/taylor-api.ts | 14 ++ src/shared/components/promotion-slider.tsx | 2 +- src/shared/language/api/text-control.api.ts | 23 ++- src/shared/store/root-reducer.ts | 3 + src/widgets/about-page/company-timeline.tsx | 2 +- src/widgets/map-section.tsx | 3 +- src/widgets/partners-section.tsx | 2 +- src/widgets/promotions-section.tsx | 2 +- src/widgets/vacancies-section.tsx | 2 +- 20 files changed, 189 insertions(+), 177 deletions(-) delete mode 100644 src/app/api/pages/about-us/route.ts delete mode 100644 src/app/api/pages/main/route.ts delete mode 100644 src/app/api/text/route.ts create mode 100644 src/shared/api/taylor-api.ts diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 7b72902..778e5c7 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -7,11 +7,11 @@ import { makeStore } from '@/shared/store'; export default async function About() { const store = makeStore(); - const { data, isLoading } = await store.dispatch( + const { data } = await store.dispatch( mainPageApi.endpoints.fetchAboutUsPageContent.initiate(), ); - if (isLoading || !data) return null; + if (!data) return null; return ; } diff --git a/src/app/api/bonus/info/route.ts b/src/app/api/bonus/info/route.ts index efb8011..d7a8178 100644 --- a/src/app/api/bonus/info/route.ts +++ b/src/app/api/bonus/info/route.ts @@ -4,7 +4,7 @@ import oriyoClient from '@/app/api-utlities/utilities/oriyo.client'; import { validationErrorHandler } from '../../middlewares/error-handler.middleware'; -export const routeHandler = async (req: NextRequest) => { +const routeHandler = async (req: NextRequest) => { const bonusTokenData = req.cookies.get('bonus__token'); if (!bonusTokenData) { diff --git a/src/app/api/middlewares/error-handler.middleware.ts b/src/app/api/middlewares/error-handler.middleware.ts index a3046e8..cc02041 100644 --- a/src/app/api/middlewares/error-handler.middleware.ts +++ b/src/app/api/middlewares/error-handler.middleware.ts @@ -2,9 +2,9 @@ import { NextRequest, NextResponse } from 'next/server'; import { ZodError } from 'zod'; export const validationErrorHandler = - (handler: Function) => async (req: NextRequest, res: NextResponse) => { + (handler: Function) => async (req: NextRequest) => { try { - return await handler(req, res); + return await handler(req); } catch (error) { if (error instanceof ZodError) return NextResponse.json({ message: error.format() }, { status: 400 }); diff --git a/src/app/api/pages/about-us/route.ts b/src/app/api/pages/about-us/route.ts deleted file mode 100644 index 31363d9..0000000 --- a/src/app/api/pages/about-us/route.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { - presentHistoryItems, - presentReviews, - presentStations, - presentTeamMembers, -} from '@/app/api-utlities/presenters'; -import { aboutUsPageRequest } from '@/app/api-utlities/requests/about-us-page.request'; -import { requestTaylor } from '@/app/api-utlities/utilities/taylor.client'; - -import { validationErrorHandler } from '../../middlewares/error-handler.middleware'; - -const routeHandler = async () => { - const response = await requestTaylor(aboutUsPageRequest); - - return new Response( - JSON.stringify({ - team: presentTeamMembers(response.data._komanda), - history: presentHistoryItems(response.data._istoriya), - stations: presentStations(response.data._azs), - reviews: presentReviews(response.data._otzyvy), - }), - { - headers: { 'Content-Type': 'application/json' }, - }, - ); -}; - -export const GET = validationErrorHandler(routeHandler); diff --git a/src/app/api/pages/main/route.ts b/src/app/api/pages/main/route.ts deleted file mode 100644 index deb8f1b..0000000 --- a/src/app/api/pages/main/route.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { - presentDiscounts, - presentJobs, - presentPartners, - presentStations, -} from '@/app/api-utlities/presenters'; -import { mainPageRequest } from '@/app/api-utlities/requests/main-page.request'; -import { requestTaylor } from '@/app/api-utlities/utilities/taylor.client'; - -import { validationErrorHandler } from '../../middlewares/error-handler.middleware'; - -const routeHandler = async (request: Request) => { - const response = await requestTaylor(mainPageRequest); - - return new Response( - JSON.stringify({ - partners: presentPartners(response.data._partners), - jobs: presentJobs(response.data._vacancies), - discounts: presentDiscounts(response.data._akcii), - stations: presentStations(response.data._azs), - }), - { - headers: { 'Content-Type': 'application/json' }, - }, - ); -}; - -export const GET = validationErrorHandler(routeHandler); diff --git a/src/app/api/text/route.ts b/src/app/api/text/route.ts deleted file mode 100644 index a5bf3df..0000000 --- a/src/app/api/text/route.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { presentTexts } from '@/app/api-utlities/presenters'; -import { textsRequest } from '@/app/api-utlities/requests/common'; -import { requestTaylor } from '@/app/api-utlities/utilities/taylor.client'; - -export async function GET(request: Request) { - const response = await requestTaylor(textsRequest); - - return new Response( - JSON.stringify(presentTexts(response.data._kontentSajta)), - { - headers: { 'Content-Type': 'application/json' }, - }, - ); -} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 6406af6..a195aa5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -37,7 +37,7 @@ export default async function RootLayout({ className='scroll-smooth' style={{ scrollBehavior: 'smooth' }} > - +
{children} diff --git a/src/app/page.tsx b/src/app/page.tsx index e66b1f8..a340dee 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -15,7 +15,7 @@ import { VacanciesSection } from '@/widgets/vacancies-section'; export default async function Home() { const store = makeStore(); - const { data, isLoading } = await store.dispatch( + const { data, isLoading, error } = await store.dispatch( mainPageApi.endpoints.fetchMainPageContent.initiate(), ); diff --git a/src/features/map/ui/gas-station-map.tsx b/src/features/map/ui/gas-station-map.tsx index 76ce169..5f1357e 100644 --- a/src/features/map/ui/gas-station-map.tsx +++ b/src/features/map/ui/gas-station-map.tsx @@ -10,7 +10,7 @@ import { } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; -import { Stations } from '@/app/api-utlities/@types/main'; +import { Stations } from '@/app/api-utlities/@types'; import { useTextController } from '@/shared/language/hooks/use-text-controller'; import { Badge } from '@/shared/shadcn-ui/badge'; diff --git a/src/features/pages/api/pages.api.ts b/src/features/pages/api/pages.api.ts index e0f4d45..6909d11 100644 --- a/src/features/pages/api/pages.api.ts +++ b/src/features/pages/api/pages.api.ts @@ -1,19 +1,59 @@ +import { jsonToGraphQLQuery } from 'json-to-graphql-query'; + import { AboutUsPageData } from '@/app/api-utlities/@types/about-us'; import { MainPageData } from '@/app/api-utlities/@types/main'; +import { + presentDiscounts, + presentHistoryItems, + presentJobs, + presentPartners, + presentReviews, + presentStations, + presentTeamMembers, +} from '@/app/api-utlities/presenters'; +import { aboutUsPageRequest } from '@/app/api-utlities/requests/about-us-page.request'; +import { mainPageRequest } from '@/app/api-utlities/requests/main-page.request'; -import { baseAPI } from '@/shared/api/base-api'; +import { taylorAPI } from '@/shared/api/taylor-api'; -export const mainPageApi = baseAPI.injectEndpoints({ +export const mainPageApi = taylorAPI.injectEndpoints({ endpoints: (builder) => ({ fetchMainPageContent: builder.query({ - query: () => '/pages/main', + query: () => ({ + url: '', + method: 'POST', + body: { + query: jsonToGraphQLQuery({ query: mainPageRequest }), + }, + }), + + transformResponse: (response: any) => { + return { + partners: presentPartners(response.data._partners), + jobs: presentJobs(response.data._vacancies), + discounts: presentDiscounts(response.data._akcii), + stations: presentStations(response.data._azs), + }; + }, }), - fetchAboutUsPageContent: builder.query({ - query: () => '/pages/about-us', + fetchAboutUsPageContent: builder.mutation({ + query: () => ({ + url: '', + method: 'POST', + body: { + query: jsonToGraphQLQuery({ query: aboutUsPageRequest }), + }, + }), + + transformResponse: (response: any) => { + return { + team: presentTeamMembers(response.data._komanda), + history: presentHistoryItems(response.data._istoriya), + stations: presentStations(response.data._azs), + reviews: presentReviews(response.data._otzyvy), + }; + }, }), }), }); - -export const { useFetchMainPageContentQuery, useFetchAboutUsPageContentQuery } = - mainPageApi; diff --git a/src/pages-templates/login/index.tsx b/src/pages-templates/login/index.tsx index ac51ec6..40c4bb1 100644 --- a/src/pages-templates/login/index.tsx +++ b/src/pages-templates/login/index.tsx @@ -4,6 +4,7 @@ import { deleteCookie, getCookie } from 'cookies-next'; import { Building2, Fuel, User } from 'lucide-react'; import Link from 'next/link'; import { useRouter, useSearchParams } from 'next/navigation'; +import { Suspense } from 'react'; import { LoginForm } from '@/features/auth/login-form'; @@ -16,13 +17,13 @@ import { CardHeader, CardTitle, } from '@/shared/shadcn-ui/card'; +import Container from '@/shared/shadcn-ui/conteiner'; import { Tabs, TabsContent, TabsList, TabsTrigger, } from '@/shared/shadcn-ui/tabs'; -import Container from '@/shared/shadcn-ui/conteiner'; const tabs = [ { @@ -41,16 +42,97 @@ const tabs = [ }, ]; -export default function LoginPage() { +function LoginPageTabs() { const { t } = useTextController(); const router = useRouter(); const searchParams = useSearchParams(); + const defaultTab = searchParams.get('tab') || 'bonus'; const handleTabChange = (tabType: string) => { - router.push(`?tab=${tabType}`, undefined, { shallow: true }); + router.push(`?tab=${tabType}`, undefined); }; + return ( + + + {tabs.map((tab) => { + return ( + + {t(tab.label)} + + ); + })} + + + {tabs.map((tab) => { + const tabCookieName = `${tab.type}__token`; + + const authenticationCookie = getCookie(tabCookieName); + + if (authenticationCookie) { + return ( + + + + {t(tab.title)} + + + + + + + + + + ); + } + + return ( + + + + {t(tab.title)} + {t(tab.description)} + + + + + + + ); + })} + + ); +} + +export default function LoginPage() { + const { t } = useTextController(); + return (
@@ -67,86 +149,17 @@ export default function LoginPage() {
- - - {tabs.map((tab) => { - return ( - - {t(tab.label)} - - ); - })} - - - {tabs.map((tab) => { - const tabCookieName = `${tab.type}__token`; - - const authenticationCookie = getCookie(tabCookieName); - - if (authenticationCookie) { - return ( - - - - {t(tab.title)} - - - - - - - - - - ); - } - - return ( - - - - {t(tab.title)} - {t(tab.description)} - - - - - - - ); - })} - + + +

{t('auth.loginIssues')}{' '} - + {t('auth.contactLink')}

diff --git a/src/shared/api/taylor-api.ts b/src/shared/api/taylor-api.ts new file mode 100644 index 0000000..200a98c --- /dev/null +++ b/src/shared/api/taylor-api.ts @@ -0,0 +1,14 @@ +import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'; + +const baseQuery = fetchBaseQuery({ + baseUrl: process.env.TAYLOR_API_ENDPOINT, + headers: { + Authorization: process.env.TAYLOR_API_TOKEN || '', + }, +}); + +export const taylorAPI = createApi({ + reducerPath: 'taylorAPI', + baseQuery, + endpoints: () => ({}), +}); diff --git a/src/shared/components/promotion-slider.tsx b/src/shared/components/promotion-slider.tsx index fabe4be..06a75f7 100644 --- a/src/shared/components/promotion-slider.tsx +++ b/src/shared/components/promotion-slider.tsx @@ -5,7 +5,7 @@ import Image from 'next/image'; import Link from 'next/link'; import { useEffect, useState } from 'react'; -import { Discounts } from '@/app/api-utlities/@types/main'; +import { Discounts } from '@/app/api-utlities/@types'; import { useTextController } from '@/shared/language/hooks/use-text-controller'; import { Button } from '@/shared/shadcn-ui/button'; diff --git a/src/shared/language/api/text-control.api.ts b/src/shared/language/api/text-control.api.ts index 1fe2b26..dcbce86 100644 --- a/src/shared/language/api/text-control.api.ts +++ b/src/shared/language/api/text-control.api.ts @@ -1,12 +1,25 @@ -import { baseAPI } from '@/shared/api/base-api'; +import { jsonToGraphQLQuery } from 'json-to-graphql-query'; + +import { presentTexts } from '@/app/api-utlities/presenters'; +import { textsRequest } from '@/app/api-utlities/requests/common'; + +import { taylorAPI } from '@/shared/api/taylor-api'; import { TextItem } from '@/shared/types/text.types'; -export const textControlApi = baseAPI.injectEndpoints({ +export const textControlApi = taylorAPI.injectEndpoints({ endpoints: (builder) => ({ fetchText: builder.query({ - query: () => '/text', + query: () => ({ + url: '', + method: 'POST', + body: { + query: jsonToGraphQLQuery({ query: textsRequest }), + }, + }), + + transformResponse: (response: any) => { + return presentTexts(response.data._kontentSajta); + }, }), }), }); - -export const { useFetchTextQuery } = textControlApi; diff --git a/src/shared/store/root-reducer.ts b/src/shared/store/root-reducer.ts index 1b1a8cd..080aa28 100644 --- a/src/shared/store/root-reducer.ts +++ b/src/shared/store/root-reducer.ts @@ -2,6 +2,9 @@ import { combineReducers } from '@reduxjs/toolkit'; import { baseAPI } from '@/shared/api/base-api'; +import { taylorAPI } from '../api/taylor-api'; + export const rootReducer = combineReducers({ [baseAPI.reducerPath]: baseAPI.reducer, + [taylorAPI.reducerPath]: taylorAPI.reducer, }); diff --git a/src/widgets/about-page/company-timeline.tsx b/src/widgets/about-page/company-timeline.tsx index 3142061..1dcf68b 100644 --- a/src/widgets/about-page/company-timeline.tsx +++ b/src/widgets/about-page/company-timeline.tsx @@ -3,7 +3,7 @@ import { Calendar, ChevronDown, ChevronUp } from 'lucide-react'; import { useState } from 'react'; -import { HistoryItems } from '@/app/api-utlities/@types/about-us'; +import { HistoryItems } from '@/app/api-utlities/@types'; import { useTextController } from '@/shared/language/hooks/use-text-controller'; import { Button } from '@/shared/shadcn-ui/button'; diff --git a/src/widgets/map-section.tsx b/src/widgets/map-section.tsx index 8bfa798..dc4c187 100644 --- a/src/widgets/map-section.tsx +++ b/src/widgets/map-section.tsx @@ -2,9 +2,8 @@ import { MapPin } from 'lucide-react'; -import { Stations } from '@/app/api-utlities/@types/main'; +import { Stations } from '@/app/api-utlities/@types'; -import { GasStationMap } from '@/features/map'; import { Point } from '@/features/map/model'; import { YandexMap } from '@/features/map/ui/yandex-map'; diff --git a/src/widgets/partners-section.tsx b/src/widgets/partners-section.tsx index dd51fd9..e85119f 100644 --- a/src/widgets/partners-section.tsx +++ b/src/widgets/partners-section.tsx @@ -4,7 +4,7 @@ import { Handshake } from 'lucide-react'; import Image from 'next/image'; import Link from 'next/link'; -import { Partners } from '@/app/api-utlities/@types/main'; +import { Partners } from '@/app/api-utlities/@types'; import { useTextController } from '@/shared/language/hooks/use-text-controller'; import { Button } from '@/shared/shadcn-ui/button'; diff --git a/src/widgets/promotions-section.tsx b/src/widgets/promotions-section.tsx index 39068b2..610b1ea 100644 --- a/src/widgets/promotions-section.tsx +++ b/src/widgets/promotions-section.tsx @@ -2,7 +2,7 @@ import { Gift } from 'lucide-react'; -import { Discounts } from '@/app/api-utlities/@types/main'; +import { Discounts } from '@/app/api-utlities/@types'; import PromotionSlider from '@/shared/components/promotion-slider'; import { useTextController } from '@/shared/language/hooks/use-text-controller'; diff --git a/src/widgets/vacancies-section.tsx b/src/widgets/vacancies-section.tsx index db81ee0..20cd737 100644 --- a/src/widgets/vacancies-section.tsx +++ b/src/widgets/vacancies-section.tsx @@ -2,7 +2,7 @@ import { Briefcase } from 'lucide-react'; -import { Jobs } from '@/app/api-utlities/@types/main'; +import { Jobs } from '@/app/api-utlities/@types'; import { useTextController } from '@/shared/language/hooks/use-text-controller'; import { cn } from '@/shared/lib/utils';