Now if you don't have that server running or mongo's not working. Just make sure that you have it running or this isn't really going to work. It's really necessary that you have those both running and if you're really not sure of whether or not it's running just continue on, and by the time we hit an end point it should be pretty clear that it's not running or working or something. I'll say something when you should definitely know that it's not running.

So in my code editor here and this is the client. So this is the property management react app. We're not going to deal anything with our server anymore at least in the videos. I have signin.js open, signup.js open, signupForm.js, and signinForm.js**. In this video we are going to actually get our log in working. We're going to get this working.

So what we need to do is: let me reload the page. Alright, there shouldn't be any errors. Yeah there's no errors, and what we want to do is basically hit the login button and have it not reload the page, but have it do something with our data instead.

Now if you go to Redux Dev tools to the left or wherever you want to put it, and let's put in some data here. Let's just make sure it's got that data. Let's go to our dev tools here. You'll see that we have values email and password.

Now what we need to do is take these pieces of data, and we have them in redux so it's going to be really simple to get these pieces of data without having to do much. We want to throw them at an endpoint and sign up our user. We don't want to sign in. We want to build out the sign up feature.

So let's go ahead and go to our application code here and let's go to signup.js. Let's create a function for submitting. Let's say:

signup.js

    onSubmit = (fields) => {
        console.log('trying to submit', fields);
    }

    render() {
        return (
            <div className='sign-up'>
                <SignupForm onSubmit={() => this.onSubmit()}
            </div>
        )
    }

Now what we want to do is basically call this function. Now let's go to our signupForm.js, and actually have it call this function: onSubmit which is a function, which is then going to call our onSubmit in our signup.js. So in signupForm.js go into render and say:

signupForm.js

    const { handleSubmit }

Now this is a part of redux form. So it might be a little mysterious as to where the function is coming from, but just know that it hooks up to our sign up and it's going to let us submit our values. So let's say:

signupForm.js

    const { handleSubmit } = this.props;

Next thing we need to do is go to a form and say:

signupForm.js

    const { handleSubmit } = this.props;

    return (
        <form onSubmit={handleSubmit} className="sign-up-form">


    )

Now if you remember, our page was reloading when we submitted. We don't want it to do that, and in redux form this handleSubmit function has that built in, and we've done it before. I'm not sure if we've done it more than once, but I do know for a fact that we did it in the Mad Libs application.

So if you did that app, to prevent it from reloading we typed in event.preventDefault in our function. We don't have to do that because we have redux form. Let's go into our application here and let's hit Create count and before you do that will open our console just so we can see it printing. Alright let's go to console and hit create account, and you'll see trying to submit undefined.

So that should be working, but let's try and take a look at why it might not be printing out our details or fields. So what we need to do is go into code and we might have not passed the event in. So let's go into signup.js and instead of having this blank let's say event:

signup.js

    render() {
        return (
            <div className='sign-up'>
                <SignupForm onSubmit={(event) => this.onSubmit(event)}
            </div>
        )
    }

You can see now that it says trying to submit and then it has an object with our email and password. By passing in the event we have access to a redux fields. Let's go ahead and use these values now to sign our user in, or to create our user account. So we need to type in a full name like "Max Asher". Then let's say for Unit: 115. Then let's say create account, and you'll see is trying to submit, email, password, full name, and unit.

We have access to all of our data, and now we just need to throw it into a Redux Action Creator, and throw that to a reducer so we can return a get request to our server. Let's go ahead and start creating that now.

Let's get rid of this console.log in our onSubmit function on signup.js, and let's scroll up and let's go into our actions folder in our source directory and let's create a new file, and let's call it types.js. Now we're going to need some types throughout our application, but basically what we're going to do is create a type so we can set our data once we retrieve it.

We're not going to deal with that now. As a matter of fact just go ahead and delete the types.js file. That's after we get our data. I don't want to get too confusing here, so don't create that types file if you haven't or delete it if you just created the types.js file.

Now in index.js we're going to want to basically dispatch and get requests to our server which is running on localhost 3090. If you have it running in the terminal, it should say it's running on 3090. I'm going to just stop it and clear this and going to run this. Alright listening on 3090, and it says mongo DB is connected and all that.

Okay so I'm going to close this, and let's write this out. Basically what we want to do is install a third party library called redux thunk, or we're not going to be able to do this. Let's go to the terminal here and open up a new instance and let's just say npm install --save redux thunk. Look at that import carefully. Go ahead and hit return on that.

It's going install redux-thunk and save it to our package JSON, and that's basically going to allow us to write our middleware in our action creators. Now if we weren't using redux thunk we'd be using what's called redux promise, but that would require us to basically have a whole nother layer that we have to throw our types through and not just a reducer.

That would be called middleware and it'd be doing the same exact thing as redux-thunk, except for redux-thunk is 100 times easier to write, and it's less code so we might as well use it. Let's clear this, and let's close the terminal and let's import it. Let's go into actions and create a file, and call it auth.js. Let's put our authentication actions in here. Let's say:

auth.js

export function signUp(fields, success) {
    console.log(fields);
    return function(dispatch) {

    }
}

We're going to install another dependency. So go to your console or terminal and say npm install --save axios. That's just going to allow us to perform get requests pretty simply. Alright, let's go ahead and close this terminal. Once it installs, let's import it at the top here:

auth.js

import axios from 'axios';

export function signUp(fields, success) {
    console.log(fields);
    return function(dispatch) {
        axios.post(`localhost:3090/signUp`)

    }
}

Now again you're going to have to make sure that this is actually running. You'll notice that it's not ff something breaks when we try and perform the signup. Now what I want to do with localhost is:

auth.js

import axios from 'axios';

export function signUp(fields, success) {
    console.log(fields);
    return function(dispatch) {
        axios.post(`${ROOT_URL}/signUp`)

    }
}

Then what I want to do is basically put this in its own file, because we're going to be using this URL in multiple files' interactions. So let's go to source, and let's create a new file and let's call it config.js, and let's say:

config.js

export const ROOT_URL = 'localhost:3090';
}

We're going to change this up if we decide to put it on devserver or production server. Now let's go into auth.js, and let's import it and pass in our fields which are going to be our data.

auth.js

import axios from 'axios';

import { ROOT_URL } from '../config';

export function signUp(fields, success) {
    console.log(fields);
    return function(dispatch) {
        axios.post(`${ROOT_URL}/signUp`, fields)
            .then(response => {
                //do something with response
            })

    }
}

Now we want to do something with that response. This has a potential failing like if you don't provide a unit number, or you provide some bad details, or you have an email address that's already been used. We're going to get a bad response that is going to be an error. So let's say:

auth.js

import axios from 'axios';

import { ROOT_URL } from '../config';

export function signUp(fields, success) {
    console.log(fields);
    return function(dispatch) {
        axios.post(`${ROOT_URL}/signUp`, fields)
            .then(response => {
                //do something with response
            })
            .catch(err => {
                if(err) { console.log(err) }
            })
    }
}

Now in order to get access to this function we need to basically include into our index.js in our actions. So let's go in here, and let's say:

index.js

import {
    signUp
} from './auth';

export {
    signUp
};

Now we should have access to it. All we need to do now is hook up redux to our component or signup.js, and then we need to call it. So let's go ahead and do that in the next video. Let's hit command + j and let's commit our code, and say git status, git add ., and git commit -m "installed redux-thunk and axios. built auth actions" We didn't even use them, but we will use them later on. See you in the next video.

Resources

• Source Code