Slack invite with react and slack api

Question

I am attempting to set up a slack invite based on this tutorial: https://www.robinwieruch.de/slack-invite-javascript-react

I have everything set up the same as the example but I'm getting this error

TypeError: onUserAuthSignUp is not a function

I can see in the code where it's being destructured:

   const { onUserAuthSignUp } = this.props

But I cannot see what I'm missing, i'm still learning JS and React so i'm thinking it's something really obvious.

Full code for the form is below, <Form /> is then imported into the index.js file.

// Form.js

        import React, { Component } from "react"
        import axios from 'axios';

        var SLACK_TOKEN = 'slack-token';
        var SLACK_INVITE_ENDPOINT = 'https://slack.com/api/users.admin.invite';

        function inviteSuccess() {
        console.log('success');
        }

        function inviteError() {
        console.log('error');
        }

        function inviteToSlack(email) {
        var QUERY_PARAMS = `email=${email}&token=${SLACK_TOKEN}&set_active=true`;

        axios.get(`${SLACK_INVITE_ENDPOINT}?${QUERY_PARAMS}`)
            .then(inviteSuccess)
            .catch(inviteError);
        }

        export class Form extends Component {
            constructor(props) {
            super(props);

            this.state = {
                email: '',
                passwordOne: '',
                passwordTwo: '',
                username: '',
                isSlackInvite: true,
            };

            this.onSubmit = this.onSubmit.bind(this);
            this.onCheckSlackInvite = this.onCheckSlackInvite.bind(this);
            }

            onCheckSlackInvite(e) {
            this.setState(prevState => ({ isSlackInvite: !prevState.isSlackInvite }));
            }

            onSubmit(e) {
            e.preventDefault();

            const {
                email,
                passwordOne,
                username,
                isSlackInvite,
            } = this.state;

            const { onUserAuthSignUp } = this.props;

            if (isSlackInvite) {
                inviteToSlack(email);
            }

            onUserAuthSignUp(email, passwordOne, username);
            }

            render() {
            const {
                email,
                passwordOne,
                passwordTwo,
                username,
                isSlackInvite,
            } = this.state;

            return (

                    <form onSubmit={this.onSubmit}>
                        <input
                            type="text"
                            placeholder="Full Name"
                            value={username}
                            onChange={e => this.setState({ username: e.target.value})}
                        />
                        <input
                            type="text"
                            placeholder="Email Address"
                            value={email}
                            onChange={e => this.setState({ email: e.target.value})}
                        />
                        <input
                            type="password"
                            placeholder="Password"
                            value={passwordOne}
                            onChange={e => this.setState({ passwordOne: e.target.value})}
                        />
                        <input
                            type="password"
                            placeholder="Confirm Password"
                            value={passwordTwo}
                            onChange={e => this.setState({ passwordTwo: e.target.value})}
                        />

                        <div>
                            <label>Join Slack Group</label>
                            <input
                                type="checkbox"
                                checked={isSlackInvite}
                                onChange={this.onCheckSlackInvite}
                            />
                        </div>

                        <button
                            disabled={passwordOne !== passwordTwo || passwordOne === '' || username === ''}
                            type="submit"
                            className="btn"
                        >
                            Sign Up
                        </button>

                    </form>
            )
            }
        }

Looked at the posted tutorial and it seems like it's incomplete. The author makes reference to `this.props. onUserAuthSignUp` but never actually passes that in as a prop to the `` component. You're not missing anything, the tutorial is. — imjared, Jan 07 '18 at 01:12
Here is how the API method for inviting users work: https://stackoverflow.com/questions/30955818/slack-api-team-invitation/36114710#36114710 — Erik Kalkoken, Jan 07 '18 at 21:18

score 0 · Answer 1 · answered Jan 07 '18 at 10:28

Tutorial author here. Sorry for being unclear in the tutorial!

The SignUp component only showcases how it can be used afterward (e.g. in a sign up process). But it doesn't show how to implement the whole sign up, it merely shows how the Slack invite can be used as an opt-in in such a form:

if (isSlackInvite) {
  inviteToSlack(email);
}

If you are curious to implement the whole sign up process, checkout the Complete Firebase in React authentication tutorial. There you will implement the SignUp form where you can opt-in the Slack invite afterward.

Slack invite with react and slack api

1 Answers1