add base listings page

Author: alexjs-dev

components/Cards/VehicleCard.js

@@ -111,7 +111,7 @@ const VehicleCard = (props) => {
   const imageUrl = parseCloudinaryUrl(imageSrc)
 
   return (
-    <div className={styles.container} ref={ref}>
+    <article className={styles.container} ref={ref}>
       <VehicleCardRibbons
         urgent={urgent}
         featured={featured}
@@ -194,7 +194,7 @@ const VehicleCard = (props) => {
           <FiMoreVertical />
         </button>
       </div>
-    </div>
+    </article>
   )
 }
 

components/Cards/VehicleCard.module.scss

@@ -1,20 +1,5 @@
 @import 'vars.scss';
 
-@keyframes slideTopFadeIn {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  75% {
-    transform: translateY(20%);
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-
 
 .container {
   width: calc(50vw - 16px);
@@ -30,8 +15,6 @@
     min-height: 340px;
     height: auto;
     margin-left: spacing(0.5);
-    animation-fill-mode: forwards;
-    animation: slideTopFadeIn 0.3s ease-in;
   }
   .likeButton {
     position: absolute;

components/Carousels/ListingsCarousel.module.scss

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

components/Navigation/NavigationDropdown.module.scss

@@ -4,11 +4,29 @@
   position: relative;
 }
 
+@keyframes appear {
+	0% {
+		transform: scale(0) translate(-100%, 100%);
+		opacity: 0;
+		visibility: visible;
+	}
+	80% {
+		transform: scale(1.2) translate(-100%, 100%);
+	}
+	100% {
+		transform: scale(1) translate(-100%, 100%);
+		opacity: 1;
+	}
+}
+
+
 .drawer {
   position: absolute;
   bottom: spacing(-2);
   left: 100%;
   transform: translate(-100%, 100%);
+  animation: appear .6s ease-in-out;
+  animation-fill-mode: forwards;
   background: $color-dark;
   padding: spacing(2) 0;
   border-radius: $border-radius-input;

pages/listings/index.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react'
+import map from 'lodash/map'
+import styles from './listing.module.scss'
+import { useSelector, useDispatch } from 'react-redux'
+import {
+  myListingsSelector,
+  myListingsLoadingSelector,
+} from '../../store/listing/selectors'
+import ListignsCreator from '../../store/listing/creators'
+import { Layout, Loader, VehicleCard } from '../../components'
+import { getVehicleCardProps } from '~/utils/helpers'
+
+const ListingsPage = () => {
+  const loading = useSelector(myListingsLoadingSelector)
+  const listings = useSelector(myListingsSelector)
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    dispatch(ListignsCreator.fetchMyListings())
+  }, [])
+  return (
+    <Layout background="gray" 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} />
+      </div>
+    </Layout>
+  )
+}
+
+export default ListingsPage

pages/listings/listing.module.scss

@@ -0,0 +1,16 @@
+@import 'vars.scss';
+
+.container {
+  min-height: 100vh;
+  h1 {
+    text-align: center;
+    margin-bottom: spacing(0.5);
+  }
+  padding-top: spacing(4);
+  padding-bottom: spacing(12);
+  .listings {
+    display: grid;
+    grid-gap: spacing(1);
+    grid-template-columns: repeat(auto-fill, 142px);
+  }
+}

store/listing/creators.js

@@ -11,6 +11,9 @@ export const { Types, Creators } = createActions(
     fetchListings: ['params'],
     fetchListingsSuccess: ['data'],
     fetchListingsFailure: [],
+    fetchMyListings: [],
+    fetchMyListingsSuccess: ['data'],
+    fetchMyListingsFailure: [],
     fetchFeaturedListings: ['params'],
     fetchFeaturedListingsSuccess: ['data'],
     fetchFeaturedListingsFailure: [],

store/listing/reducer.js

@@ -21,8 +21,34 @@ const INITIAL_STATE = {
   userAvailableListings: {},
   userAvailableListingsPagination: {},
   loadingUserAvailableListings: false,
+  myListings: {},
+  myListingsPagination: {},
+  loadingMyListings: false,
 }
 
+const fetchMyListings = (state, { params }) => ({
+  ...state,
+  myListings: get(params, 'resetPagination') ? {} : state.myListings,
+  myListingsPagination: get(params, 'resetPagination') ? {} : state.myListingsPagination,
+  loadingMyListings: true,
+})
+
+
+const fetchMyListingsSuccess = (state, { data, pagination }) => ({
+  ...state,
+  myListings: {
+    ...state.myListings,
+    ...keyBy(data, '_id'),
+  },
+  loadingMyListings: false,
+  myListingsPagination: pagination,
+})
+
+const fetchMyListingsFailure = (state) => ({
+  ...state,
+  loadingMyListings: false,
+})
+
 const fetchListingById = (state) => ({
   ...state,
   loadingListing: true,
@@ -212,4 +238,7 @@ export default createReducer(INITIAL_STATE, {
   [Types.FETCH_USER_SOLD_LISTINGS]: fetchUserSoldListings,
   [Types.FETCH_USER_SOLD_LISTINGS_SUCCESS]: fetchUserSoldListingsSuccess,
   [Types.FETCH_USER_SOLD_LISTINGS_FAILURE]: fetchUserSoldListingsFailure,
+  [Types.FETCH_MY_LISTINGS]: fetchMyListings,
+  [Types.FETCH_MY_LISTINGS_SUCCESS]: fetchMyListingsSuccess,
+  [Types.FETCH_MY_LISTINGS_FAILURE]: fetchMyListingsFailure,
 })

store/listing/sagas.js

@@ -194,9 +194,54 @@ function* handleFetchUserListingsCompose(action, type = 'SOLD') {
   }
 }
 
+function* handleFetchMyListings(action) {
+  const successType = Types.FETCH_MY_LISTINGS_SUCCESS
+  const failureType = Types.FETCH_MY_LISTINGS_FAILURE
+  try {
+    const { params } = action
+    const prevPagination = yield select(
+      (state) => state.listing.myListingsPagination
+    )
+    const currentUser = yield select((state) => state.auth.currentUser)
+    const userId = currentUser && currentUser._id
+    if (!userId) {
+      throw new Error('User is not logged in')
+    }
+    const { limit = 10, skip = 0, total = 0 } = prevPagination
+    if (skip + limit < total || total === 0) {
+      const response = yield call(listingsService.find, {
+        query: {
+          $limit: limit,
+          userId,
+          $sort: { createdAt: -1 },
+          ...(skip > 0 ? { $skip: skip } : {}),
+          // userFilter: type === 'AVAILABLE' ? 'available' : 'sold',
+          ...params,
+        },
+      })
+      const { data, ...pagination } = response
+      yield put({
+        type: successType,
+        data,
+        pagination,
+      })
+    } else {
+      yield put({
+        type: successType,
+        data: {},
+        pagination: prevPagination,
+      })
+    }
+  } catch (error) {
+    console.error(error)
+    yield put({ type: failureType })
+  }
+}
+
 const sagas = [
   takeLatest(Types.FETCH_LISTING_BY_ID, handleFetchListingById),
   takeLatest(Types.FETCH_LISTINGS, handleFetchListingsCompose),
+  takeLatest(Types.FETCH_MY_LISTINGS, handleFetchMyListings),
   takeLatest(Types.FETCH_RECOMMENDED_LISTINGS, (action) =>
     handleFetchListingsCompose(action, 'RECOMMENDED')
   ),

store/listing/selectors.js

@@ -2,6 +2,11 @@ export const currentListingSelector = (state) => state.listing.currentListing
 export const currentListingLoadingSelector = (state) =>
   state.listing.loadingListing
 
+
+export const myListingsPaginationSelector = (state) => state.listing.myListingsPagination
+export const myListingsSelector = (state) => state.listing.myListings
+export const myListingsLoadingSelector = (state) => state.listing.loadingMyListings
+
 export const listingPaginationSelector = (state) => state.listing.pagination
 export const listingsSelector = (state) => state.listing.listings
 export const listingsLoadingSelector = (state) => state.listing.loading