update listings page

Author: alexjs-dev

components/Cards/VehicleCard.js

@@ -12,13 +12,15 @@ import {
   FiMoreVertical,
   FiGitPullRequest,
   FiDisc,
+  FiEdit3,
+  FiCheck,
+  FiCalendar,
 } 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, Button } from '~components'
+import { BaseButton, VehicleDetail, Button, Input } from '~components'
 import {
   formatMillage,
   getVehicleTitle,
@@ -63,16 +65,16 @@ const VehicleCard = (props) => {
     images, // handle re-render
     isSold,
     isAdmin,
+    formName,
+    onEditCallback
   } = props
 
   const listingId = get(props, 'listingId')
   const power = get(props, 'power')
-
-  const isUpdatingListing = useSelector(loadingUpdatingMyListing)
-
   const ref = useRef(null)
   const dispatch = useDispatch()
   const [overlayActive, setOverlayActive] = useState(false)
+  const [isEditPriceActive, setEditPriceActive] = useState(false)
   const { isMobile } = useViewport()
   useOutsideClick({ ref, isOpen: overlayActive, setOpen: setOverlayActive })
   const image = find(images, (image) => image.order === 0) || head(images)
@@ -117,6 +119,14 @@ const VehicleCard = (props) => {
   const placeHolderSrc = getPlaceholderImageUrl(imageSrc)
   const imageUrl = parseCloudinaryUrl(imageSrc)
 
+  const onEditPrice = (e) => {
+    e.preventDefault()
+    setEditPriceActive((prev) => !prev)
+    if (onEditCallback) {
+      onEditCallback();
+    }
+  }
+
   return (
     <article className={styles.container} ref={ref}>
       <VehicleCardRibbons
@@ -188,35 +198,31 @@ const VehicleCard = (props) => {
       </div>
       <div className={styles.footer}>
         <div className={styles.prices}>
-          {discountPercentage && (
-            <span className={styles.price}>{`${finalPrice}€`}</span>
-          )}
-          <span
-            className={classNames(
-              styles.price,
-              discountPercentage && styles.hasDiscount
-            )}
-          >
-            {`${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(),
-                  })
-                )
-              }}
+        {isAdmin && formName && (
+            <BaseButton
+              className={styles.editPriceButton}
+              onClick={onEditPrice}
             >
-              {t(isSold ? 'label.available' : 'label.sold')}
-            </Button>
+              {isEditPriceActive ? <FiCheck /> : <FiEdit3 />}
+            </BaseButton>
+          )}
+          {isAdmin && formName && isEditPriceActive ? (
+            <Input name={`${listingId}-price`} className={styles.simpleInput} type="number" />
+          ) : (
+            <>
+              {discountPercentage && (
+                <span className={styles.price}>{`${finalPrice}€`}</span>
+              )}
+              <span
+                className={classNames(
+                  styles.price,
+                  discountPercentage && styles.hasDiscount
+                )}
+              >
+                {`${price}€`}
+              </span>
+            </>
           )}
         </div>
         <button

components/Cards/VehicleCard.module.scss

@@ -149,9 +149,26 @@
   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);
+.editPriceButton {
+  svg {
+    color: $color-red;
+    margin-right: spacing(1);
+    font-size: 18px;
+  }
+}
+
+.simpleInput {
+  padding: 0 !important;
+  margin: 0 !important;
+  input {
+    padding: 0;
+    border: unset;
+    margin: 0;
+    font-size: $font-size-span;
+    font-family: $font-family-secondary;
+    color: $color-red;
+    font-weight: $font-weight-medium;
+    min-height: unset;
+    min-width: unset;
+  }
 }

pages/listings/index.tsx

@@ -1,29 +1,56 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import map from 'lodash/map'
+import get from 'lodash/get'
+import { reduxForm, change, getFormValues } from 'redux-form'
 import styles from './listing.module.scss'
 import { useSelector, useDispatch } from 'react-redux'
 import {
   myListingsSelector,
   myListingsLoadingSelector,
+  loadingUpdatingMyListing,
 } from '../../store/listing/selectors'
 import ListingsCreator from '../../store/listing/creators'
-import { Layout, Loader, VehicleCard, Input } from '../../components'
+import ListingType from '../../types/listing'
+import { Layout, Loader, VehicleCard, Button } from '../../components'
 import { getVehicleCardProps } from '~/utils/helpers'
+import { useTranslation } from 'react-i18next'
+
+
+const formName = 'editListingForm';
+
+
 
 const ListingsPage = () => {
+  const [_, setLastUpdateId] = useState(null);
   const loading = useSelector(myListingsLoadingSelector)
-  const listings = useSelector(myListingsSelector)
+  const listings: ListingType[] = useSelector(myListingsSelector)
   const dispatch = useDispatch()
-
+  const isUpdatingListing = useSelector(loadingUpdatingMyListing)
+  const { t } = useTranslation()
+  const formValues = useSelector(getFormValues(formName))
+  
   useEffect(() => {
     dispatch(ListingsCreator.fetchMyListings())
   }, [])
+
+  console.log('listings', listings);
+  useEffect(() => {
+    if (listings) {
+      map(listings, listing => {
+        console.log('change', listing)
+        dispatch(change(formName, `${listing._id}-price`, listing.price));
+      });
+    }
+  }, [listings])
+
+
   return (
     <Layout fullscreen className={styles.container}>
       <h1>Listings</h1>
-      <div className={styles.listings}>
-        {map(listings, (listing) => {
-          console.log('listing', listing);
+      <Loader loading={loading} centered />
+      <form className={styles.listings} onSubmit={(e) => { e.preventDefault() }}>
+        {map(listings, listing => {
+          const isSold = !!listing.soldAt;
           return (
             <div key={listing._id} className={styles.listing}>
               <div className={styles.title}>
@@ -35,24 +62,57 @@ const ListingsPage = () => {
               </div>
 
               <div className={styles.content}>
-                <form>
-                  {/* @ts-ignore */}
-                  <Input name="price" label="Price" type="number" value={listing.price} />
-                </form>
+                <Button
+                  type={Button.types.GHOST}
+                  color="red"
+                  className={styles.soldButton}
+                  disabled={isUpdatingListing}
+                  onClick={() => {
+                    {/* @ts-ignore */ }
+                    setLastUpdateId(listing._id);
+                    dispatch(
+                      ListingsCreator.updateMyListing({
+                        _id: listing._id,
+                        soldAt: isSold ? null : new Date(),
+                      })
+                    )
+                  }}
+                >
+                  {t(isSold ? 'label.available' : 'label.sold')}
+                </Button>
                 <VehicleCard
                   {...getVehicleCardProps(listing)}
                   listingId={listing._id}
-                  isSold={!!listing.soldAt}
+                  isSold={isSold}
                   isAdmin
+                  formName={formName}
+                  onEditCallback={() => {
+                    const formPrice = get(formValues, `${listing._id}-price`);
+                    if (formPrice && formPrice.toString() !== listing.price.toString()) {
+                      const discountPercentage = (Number(listing.price) - Number(formPrice)) / Number(formPrice) * 100;
+                      
+                      dispatch(
+                        ListingsCreator.updateMyListing({
+                          _id: listing._id,
+                          price: formPrice,
+                          ... (discountPercentage > 0 ? { discountPercentage } : {}),
+                        })
+                      )
+                    }
+                    
+                  }}
                 />
               </div>
             </div>
           )
         })}
-        <Loader loading={loading} centered />
-      </div>
+      </form>
     </Layout>
   )
 }
+const ListingsPageForm = reduxForm({
+  enableReinitialize: true,
+  form: formName,
+})(ListingsPage)
 
-export default ListingsPage
+export default ListingsPageForm

pages/listings/listing.module.scss

@@ -4,26 +4,41 @@
   min-height: 100vh;
   h1 {
     text-align: center;
-    margin-bottom: spacing(0.5);
+    margin-bottom: spacing(1);
+  }
+  padding: spacing(2) 0 spacing(12) 0;
+
+  @media (min-width: $tablet) {
+    padding: spacing(4) 0 spacing(12) 0;
   }
-  padding-top: spacing(4);
-  padding-bottom: spacing(12);
   .listings {
     display: grid;
     grid-gap: spacing(1);
-    grid-template-columns: repeat(auto-fill, 470px);
+    grid-template-columns: auto;
+    justify-content: center;
+    @media (min-width: $tablet) {
+      grid-template-columns: repeat(auto-fill, 470px);
+    }
   }
+  
 }
 
 
 .listing {
-  width: 470px;
+  width: 100%;
   border: 1px solid $color-darker-gray;
   border-radius: $border-radius-medium;
-  background: $color-light-gray;
+  background: $color-white;
+  @media (min-width: $tablet) {
+    width: 470px;
+  }
+  article {
+    width: 100%;
+  }
   .title {
     padding: spacing(1);
     background: $color-white;
+    border-bottom: 1px solid $color-light-gray;
     h4 {
       margin-bottom: spacing(1);
     }
@@ -32,12 +47,26 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
+      span:nth-child(2) {
+        text-align: right;
+      }
     }
   }
   .content {
     padding: spacing(0.5);
     display: grid;
     grid-gap: spacing(1);
-    grid-template-columns: 174px 400px;
+    grid-template-columns: 100px 1fr;
+    @media (min-width: $tablet) {
+      grid-template-columns: 174px 400px;
+    }
   }
+}
+
+.soldButton {
+  min-height: unset;
+  font-size: $font-size-span;
+  height: 34px;
+  padding: spacing(0.5) spacing(1);
+  margin-left: spacing(0.5);
 }