Merge pull request #121 from NikDoe/feature/user-housted-info

app/stays/[stayId]/page.tsx

@@ -1,4 +1,4 @@
-import { PageContainer, ShareButton, ImageContainer, BookingCalendar } from '@/components/common';
+import { PageContainer, ShareButton, ImageContainer, BookingCalendar, UserInfo } from '@/components/common';
 import { FavoriteToggleButton, Rating } from '@/components/mainPages';
 import { StayDetails } from '@/components/mainPages/staysPage';
 import { Separator } from '@/components/ui/separator';
@@ -45,9 +45,14 @@ async function SingleStayPage({ params }: SingleStayPageProps) {
 		beds,
 		bedrooms,
 		baths,
-		guests
+		guests,
+		profile
 	} = stay;
 	const details = { beds, bedrooms, baths, guests };
+	const profileData = {
+		profileImage: profile.profileImage,
+		username: profile.displayName
+	};
 
 	const country = findCountryByCode(countryCode);
 
@@ -72,10 +77,7 @@ async function SingleStayPage({ params }: SingleStayPageProps) {
 			<ImageContainer mainImage={image} name={title} />
 			<section className='lg:grid lg:grid-cols-12 gap-x-12 mt-12'>
 				<div className='lg:col-span-8'>
-					<p className='text-muted-foreground'>
-						размещено
-						<span className='text-foreground'> NikDoe</span>
-					</p>
+					<UserInfo profileData={profileData} />
 					<Separator className='h-[0.5px] my-6' />
 					<StayDetails details={details} />
 				</div>

components/common/UserInfo.tsx

@@ -0,0 +1,35 @@
+import Image from 'next/image';
+
+type UserInfoProps = {
+	profileData: {
+		profileImage: string;
+		username: string;
+	};
+};
+
+function UserInfo({ profileData }: UserInfoProps) {
+	const { profileImage, username } = profileData;
+
+	return (
+		<article className='grid grid-cols-[auto,1fr] gap-4'>
+			<Image
+				src={profileImage}
+				alt={username}
+				width={50}
+				height={50}
+				className='rounded-md w-12 h-12 object-cover'
+			/>
+			<div className='text-muted-foreground'>
+				<p>
+					размещено
+					<span className='font-bold text-foreground'> {username}</span>
+				</p>
+				<p>
+					2 года назад
+				</p>
+			</div>
+		</article>
+	);
+}
+
+export default UserInfo;

components/common/index.ts

@@ -2,4 +2,5 @@ export { default as BreadCrumbs } from './BreadCrumbs';
 export { default as PageContainer } from './PageContainer';
 export { default as ShareButton } from './ShareButton';
 export { default as ImageContainer } from './ImageContainer';
-export { default as BookingCalendar } from './BookingCalendar';
+export { default as BookingCalendar } from './BookingCalendar';
+export { default as UserInfo } from './UserInfo';

components/form/CountriesInput.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { Label } from '@/components/ui/label';
-import { formattedCountries, truncateCountryName } from '@/utils/countries';
+import { formattedCountries } from '@/utils/countries';
+import { formatText } from '@/utils/format';
 import {
 	Select,
 	SelectContent,
@@ -34,7 +35,7 @@ function CountriesInput({ placeholder }: { placeholder?: string }) {
 								key={item.code}
 								value={item.code}
 							>
-								{truncateCountryName(item.name, COUNTRY_NAME_MAX_LENGTH)}
+								{formatText(item.name, COUNTRY_NAME_MAX_LENGTH)}
 							</SelectItem>
 						);
 					})}

components/mainPages/staysPage/StayCard.tsx

@@ -1,11 +1,13 @@
-import { StayCardProps } from '@/utils/types';
 import Link from 'next/link';
 import Image from 'next/image';
-import { formatCurrency } from '@/utils/format';
 import { Separator } from '@/components/ui/separator';
 import StayCardAmenities from './StayCardAmenities';
 import Rating from '../common/Rating';
 
+import { StayCardProps } from '@/utils/types';
+import { STAY_TITLE_MAX_LENGTH } from '@/utils/constants';
+import { formatCurrency, formatText } from '@/utils/format';
+
 type Props = {
 	stay: StayCardProps;
 }
@@ -28,7 +30,7 @@ function StayCard({ stay }: Props) {
 				</div>
 				<div className='p-6'>
 					<h1 className='text-lg font-semibold mb-4'>
-						{stayTitle.substring(0, 25) + '...'}
+						{formatText(stayTitle, STAY_TITLE_MAX_LENGTH)}
 					</h1>
 					<StayCardAmenities cardAmenities={cardAmenities} />
 					<Separator className='h-[0.5px] my-4' />

utils/constants.ts

@@ -9,6 +9,7 @@ export const TEXTAREA_DEFAULT_ROWS_NUMBER = 5;
 
 //CREATE STAY FORM
 export const COUNTRY_NAME_MAX_LENGTH = 34;
+export const STAY_TITLE_MAX_LENGTH = 25;
 export const DEFAULT_ARRAY_LENGTH = 4;
 export const DEFAULT_STAY_PRICE = 100;
 export const COUNTRY_TRANSLATION_LANGUAGE = 'rus';

utils/countries.ts

@@ -1,14 +1,6 @@
 import countries from 'world-countries';
 import { COUNTRY_TRANSLATION_LANGUAGE } from './constants';
 
-export function truncateCountryName(str: string, maxLength: number = 20): string {
-	if (str.length > maxLength) {
-		return str.slice(0, maxLength) + '...';
-	}
-
-	return str;
-}
-
 export const formattedCountries = countries.map((item) => ({
 	code: item.cca2,
 	name: item.translations[COUNTRY_TRANSLATION_LANGUAGE].common,

utils/format.ts

@@ -7,3 +7,11 @@ export const formatCurrency = (amount: number | null) => {
 		maximumFractionDigits: 0,
 	}).format(value);
 };
+
+export const formatText = (str: string, maxLength: number = 20): string => {
+	if (str.length > maxLength) {
+		return str.slice(0, maxLength) + '...';
+	}
+
+	return str;
+};