Get frontend properties from api & use of Placeholders

Author: behagoras

package-lock.json

@@ -57,6 +57,7 @@
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.3",
+    "file-loader": "^5.0.2",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "json-loader": "^0.5.7",

package.json

@@ -188,12 +188,7 @@ const Sidebar = () => {
         </LogoContainer>
         <SidebarContent>
           <Navigation>
-            <NavElement selected>
-              <CustomLink to="/" onClick={handleLinkClick}>
-                <i className="fas fa-columns" />
-                <p>Dashboard</p>
-              </CustomLink>
-            </NavElement>
+
             {
               dashboardRoutes.map((route, index) => {
                 return route.sidebar ? (

src/assets/img/placeholder.png

@@ -8,6 +8,9 @@ import { getProperties, deleteProperty } from '../../data/crudProperties';
 import TitleBar from '../../components/Dashboard/TitleBar';
 import IconAction from '../../components/Atoms/IconAction';
 import Modal from '../../components/Modal/AsyncModal';
+import placeholder from '../../assets/img/placeholder.png';
+
+const placeholder2 = `/${placeholder}`;
 
 const Table = styled.table`
   max-width: 100%;
@@ -193,7 +196,7 @@ const Properties = () => {
                     key={_id}
                   >
                     <TableCell>
-                      <Image src={img.src} alt={title} />
+                      <Image src={img.src || placeholder2} alt={title} />
                     </TableCell>
                     <TableCell>
                       {title}

src/components/Dashboard/Sidebar.jsx

@@ -1,8 +1,22 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 import PropertyList, { Item } from '../../../components/PropertyList';
+import propertiesMock from '../../../mock/properties1.json';
+import { getProperties } from '../../../data/crudProperties';
+import placeholder from '../../../assets/img/placeholder.png';
 
 const Properties = () => {
+  const [properties, setProperties] = useState(propertiesMock);
+
+  async function fetchMyAPI() {
+    const data = await getProperties();
+    setProperties(data.data);
+  }
+
+  useEffect(() => {
+    fetchMyAPI();
+  }, []);
+
   return (
     <PropertyList>
       <Item
@@ -19,62 +33,39 @@ const Properties = () => {
           age: [16, 'y'],
         }}
       />
-      <Item
-        cover="https://media.truehome.com.mx/media/original_images/663_HCPortada.jpg"
-        type="apartment"
-        price={['5300000', 'MXN']}
-        title="Hacienda del Ciervo, Hacienda de las Palmas"
-        description="Hacienda de las Palmas, Huixquilucan, Estado de México"
-        characteristics={{
-          bedrooms: 2,
-          bathrooms: 2,
-          parkingLots: 2,
-          surface: [155, 'm2'],
-          age: [16, 'y'],
-        }}
-      />
-      <Item
-        cover="https://media.truehome.com.mx/media/original_images/663_HCPortada.jpg"
-        type="apartment"
-        price={['5300000', 'MXN']}
-        title="Hacienda del Ciervo, Hacienda de las Palmas"
-        description="Hacienda de las Palmas, Huixquilucan, Estado de México"
-        characteristics={{
-          bedrooms: 2,
-          bathrooms: 2,
-          parkingLots: 2,
-          surface: [155, 'm2'],
-          age: [16, 'y'],
-        }}
-      />
-      <Item
-        cover="https://media.truehome.com.mx/media/original_images/663_HCPortada.jpg"
-        type="apartment"
-        price={['5300000', 'MXN']}
-        title="Hacienda del Ciervo, Hacienda de las Palmas"
-        description="Hacienda de las Palmas, Huixquilucan, Estado de México"
-        characteristics={{
-          bedrooms: 2,
-          bathrooms: 2,
-          parkingLots: 2,
-          surface: [155, 'm2'],
-          age: [16, 'y'],
-        }}
-      />
-      <Item
-        cover="https://media.truehome.com.mx/media/original_images/663_HCPortada.jpg"
-        type="apartment"
-        price={['5300000', 'MXN']}
-        title="Hacienda del Ciervo, Hacienda de las Palmas"
-        description="Hacienda de las Palmas, Huixquilucan, Estado de México"
-        characteristics={{
-          bedrooms: 2,
-          bathrooms: 2,
-          parkingLots: 2,
-          surface: [155, 'm2'],
-          age: [16, 'y'],
-        }}
-      />
+      {
+        properties.map((property) => {
+          const {
+            _id,
+            title,
+            img,
+            description,
+            prices,
+          } = property;
+          console.log('placeholder', placeholder);
+          const placeholder2 = `/${placeholder}`;
+          const to = `/admin/property/${_id}`;
+          return (
+            <Item
+              to={to}
+              cover={img.src || placeholder2}
+              type="apartment"
+              price={[prices.amount, 'MXN']}
+              title={title}
+              description={description}
+              characteristics={{
+                bedrooms: 2,
+                bathrooms: 2,
+                parkingLots: 2,
+                surface: [155, 'm2'],
+                age: [16, 'y'],
+              }}
+            />
+
+          );
+        })
+      }
+
     </PropertyList>
   );
 };

src/pages/Dashboard/Properties.jsx

@@ -72,7 +72,7 @@ const dashboardRoutes = [
     path: '/properties',
     name: 'Properties',
     rtlName: 'Properties',
-    icon: 'fas fa-home',
+    icon: 'fas fa-columns',
     component: Properties,
     layout: '/admin',
     exact: false,

src/pages/Front/PropertiesFront/PropertiesFront.jsx

@@ -19,6 +19,11 @@ module.exports = {
   module: {
 
     rules: [
+      {
+        test: /\.(jpe?g|png|gif)$/i,
+        loader: 'file-loader?name=img/[name].[ext]',
+      },
+
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,