♻️ refactor of components

Author: flov

package.json

@@ -24,7 +24,7 @@
     "axios": "^0.27.2",
     "canvas-confetti": "^1.5.1",
     "chart.js": "^3.9.1",
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
     "flowbite": "^1.5.4",
     "flowbite-react": "^0.3.5",
     "formik": "^2.2.9",

pages/hitchhikers/index.tsx

@@ -1,3 +1,4 @@
+import { UserGender } from '@/components/helpers/UserGender';
 import { Pagination, Table } from 'flowbite-react';
 import { GetServerSideProps, NextPage } from 'next';
 import Head from 'next/head';
@@ -12,8 +13,7 @@ import { User } from '../../src/types';
 import { profilePicture } from '../../src/utils';
 import {
   countryFlag,
-  showNumberOfRides,
-  showUserGender,
+  viewNumberOfRides,
   viewNumberOfStories,
   viewNumberOfTrips,
 } from '../../src/utils/viewHelpers';
@@ -48,7 +48,7 @@ const Index: NextPage<{ page: number }> = (props) => {
         query: { page: p },
       },
       undefined,
-      { shallow: true }
+      { shallow: true },
     );
     setPage(p);
     fetchUsers();
@@ -127,9 +127,9 @@ const Index: NextPage<{ page: number }> = (props) => {
                     </Link>
                     <div className="flex items-center">
                       ({user.age}
-                      {showUserGender(user.gender)})
+                      <UserGender gender={user?.gender} />)
                     </div>
-                    {showNumberOfRides(user.number_of_rides)}
+                    {viewNumberOfRides(user.number_of_rides)}
                     {viewNumberOfTrips(user.number_of_trips)}
                     {user.number_of_stories > 0 &&
                       viewNumberOfStories(user.number_of_stories)}

pnpm-lock.yaml

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+
+import Image from 'next/image';
+
+import { User } from '@/types';
+import { profilePicture } from '@/utils';
+
+export const ProfileImage: FC<{ user: User }> = ({ user }) => {
+  return (
+    <Image
+      className="w-24 h-24 rounded-full"
+      width={96}
+      height={96}
+      src={profilePicture(user.md5_email, 96)}
+      alt={`${user?.username}'s profile picture'`}
+    />
+  );
+};

src/components/Hitchhikers/ProfileImage.tsx

@@ -27,6 +27,8 @@ import ExperienceCircle from './helpers/ExperienceCircle';
 import ExperiencesForRides from './helpers/ExperiencesForRides';
 import LikeRide from './helpers/LikeRide';
 import { NumberOfLikesCount } from './helpers/NumberOfLikesCount';
