☑️ Fixes typescript failures

Author: flov

pages/reset_password.tsx

@@ -1,9 +1,10 @@
 import axios from 'axios';
-import { Alert, Button, Label, TextInput } from 'flowbite-react';
+import { Alert, Button, TextInput } from 'flowbite-react';
 import { Field, Form, Formik, FormikValues } from 'formik';
 import { GetServerSideProps, NextPage } from 'next';
 import { useRouter } from 'next/router';
 import React, { useState } from 'react';
+import { useToasts } from '../src/components/contexts/ToastContext';
 import { API_URL } from '../src/config';
 import { showErrors } from '../src/utils/viewHelpers';
 
@@ -27,6 +28,7 @@ export const getServerSideProps: GetServerSideProps = async ({ query }) => {
 const Reset: NextPage<{ token: string }> = ({ token }) => {
   const [errors, setErrors] = useState();
   const router = useRouter();
+  const { addToast } = useToasts();
 
   return (
     <section className="bg-gray-50 dark:bg-gray-900">
@@ -38,10 +40,15 @@ const Reset: NextPage<{ token: string }> = ({ token }) => {
               onSubmit={(values) => {
                 axios
                   .put(`${API_URL}/users/password`, { user: { ...values } })
-                  .then((res) => {
+                  .then(() => {
                     router.push('/login');
                   })
                   .catch((error) => {
+                    addToast(
+                      error?.response?.data?.toString() ||
+                        'Something went wrong'
+                    );
+
                     setErrors(error?.response?.data);
                   });
               }}

pages/trips/[id]/edit.tsx

@@ -157,6 +157,7 @@ const ShowTrip: NextPage<{ trip: Trip; google: GoogleAPI }> = ({
                           experience: ride.experience,
                           tag_list: ride.tags.join(', '),
                           youtube: ride.youtube,
+                          photo: ride.photo,
                           photo_caption: ride.photo_caption,
                         }}
                         onSubmit={(values, { setSubmitting }) => {

pages/trips/index.tsx

@@ -5,7 +5,6 @@ import OverlayContainer from '../../src/components/OverlayContainer';
 import OverlayBubble from '../../src/components/OverlayBubble';
 import { Trip } from '../../src/types';
 import { ListTrips } from '../../src/components/ListTrips';
-import { PuffLoader } from 'react-spinners';
 import { getTripsWithQuery } from '../../src/db/trips';
 import LoadingContainer from '../../src/components/LoadingContainer';
 import { AxiosResponse } from 'axios';

pages/trips/new.tsx

@@ -84,7 +84,7 @@ const New: NextPage<{ google: GoogleAPI; ipLocation: IpLocation }> = ({
     const payload = {
       trip: values,
     };
-    const t = createTrip(payload)
+    createTrip(payload)
       .then((res) => {
         router.push(`/trips/${res.data.id}/edit`);
         return res.data;

src/components/TripCard.tsx

@@ -82,13 +82,13 @@ const TripCard: FC<{ map?: google.maps.Map | null; trip: Trip }> = ({
         </div>
 
         <div className="flex items-center justify-between mb-2 align gap-2">
-          <Link href={`/trips/${trip.id}`}>
+          <Link href={`/trips/${trip.to_param}`}>
             <a>
               From {trip.origin?.city} to {trip.destination?.city}
             </a>
           </Link>
           {currentUser && currentUser.username === trip.user.username && (
-            <Link href={`/trips/${trip.id}/edit`} passHref>
+            <Link href={`/trips/${trip.to_param}/edit`} passHref>
               <Button size="xs">Edit</Button>
             </Link>
           )}
@@ -145,7 +145,7 @@ const TripCard: FC<{ map?: google.maps.Map | null; trip: Trip }> = ({
               </>
             )}
           </div>
-          <Link href={`/trips/${trip.id}`}>
+          <Link href={`/trips/${trip.to_param}`}>
             <a className="inline-flex items-center font-medium no-underline text-primary-600 dark:text-primary-500 hover:underline">
               Read more
               <RightArrow />

src/types/Trip.ts

@@ -14,6 +14,7 @@ export type Timestamp = { seconds: number; nanoseconds: number };
 
 export type Trip = {
   id: number | string;
+  to_param: string;
   arrival: Date;
   departure: Date;
   created_at: Date;

src/utils/index.ts

@@ -119,18 +119,3 @@ export const secondsToHumanReadable = (seconds: number) => {
   if (minutes) array.push(`${minutes}m`);
   return array.join(' ');
 };
-
-export const tripUrl = (trip: Trip) => {
-  const from = trip.origin.city
-    ? trip.origin.city
-    : trip.origin.name
-    ? trip.origin.name
-    : `${trip.origin.lat},${trip.destination.lng}`;
-  const to = trip.destination.city
-    ? trip.destination.city
-    : trip.destination.name
-    ? trip.destination.name
-    : `${trip.destination.lat},${trip.destination.lng}`;
-
-  return `/trips/${trip.id}-hitchhike-from-${from}-to-${to}`;
-};

src/utils/viewHelpers.tsx

@@ -161,15 +161,19 @@ export const experiencesForProfile = (experiences: ExperiencesRecord) => {
 };
 
 export const showErrors = (errors: Record<string, string[]> | string) => {
-  if (typeof errors === 'string') return errors;
-  if (Object.keys(errors).length === 0) return errors;
-  return Object.keys(errors).map((key) => (
-    <ul key={key}>
-      <li>
-        {key}: {errors[key]?.join(' ')}{' '}
-      </li>
-    </ul>
-  ));
+  if (typeof errors === 'string') return <>errors</>;
+  if (Object.keys(errors).length === 0) return null;
+  return (
+    <>
+      {Object.keys(errors).map((key) => (
+        <ul key={key}>
+          <li>
+            {key}: {errors[key]?.join(' ')}{' '}
+          </li>
+        </ul>
+      ))}
+    </>
+  );
 };
 
 export const showVehiclesForRides = (rides: Ride[]) =>