Add badges (#26)

* Add superagent

* Add badge pngs

* Add badge legend, mock badge data

* Init badge container

* Move butterfly badges

* Add showAllBadges

* Format badge container

* Refactor matchesUser

* Edit to weekly histogram

package.json

@@ -16,6 +16,7 @@
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
     "react-scripts": "2.0.3",
+    "superagent": "^4.0.0",
     "zoo-grommet": "~0.3.0",
     "zooniverse-react-components": "github:zooniverse/Zooniverse-React-Components#v0.7.1"
   },

src/badges/badge-icon-legend.js

@@ -0,0 +1,199 @@
+// DECADE
+import year10s from './decade/year-10s.png';
+import year10s2x from './decade/[email protected]';
+import year20s from './decade/year-20s.png';
+import year20s2x from './decade/[email protected]';
+import year30s from './decade/year-30s.png';
+import year30s2x from './decade/[email protected]';
+import year40s from './decade/year-40s.png';
+import year40s2x from './decade/[email protected]';
+import year50s from './decade/year-50s.png';
+import year50s2x from './decade/[email protected]';
+import year60s from './decade/year-60s.png';
+import year60s2x from './decade/[email protected]';
+import year70s from './decade/year-70s.png';
+import year70s2x from './decade/[email protected]';
+import year80s from './decade/year-80s.png';
+import year80s2x from './decade/[email protected]';
+import year90s from './decade/year-90s.png';
+import year90s2x from './decade/[email protected]';
+import year2000s from './decade/year-2000s.png';
+import year2000s2x from './decade/[email protected]';
+
+// TIME
+import dinner from './time/time-dinner.png';
+import dinner2x from './time/[email protected]';
+import earlybird from './time/time-earlybird.png';
+import earlybird2x from './time/[email protected]';
+import earthday from './time/time-earthday.png';
+import earthday2x from './time/[email protected]';
+import lunch from './time/time-lunch.png';
+import lunch2x from './time/[email protected]';
+import nightowl from './time/time-nightowl.png';
+import nightowl2x from './time/[email protected]';
+
+// WORKFLOW
+// -- BUTTERFLY
+import butterflies from './workflow/butterfly/butterflies.png';
+import butterfly from './workflow/butterfly/butterfly.png';
+// -- HERBARIUM
+import matureGrove from './workflow/herbarium/mature-grove.png';
+import matureTree from './workflow/herbarium/mature-tree.png';
+import oak from './workflow/herbarium/oak.png';
+import sapling from './workflow/herbarium/sapling.png';
+import seed from './workflow/herbarium/seed.png';
+import seedling from './workflow/herbarium/seedling.png';
+import tree from './workflow/herbarium/tree.png';
+// -- LABS
+import blossom from './workflow/labs/blossom.png';
+import blossoms from './workflow/labs/blossoms.png';
+import fruit from './workflow/labs/fruit.png';
+// -- PINNED_SPECIMEN
+import caterpillar from './workflow/pinned_specimen/caterpillar.png';
+import egg from './workflow/pinned_specimen/egg.png';
+
+export const decade = [
+  year10s,
+  year10s2x,
+  year20s,
+  year20s2x,
+  year30s,
+  year30s2x,
+  year40s,
+  year40s2x,
+  year50s,
+  year50s2x,
+  year60s,
+  year60s2x,
+  year70s,
+  year70s2x,
+  year80s,
+  year80s2x,
+  year90s,
+  year90s2x,
+  year2000s,
+  year2000s2x
+];
+
+export const time = [
+  dinner,
+  dinner2x,
+  earlybird,
+  earlybird2x,
+  earthday,
+  earthday2x,
+  lunch,
+  lunch2x,
+  nightowl,
+  nightowl2x
+];
+
+export const workflow = [
+  butterflies,
+  butterfly,
+  matureGrove,
+  matureTree,
+  oak,
+  sapling,
+  seed,
+  seedling,
+  tree,
+  blossom,
+  blossoms,
+  fruit,
+  caterpillar,
+  egg
+];
+
+const badgeIconLegend = {
+  decade: {
+    '10s': {
+      1: year10s,
+      10: year10s2x
+    },
+    '20s': {
+      1: year20s,
+      10: year20s2x
+    },
+    '30s': {
+      1: year30s,
+      10: year30s2x
+    },
+    '40s': {
+      1: year40s,
+      10: year40s2x
+    },
+    '50s': {
+      1: year50s,
+      10: year50s2x
+    },
+    '60s': {
+      1: year60s,
+      10: year60s2x
+    },
+    '70s': {
+      1: year70s,
+      10: year70s2x
+    },
+    '80s': {
+      1: year80s,
+      10: year80s2x
+    },
+    '90s': {
+      1: year90s,
+      10: year90s2x
+    },
+    '00s': {
+      1: year2000s,
+      10: year2000s2x
+    }
+  },
+  time: {
+    dinnertime: {
+      1: dinner,
+      10: dinner2x
+    },
+    earlybird: {
+      1: earlybird,
+      10: earlybird2x
+    },
+    lunchbreak: {
+      1: lunch,
+      10: lunch2x
+    },
+    nightowl: {
+      1: nightowl,
+      10: nightowl2x
+    }
+  },
+  earth_day: {
+    1: earthday,
+    10: earthday2x
+  },
+  workflow_type: {
+    butterfly: {
+      1: butterfly,
+      100: butterflies
+    },
+    labs: {
+      1: blossom,
+      100: blossoms,
+      500: fruit
+    },
+    herbarium: {
+      1: seed,
+      10: seedling,
+      25: sapling,
+      75: tree,
+      250: oak,
+      1000: matureTree,
+      5000: matureGrove
+    },
+    pinned_specimen: {
+      1: egg,
+      100: caterpillar
+    }
+  }
+};
+
+export default badgeIconLegend;

