CRUD: Read

[bobbybaxter]

User Story

As a user, when I navigate to the My Stuff page, I should see a list of all of the items I have hoarded and when I click on the view button on an item, I should be taken to the Single Item page and see details for that item.

AC

When I navigate to the My Stuff page Then then I should see the seeded items showing on the page with a View button And when I click on the view button Then I should be taken to the SingleItem page which shows a card for the item you selected

Dev Notes

Seed Data

• create the seed file db/stuff.json with the item in the comments
• import the seed file into Firebase
• create the file '/helpers/data/stuffData.js' that:
  • defines a function getStuff that takes in a uid and in the body creates a new Promise that calls axios.get() for the seed data from Firebase.
  • defines a function getSingleItem that takes in the arguments (itemId) and makes an axios.get call to the specific item in Firebase

MyStuff

• in MyStuff:
  • in the class MyStuff:
  • define state as { stuff: [], }
  • define a function called getStuff which:
    • defines const { uid } = firebase.auth().currentUser
    • calls stuffData.getStuff, passes the uid, then sets the state of stuff with the response
    • calls componentDidMount() which calls this.getStuff()
  • under the render() define the function makeItemCards which maps over the stuff (in state) and returns <ItemCard> which passes:

    key={item.id}
    item={item}

  • in return() make a div and call {makeItemCards}

ItemCards

• create a new directory called src/components/ItemCard/ItemCard which includes:
  • ItemCard.js which:
  • imports:
    • React from 'react'
    • { Link } from 'react-router-dom'
    • PropTypes from 'prop-types'
    • itemShape from '../../helpers/propz/itemShape'
    • ./ItemCard.scss
  • defines a class named ItemCard that extends React.Component which:
    • defines static propTypes as item: itemShape.ItemShape
  • in the render()
    • import a bootstrap card and add the item information from props and add the following Link tag to view the single item:
    • <Link className="btn-sm btn-outline-success" to={singleLink}>View</Link>
    • above the return define:
      • { item } as this.props
      • singleLink** as /item/${item.id}
  • exports ItemCard
  • ItemCard.scss which defines .ItemCard as { display: block }

SingleItem

• in SingleItem.js:
  • import:
  • { Link } from 'react-router-dom'
  • stuffData from '../../helpers/data/stuffData'
  • in SingleItem class:
  • define state as { item: {} }
  • define the function componentDidMount() which:
    • defines itemId = this.props.match.params.id
    • calls stuffData.getSingleItem(itemId) and in the .then sets the state of item with itemPromise.data
  • in return():
  • create a card similar to the ItemCard, with no buttons.
  • export SingleItem

itemShape

