So let's just close out all the files, and I want to go to our components directory and create a new folder called shop in this folder in component's let's create a new file called shop.js, all right. Now in here let's import React and component from react and let's say class shop extends component and then let's render just a div with a class name of shop and then let's export this class. Now in this div I just want to say shop... right.

shop.js

import React, { Component } from 'react';

class Shop extends Component {
    render() {
        return (
            <div className='shop'>
                shop...
            </div>
        )
    }
}

export default Shop;

Then let's save that and get out of here, and let's go into bootstrap.js, in here what I want to do is create another route and I want to call this /shop. Let's change the component to shop and let's import shop from components/shop/shop.

bootstrap.js

import './style/main.scss';

import history from './history';

import Layout from './components/layout';
import Signin from './components/auth/signin';
import Signup from './components/auth/signup';
import Account from './components/account/account';
import Shop from './components/shop/shop';

function main() {
  ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
      <Router history={history}>
        <Layout>
          <Switch>
            <Route path='/' exact component={Signin}/>
            <Route path='/signin' exact component={Signin}/>
            <Route path='/signup' exact component={Signup}/>

            <Route path='/account' exact component={Account}/>

            <Route path='/shop' exact component={Shop}/>
          </Switch>
        </Layout>
      </Router>
    </Provider>
    , document.querySelector('.app-wrapper'));
}

document.addEventListener('DOMContentLoaded', main);

Okay, there you go. Now what we want to do is we want to navigate to this route and see if we see our component, so let's log in hit shop and you'll see it says shop...

So next thing I want to do is create a css file and align it in our content in our grid okay. So let's go to style let's create new folder called shop, let's create a new file in the style folder called shop.scss and let's say .shop and we'll say grid row is content start to content end and then grid column is start to end, I think that's what it is.

shop.scss

.shop {
    grid-row: content-s/content-e;
    grid-column: s/e;
}

Let's check our signup.scss, yeah that's it. Now what we want to do is import this into main.scss so let's go into main and let's say @import shop/shop.

main.scss

// SHOP
@import 'shop/shop';

Okay cool, I was just moving things around a bit. Okay, so we have that now we need to see if this is actually working, it should be good. All right, it looks like it says shop right there, everything looks nice.

Now let's just reference or design really quickly and see what we need. Okay, so there's a few things we need, let's go into our shop component and comment these all. Okay, so we need a search bar, so let's go comment that in the shop.js. Then we need basically a bunch of these components okay, we need the product components. So let's say shop product component we'll call this shop search bar component and then that's good. Now we need a couple more things we need to set these headers which will do in this video and then we need this cart component all right, we'll obviously put a button for that.Okay, so what we want to do is we want to say cart button.

shop.js

import React, { Component } from 'react';

class Shop extends Component {
    render() {
        return (
            <div className='shop'>
                {/* shop search bar */}
                {/* shop product */}
                {/* shop cart button */}
            </div>
        )    
    }
}

export default Shop;

So those are the three components we need to build and basically use, so it shouldn't be too complicated although we're going to also have to develop a couple action creator's right. We're going to want to fetch these from a database, we'll simulate fetching those from a database the same way we did with our products, let me show you what I'm talking about.

Back in purchases.js we say fetchUserPurchases and then we hit that and we go to user and we fetch these purchases okay, and this is simulating a server right, we're assuming that we're getting this data back from the server. We're then setting it in a reducer in user reducer right. So SET_USER_PURCHASES so we want to do the same exact thing except for with shop products okay.

So let's put a componentDidMount so we can comment that in there, let's say fetch shop products okay, and then what we also need to do is we need to set the header links and set the navbar links right. But before we can set the navbar links we need to actually fetch the categories because same with products, it's going to be the same thing as what we're doing with the products because the nav bar links are going to be on the backend.

You want to be in a position where we can fetch this from the server because we want to be able to update the product categories and products on the back end and not have to update the front end just to update the categories. We want this to just update automatically whenever we change anything on the back end right. So we want these to exist on the back end as models, as category models like content that have products attached to them, or associated with them, relationships, database relationships.

So what we need to do is fetch those and then we need to set them, we can obviously set the log in automatically, but we can't do that with the navbar links so we need to fetch navbar links and then we need to set navbar links right. So header links can be done very first, that's really easy. Now that's all we have to do okay.

So let's look again and just go over this one more time okay. We have the products right, and then we'll deal with the product on it's own, we're not going to comment out everything we're going to do with the product because that's a whole other component okay. So just know that we need to create that and then we'll talk about that once we get around it.

Okay, and then we need to be able to click on this and basically filter our products here, we need to say hey I only want to see products with this title. So we'll handle that when we click on the links alright, so let's say filter products with links, that's not going to be done in the componentDidMount, but all of these will be okay.

So let's go ahead and get the header links in there and then the logging buttons, that's literally it, just the logging button and then we will move on to the next video since we have this all commented out. All right, so let's go into where we've done this before so account information has some links right, it's account.js there we go.

Okay, see we have header links let's copy these header links and let's get out of account.js and paste it in here, that way we don't have to remember the exact model. And then in here it's going to be login and it's going to head us to signup. Now what we need to do is import connect from react redux and good thing we're doing this now because we're going to need it a few more times and then we'll say shop is equal to connect and we'll say mapStateToProps because we'll need that eventually to actually use the products and navbar links that we fetched.

So we're just going to put that in now and say function mapStateToProps, okay and we'll just return the entire state for now. So that's all set up, now we can call the header links call okay, so let's go see what that is one more time. Is it just set header links? I think it might be this.props.setHeaderLinks. Then we just need to pass in headerLinks.

Okay, so let's go see if this works in our browser, and then if it does we'll move on to the next video. Okay set headerLinks is not functioning, okay actions is not defined. We need to import actions okay so import your actions and let's make sure this is all working.

So these are the lines of code I've written so far in this component. All right let's go check it out. We got our login button takes us to sign up, no we don't want to go to sign up we want to go to sign in. And that's weird it's showing us. Oh I was thinking of a different form, I was thinking of the account information form. I was wondering why that was looking that way.

Okay, so let's go ahead and go to shop, let's go back here and let's say it takes us to sign in. All right, so we're good to go, and we know that works so let's go ahead and hit command + j to open the terminal in VS Code, and let's commit our code.

Terminal

git status
git add .
git commit -m "built base for shop component. built shop route etc"

All right I'll see in the next video.

Resources

Source code