completed initial frameworks

package.json

@@ -31,6 +31,7 @@
     "webpack-dev-server": "4.4.0"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.1",
     "@testing-library/user-event": "13.5.0",
     "axios": "0.24.0",
     "cors": "2.8.5",
@@ -45,6 +46,8 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "5.2.0",
     "redux": "^4.1.2",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.4.2",
     "sass": "^1.32.8",
     "style-loader": "^3.3.1",
     "styled-components": "5.3.3",

src/App.css

@@ -2,37 +2,18 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.row {
+  flex-wrap: wrap;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  margin-top: 3rem;
 }
 
-.App-link {
-  color: #61dafb;
+.row div {
+  margin: 1rem;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+h1 {
+  width: 30rem;
+  margin: 0 auto;
+}

src/App.js

@@ -1,12 +1,34 @@
 import React from 'react';
 import './App.css';
+import axios from 'axios';
+import Header from './components/Header'
+import Splash from './components/Spash'
+import CardView from './components/CardView';
+import Card from './components/Card';
+import { Route, Switch } from 'react-router-dom';
+import { connect } from 'react-redux';
 
-function App() {
+function App(props) {
   return (
     <div className="App">
-      Async Redux Project
+      <Header />
+      <Switch>
+          <Route exact path="/" component={Splash } />
+          <Route exact path="/cards">
+            <CardView />
+          </Route>
+          <Route path={"/cards/:cardID"} element={<Card />}>
+            <Card cards={props.displayCards}/>
+          </Route>
+      </Switch>
     </div>
   );
 }
 
-export default App;
+const mapStateToProps = state => {
+  return{
+    displayCards: state.card.displayCards
+  }
+}
+
+export default connect(mapStateToProps,{})(App);

src/actions/index.js

@@ -0,0 +1,32 @@
+import axios from "axios"
+
+export const GET_CARDS_START = 'GET_CARDS_START'
+export const GET_CARDS_SUCCESS = 'GET_CARDS_SUCCESS'
+export const GET_CARDS_FAILURE = 'GET_CARDS_FAILURE'
+export const LOAD_CARDS_START = 'LOAD_CARDS_START'
+export const FIVE_CARDS = 'FIVE_CARDS'
+export const SET_CURRENT_CARD = 'SET_CURRENT_CARD'
+
+
+
+export const getCards = () => dispatch =>{
+    dispatch ({ type: GET_CARDS_START})
+    axios.get('https://api.scryfall.com/cards/search?q=a%3A"rebecca+guay"')
+        .then(({data}) => {
+            dispatch ({ type: GET_CARDS_SUCCESS, payload: data.data})
+        })
+        .catch(err => {
+            console.error(err)
+            dispatch({ type: GET_CARDS_FAILURE, payload: "404 Error, unable to fetch cards"})
+        })}
+
+export const fiveCards = (arr) => {
+    return {type: FIVE_CARDS, payload: arr}
+}
+
+export const setCurrentCard = () => dispatch => {
+    console.log('test')
+    dispatch ({type: SET_CURRENT_CARD, payload: obj})
+}
+
+

src/components/Card.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { useParams,useHistory } from "react-router-dom";
+
+const Card = (props) => {    
+    const { cards } = props
+    const { cardID } = useParams();
+    const card = cards.find(card => card.tcgplayer_id === parseInt(cardID))
+    const history = useHistory()
+
+    if(!card){
+        history.push('/')
+    }
+
+    return (
+        <div>
+            <button id="backButton"></button>
+            {card ? 
+            <div>
+                <h2>{card.name}</h2>
+                <img src={card.image_uris.normal} />
+                {card.flavor_text ? <p>card.flavor_text</p> : <p></p>}
+                <h2>{card.frame}</h2>
+                <h3>{card.scryfall_uri}</h3>
+            </div>
+            :
+            <h1>You shouldn't be here!</h1>
+            }
+        </div>
+    )
+}
+
+export default Card;

src/components/CardList.js

@@ -0,0 +1,25 @@
+import React from "react";
+import styled from "styled-components";
+import { Link, useRouteMatch } from "react-router-dom";
+
+
+const Styledimg = styled.img`
+    border-radius: 4.75% / 3.5%;
+    width: 336px;
+    height: 468px;
+`
+
+
+const CardList = (card,key,) => {
+    const { url } = useRouteMatch();
+
+    return(
+        <div key={key}>
+        <Link to={`${url}/${card.card[0].card.tcgplayer_id}`}>
+        <Styledimg src={card.card[0].card.image_uris.normal} />
+        </Link>
+        </div>
+    )
+}
+
+export default CardList;

src/components/CardView.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { connect } from "react-redux";
+import {  getCards } from "../actions";
+import FiveCards from "./FiveCards";
+
+
+const CardView = ({getCards,isFetching,error,dynamic,displayCards,}) => {
+
+    return (
+        <div>
+            {dynamic ? 
+            <div>
+                {dynamic && <FiveCards />}
+            </div>
+            :
+            <div>
+                <p>{error}</p>
+                <button onClick={() => getCards()} className="button-17">Experience the Art</button>
+            </div>
+            }
+
+        </div>
+
+    )
+}
+
+const mapStateToProps = state => {
+    return {
+        isFetching: state.card.isFetching,
+        error: state.card.error,
+        dynamic: state.card.dynamic,
+        displayCards: state.card.displayCards
+    }
+}
+
+export default connect(mapStateToProps,{getCards})(CardView)

src/components/FiveCards.js

@@ -0,0 +1,47 @@
+import React, {useEffect} from "react";
+import { connect } from "react-redux";
+import { fiveCards } from "../actions";
+import CardList from "./CardList";
+import styled from "styled-components";
+
+const styledRow = styled.div`
+    .row {
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-top: 3rem;
+    }
+
+`
+
+
+const FiveCards = ({cards, displayCards,fiveCards}) => {
+    const newCards = (arr) => {
+        const newCards = [...arr]
+        return newCards.sort(() => Math.random() - Math.random()).slice(0, 5)
+    }
+    if(displayCards.length === 0){
+        useEffect(() => {
+            return fiveCards(newCards(cards))
+        }, [])
+    }
+
+
+
+    return (
+        <div>
+            <styledRow className="row">
+                {displayCards && displayCards.map((card, idx) => <CardList card={[{card}]} key={idx}/>)}
+            </styledRow>
+            <button onClick={() => fiveCards(newCards(cards))} className="button-17">Experience the Art</button>
+        </div>
+    )
+}
+
+const mapStateToProps = state => {
+    return {
+        cards: state.card.cards,
+        displayCards: state.card.displayCards
+    }
+}
+
+export default connect(mapStateToProps,{fiveCards,})(FiveCards)

src/components/Header.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { useHistory } from "react-router-dom";
+
+
+const Header = (props) => {
+    const history = useHistory()
+
+    const returnHome = () => {
+        history.push('/')
+    }
+
+    return (
+        <div>
+            <h1 onClick={() => returnHome()}>This is Rebecca Guay</h1>
+        </div>
+    )
+}
+
+
+export default Header;

src/components/Spash.js

@@ -0,0 +1,43 @@
+import React from "react";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+
+const Styledimg = styled.img`
+    border-radius: 4.75% / 3.5%;
+    width: 336px;
+    height: 468px;
+`
+
+const Styleddiv = styled.div`
+    display: flex;
+    margin: auto;
+    flex-direction: row-reverse;
+    max-width: 50%;
+
+    p {
+        color: white;
+        margin: auto;
+        border: double thistle;
+        margin-right: 5rem;
+        flex: none;
+    }
+
+    .content {
+        width: 30rem;
+    }
+`
+
+const Splash = () => {
+    return(
+        <div className="outer">
+            <Link to='/cards'><button className="button-17">Start browsing</button></Link>
+            <h2>Explore the artwork of Magic's most iconic</h2>
+            <Styleddiv className="inner">
+                <Styledimg src="https://cards.scryfall.io/normal/front/9/1/9125f141-ee2c-4b9f-b9c1-9b9a779002d2.jpg?1666655519"></Styledimg>
+                <p className="content">In this page, we'll explore the many artworks of Rebecca Guay. One of my personal favorite artists. From ˻Abundance˺ to ˻Bitterblossom˺, this is her collection.</p>
+            </Styleddiv>
+        </div>
+    )
+}
+
+export default Splash