Hidelist hotfix (#438)

* Reveal listing index in html attibute. Better loading of hidelist.

* Undoing pull/222 in light of kettle bell attack

#222 was a good attempt, but now that we have pages full of kettle bell listings, this hidelist approach results in pages full of empty or single listings.

Per:
>The only awkwardness of this implementation is that on a page with flagged listings, the grid won't be completely filled up. For example:

So until we convert fully to address-based ids on listings, we stick with the old hidelist technicque of using Listing Indexes. (aka listingId)

* Temporary fix to allow admins to see listing index for an address

* Clarify comment and clean up

src/actions/Listing.js

@@ -19,8 +19,6 @@ export function getListingIds() {
 
     let hideList = []
     const { web3, listingsRegistryContract } = origin.contractService
-    const inProductionEnv =
-      window.location.hostname === 'demo.originprotocol.com'
 
     try {
       let networkId = await web3.eth.net.getId()
@@ -33,9 +31,9 @@ export function getListingIds() {
         return
       }
 
-      if (inProductionEnv && networkId < 10) {
+      if (networkId < 10) { // Networks > 9 are local development
         let response = await fetch(
-          `https://raw.githubusercontent.com/OriginProtocol/demo-dapp/hide_list/hidelist_${networkId}.json`
+          `https://raw.githubusercontent.com/OriginProtocol/origin-dapp/hide_list/hidelist_${networkId}.json`
         )
         if (response.status === 200) {
           hideList = await response.json()
@@ -47,8 +45,7 @@ export function getListingIds() {
 
       dispatch({
         type: ListingConstants.FETCH_IDS_SUCCESS,
-        ids: showIds.reverse(),
-        hideList
+        ids: showIds.reverse()
       })
     } catch (error) {
       dispatch(showAlert(error.message))

src/components/listing-card.js

@@ -13,32 +13,30 @@ class ListingCard extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      loading: true,
-      shouldRender: true
+      loading: true
     }
   }
 
   async componentDidMount() {
     try {
       const listing = await origin.listings.getByIndex(this.props.listingId)
+
       const translatedListing = translateListingCategory(listing)
-      if (!this.props.hideList.includes(translatedListing.address)) {
-        const obj = Object.assign({}, translatedListing, { loading: false })
 
-        this.setState(obj)
-      } else {
-        this.setState({ shouldRender: false })
-      }
+      this.setState({ ...translatedListing, loading: false })
     } catch (error) {
       console.error(`Error fetching contract or IPFS info for listingId: ${this.props.listingId}`)
     }
   }
 
   render() {
-    const { address, category, loading, name, pictures, price, unitsAvailable, shouldRender } = this.state
+    const { address, category, loading, name, pictures, price, unitsAvailable } = this.state
     const photo = pictures && pictures.length && (new URL(pictures[0])).protocol === "data:" && pictures[0]
 
-    if (!shouldRender) return false
+    // Temporary fix to allow admins to see listing index for an address
+    if (address && this.props.listingId) {
+      console.log(`listing index for address ${address}:`, this.props.listingId)
+    }
 
     return (
       <div className={`col-12 col-md-6 col-lg-4 listing-card${loading ? ' loading' : ''}`}>

src/components/listings-grid.js

@@ -22,7 +22,7 @@ class ListingsGrid extends Component {
 
   render() {
     const { listingsPerPage } = this.state
-    const { contractFound, listingIds, hideList } = this.props
+    const { contractFound, listingIds } = this.props
     const pinnedListingIds = [0, 1, 2, 3, 4]
     const activePage = this.props.match.params.activePage || 1
     const arrangedListingIds = [...pinnedListingIds, ...listingIds.filter(id => !pinnedListingIds.includes(id))]
@@ -62,7 +62,7 @@ class ListingsGrid extends Component {
             }
             <div className="row">
               {showListingsIds.map(listingId => (
-                <ListingCard listingId={listingId} key={listingId} hideList={hideList} />
+                <ListingCard listingId={listingId} key={listingId} />
               ))}
             </div>
             <Pagination
@@ -84,7 +84,6 @@ class ListingsGrid extends Component {
 
 const mapStateToProps = state => ({
   listingIds: state.listings.ids,
-  hideList: state.listings.hideList,
   contractFound: state.listings.contractFound
 })
 

src/reducers/Listings.js

@@ -2,7 +2,6 @@ import { ListingConstants } from 'actions/Listing'
 
 const initialState = {
   ids: [],
-  hideList: [],
   contractFound: true
 }
 
@@ -13,7 +12,7 @@ export default function Listings(state = initialState, action = {}) {
         return { ...state, ids: [], contractFound: action.contractFound }
 
       case ListingConstants.FETCH_IDS_SUCCESS:
-        return { ...state, ids: action.ids, hideList: action.hideList }
+        return { ...state, ids: action.ids }
 
       default:
         return state