• create the file src/helpers/propz/itemShape.js which:
  • imports `PropTypes from 'prop-types'
  • defines the variable itemShape as PropTypes.shape({}) and inside, define the shape of each property (for example itemName: PropTypes.string.isRequired)
  • export { itemShape}

Firebase

• in Firebase, go to Database Rules and include in "rules" object:

  "stuff": {
   ".indexOn": "uid"
  }

[bobbybaxter]

{
  "item1": {
    "itemName": "Where's Waldo Book",
    "itemImage": "https://images-na.ssl-images-amazon.com/images/I/615IpbOcbvL._SX258_BO1,204,203,200_.jpg",
    "itemDescription": "Hey Wally watchers! Join the hunt for Wally in this wonderful adventure! Take the Wally challenge and go up and down the Corridors of Time, wander the Fantastic Flower Garden, witness the Mighty Fruit Fight, visit Clown Town and see many other wondrous Wonderlands! Wally and friends are hiding in every detailed scene. Full of eye-boggling extras and hours of fun, this fifth classic Wally adventure comes with a striking new cover. Wow! Amazing!",
    "uid": "56789"
  },
  "item2": {
    "itemName": "Eleclover On-Off Table Lamp",
    "itemImage": "https://pixel.nymag.com/imgs/daily/strategist/2018/01/03/reddit/3.w540.h356.2x.jpg",
    "itemDescription": "A table lamp with a built-in gravity sensor that resembles an “On/Off” switch, and toggles on and off accordingly as you press it.",
    "uid": "56789"
  },
  "item3": {
    "itemName": "Freezerboy Refrigerator Magnets",
    "itemImage": "https://pixel.nymag.com/imgs/daily/strategist/2018/01/03/reddit/1.nocrop.w540.h2147483647.2x.jpg",
    "itemDescription": "If only you could play Super Mario on this: a whiteboard and magnet set that will make your fridge resemble one of the original Game Boys.",
    "uid": "56789"
  },
  "item4": {
    "itemName": "Personalizable Game of Thrones Music Box",
    "itemImage": "https://pixel.nymag.com/imgs/daily/strategist/2018/01/03/reddit/2.w540.h356.2x.jpg",
    "itemDescription": "For the superfan who knows the Game of Thrones theme song by heart, a teeny laser-cut music box that you can wind up over and over again",
    "uid": "56789"
  },
  "item5": {
    "itemName": "Privacy Pop Bed Tent",
    "itemImage": "https://pixel.nymag.com/imgs/daily/strategist/2018/01/03/reddit/4.w540.h356.2x.jpg",
    "itemDescription": "When you’re living in a shoe-box apartment with more people than you can handle, this zip-up sleeping pod will at least give you the illusion of your own space.",
    "uid": "56789"
  },
  "item6": {
    "itemName": "Extra Large Watermelon Slicer",
    "itemImage": "https://pixel.nymag.com/imgs/daily/strategist/2018/01/03/reddit/5.nocrop.w540.h2147483647.2x.jpg",
    "itemDescription": "Designed for slicing watermelon, cantaloupe, honeydew, pineapple,lemon,orange,pear and more.These melon tools make it that much easier to get into a daily habit of fruit servings for you and your family.Not only it can cut fruit but also bread,pie,pizza,and many kinds of vegetables!",
    "uid": "56789"
  },
  "item7": {
    "itemName": "My Critter Catcher",
    "itemImage": "https://pixel.nymag.com/imgs/daily/strategist/2018/01/03/reddit/6.w540.h356.2x.jpg",
    "itemDescription": "So you never have to aim and swat with a newspaper again, or get too close to their thousand eyes, a handy spider catcher that scoops them up at long range and keeps them in place with a glue trap until you’re ready to release them.",
    "uid": "56789"
  },
  "item8": {
    "itemName": "Gummy Tsureta",
    "itemImage": "https://pixel.nymag.com/imgs/daily/strategist/2018/01/03/reddit/7.w540.h356.2x.jpg",
    "itemDescription": "Japanese candy that transforms from powder to an edible gummy, with a sour foam component, too — for the person who’s hooked on slime videos.",
    "uid": "56789"
  },
  "item9": {
    "itemName": "ChopSabers Lightsaber",
    "itemImage": "https://pixel.nymag.com/imgs/daily/strategist/2018/01/03/reddit/8.w540.h356.2x.jpg",
    "itemDescription": "A Star Wars collectible that’s functional as well: LED lightsaber chopsticks.",
    "uid": "56789"
  },
  "item10": {
    "itemName": "K&H Window Pet",
    "itemImage": "https://pixel.nymag.com/imgs/daily/strategist/2018/01/03/reddit/9.w540.h356.2x.jpg",
    "itemDescription": "For the indoor cat who wishes he were an outdoor cat, a suction-cup hammock that will let him survey his many winged enemies at close range.",
    "uid": "56789"
  },
  "item11": {
    "itemName": "Chill-O-Matic Beverage Cooler",
    "itemImage": "https://pixel.nymag.com/imgs/daily/strategist/2018/01/03/reddit/10.w540.h356.2x.jpg",
    "itemDescription": "A tailgating tool that will chill any beer within 60 seconds — it beats lugging around a cooler filled with ice.",
    "uid": "56789"
  },
  "item12": {
    "itemName": "Magnetic Levitating Light",
    "itemImage": "https://pixel.nymag.com/imgs/daily/strategist/2018/01/03/reddit/11.w540.h356.2x.jpg",
    "itemDescription": "This moon lamp appears to float in midair thanks to magnets, and can switch between brighter and dimmer modes. It would make a great gift for a kid’s bedroom.",
    "uid": "56789"
  },
  "item13": {
    "itemName": "Pooch Selfie",
    "itemImage": "https://pixel.nymag.com/imgs/daily/strategist/2018/01/03/reddit/12.w540.h356.2x.jpg",
    "itemDescription": "Perfect the dog selfie with this squeaking tennis-ball attachment that helps keep your pup focused on the camera — and also comes very well reviewed.",
    "uid": "56789"
  },
  "item14": {
    "itemName": "GOAT Story Mug",
    "itemImage": "https://imgix.bustle.com/rehost/2016/10/28/8b500e37-d5ec-48d4-9e8c-fd6dbc295515.jpg?w=614&fit=max&auto=format&q=70&dpr=2",
    "itemDescription": "This reusable coffee mug comes with two straps: a small hand strap and a long one so you can carry it across your body if your hands are full. And the coffee holder transforms into a stand for when you get to your destination. Genius!",
    "uid": "56789"
  },
  "item15": {
    "itemName": "GlowBowl Motion Activated Toilet Nightlight",
    "itemImage": "https://imgix.bustle.com/rehost/2016/10/28/800ce911-7261-4ddf-9c91-864af10c1ae8.jpg?w=614&fit=max&auto=format&q=70&dpr=2",
    "itemDescription": "There are few things more annoying than having to turn the bright bathroom light on when you get up to go in the middle of the night. With this genius little toilet bowl light, you’ll be able to guide yourself to the loo without disturbing your sleep any more than necessary.",
    "uid": "56789"
  },
  "item16": {
    "itemName": "SUCK UK Cat Playhouse Series",
    "itemImage": "https://imgix.bustle.com/rehost/2016/10/28/a9e7af82-4ef0-49e2-b7fd-65f3043a1ce1.jpg?w=614&fit=max&auto=format&q=70&dpr=2",
    "itemDescription": "If your cat likes to scratch everything in sight, this is the perfect item for you. Your cat will love using this “turntable” scratch pad — and your couch will finally stop getting clawed up every day.",
    "uid": "12345"
  },
  "item17": {
    "itemName": "Marna Pink Piggy Steamer",
    "itemImage": "https://imgix.bustle.com/rehost/2016/10/28/b2633d52-f113-43fc-a7d4-35ddb3f64256.jpg?w=614&fit=max&auto=format&q=70&dpr=2",
    "itemDescription": "For a cute cooking method that keeps you healthy, all you have to do is place this microwave-safe silicone piggy on top of the ingredients in a pot to steam food.",
    "uid": "12345"
  },
  "item18": {
    "itemName": "Studio Banana Things Ostrich Pillow",
    "itemImage": "https://imgix.bustle.com/rehost/2016/10/28/d293b332-7e19-4dbc-a9f5-5923ccc86faf.jpg?w=614&fit=max&auto=format&q=70&dpr=2",
    "itemDescription": "Hey, sometimes we all need a little extra shuteye, and this unique design creates the private environment necessary to take a power nap wherever you may be. Slip it on your head so the hole is in the front so you can breathe and then lay down on a flat surface and place your hands in the other two holes for optimal comfort.",
    "uid": "12345"
  },
  "item19": {
    "itemName": "H2oVibe Rain Showerhead Jet with Wireless Bluetooth Speaker",
    "itemImage": "https://imgix.bustle.com/rehost/2016/11/16/3f688fdb-4709-44d6-a57f-c3f6164b913f.jpg?w=614&fit=max&auto=format&q=70&dpr=2",
    "itemDescription": "Your shower is missing one thing: music. Not only does it make your shower head’s stream more relaxing and powerful, it also adds a big boost to your morning routine by giving you a chance to listen to your favorite playlist.",
    "uid": "12345"
  },
  "item20": {
    "itemName": "HoodiePillow Inflatable Travel Pillow",
    "itemImage": "https://imgix.bustle.com/rehost/2016/10/28/2f21b57f-1a0a-4170-93bd-1f2b6fa5b8de.jpg?w=614&fit=max&auto=format&q=70&dpr=2",
    "itemDescription": "First of all, I love inflatable travel pillows. They deflate, fold up compactly, and don’t take up much room. Second, what makes this pillow unique is that it features a hoodie attached to it so you can be extra comfortable in transit.",
    "uid": "12345"
  },
  "item21": {
    "itemName": "Starry Bean Bag Chair",
    "itemImage": "http://devilstix.com/wp-content/uploads/2017/05/awesome-bean-bag-chairs-ikea-ikea-kitchen-blue-star-patterned-fabric-for-teens-and-kids-walpaper.jpg",
    "itemDescription": "This lovely star throne will help you spark your imagination as you daydream about getting more stuff.",
    "uid": "12345"
  },
  "item22": {
    "itemName": "Unisex Handmade Crochet Beard Hat",
    "itemImage": "https://imgix.bustle.com/rehost/2016/10/28/7f749eba-ee83-41f5-be93-f273297b8e3a.jpg?w=614&fit=max&auto=format&q=70&dpr=2",
    "itemDescription": "One of the biggest reasons some men grow out their beards: warmth. Now, you don’t need an facial hair to keep your face nice and cozy — you just need this hilarious hat and mask combo.",
    "uid": "12345"
  },
  "item23": {
    "itemName": "Kitchen Maestro Pizza Scissors",
    "itemImage": "https://imgix.bustle.com/rehost/2016/11/14/ab9285b4-8857-4c4f-802b-d04ab5e9ff56.jpg?w=614&fit=max&auto=format&q=70&dpr=2",
    "itemDescription": "If you’ve always found it a little annoying to try to saw homemade pizza using a typical breadknife, you need this pizza-specific set of shears.",
    "uid": "12345"
  },
  "item24": {
    "itemName": "Magical InstaPot",
    "itemImage": "http://www.connectedcrib.com/wp-content/uploads/2014/12/06/instant-pot.jpg",
    "itemDescription": "You are a gormet chef -- with your magical instapot you can make everything from yogurt to porrige... YUM",
    "uid": "12345"
  },
  "item25": {
    "itemName": "Levoit Aria Natural Himalayan Crystal Sea Salt Lamp",
    "itemImage": "https://imgix.bustle.com/rehost/2016/11/14/700f13ad-f493-4bab-bd43-abd21205d138.jpg?w=614&fit=max&auto=format&q=70&dpr=2",
    "itemDescription": "How beautiful and calming is this sea salt lamp? Let it fill your living room with warm light.",
    "uid": "12345"
  },
  "item26": {
    "itemName": "Unicorn Mask Collection",
    "itemImage": "https://images-na.ssl-images-amazon.com/images/I/61EtpWuRHiL._UX425_.jpg",
    "itemDescription": "Deluxe full-head sculpted latex mask with faux hair accents, environmental and non-toxic. Its creepy lifelike design enable you to surprise your families and friends, great for masquerade parties.",
    "uid": "12345"
  },
  "item27": {
    "itemName": "Ab-hancer",
    "itemImage": "https://removeandreplace.com/wp-content/uploads/2013/05/ab-hancer.jpg",
    "itemDescription": "The Ab Hancer will be your choice of six-pack defining tools this summer. It is light weight, is easy to hide under clothing, and dramatically enhances your abs!",
    "uid": "12345"
  },
  "item28": {
    "itemName": "Giant Googly Eyes",
    "itemImage": "https://images-na.ssl-images-amazon.com/images/I/71Cuq15r-LL._SL1500_.jpg",
    "itemDescription": "These are the largest googly eyes I own, and I own a lot of googly eyes. I challenge you to find larger googly eyes than this. I have secured my googly eyes to my bar using velcro stickers. If I want to relocate the googly eyes, I can simply apply the business end of a velcro sticker to wherever I want my googly eyes, and then BOOM, Googly City!",
    "uid": "12345"
  },
  "item29": {
    "itemName": "Glow in the Dark Toilet Paper",
    "itemImage": "https://removeandreplace.com/wp-content/uploads/2013/05/Glow-in-the-dark-toilet-paper.jpg",
    "itemDescription": "Toilet paper roll has a glow-in-the-dark coating. Novelty item, not intended for “actual” use. If used your rear may glow.",
    "uid": "12345"
  },
  "item30": {
    "itemName": "Keyboard Waffle Iron",
    "itemImage": "https://removeandreplace.com/wp-content/uploads/2013/05/keyboard-waffle-iron.jpg",
    "itemDescription": "The waffles come out of the iron in the shape of a keyboard, which is perfect for any breakfast-loving nerd.",
    "uid": "12345"
  }
}