manankalra / react-assessment

React-Assessment

Dependencies

• redux: for state manangement
• bootstrap: for pre-styled components
• reactstrap: for custom bootstrap components for react
• react-router-dom: linking/navigation/routing etc.

Structure

• Components

  • All components (other than App) are included in the Components directory.
  • ShopCard
    • uses reactstrap extensively for the provision of pre-styled card components, animations for collapse, etc.
    • has a state which defines the quantity of a default products as 1
    • the card is collapsed by default - also a part of state - this behavior can be seen/reversed on hovering the mouse over a product
    • on hovering an input field is augmented, where the quantity can be changed which is equal to 1, by default
    • the details of a product are received as props
    • the component renders a Card with an id; the state changes on hovering of the mouse over it
    • how to structure a card is referenced from here - https://reactstrap.github.io/components/card/
    • all of the additional css is inline
  • ShoppingList
    • uses reactstrap to structure many cards into a row and column structure
    • the render function first maps all of the products received as props in a single column and then splits the list into rows - each row has 3 cards
  • Menu
    • renders the navbar shown on the top of the page
    • has a state that just takes care whether the cart is open or closed
    • includes the heading, an image and a badge which displays the number of items in the cart
    • when you click on the image, you'll be taken to the Cart component
    • reference - https://reactstrap.github.io/components/navbar/
  • Cart
    • makes use of the Table component of reactstrap to display a list of selected items
    • receives the items in the cart and a function to remove the specific item as props
    • renders table data which includes image, id, name and price from the cart items received
    • sums up the total amount and displays the final Price
    • clicking close button takes you to the previous page
    • clicking checkout button routes to another page with a pre-defined message
  • HomePage
    • one of the main pages
    • gets the products and the items added in the cart as props
    • renders the Menu component, passes the length of the card which is displayed on the badge
    • renders the ShoppingList component, passes the products to be rendered and the addProduct method to add an item to the cart
  • CartPage
    • referenced from https://reactstrap.github.io/components/modals/
    • makes use of a modal inside which the Cart coponent is rendered
    • calculates the total price if the cart items and displays it below the cart
    • contains two buttons - checkout leads to another page, close leads to previous pages
    • on checkout, another modal is displayed with a message and a close buttons - which leads to the home page
    • close button on the cart page also leads to the home page
  • ProductPage
    • renders a modal when a product from the shopping list is clicked
    • the modal also has the functionality of adding an item to the cart
    • close button on the modal leads back to the home page
  • Login
    • uses reactstrap for rendering a form
    • doesn't function as of now
  • App
    • fetched products before the component mounts
    • defines methods to add product, to remove product, and to update the cart
    • defines mapStatetoProps and mapDispatchToProps necessary for the redux functioning
    • renders HomePage component on default route of /
    • renders CartPage component when route is changed to /cart on clicking the cart image present in the Menu component

• state

  • contains redux related stuff
  • has two directories, one for the cart and another for a product
  • each of them has a action and a reducer
  • actionType.js defines constants fetching products, adding an item to the cart, and deleting an item from the cart
  • reducer.js combines the abovementioned reducers
  • store.js creates a store from the combined reducer

• lib

  • has a logos directory which includes a PNG image for the cart logo displayed on the top-right corner
  • has a product directory which has a file products.mock.js that exports an array of the objects which are displayed
  • each object has an id, an image url which I've by default set to an image of GoPro action camera I found on the internet (the link is shortened), a name, a price for the product and a description.
  • another file is api.js in the same directory that defines a function which returns the mock products defined in the above mentioned file.