+import { ProfileImage } from './Hitchhikers/ProfileImage';
+import { UserGender } from './helpers/UserGender';
 
 export function HitchhikingTrip({
   user,
@@ -40,7 +42,7 @@ export function HitchhikingTrip({
   const departure = trip.departure;
   const { currentUser } = useAuth();
   const ridesWithPhoto = rides.filter(
-    (ride) => ride?.photo !== null && ride?.photo !== undefined
+    (ride) => ride?.photo !== null && ride?.photo !== undefined,
   );
 
   return (
@@ -54,21 +56,16 @@ export function HitchhikingTrip({
           </div>
         )}
 
-        <Image
-          className="w-24 h-24 rounded-full"
-          width={96}
-          height={96}
-          src={profilePicture(user.md5_email, 96)}
-          alt={`${user?.username}'s profile picture'`}
-        />
+        <ProfileImage user={user} />
+
         <span className="flex items-center mt-2 text-sm text-gray-500 gap-1 dark:text-gray-400">
           <Link
             className="font-semibold text-gray-900 dark:text-white"
             href={`/hitchhikers/${user.username}`}
           >
             {capitalize(user?.username)}
           </Link>
-          {showUserGender(user.gender)}
+          <UserGender gender={user?.gender} />
         </span>
         <span className="flex items-center text-sm text-gray-500 dark:text-gray-400">
           Hitchhiked {moment(departure).fromNow()}
@@ -109,8 +106,9 @@ 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(
@@ -126,7 +124,7 @@ export function HitchhikingTrip({
                       {ride.photo_caption}
                     </p>
                   </div>
-                )
+                ),
             )}
           </Carousel>
         </div>

src/components/HitchhikingTrip.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+
+export const ProfilePicture: FC = () => {
+  return (
+    <>
+      <Image
+        className="w-24 h-24 rounded-full"
+        width={96}
+        height={96}
+        src={profilePicture(user.md5_email, 96)}
+        alt={`${user?.username}'s profile picture'`}
+      />
+    </>
+  );
+};

src/components/ProfilePicture.tsx

@@ -5,7 +5,7 @@ import React, { FC } from 'react';
 import { Trip } from '../../types';
 import { profilePicture } from '../../utils';
 import { timeAgoInWords } from '../../utils/timeAgoInWords';
-import { showUserGender } from '../../utils/viewHelpers';
+import { UserGender } from './UserGender';
 
 const HitchhikedBy: FC<{ trip: Trip }> = ({ trip }) => {
   return (
@@ -19,7 +19,7 @@ const HitchhikedBy: FC<{ trip: Trip }> = ({ trip }) => {
           >
             {trip.user.username}
           </Link>
-          {showUserGender(trip.user.gender)}
+          <UserGender gender={trip.user.gender} />
 
           <Link
             className="flex items-center space-x-2"

src/components/Trips/HitchhikingTrip/index.tsx

@@ -0,0 +1,14 @@
+import { pluralize } from '@/utils';
+import { Tooltip } from 'flowbite-react';
+import React, { FC } from 'react';
+import { FiThumbsUp } from 'react-icons/fi';
+
+export const NumberOfRides: FC<{ ridesSize: number }> = ({ ridesSize }) => {
+  return (
+    <Tooltip content={`${ridesSize} ${pluralize(ridesSize, 'ride')}`}>
+      <div className="flex items-center gap-1">
+        <FiThumbsUp className="inline " /> {ridesSize}
+      </div>
+    </Tooltip>
+  );
+};

src/components/helpers/HitchhikedBy.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { Pagination } from 'flowbite-react';
+
+type PaginationProps = {
+  currentPage: number;
+  layout?: string;
+  onPageChange: (page: number) => void;
+  showIcons?: boolean;
+  totalPages: number;
+  page: number;
+};
+
+export const Pagination: FC<PaginationProps> = ({
+  handlePageChange,
+  totalPages,
+  page,
+}) => {
+  return (
+    <div className="flex justify-center my-4">
+      <Pagination
+        onPageChange={handlePageChange}
+        currentPage={page}
+        showIcons={true}
+        layout="pagination"
+        totalPages={totalPages}
+        page={0}
+      />
+    </div>
+  );
+};

src/components/helpers/NumberOfRides.tsx

@@ -0,0 +1,23 @@
+import { Tooltip } from 'flowbite-react';
+import React, { FC } from 'react';
+import { FaMars, FaMarsStrokeV, FaVenus } from 'react-icons/fa';
+
+export const UserGender: FC<{ gender: string | null; size?: number }> = ({
+  gender,
+  size = 16,
+}) => {
+  if (!gender) return null;
+  return (
+    <Tooltip content={gender}>
+      {gender == 'male' ? (
+        <FaMars className="inline" size={size} />
+      ) : gender == 'female' ? (
+        <FaVenus className="inline" />
+      ) : gender == 'non-binary' ? (
+        <FaMarsStrokeV className="inline" />
+      ) : (
+        <></>
+      )}
+    </Tooltip>
+  );
+};

src/components/helpers/Pagination.tsx

@@ -18,6 +18,7 @@ import {
 } from '../../utils/viewHelpers';
 import { useAuth } from '../contexts/AuthContext';
 import CountryFlagsForProfile from '../helpers/CountryFlagsForProfile';
+import { UserGender } from '../helpers/UserGender';
 
 const ProfileStats: FC<{ profile: Profile }> = ({ profile }) => {
   const createdAt = moment(profile.created_at).format('MMM YYYY');
@@ -26,7 +27,7 @@ const ProfileStats: FC<{ profile: Profile }> = ({ profile }) => {
     <>
       <div className="flex justify-center image-shadow">
         <Image
-          className="rounded-full shadow shadow-lg"
+          className="rounded-full shadow"
           alt="Profile picture"
           width={128}
           height={128}
@@ -35,7 +36,7 @@ const ProfileStats: FC<{ profile: Profile }> = ({ profile }) => {
       </div>
       <div className="flex items-center justify-center mt-4 gap-2">
         {capitalize(profile.username)} {profile.age && `(${profile.age})`}
-        {showUserGender(profile.gender, 20)}
+        <UserGender gender={profile.gender} size={20} />
         {showCountryFlagForUser(profile)}
       </div>
       <div className="flex items-center justify-center text-gray-400 gap-1">

src/components/helpers/UserGender.tsx

@@ -36,7 +36,7 @@ export const fetchIpAddressOfClient = async () => {
 export const fetchLocationFromClient = async () => {
   const ipAddress = await fetchIpAddressOfClient();
   const response = await axios.get(
-    `https://api.ipgeolocation.io/ipgeo?apiKey=${process.env.NEXT_PUBLIC_IPLOCATION}&ip=${ipAddress}`
+    `https://api.ipgeolocation.io/ipgeo?apiKey=${process.env.NEXT_PUBLIC_IPLOCATION}&ip=${ipAddress}`,
   );
   const IpLocation = response.data;
   return IpLocation as IpLocation;
@@ -88,14 +88,14 @@ export const randomConfetti = () => {
 };
 
 export const getDataFromAddressComponents = (
-  address_components: google.maps.GeocoderAddressComponent[] | undefined
+  address_components: google.maps.GeocoderAddressComponent[] | undefined,
 ) => {
   if (!address_components) return {};
   const city = address_components.find((component) =>
-    component.types.includes('locality')
+    component.types.includes('locality'),
   );
   const country = address_components.find((component) =>
-    component.types.includes('country')
+    component.types.includes('country'),
   );
   return {
     city: city ? city.long_name : '',
@@ -126,3 +126,5 @@ export const objectToString = (obj: any) => {
     .map(([key, value]) => `${key}: ${value}`)
     .join(' ');
 };
+
+export * from './timeAgoInWords';

src/components/users/ProfileStats.tsx

@@ -181,14 +181,6 @@ export const showAgeAtTrip = (trip: Trip) => {
   );
 };
 
-export const showNumberOfRides = (ridesLength: number) => (
-  <Tooltip content={`${ridesLength} ${pluralize(ridesLength, 'ride')}`}>
-    <div className="flex items-center gap-1">
-      <FiThumbsUp className="inline " /> {ridesLength}
-    </div>
-  </Tooltip>
-);
-
 export const showHitchhikedKms = (size: number) => (
   <Tooltip content={`${size} hitchhiked kms`}>
     <div className="flex items-center gap-1">

src/utils/index.ts

@@ -4,11 +4,10 @@ test('Test existence', async ({ page }) => {
   await page.goto('http://localhost:3000/login');
   // Expect a title "to contain" a substring.
   await expect(page).toHaveTitle(/Hitchlog - Login/);
-  await page.getByText('Sign up').click();
 
-  // Expects the URL to contain intro.
-  await expect(page).toHaveURL(/.*login/);
-
-  await page.locator('input[name="username"]').fill('username');
+  // Expect to show an error when login fails
   await page.locator('input[name="email"]').fill('[email protected]');
+  await page.locator('input[name="password"]').fill('password');
+  await page.locator('button[type="submit"]').click();
+  await page.waitForSelector('.alert');
 });