✅ Adds like count to trip show page

Author: flov

src/components/HitchhikingTrip.tsx

@@ -26,6 +26,7 @@ import CountryFlags from './helpers/CountryFlags';
 import ExperienceCircle from './helpers/ExperienceCircle';
 import ExperiencesForRides from './helpers/ExperiencesForRides';
 import LikeRide from './helpers/LikeRide';
+import { NumberOfLikesCount } from './helpers/NumberOfLikesCount';
 
 export function HitchhikingTrip({
   user,
@@ -76,6 +77,7 @@ export function HitchhikingTrip({
         <div className="flex flex-col items-center justify-between text-gray-500">
           <div className="flex items-center mt-2 gap-2 dark:text-white">
             <ExperiencesForRides rides={rides} />
+            <NumberOfLikesCount trip={trip} />
             <CountryFlags trip={trip} />
           </div>
           {rides.length > 0 && (
@@ -107,9 +109,8 @@ export function HitchhikingTrip({
       </div>
       <article>
         <div
-          className={`h-56 sm:h-64 xl:h-76 pb-4 ${
-            ridesWithPhoto.length === 0 && 'hidden'
-          }`}
+          className={`h-56 sm:h-64 xl:h-76 pb-4 ${ridesWithPhoto.length === 0 && 'hidden'
+            }`}
         >
           <Carousel slideInterval={5000} slide={true}>
             {ridesWithPhoto.map(

src/components/helpers/NumberOfLikesCount.tsx

@@ -0,0 +1,19 @@
+import { Trip } from '@/types'
+import { Tooltip } from 'flowbite-react'
+import React, { FC } from 'react'
+import { FaHeart } from 'react-icons/fa'
+
+interface NumberOfLikesCountProps { trip: Trip };
+
+export const NumberOfLikesCount: FC<NumberOfLikesCountProps> = ({ trip }) => {
+  if (trip.likes_count === 0) return null;
+
+  return (
+    <Tooltip content={`Received ${trip.likes_count} likes`}>
+      <div className='relative gap-2 flex items-center'>
+        {trip.likes_count}
+        <FaHeart className='text-red-500' />
+      </div>
+    </Tooltip>
+  )
+}

src/types/Trip.ts

@@ -14,29 +14,30 @@ export type Location = {
 export type Timestamp = { seconds: number; nanoseconds: number };
 
 export type Trip = {
-  id: number | string;
-  to_param: string;
-  arrival: Date;
-  departure: Date;
-  created_at: Date;
-  google_duration?: number;
-  distance?: number;
-  travelling_with: number;
   age_at_trip: number;
+  arrival: Date;
   average_speed: string;
+  center: string;
+  comments: Comment[];
   country_distances: Country[];
-  origin: Location;
+  created_at: Date;
+  departure: Date;
   destination: Location;
+  distance?: number;
+  google_duration?: number;
+  id: number | string;
+  likes_count: number;
+  origin: Location;
   rides: Ride[];
+  to_param: string;
   total_distance: number;
-  center: string;
-  user_id: number;
+  travelling_with: number;
   user: {
     username: string;
     md5_email: string;
     gender: 'male' | 'female' | 'non-binary' | null;
   };
-  comments: Comment[];
+  user_id: number;
 };
 
 export type TripUser = {