src/components/App.jsx

@@ -12,13 +12,12 @@ import { ProjectProvider, ProjectContext } from '../context/ProjectContext';
 import { UserProvider, UserContext } from '../context/UserContext';
 
 import AuthContainer from '../containers/AuthContainer';
+import BadgeContainer from '../containers/BadgeContainer';
 import UserHeading from './UserHeading';
 import RecentsContainer from '../containers/RecentsContainer';
 import FavoritesContainer from '../containers/FavoritesContainer';
 import StatsContainer from '../containers/StatsContainer';
 
-import Title from './Title'; // remove with completion of Badge section
-
 const App = () => (
   <UserProvider>
     <ProjectProvider>
@@ -58,28 +57,19 @@ const App = () => (
                                   <RecentsContainer explorer={explorer} />
                                   <hr className="main__hr" />
                                   <div>
-                                    {matchesUser ? (
-                                      <FavoritesContainer
-                                        favoriteCollection={favoriteCollection}
-                                        linkedSubjects={linkedSubjects}
-                                        matchesUser={matchesUser}
-                                      />
-                                    ) : null}
+                                    <FavoritesContainer
+                                      favoriteCollection={favoriteCollection}
+                                      linkedSubjects={linkedSubjects}
+                                      matchesUser={matchesUser}
+                                    />
                                   </div>
                                 </Box>
                               )}
                             </FavoritesContext.Consumer>
                           </FavoritesProvider>
                           <StatsContainer explorer={explorer} />
                         </Box>
-                        <Box
-                          colorIndex="light-1"
-                          full="horizontal"
-                          pad="medium"
-                          style={{ height: '250px' }}
-                        >
-                          <Title>Your Badges</Title>
-                        </Box>
+                        <BadgeContainer explorer={explorer} />
                       </Box>
                     )}
                   </ExplorerContext>

src/components/Histogram.jsx

@@ -72,7 +72,7 @@ export default function Histogram({
 
   return (
     <Box colorIndex="light-1" pad="medium">
-      <Title>Histogram</Title>
+      <Title>Weekly Histogram</Title>
       <Chart>
         <Axis count={5} labels={axisY} vertical />
         <Chart vertical>