handle message throttles

Author: alexjs-dev

.env

@@ -1,2 +1,2 @@
-API_URL=https://forautobackend.herokuapp.com
+API_URL=http://localhost:3030
 ENV=development

components/Cards/VehicleCard.js

@@ -5,13 +5,15 @@ import get from 'lodash/get'
 import classNames from 'classnames'
 import { LazyLoadImage } from 'react-lazy-load-image-component'
 import { useTranslation } from 'react-i18next'
+import { bodyType as bodyTypes } from '~consts/vehicle'
 import {
   FiMapPin,
   FiMoreVertical,
   FiGitPullRequest,
   FiDisc,
 } from 'react-icons/fi'
 import { GiCarWheel, GiGasPump, GiElectric } from 'react-icons/gi'
+import { FiCalendar } from 'react-icons/fi'
 import Lottie from 'lottie-react'
 import { BaseButton, VehicleDetail } from '~components'
 import {
@@ -69,6 +71,7 @@ const VehicleCard = (props) => {
   const image = find(images, (image) => image.order === 0) || head(images)
   const { t } = useTranslation()
   const vehicleBodyYear = formatVehicleMainLabel(bodyType, regDate, t, isMobile)
+  const vehicleBody = t(`vehicle.${bodyTypes[bodyType]}`);
   const vehicleMileage = isMobile ? mileage : formatMillage(mileage, t)
   const heartRef = useRef(null)
   const vehicleTitle = getVehicleTitle({ make, model, power, capacity }, t)
@@ -154,7 +157,7 @@ const VehicleCard = (props) => {
           {vehicleTitle}
         </BaseButton>
         <div className={styles.features}>
-          <VehicleDetail icon={<GiCarWheel />}>{vehicleBodyYear}</VehicleDetail>
+          <VehicleDetail icon={<FiCalendar />}>{vehicleBodyYear}</VehicleDetail>
           <VehicleDetail
             icon={fuel === fuelTypes.electric ? <GiElectric /> : <GiGasPump />}
           >
@@ -167,6 +170,7 @@ const VehicleCard = (props) => {
           <VehicleDetail
             icon={<FiMapPin />}
           >{`${city}, ${countryCode}`}</VehicleDetail>
+            <VehicleDetail mobileOnly icon={<GiCarWheel />}>{vehicleBody}</VehicleDetail>
         </div>
       </div>
       <div className={styles.footer}>

components/Cards/VehicleCard.module.scss

@@ -90,9 +90,9 @@
       // grid-template-rows: repeat(auto-fill, calc(50% - 4px));
       grid-gap: spacing(0.5);
       padding-top: spacing(0.5);
-      > div:last-child {
-        grid-column: 1/3;
-      }
+      // > div:last-child {
+      //   grid-column: 1/3;
+      // }
       > div:nth-child(even) {
         justify-self: flex-end;
       }

components/Carousels/ListingsCarousel.tsx

@@ -25,6 +25,7 @@ type Props = {
   title: string
   type?: 'FEATURED' | 'RECOMMENDED' | 'DEFAULT' | 'CUSTOM'
   loading?: boolean
+  hideOnEmpty?: boolean
   listings?: ListingType[]
 }
 
@@ -33,6 +34,7 @@ const ListingsCarousel: React.FunctionComponent<Props> = ({
   type,
   loading,
   listings,
+  hideOnEmpty,
 }) => {
   const { isMobile } = useViewport()
   const { t } = useTranslation()
@@ -98,6 +100,10 @@ const ListingsCarousel: React.FunctionComponent<Props> = ({
     },
   }
 
+  if (hideOnEmpty && !currentLoading && isEmpty(currentListings)) {
+    return null;
+  }
+
   return (
     <div className={styles.container}>
       <div className={styles.wrapper}>

components/Forms/OfferForm.js

@@ -1,13 +1,16 @@
 import React from 'react'
-import { reduxForm } from 'redux-form'
+import { reduxForm, change } from 'redux-form'
 import { useTranslation } from 'react-i18next'
 import get from 'lodash/get'
 import toNumber from 'lodash/toNumber'
+import { fieldTypes } from '~/utils/formValidators'
 import { useDispatch } from 'react-redux'
 import { Button, Input } from '~components'
 import ChatCreators from '~store/chats/creators'
 import styles from './OfferForm.module.scss'
 
+const form = 'offerForm';
+
 const OfferForm = ({ handleSubmit, listingId, disabled }) => {
   const { t } = useTranslation()
   const dispatch = useDispatch()
@@ -22,6 +25,7 @@ const OfferForm = ({ handleSubmit, listingId, disabled }) => {
           redirect: false,
         })
       )
+      dispatch(change(form, fieldTypes.offer, null))
     }
   }
   return (
@@ -52,7 +56,7 @@ const OfferForm = ({ handleSubmit, listingId, disabled }) => {
 }
 
 const Offer = reduxForm({
-  form: 'offerForm',
+  form,
 })(OfferForm)
 
 export default Offer

components/Vehicle/VehicleDetail.module.scss

@@ -15,9 +15,15 @@
   }
 }
 
+.mobile {
+  display: flex;
+  @media (min-width: $tablet) {
+    display: none;
+  }
+}
+
 .detail {
   display: flex;
-  align-items: center;
   span {
     text-align: left;
     white-space: nowrap;

components/Vehicle/VehicleDetail.tsx

@@ -9,16 +9,18 @@ type Props = {
   title?: any
   children?: any
   className?: string
+  mobileOnly?: boolean
 }
 
 const VehicleDetail: React.FunctionComponent<Props> = ({
   icon,
   title,
   children,
   className,
+  mobileOnly,
 }) => {
   return (
-    <div className={classNames(styles.container, className)}>
+    <div className={classNames(styles.container, className, mobileOnly && styles.mobile)}>
       {title && <h6>{title}</h6>}
       <div className={styles.detail}>
         {icon ? icon : <FiTag />}

i18n/translations/en.json

@@ -11,13 +11,15 @@
     "weakPassword": "🤖 Weak password",
     "invalidMileage": "🔧 Invalid mileage",
     "oops": "🐞 Oops! Something happened",
+    "tooManyRequestsTryAgain": "😔  Notso fast! Try again in a minute",
     "invalidUsername": "😡 Invalid username"
   },
   "snackbar": {
     "welcome": "👋 Welcome",
     "deleteSuccessful": "🗑️ Delete successful!",
     "listingCreated": "🙌 Listing created",
-    "link_copied": "Link copied!"
+    "link_copied": "Link copied!",
+    "offerSent": "Offer sent! 🙌"
   },
   "titles": {
     "vehicle_of_the_day": "Vehicle of the day",

next-env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

next.config.js

@@ -10,6 +10,7 @@ module.exports = withPlugins([withFonts, withSvgr], {
   sassOptions: {
     includePaths: ['./styles'],
   },
+  webpack5: false,
   webpack(config) {
     const tempConfig = config
     return tempConfig