bbuddy-ui/src/app/[locale]/experts/[expertId]/page.tsx

import React from 'react';
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { Link } from '../../../../navigation';
import { getExpertById, getExpertsList } from '../../../../actions/experts';
import {
    ExpertCard,
    ExpertCertificate,
    ExpertInformation,
    ExpertPractice
} from '../../../../components/Experts/ExpertDetails';
import { Details } from '../../../../types/experts';

export const metadata: Metadata = {
    title: 'Bbuddy - Experts item',
    description: 'Bbuddy desc experts'
};

export async function generateStaticParams({
    params: { locale },
}: { params: { locale: string } }) {
    const result: { locale: string, expertId: string }[] = [];
    const experts = await getExpertsList({
        "themesTagIds": [
            1,2,3,4,5,6,7,8
        ],
        "priceFrom": null,
        "priceTo": null,
        "durationFrom": null,
        "durationTo": null
    }, locale);

    experts?.forEach(({ id }) => {
        result.push({ locale, expertId: id.toString() });
    });

    return result;
}

export default async function ExpertItem({ params: { expertId = '', locale} }: { params: { expertId: string, locale: string } }) {
    if (!expertId) notFound();

    const expert = await getExpertById(expertId, locale);

    const getAssociationLevel = (accLevelId?: number) => {
        if (accLevelId) {
            const [cur] = (expert?.associationLevels || []).filter(({ id }) => id === accLevelId) || [];

            return cur?.name || '';
        }

        return '';
    };

    const getAssociation = (accLevelId?: number) => {
        if (accLevelId) {
            const [curLevel] = (expert?.associationLevels || []).filter(({ id }) => id === accLevelId) || [];
            if (curLevel) {
                const [cur] = (expert?.associations || []).filter(({ id }) => id === curLevel.associationId) || [];
                return cur?.name || '';
            }
        }

        return '';
    };

    const generateDescription = ({ id, title, description, document }: Details) => (
        <div key={id}>
            <h3 className="title-h3">{title}</h3>
            <p className="base-text">{description}</p>
            {document && (
                <div className="sertific">
                    <ExpertCertificate document={document} />
                </div>
            )}
        </div>
    );

    return (
        <div className="b-page">
            <div className="b-inner">
                <div className="b-page__back">
                    <Link href={'/experts' as any} className="btn-back">
                        <img src="/images/arrow-back.svg" className="" alt="" />
                        Back to experts list
                    </Link>
                </div>
                <ExpertCard expert={expert} />
                <ExpertInformation expert={expert} locale={locale} />

                <h2 className="title-h2">Expert Background</h2>
                <p className="base-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
                    malesuada, ligula sem tempor risus, non posuere urna diam a libero.
                </p>
                {expert?.publicCoachDetails?.educations && expert.publicCoachDetails.educations?.map(generateDescription)}
                {expert?.publicCoachDetails?.certificates && expert.publicCoachDetails.certificates.length > 0 && (
                    <div>
                        <h3 className="title-h3">Professional Certification</h3>
                        {expert.publicCoachDetails.certificates?.map((cert) => (
                            <div key={cert.id}>
                                <p className="base-text">
                                    {`${getAssociationLevel(cert?.associationLevelId)} ${getAssociation(cert?.associationLevelId)}`}
                                </p>
                                {cert.document && (
                                    <div className="sertific">
                                        <ExpertCertificate document={cert.document} />
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                )}
                {expert?.publicCoachDetails?.trainings && expert.publicCoachDetails.trainings?.map(generateDescription)}
                {expert?.publicCoachDetails?.mbas && expert.publicCoachDetails.mbas?.map(generateDescription)}
                {expert?.publicCoachDetails?.experiences && expert.publicCoachDetails.experiences?.map(generateDescription)}
                <ExpertPractice expert={expert} />

                <h2 className="title-h2">All Offers by this Expert</h2>
                <div className="offers-list">
                    <div className="card-profile">
                        <div className="card-profile__skills">
                            <div className="skills__list">
                                <div className="skills__list__item">Engineering & Data</div>
                                <div className="skills__list__item">Engineering & Data</div>
                                <div className="skills__list__more">+6</div>
                            </div>
                        </div>
                        <div className="card-profile__title">Senior Software Engineer</div>
                        <div className="card-profile__subtitle">Auth0</div>
                        <div className="card-profile__desc">
                            I have worked across a variety of organizations, lead teams, and delivered quality software
                            for 8 years. In that time I've worked as an independent consultant, at agencies as a team
                            lead, and as a senior engineer at Auth0. I also host a podcast
                            https://anchor.fm/work-in-programming where I break down how …
                        </div>
                        <div className="card-profile__footer">
                            <a href="#">Details
                                <img className="" src="/images/chevron-forward.svg" alt="" />
                            </a>
                        </div>
                    </div>
                    <div className="card-profile">
                        <div className="card-profile__skills">
                            <div className="skills__list">
                                <div className="skills__list__item">Engineering & Data</div>
                                <div className="skills__list__item">Engineering & Data</div>
                                <div className="skills__list__more">+6</div>
                            </div>
                        </div>
                        <div className="card-profile__title">Senior Software Engineer</div>
                        <div className="card-profile__subtitle">Auth0</div>
                        <div className="card-profile__desc">
                            I have worked across a variety of organizations, lead teams, and delivered quality software
                            for 8 years. In that time I've worked as an independent consultant, at agencies as a team
                            lead, and as a senior engineer at Auth0. I also host a podcast
                            https://anchor.fm/work-in-programming where I break down how …
                        </div>
                        <div className="card-profile__footer">
                            <a href="#">Details
                                <img className="" src="/images/chevron-forward.svg" alt="" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};