listings page

Author: alexjs-dev

components/Cards/VehicleCard.js

@@ -5,6 +5,7 @@ import get from 'lodash/get'
 import classNames from 'classnames'
 import { LazyLoadImage } from 'react-lazy-load-image-component'
 import { useTranslation } from 'react-i18next'
+import { useDispatch, useSelector } from 'react-redux'
 import { bodyType as bodyTypes } from '~consts/vehicle'
 import {
   FiMapPin,
@@ -13,9 +14,11 @@ import {
   FiDisc,
 } from 'react-icons/fi'
 import { GiCarWheel, GiGasPump, GiElectric } from 'react-icons/gi'
+import ListingsCreator from '../../store/listing/creators'
+import { loadingUpdatingMyListing } from '../../store/listing/selectors'
 import { FiCalendar } from 'react-icons/fi'
 import Lottie from 'lottie-react'
-import { BaseButton, VehicleDetail } from '~components'
+import { BaseButton, VehicleDetail, Button } from '~components'
 import {
   formatMillage,
   getVehicleTitle,
@@ -58,20 +61,24 @@ const VehicleCard = (props) => {
     featured,
     recommended,
     images, // handle re-render
+    isSold,
+    isAdmin,
   } = props
 
   const listingId = get(props, 'listingId')
   const power = get(props, 'power')
 
-  const ref = useRef(null)
+  const isUpdatingListing = useSelector(loadingUpdatingMyListing)
 
+  const ref = useRef(null)
+  const dispatch = useDispatch()
   const [overlayActive, setOverlayActive] = useState(false)
   const { isMobile } = useViewport()
   useOutsideClick({ ref, isOpen: overlayActive, setOpen: setOverlayActive })
   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 vehicleBody = t(`vehicle.${bodyTypes[bodyType]}`)
   const vehicleMileage = isMobile ? mileage : formatMillage(mileage, t)
   const heartRef = useRef(null)
   const vehicleTitle = getVehicleTitle({ make, model, power, capacity }, t)
@@ -118,12 +125,14 @@ const VehicleCard = (props) => {
         recommended={recommended}
         visible={!overlayActive}
       />
-      <button
-        className={styles.likeButton}
-        onClick={() => setVehicleFavorite()}
-      >
-        <Lottie {...lottieAnimation} />
-      </button>
+      {!isAdmin && (
+        <button
+          className={styles.likeButton}
+          onClick={() => setVehicleFavorite()}
+        >
+          <Lottie {...lottieAnimation} />
+        </button>
+      )}
       <VehicleCardOverlay
         visible={overlayActive}
         onClose={() => setOverlayActive(false)}
@@ -132,6 +141,7 @@ const VehicleCard = (props) => {
           listingId={listingId}
           price={finalPrice}
           title={vehicleTitle}
+          isAdmin={isAdmin}
         />
       </VehicleCardOverlay>
       <div className={styles.image}>
@@ -155,6 +165,7 @@ const VehicleCard = (props) => {
           href={`/listing/${listingId}`}
         >
           {vehicleTitle}
+          {isSold && <span className={styles.soldChip}>{t('label.sold')}</span>}
         </BaseButton>
         <div className={styles.features}>
           <VehicleDetail icon={<FiCalendar />}>{vehicleBodyYear}</VehicleDetail>
@@ -170,7 +181,9 @@ const VehicleCard = (props) => {
           <VehicleDetail
             icon={<FiMapPin />}
           >{`${city}, ${countryCode}`}</VehicleDetail>
-            <VehicleDetail mobileOnly icon={<GiCarWheel />}>{vehicleBody}</VehicleDetail>
+          <VehicleDetail mobileOnly icon={<GiCarWheel />}>
+            {vehicleBody}
+          </VehicleDetail>
         </div>
       </div>
       <div className={styles.footer}>
@@ -186,6 +199,25 @@ const VehicleCard = (props) => {
           >
             {`${price}€`}
           </span>
+
+          {isAdmin && (
+            <Button
+              type={Button.types.GHOST}
+              color="red"
+              className={styles.soldButton}
+              disabled={isUpdatingListing}
+              onClick={() => {
+                dispatch(
+                  ListingsCreator.updateMyListing({
+                    _id: listingId,
+                    soldAt: isSold ? null : new Date(),
+                  })
+                )
+              }}
+            >
+              {t(isSold ? 'label.available' : 'label.sold')}
+            </Button>
+          )}
         </div>
         <button
           className={styles.moreButton}

components/Cards/VehicleCard.module.scss

@@ -67,6 +67,7 @@
       padding: spacing(1);
     }
     .title {
+      position: relative;
       text-align: left;
       font-family: $font-family-secondary;
       color: $color-black;
@@ -115,6 +116,7 @@
     }
     .prices {
       display: flex;
+      align-items: center;
       .price {
         font-size: $font-size-span;
         font-family: $font-family-secondary;
@@ -130,3 +132,26 @@
     }
   }
 }
+
+.soldChip {
+  background: $color-red;
+  border-radius: $border-radius-small;
+  padding: 0 spacing(0.5);
+  color: $color-white;
+  font-family: $font-family;
+  height: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  font-size: $font-size-s;
+}
+
+.soldButton {
+  min-height: unset;
+  font-size: $font-size-s;
+  padding: spacing(0.5) spacing(1);
+  margin-left: spacing(0.5);
+}

components/Cards/VehicleCardScreen/VehicleCardScreen.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import BaseScreen from './screens/BaseScreen'
 import ChatScreen from './screens/ChatScreen'
 import OfferScreen from './screens/OfferScreen'
+import BaseAdminScreen from './screens/BaseAdminScreen'
 
 const screens = {
   BASE: 'BASE',
@@ -13,18 +14,28 @@ type Props = {
   price?: number
   title: string
   listingId: string
+  isAdmin?: boolean
 }
 
 const VehicleCardScreen: React.FunctionComponent<Props> = ({
   price,
   title,
   listingId,
+  isAdmin,
 }) => {
   const [screen, setScreen] = useState(screens.BASE)
 
   const onChatCancel = () => {
     setScreen(screens.BASE)
   }
+
+  if (isAdmin) {
+    return (
+      <>
+        <BaseAdminScreen listingId={listingId} visible={screen === screens.BASE} />
+      </>
+    )
+  }
   return (
     <>
       <ChatScreen

components/Cards/VehicleCardScreen/screens/BaseAdminScreen.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import classNames from 'classnames'
+import { FiLink2, FiEdit3 } from 'react-icons/fi'
+import { Button } from '~components'
+import { toast } from 'react-toastify'
+import styles from './BaseScreen.module.scss'
+
+const BaseAdminScreen = ({ visible, listingId }) => {
+  const { t } = useTranslation()
+  return (
+    <div
+      className={classNames(styles.overlayContent, visible && styles.visible)}
+    >
+      <Button
+        type={Button.types.GHOST}
+        fluid
+        isInternalLink
+        href={`/listings/${listingId}`}
+        className={styles.overlayButton}
+      >
+        <FiEdit3 />
+        &nbsp;
+        {t('button.edit')}
+      </Button>
+      <Button
+        type={Button.types.GHOST}
+        fluid
+        onClick={() =>
+          toast.success(`Link copied! 😍`, {
+            autoClose: 1800,
+          })
+        }
+        className={styles.overlayButton}
+      >
+        <FiLink2 />
+        &nbsp;
+        {t('button.share')}
+      </Button>
+    </div>
+  )
+}
+
+export default BaseAdminScreen

components/Carousels/ListingsCarousel.module.scss

@@ -1,20 +1,6 @@
 @import 'vars.scss';
 
 
-@keyframes slideTopFadeIn {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  75% {
-    transform: translateY(20%);
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
 
 .container {
   position: relative;
@@ -28,10 +14,6 @@
   @media (min-width: $tablet) {
     min-height: 30vh;
   }
-  article {
-    animation-fill-mode: forwards;
-    animation: slideTopFadeIn 0.3s ease-in;
-  }
 }
 
 .wrapper {

components/Navigation/NavigationDrawer.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { map } from 'lodash'
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
+import useViewport from '~hooks/useViewport'
 import styles from './NavigationDrawer.module.scss'
 import LogoWhite from '~public/logo-white.svg'
 import NavigationContent from './NavigationContent'
@@ -12,6 +13,10 @@ import RussianIcon from '~public/icons/language/ru.svg'
 import { BaseDrawer, BaseButton, LanguageList } from '~components'
 
 const NavigationDrawer = () => {
+  const { isMobile } = useViewport()
+  if (!isMobile) {
+    return null;
+  }
   return (
     <BaseDrawer>
       <div className={styles.drawer}>

i18n/translations/en.json

@@ -18,6 +18,7 @@
     "welcome": "👋 Welcome",
     "deleteSuccessful": "🗑️ Delete successful!",
     "listingCreated": "🙌 Listing created",
+    "listingUpdated": "Listing updated! 🙌",
     "link_copied": "Link copied!",
     "offerSent": "Offer sent! 🙌"
   },
@@ -100,6 +101,8 @@
     "recommended": "Recommended",
     "urgent": "Urgent",
     "phone": "Phone",
+    "sold": "Sold",
+    "available": "Available",
     "firstName": "First name",
     "username": "Username",
     "lastName": "Last name",
@@ -225,6 +228,7 @@
     "signIn": "Sign in",
     "findMore": "Find more",
     "signUp": "Sign up",
+    "edit": "Edit",
     "signUpWithGoogle": "Sign up with Google",
     "signUpWithFacebook": "Sign up with Facebook",
     "signInWithGoogle": "Sign in with Google",

pages/listings/index.tsx

@@ -6,8 +6,8 @@ import {
   myListingsSelector,
   myListingsLoadingSelector,
 } from '../../store/listing/selectors'
-import ListignsCreator from '../../store/listing/creators'
-import { Layout, Loader, VehicleCard } from '../../components'
+import ListingsCreator from '../../store/listing/creators'
+import { Layout, Loader, VehicleCard, Input } from '../../components'
 import { getVehicleCardProps } from '~/utils/helpers'
 
 const ListingsPage = () => {
@@ -16,20 +16,40 @@ const ListingsPage = () => {
   const dispatch = useDispatch()
 
   useEffect(() => {
-    dispatch(ListignsCreator.fetchMyListings())
+    dispatch(ListingsCreator.fetchMyListings())
   }, [])
   return (
-    <Layout background="gray" fullscreen className={styles.container}>
+    <Layout fullscreen className={styles.container}>
       <h1>Listings</h1>
       <div className={styles.listings}>
-        {map(listings, (listing) => (
-          <VehicleCard
-            key={listing._id}
-            {...getVehicleCardProps(listing)}
-            listingId={listing._id}
-          />
-        ))}
-        <Loader loading={loading} />
+        {map(listings, (listing) => {
+          console.log('listing', listing);
+          return (
+            <div key={listing._id} className={styles.listing}>
+              <div className={styles.title}>
+                <h4>BMW 6, 317BNV</h4>
+                <div className={styles.titleDetails}>
+                  <span>Expires in 13 days</span>
+                  <span>Featured until 29.09.2021</span>
+                </div>
+              </div>
+
+              <div className={styles.content}>
+                <form>
+                  {/* @ts-ignore */}
+                  <Input name="price" label="Price" type="number" value={listing.price} />
+                </form>
+                <VehicleCard
+                  {...getVehicleCardProps(listing)}
+                  listingId={listing._id}
+                  isSold={!!listing.soldAt}
+                  isAdmin
+                />
+              </div>
+            </div>
+          )
+        })}
+        <Loader loading={loading} centered />
       </div>
     </Layout>
   )