update prettier

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "printWidth": 100,
+  "printWidth": 75,
   "tabWidth": 2,
   "useTabs": false,
   "semi": true,

app/api/favorites/[listingId]/route.ts

@@ -7,7 +7,10 @@ interface IParams {
   listingId?: string;
 }
 
-export async function POST(request: Request, { params }: { params: IParams }) {
+export async function POST(
+  request: Request,
+  { params }: { params: IParams }
+) {
   const currentUser = await getCurrentUser();
 
   if (!currentUser) {
@@ -36,7 +39,10 @@ export async function POST(request: Request, { params }: { params: IParams }) {
   return NextResponse.json(user);
 }
 
-export async function DELETE(request: Request, { params }: { params: IParams }) {
+export async function DELETE(
+  request: Request,
+  { params }: { params: IParams }
+) {
   const currentUser = await getCurrentUser();
 
   if (!currentUser) {

app/api/reservations/[reservationId]/route.ts

@@ -6,7 +6,10 @@ interface IParams {
   reservationId?: string;
 }
 
-export async function DELETE(request: Request, { params }: { params: IParams }) {
+export async function DELETE(
+  request: Request,
+  { params }: { params: IParams }
+) {
   const currentUser = await getCurrentUser();
 
   if (!currentUser) {
@@ -22,7 +25,10 @@ export async function DELETE(request: Request, { params }: { params: IParams })
   const reservation = await prisma.reservation.deleteMany({
     where: {
       id: reservationId,
-      OR: [{ userId: currentUser.id }, { listing: { userId: currentUser.id } }]
+      OR: [
+        { userId: currentUser.id },
+        { listing: { userId: currentUser.id } }
+      ]
     }
   });
 

app/listings/[listingId]/page.tsx

@@ -17,7 +17,13 @@ const ListingPage = async ({ params }: { params: IParams }) => {
     return <EmptyState />;
   }
 
-  return <ListingClient listing={listing} reservations={reservations} currentUser={currentUser} />;
+  return (
+    <ListingClient
+      listing={listing}
+      reservations={reservations}
+      currentUser={currentUser}
+    />
+  );
 };
 
 export default ListingPage;

app/page.tsx

@@ -27,7 +27,13 @@ export default async function Home() {
         "
       >
         {listings.map((listing: any) => {
-          return <ListingCard key={listing.id} data={listing} currentUser={currentUser} />;
+          return (
+            <ListingCard
+              key={listing.id}
+              data={listing}
+              currentUser={currentUser}
+            />
+          );
         })}
       </div>
     </Container>

app/reservations/ReservationsClient.tsx

@@ -14,7 +14,10 @@ interface ReservationsClientProps {
   currentUser?: SafeUser | null;
 }
 
-const ReservationsClient: React.FC<ReservationsClientProps> = ({ reservations, currentUser }) => {
+const ReservationsClient: React.FC<ReservationsClientProps> = ({
+  reservations,
+  currentUser
+}) => {
   const router = useRouter();
   const [deletingId, setDeletingId] = useState('');
 
@@ -40,7 +43,10 @@ const ReservationsClient: React.FC<ReservationsClientProps> = ({ reservations, c
 
   return (
     <Container>
-      <Heading title="Reservations" subTitle="Bookings on your properties" />
+      <Heading
+        title="Reservations"
+        subTitle="Bookings on your properties"
+      />
       <div
         className="
           mt-10

app/reservations/page.tsx

@@ -23,7 +23,12 @@ const ReservationsPage = async () => {
     );
   }
 
-  return <ReservationsClient reservations={reservations} currentUser={currentUser} />;
+  return (
+    <ReservationsClient
+      reservations={reservations}
+      currentUser={currentUser}
+    />
+  );
 };
 
 export default ReservationsPage;

app/trips/TripsClient.tsx

@@ -14,7 +14,10 @@ interface TripClientProps {
   currentUser?: SafeUser | null;
 }
 
-const TripsClient: React.FC<TripClientProps> = ({ reservations, currentUser }) => {
+const TripsClient: React.FC<TripClientProps> = ({
+  reservations,
+  currentUser
+}) => {
   const router = useRouter();
   const [deletingId, setDeletingId] = useState('');
 
@@ -40,7 +43,10 @@ const TripsClient: React.FC<TripClientProps> = ({ reservations, currentUser }) =
 
   return (
     <Container>
-      <Heading title="Trips" subTitle="Where you've been and where you're going" />
+      <Heading
+        title="Trips"
+        subTitle="Where you've been and where you're going"
+      />
       <div
         className="
           mt-10

app/trips/page.tsx

@@ -16,11 +16,16 @@ const TripsPage = async () => {
 
   if (reservations.length === 0) {
     return (
-      <EmptyState title="No trips found" subTitle="Looks like you havent reserved any trips" />
+      <EmptyState
+        title="No trips found"
+        subTitle="Looks like you havent reserved any trips"
+      />
     );
   }
 
-  return <TripsClient reservations={reservations} currentUser={currentUser} />;
+  return (
+    <TripsClient reservations={reservations} currentUser={currentUser} />
+  );
 };
 
 export default TripsPage;

components/EmptyState.tsx

@@ -31,7 +31,11 @@ const EmptyState: React.FC<EmptyStateProps> = ({
       <Heading center title={title} subTitle={subTitle} />
       <div className="mt-4 w-48">
         {showReset && (
-          <Button outline label="Remove all filters" onClick={() => router.push('/')} />
+          <Button
+            outline
+            label="Remove all filters"
+            onClick={() => router.push('/')}
+          />
         )}
       </div>
     </div>

components/HeartButton.tsx

@@ -9,8 +9,14 @@ interface HeartButtonProps {
   currentUser?: SafeUser | null;
 }
 
-const HeartButton: React.FC<HeartButtonProps> = ({ listingId, currentUser }) => {
-  const { hasFavorited, toggleFavorite } = useFavorite({ listingId, currentUser })
+const HeartButton: React.FC<HeartButtonProps> = ({
+  listingId,
+  currentUser
+}) => {
+  const { hasFavorited, toggleFavorite } = useFavorite({
+    listingId,
+    currentUser
+  });
 
   return (
     <div
@@ -31,7 +37,10 @@ const HeartButton: React.FC<HeartButtonProps> = ({ listingId, currentUser }) =>
          fill-white
         "
       />
-      <AiFillHeart size={24} className={hasFavorited ? 'fill-rose-500' : 'fill-neutral-500/70'} />
+      <AiFillHeart
+        size={24}
+        className={hasFavorited ? 'fill-rose-500' : 'fill-neutral-500/70'}
+      />
     </div>
   );
 };

components/inputs/CategoryInput.tsx

@@ -9,7 +9,12 @@ interface CategoryInputProps {
   onClick: (value: string) => void;
 }
 
-const CategoryInput: React.FC<CategoryInputProps> = ({ icon: Icon, label, selected, onClick }) => {
+const CategoryInput: React.FC<CategoryInputProps> = ({
+  icon: Icon,
+  label,
+  selected,
+  onClick
+}) => {
   return (
     <div
       onClick={() => onClick(label)}

components/inputs/Counter.tsx

@@ -10,7 +10,12 @@ interface CounterProps {
   onChange: (value: number) => void;
 }
 
-const Counter: React.FC<CounterProps> = ({ title, subtitle, value, onChange }) => {
+const Counter: React.FC<CounterProps> = ({
+  title,
+  subtitle,
+  value,
+  onChange
+}) => {
   const onAdd = useCallback(() => {
     onChange(value + 1);
   }, [onChange, value]);

components/inputs/CountrySelect.tsx

@@ -16,7 +16,10 @@ interface CountrySelectProps {
   onChange: (value: CountrySelectValue) => void;
 }
 
-const CountrySelect: React.FC<CountrySelectProps> = ({ value, onChange }) => {
+const CountrySelect: React.FC<CountrySelectProps> = ({
+  value,
+  onChange
+}) => {
   const { getAll } = useCountries();
 
   return (
@@ -31,7 +34,10 @@ const CountrySelect: React.FC<CountrySelectProps> = ({ value, onChange }) => {
           <div className="flex flex-row items-center gap-3">
             <div>{option.flag}</div>
             <div>
-              {option.label}, <span className="ml-1 text-neutral-500">{option.region}</span>
+              {option.label},{' '}
+              <span className="ml-1 text-neutral-500">
+                {option.region}
+              </span>
             </div>
           </div>
         )}

components/inputs/ImageUpload.tsx

@@ -55,7 +55,12 @@ const ImageUpload: React.FC<ImageUploadsProps> = ({ onChange, value }) => {
             <div className="text-lg font-semibold">Click to upload</div>
             {value && (
               <div className="absolute inset-0 h-full w-full">
-                <Image alt="Upload" fill style={{ objectFit: 'cover' }} src={value} />
+                <Image
+                  alt="Upload"
+                  fill
+                  style={{ objectFit: 'cover' }}
+                  src={value}
+                />
               </div>
             )}
           </div>

components/listings/ListingCategory.tsx

@@ -8,7 +8,11 @@ interface ListingCategoryProps {
   description: string;
 }
 
-const ListingCategory: React.FC<ListingCategoryProps> = ({ icon: Icon, label, description }) => {
+const ListingCategory: React.FC<ListingCategoryProps> = ({
+  icon: Icon,
+  label,
+  description
+}) => {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-row items-center gap-4">

components/listings/ListingHead.tsx

@@ -26,7 +26,10 @@ const ListingHead: React.FC<ListingHeadProps> = ({
   const location = getByValue(locationValue);
   return (
     <>
-      <Heading title={title} subTitle={`${location?.region}, ${location?.label}`} />
+      <Heading
+        title={title}
+        subTitle={`${location?.region}, ${location?.label}`}
+      />
       <div
         className="
         relative
@@ -36,7 +39,12 @@ const ListingHead: React.FC<ListingHeadProps> = ({
         rounded-xl
         "
       >
-        <Image alt="Image" src={imageSrc} fill className="w-full object-cover" />
+        <Image
+          alt="Image"
+          src={imageSrc}
+          fill
+          className="w-full object-cover"
+        />
         <div className="absolute right-5 top-5">
           <HeartButton listingId={id} currentUser={currentUser} />
         </div>

components/listings/ListingInfo.tsx

@@ -80,7 +80,9 @@ const ListingInfo: React.FC<ListingInfoProps> = ({
         />
       )}
       <hr />
-      <div className="text-lg font-light text-neutral-500">{description}</div>
+      <div className="text-lg font-light text-neutral-500">
+        {description}
+      </div>
       <hr />
       <Map center={coordinates} />
     </div>