optimise images, fix user avatar, add year search

Author: alexjs-dev

components/Cards/VehicleCard.js

@@ -1,8 +1,10 @@
 import React, { useState, useRef } from 'react'
 import find from 'lodash/find'
+import head from 'lodash/head'
+import get from 'lodash/get'
 import classNames from 'classnames'
+import { LazyLoadImage } from 'react-lazy-load-image-component'
 import { useTranslation } from 'react-i18next'
-import Image from 'next/image'
 import {
   FiMapPin,
   FiMoreVertical,
@@ -17,6 +19,8 @@ import {
   getVehicleTitle,
   formatVehicleMainLabel,
   formatPriceWithDiscount,
+  parseCloudinaryUrl,
+  placeholderImageUrl,
 } from '~utils/helpers'
 import VehicleCardScreen from './VehicleCardScreen/VehicleCardScreen'
 import HeartAnimation from '~public/animations/heart.json'
@@ -59,7 +63,7 @@ const VehicleCard = ({
   const [overlayActive, setOverlayActive] = useState(false)
   const { isMobile } = useViewport()
   useOutsideClick({ ref, isOpen: overlayActive, setOpen: setOverlayActive })
-  const image = find(images, (image) => image.order === 0)
+  const image = find(images, (image) => image.order === 0) || head(images)
   const { t } = useTranslation()
   const vehicleBodyYear = formatVehicleMainLabel(bodyType, regDate, t, isMobile)
   const vehicleMileage = isMobile ? mileage : formatMillage(mileage, t)
@@ -95,6 +99,7 @@ const VehicleCard = ({
   }
 
   const finalPrice = formatPriceWithDiscount(price, discountPercentage)
+  const imageUrl = parseCloudinaryUrl(get(image, 'url'))
 
   return (
     <div className={styles.container} ref={ref}>
@@ -122,10 +127,11 @@ const VehicleCard = ({
           href={`/listing/${listingId}`}
           className={styles.imageLink}
         >
-          <img
-            src={image?.url || ''}
-            draggable="false"
-            alt={t('vehicle.vehicle')}
+          <LazyLoadImage
+            alt={vehicleTitle}
+            effect="blur"
+            src={imageUrl}
+            placeholderSrc={placeholderImageUrl}
           />
         </BaseButton>
       </div>

components/Cards/VehicleCard.module.scss

@@ -34,6 +34,10 @@
     overflow: hidden;
     border-top-right-radius: 8px;
     .imageLink {
+      span {
+        width: 100%;
+        height: 100%;
+      }
       &:hover {
         img {
           transform: scale(1.1);

components/Image/ImageCarousel.module.scss

@@ -24,6 +24,10 @@
     height: 100%;
     object-fit: cover;
   }
+  > span {
+    width: 100%;
+    height: 100%;
+  }
   .carousel {
     position: absolute;
 
@@ -55,7 +59,10 @@
         color: white;
       }
     }
-
+    span {
+      width: 100%;
+      height: 100%;
+    }
     img {
       border-radius: $border-radius-medium;
       border: 1px solid $color-light-gray;

components/Image/ImageCarousel.tsx

@@ -1,5 +1,8 @@
 import React, { useState } from 'react'
 import { map, orderBy, get } from 'lodash'
+import { useTranslation } from 'react-i18next'
+/* @ts-ignore */
+import { LazyLoadImage } from 'react-lazy-load-image-component'
 import { BaseButton } from '../'
 import { useDispatch } from 'react-redux'
 import useViewport from '../../hooks/useViewport'
@@ -12,6 +15,7 @@ import styles from './ImageCarousel.module.scss'
 import modalTypes from '../../consts/modals'
 
 import ImageType from '../../types/image'
+import { parseCloudinaryUrl, placeholderImageUrl } from '~/utils/helpers'
 
 type Props = {
   images: ImageType[]
@@ -21,7 +25,7 @@ const ImageCarousel: React.FunctionComponent<Props> = ({ images }) => {
   const orderedImages = orderBy(images, (image) => image.order)
   const [activeImage, setActiveImage] = useState(0)
   const { isMobile } = useViewport()
-
+  const { t } = useTranslation()
   const dispatch = useDispatch()
 
   const paginate = () => {
@@ -31,11 +35,13 @@ const ImageCarousel: React.FunctionComponent<Props> = ({ images }) => {
   }
   return (
     <div className={styles.container}>
-      <img
-        src={get(orderedImages, `${activeImage}.url`, '')}
-        alt="Image"
-        draggable="false"
+      <LazyLoadImage
+        placeholderSrc={placeholderImageUrl}
+        src={parseCloudinaryUrl(get(orderedImages, `${activeImage}.url`))}
+        effect="blur"
+        alt={t('vehicle.vehicle')}
       />
+
       {/* @ts-ignore */}
       <button
         className={styles.expandButton}
@@ -50,13 +56,14 @@ const ImageCarousel: React.FunctionComponent<Props> = ({ images }) => {
 
       <div className={styles.carousel}>
         {map(orderedImages, ({ url }, key) => (
-          <img
+          <LazyLoadImage
             key={key}
-            src={url}
+            placeholderSrc={placeholderImageUrl}
+            src={parseCloudinaryUrl(url)}
+            effect="blur"
             className={classNames(activeImage === key && styles.active)}
-            alt="Image"
-            draggable="false"
             onClick={() => setActiveImage(key)}
+            alt={t('vehicle.vehicle')}
           />
         ))}
         {isMobile && (

components/Modals/ImageListModal.module.scss

@@ -3,6 +3,7 @@
 .container {
   display: flex;
   flex-direction: column;
+  min-width: 40vw;
   img {
     width: 100vw;
     height: calc(92vh - 34px);

components/User/Avatar.module.scss

@@ -11,10 +11,10 @@
       height: 44px;
       object-fit: cover;
       border-radius: 50%;
-      margin-right: spacing(1);
     }
   }
   a {
+    margin-left: spacing(1);
     color: $color-primary;
     font-size: $font-size-p;
     font-family: $font-family-secondary;

components/User/Avatar.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
+import { parseCloudinaryUrl } from '~/utils/helpers'
 import { BaseButton } from '../'
 import styles from './Avatar.module.scss'
+import UserAvatar from './UserAvatar'
 
 type Props = {
   title?: string
@@ -15,17 +17,14 @@ const Avatar: React.FunctionComponent<Props> = ({
   username,
   userId,
 }) => {
+  const src = parseCloudinaryUrl(avatarSrc)
+  const hasImageSrc = src && src !== ''
   return (
     <div className={styles.container}>
       {title && <p>{title}</p>}
       <div className={styles.user}>
-        <img
-          src={
-            avatarSrc ||
-            'https://res.cloudinary.com/forautocloud/image/upload/v1614110570/static/Screenshot_2021-02-23_at_22.02.19_bssgk8.png'
-          }
-          alt={username}
-        />
+        {hasImageSrc && <img src={src} alt={username} />}
+        {!hasImageSrc && <UserAvatar username={username} />}
         {/* @ts-ignore */}
         <BaseButton
           label={username}

components/User/UserAvatar.tsx

@@ -6,17 +6,25 @@ import { currentUserSelector } from '../../store/auth/selectors'
 import styles from './UserAvatar.module.scss'
 
 type Props = {
-  username: string
+  username?: string
   fullScreen?: boolean
 }
 
-const UserAvatar:React.FunctionComponent<Props> = ({ username, fullScreen }) => {
+const UserAvatar: React.FunctionComponent<Props> = ({
+  username,
+  fullScreen,
+}) => {
   const currentUser = useSelector(currentUserSelector)
-  const currentFirstName = get(currentUser, 'profile.firstName', '?')
+  const firstName = get(currentUser, 'profile.firstName')
+  const usernameFallback = get(currentUser, 'profile.username')
+  const nameFallback =
+    firstName && firstName !== '' ? firstName : usernameFallback
   return (
-    <div className={classNames(styles.container, fullScreen && styles.fullScreen)}>
+    <div
+      className={classNames(styles.container, fullScreen && styles.fullScreen)}
+    >
       <span>
-        {username ? username.substring(0, 1) : currentFirstName.substring(0, 1)}
+        {username ? username.substring(0, 1) : nameFallback.substring(0, 1)}
       </span>
     </div>
   )

components/VehicleOfTheDay/VehicleOfTheDay.tsx

@@ -131,7 +131,6 @@ const VehicleOfTheDay: React.FunctionComponent<VehicleOfTheDayProps> = ({
       height: '19vw',
     },
   }
-  console.log('votd', listing)
   useEffect(() => {
     setImageMaximized(isMobile)
   }, [isMobile])