Core 2442

package.json

@@ -12,12 +12,14 @@
     "axios": "^0.21.1",
     "express": "^4.17.1",
     "nouislider": "^15.6.1",
+    "nouislider-react": "^3.4.1",
     "razzle-plugin-typescript": "^4.2.17",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-truncate": "^2.4.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.5",
+    "use-deep-compare-effect": "^1.8.1"
   },
   "devDependencies": {
     "babel-preset-razzle": "4.2.15",

src/App.js

@@ -11,7 +11,33 @@ import './App.css';
 const demo = { url: evieOrganized, rarity: "67.6%", forSale: false, owned: true, setName: "Evie Set", name: "Evie Organized", number: 13, price: 75 }
 const setsize = Math.floor(Math.random() * 100)
 const set = Array.from(Array(setsize).keys())
-const nfts = set.map((value) => ({...demo, rarity: Math.floor(Math.random() * 100), number: value, forSale: (Math.random() < 0.5), owned: (Math.random() < 0.5),  price: Math.floor(Math.random() * 1000) }))
+const nfts = set.map((value) => ({...demo, number: Math.floor(Math.random() * (setsize )), attributes: {face: Math.floor(Math.random() * 3), glasses: Math.floor(Math.random() * 3), skin: Math.floor(Math.random() * 3), outfit: Math.floor(Math.random() * 3)}, rarity: Math.floor(Math.random() * 100), number: value, forSale: (Math.random() < 0.5), owned: (Math.random() < 0.5),  price: Math.floor(Math.random() * 10000) }))
+export const attributePossibilities = {
+  face: [
+    { name: "Cute", value: 0, howMany: 2 },
+    { name: "Ugly", value: 1, howMany: 2 },
+    { name: "Butter", value: 2, howMany: 2 },
+    { name: "Stone", value: 3, howMany: 2 },
+  ],
+  outfit: [
+    { name: "Butter", value: 0, howMany: 12 },
+    { name: "Disco", value: 1, howMany: 3 },
+    { name: "Hiesenberg", value: 2, howMany: 4 },
+    { name: "Disco", value: 3, howMany: 3 },
+  ],
+  glasses: [
+    { name: "Aviator", value: 0, howMany: 12 },
+    { name: "Nerd", value: 1, howMany: 3 },
+    { name: "Wraparound", value: 2, howMany: 4 },
+    { name: "Safety", value: 3, howMany: 3 },
+  ],
+  skin: [
+    { name: "Butter", value: 0, howMany: 1 },
+    { name: "Bacon", value: 1, howMany: 3 },
+    { name: "Egg", value: 2, howMany: 4 },
+    { name: "Toast", value: 3, howMany: 3 },
+  ],
+};
 export const example = {
     collectionSize: 24,
     owner: "1234567890987654321",
@@ -40,7 +66,7 @@ const App = () => {
       <Switch location={background || location}>
     <Route exact={true} path="/" component={Home} />
     <Route exact={true} path="/gallery/:network" render={(props) => <Gallery nfts={nfts} {...props}/>}/>
-    <Route exact={true} path="/gallery/detail/:id" component={Details} />
+    <Route exact={true} path="/gallery/detail/:id" render={(props) => <Details nfts={nfts} {...props}/>} />
     <Route exact={true} path="/about" component={About}/>
   </Switch>
   {background && <Route path="/gallery/list/:id" children={<ListForSale />} />}

src/Gallery/CategorySelector.js

@@ -12,7 +12,7 @@ const Category = styled.div`
   font-size: 20px;
   line-height: 24px;
   white-space: nowrap;
-`;
+  `;
 
 const CategoryContainer = styled.div`
   padding: 10px;
@@ -24,7 +24,7 @@ const CategoryContainer = styled.div`
   height: 36px;
   ${(props) => (props.selected ? "border-bottom: 3px solid #4536da;" : "")}
 `;
-const Catbox = styled.div`
+const Catbox = styled.ul`
   margin-top: 58px;
   display: flex;
   flex-direction: row;
@@ -34,20 +34,14 @@ const Catbox = styled.div`
      margin-left: 40px;
     }
 `;
-export default ({ categories, selected }) => (
-  <Catbox>
+export default ({ categories, selected, changeHandler }) => (
+  <Catbox value={selected} onClick={(e) =>  {changeHandler(e.target.innerText)}}>
     {categories.map((category) => {
       return (
-        <CategoryContainer selected={category === selected} key={category}>
-          {category === selected ? (
-            <Category key={category} value={category} selected>
-              {category}
-            </Category>
-          ) : (
-            <Category key={category} value={category}>
+        <CategoryContainer value={category} selected={(selected === category)} key={category} >
+            <Category key={category} selected={(selected === category)} >
               {category}
             </Category>
-          )}
         </CategoryContainer>
       );
     })}

src/Gallery/DataSection.js

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import BuySection from "./BuySection";
 import divider from "../../public/assets/divider.svg";
+import { attributePossibilities } from "../App";
 
 const Attributes = styled.div`
   display: flex;
@@ -157,37 +158,45 @@ const Attr = ({ name, value, howMany, collectionSize }) => {
   );
 };
 
-export default ({ data }) => {
-  return (
+export default ({nft, collectionSize}) => {
+  if (nft){
+    console.log(nft.attributes)
+    return (
     <Data>
-      <Set>{data.setName}</Set>
+      <Set>{nft.setName}</Set>
       <NameAndNumber>
-        <Name>{data.name}</Name>
-        <Num>#{data.number}</Num>
+        <Name>{nft.name}</Name>
+        <Num>#{nft.number}</Num>
       </NameAndNumber>
       <StatusSpan>
-        <SaleStatus>{data.forSale ? "For Sale" : "Not For Sale"}</SaleStatus>
-        {data.owned ? <OwnedStatus> Owned </OwnedStatus>: ""}
+        <SaleStatus>{nft.forSale ? "For Sale" : "Not For Sale"}</SaleStatus>
+        {nft.owned ? <OwnedStatus> Owned </OwnedStatus>: ""}
       </StatusSpan>
       <Owner>
         <OwnerLabel>Owner</OwnerLabel> 
         <VerticalDivider src={divider}/>
-        <OwnerId>{data.owner}</OwnerId>
+        <OwnerId>{nft.owner}</OwnerId>
       </Owner>
       <Attributes>
-        {data.attributes
-          ? data.attributes.map((attr) => (
+        {nft.attributes
+          ? Object.keys(nft.attributes).map((attribute, index) => {
+            const rawAttributeValue = nft.attributes[attribute]
+            const resolvedAttributeValues = attributePossibilities[attribute][rawAttributeValue]
+            console.log(nft)
+            return (
               <Attr
-                name={attr.name}
-                value={attr.value}
-                howMany={attr.howMany}
-                collectionSize={data.collectionSize}
+                name={resolvedAttributeValues.name}
+                value={resolvedAttributeValues.value}
+                howMany={resolvedAttributeValues.howMany}
+                collectionSize={collectionSize}
+                key={`${index}` + `${attribute}` + `${resolvedAttributeValues.value}` }
               />
-            ))
+            )})
           : ""}
       </Attributes>
-      <Description>{data.description}</Description>
-      <BuySection data={data} />
+      <Description>{nft.description}</Description>
+      <BuySection data={nft} />
     </Data>
-  );
+  )}
+  else {return "Loading..."}
 };

src/Gallery/Details.js

@@ -3,12 +3,11 @@ import styled from "styled-components";
 import Navbar from "../Navbar";
 import Footer from "../Footer";
 import DataSection from "./DataSection";
-import { Link, useHistory, useParams, } from "react-router-dom";
-import { example } from "../App";
+import {  useHistory, useParams, } from "react-router-dom";
 import backArrow from "../../public/assets/backArrow.png";
 import reachBlack from "../../public/assets/reachLogoBlack.svg";
 
-const Back = styled((props) => <Link {...props} />)`
+const Back = styled.a`
   margin-left: 10px;
 `;
 const BackArrow = styled.img``;
@@ -75,37 +74,38 @@ const Rarity = styled.div`
   align-self: center;
 `;
 
-export default () => {
+export default ({nfts}) => {
   const { id } = useParams();
   const [data, setData] = useState([]);
   const history = useHistory();
-console.log(history);
+  console.log(data)
   useEffect(() => {
     const fetchData = (id) => {
-      const fetched = example;
-      console.log(example)
+      const fetched = nfts.filter((nft) => { return (nft.number == id)});
+      console.log(fetched)
       setData(fetched);
     };
 
     fetchData(id);
-  });
-
+  }, [id]);
+const nft = data[0]
+console.log(nft)
   return (
     <Page>
       <Navbar />
       <BackLink>
         <BackArrow src={backArrow} />
-        <Back to={`/gallery`}>Back</Back>
+        <Back onClick={() => history.go(-1)}>Back</Back>
       </BackLink>
       <Main>
         <ImageContainer>
           <Badge>
             <BadgeLogo src={reachBlack} />
-            <Rarity>{data.rarity}</Rarity>
+            <Rarity>{nft? nft.rarity : ''}</Rarity>
           </Badge>
-          <Image src={data.url} />
+          <Image src={nft? nft.url: ''} />
         </ImageContainer>
-        <DataSection data={data} />
+        <DataSection nft={nft ? nft : ''} collectionSize={nfts.length}/>
       </Main>
       <Footer />
     </Page>

src/Gallery/ListForSale.js

@@ -7,7 +7,7 @@ import { useHistory } from "react-router";
 import Truncate from "react-truncate";
 const borderValidity = (valid) => {
   let color;
-  console.log(valid)
+
   switch (valid) {
     case "valid":
       color = "#4536DA";
@@ -277,10 +277,7 @@ const InfoBox = (nft) => {
   };
 
   const validateFee = (fee) =>{
-    console.log(typeof fee)
-    console.log(fee.length)
     if(fee.length === 0){
-      console.log('eureka')
       setFeeValid('empty')
     }
 
@@ -291,9 +288,6 @@ const InfoBox = (nft) => {
     } else if (fee.length === 0) {
       setFeeValid("empty");
     }
-    //  else if (isNaN(~~fee) || ~~fee < 1.5 || ~~fee > (100 - (100*royalty))) {
-      //     setFeeValid("invalid");
-      //   }
     }
 
     useEffect(() => {

src/Gallery/NetworkAndSort.js

@@ -63,7 +63,7 @@ const Select = ({ options, onClick }) => {
   return (
     <Selector onChange={(e) =>  onClick(e.target.value)}>
       {options.map((option) => (
-        <Option  value={option.value}>
+        <Option  value={option.value} key={option.value}>
           {option.name}
         </Option>
       ))}

src/Gallery/RangeSlider.js

@@ -2,32 +2,31 @@ import React, { useEffect, useState, useRef } from "react";
 import * as noUiSlider from "nouislider";
 import styled from "styled-components";
 import "nouislider/dist/nouislider.css";
-
+import Nouislider from "nouislider-react";
 
 const Container = styled.div`
-width:260px;
-& .noUi-origin{
+  width: 260px;
+  & .noUi-origin {
     position: relative;
     left: 200px;
-}
+  }
 
-& .noUi-target{
-    background: #000000; 
+  & .noUi-target {
+    background: #000000;
     border: none;
     box-shadow: none;
-}
+  }
 
   & .noUi-base {
     height: 0px;
     left: 0px;
     top: 10px;
     border: 1px solid #999999;
-
   }
 
-  & .noUi-handle{
+  & .noUi-handle {
     border-radius: 50%;
-    background: #4536DA;
+    background: #4536da;
     width: 14px;
     height: 14px;
     box-shadow: none;
@@ -36,38 +35,30 @@ width:260px;
     left: 50px;
 
     ::before {
-        display: none;
+      display: none;
     }
-    
-    ::after{
-        display: none;
+
+    ::after {
+      display: none;
     }
   }
-
 `;
 
-const PriceBar = styled.div`
-
-`;
-
-export default () => {
-
-  const rangeSlider = useRef();
-  useEffect(() => {
-    if(rangeSlider.current === undefined){
-
-      noUiSlider.create(rangeSlider.current, {
-        range: { min: 0, max: 10000 },
-        start: [10, 10000],
-        margin: 100,
-        connect: false,
-      });
-    }
-  }, );
+const PriceBar = styled.div``;
 
+export default ({ priceRange, setPriceRange }) => {
+  const onUpdate = (range) => {
+    setPriceRange({ min: range[0], max: range[1] });
+  };
   return (
     <Container>
-      <PriceBar ref={rangeSlider}>{}</PriceBar>
+      <PriceBar>
+        <Nouislider
+          range={{ min: 0, max: 10000 }}
+          start={[~~priceRange.min, ~~priceRange.max]}
+          onUpdate={onUpdate}
+        />
+      </PriceBar>
     </Container>
   );
 };