[Week 10] - Adding some client-side interaction: selecting cards

antoinejaussoin · Apr 6, 2018 · db10232 · db10232
1 parent 656b025
commit db10232
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 16 deletions.
diff --git a/src/App.js b/src/App.js
@@ -2,28 +2,72 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import Card from './Components/Card';
 
-const Container = styled.div`
+const CardsContainer = styled.div`
   display: flex;
+  flex-wrap: wrap;
   margin: 30px;
 
   > * {
     margin-right: 20px;
+    margin-bottom: 20px;
   }
 `;
 
+const Page = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Deck = styled.div`
+  margin: 20px;
+`;
+
+const Selection = styled.div`
+  margin: 20px;
+  min-height: 200px;
+`;
+
 class App extends Component {
-  state = { cards: [] };
+  state = { cards: [], selection: [] };
 
   componentDidMount() {
     fetch('/api/cards')
       .then(response => response.json())
       .then(cards => this.setState({ cards }));
   }
+
+  selectCard = (card) => {
+    this.setState({
+      selection: [
+        ...this.state.selection,
+        card
+      ]
+    })
+  }
+
   render() {
     return (
-      <Container>
-        { this.state.cards.map(card => <Card color={card.color}>{card.label}</Card>) }
-      </Container>
+      <Page>
+        <Selection>
+          <h1>Your selection:</h1>
+          <CardsContainer>
+            { this.state.selection.map((card, index) =>
+              <Card
+                key={index}
+                color={card.color}>{card.label}</Card>) }
+          </CardsContainer>
+        </Selection>
+        <Deck>
+          <h1>Your deck:</h1>
+          <CardsContainer>
+            { this.state.cards.map(card => 
+              <Card
+                key={card.label}
+                color={card.color}
+                onClick={() => this.selectCard(card)}>{card.label}</Card>) }
+          </CardsContainer>
+        </Deck>
+      </Page>
     );
   }
 }

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/Components/Card/index.js b/src/Components/Card/index.js
@@ -10,14 +10,15 @@ const Container = styled.div`
   justify-content: space-around;
   font-size: 5em;
   color: ${props => props.color};
+  cursor: pointer;
 `;
 
 const Content = styled.div`
   align-self: center;
 `;
 
-const Card = ({ children, color = '#ff867c' }) => (
-  <Container color={color}>
+const Card = ({ children, color = '#ff867c', onClick }) => (
+  <Container color={color} onClick={onClick}>
     <Content>
       {children}
     </Content>