Tutorial

📚 Getting Started

Let's learn how to develop simple pieces of the website to prepare you for coding the actual site!

Lost? Make sure to read the README.md first!

Stuck? Check out branch tut-kdo for reference!

1. Pull the branch called tutorial
2. Create a branch tut-<First Name Initial + Last Name> from the tutorial branch

First Name: Kevin (k)
Last Name: Do (do)
Branch name: tut-kdo

3. With VSCode open, open the terminal and type yarn (You should be in the AztecGameLaboratory directory!)

C:\Users\YOUR_COMPUTER_NAME\WHERE_THE_REPO_WAS_CLONED\AztecGameLaboratory> yarn

4. Start your development locally on your computer with yarn start
5. Open the tutorial folder located in src/
6. Create your own folder as tut-<First Name Initial + Last Name> within the tutorial folder

First Name: Andrew (a)
Last Name: De Leon (deleon)
Folder name: tut-adeleon

7. Change directory to the folder you just created

⚛️ React

React Documentation

1. Create a file named Tutorial.js
2. Create a class component within the file you just made <First Name + Last Name> + Tutorial

Git Commit Reference

import React, { Component } from "react";

class KevinDoTutorial extends Component {
  render() {
    return ();
  }
}

export default KevinDoTutorial;

3. Create a functional component and add it to your class component

import React, { Component } from "react";

class KevinDoTutorial extends Component {
  state = {
    count: 0
  };

  onClickHandleCount = e => {
    this.setState({
      count: (this.state.count += 1)
    });
  };

  render() {
    return (
      <React.Fragment>
        <FunctionalComponent />
        <button onClick={this.onClickHandleCount}>Click me to increase count!</button>
        <p>Count: {this.state.count}</p>
      </React.Fragment>
    );
  }
}

const FunctionalComponent = () => {
  return <h1>Hi, I am a FunctionalComponent</h1>;
};

export default KevinDoTutorial;

3. Import that component you just made in App.js

Git Commit Reference

import KevinDoTutorial from "./tutorial/tut-kdo/Tutorial";

...

class App extends Component {
  render() {
    return (
      <div className="App">
        ...
        <KevinDoTutorial />
      </div>
    );
  }
}

export default App;

⚛️ Redux

Redux Documentation
Reselect Documentation

1. Import react-redux to Tutorial.js

import { connect } from "react-redux";

2. Connect your component and replace the previous export in Tutorial.js

export default connect(mapStateToProps)(KevinDoTutorial);

3. Add mapStateToProps right above the export

const mapStateToProps = state => {
  return {
    testData: selectTestData(state)
  };
};

4. Use a selector to retrieve testData

import { selectTestData } from "../../redux/testSelector";

5. Display testData.test within in your Tutorial.js

Git Commit Reference

...

render() {
  return (
    <React.Fragment>
      <FunctionalComponent />
      <p>Redux Data: {this.props.testData.test}</p>
      <button onClick={this.onClickHandleCount}>Click me to increase count!</button>
      <p>Count: {this.state.count}</p>
    </React.Fragment>
  );
}

...

📑 Redux Actions

1. Import testAction to Tutorial.js

import { bindActionCreators } from "redux";
import { testAction } from "../../redux/testActions";

2. Add a mapDispatchToProps and reconfigure the export default connect

...

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      testAction
    },
    dispatch
  );

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(KevinDoTutorial);

3. Create a button to use the testAction

Git Commit Reference

...

render() {
  return (
    <React.Fragment>
      <FunctionalComponent />
      <p>Redux Data: {this.props.testData.test}</p>
      <button onClick={this.onClickHandleCount}>Click me to increase count!</button>
      <p>Count: {this.state.count}</p>
      <button onClick={this.props.testAction}>Click me to run testAction!</button>
    </React.Fragment>
  );
}

...

4. Observe that in Redux Dev Tools that the state changed!
5. Make your own action in testActions.js in the folder redux

...

export const kevinAction = () => {
  return {
    type: "KEVIN",
    payload: "hehe xd"
  };
};

6. Edit the testReducer.js in the folder redux to receive and change it's state based on that action!

Git Commit

export default (state = initialState, action) => {
    switch (action.type) {
        case "TEST_ACTION":
            return { test: "Hello Redux" };
        case "KEVIN":
            return { test: "KEVIN WAS HERE" };
        default:
            return state;
    }
};

7. Update the Tutorial.js!

import { testAction, kevinAction } from "../../redux/testActions";

...

<button onClick={this.props.kevinAction}>Click me to run kevinAction!</button>

...

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      testAction,
      kevinAction
    },
    dispatch
  );

🖥️ Testing

Jest Documentation
Enzyme Documentation

1. Install the prerequisites for using Jest with React

yarn add --dev jest

2. Install Enzyme and Enzyme Adapter React 16

Enzyme Adapter for React v16:

yarn --save-dev enzyme enzyme-adapter-react-16

(or if using npm)

npm i --save-dev enzyme enzyme-adapter-react-16

3. Refactor the counter in Tutorial.js to its own component called Counter.js

Git Commit for Tutorial Git Commit for Counter

2. Create a unit test for your component by creating a FILE_NAME.test.js

Git Commit

import React from "react";
import { shallow } from "enzyme";
import Counter from "./Counter";

it("increments count correctly after the button is pressed", () => {
  const wrapper = shallow(<Counter />);

  wrapper.find("button").simulate("click");
  wrapper.update();

  expect(wrapper.state().count).toEqual(1);
});

3. To test, yarn test and make sure all tests pass

• If you encounter an error with the tests not starting please look HERE
• fF you encounter an error with the enzyme adapter please look HERE

🌳 Workflow

1. Submit a PR (Pull Request) to merge your tut-<First Name + Last Name> branch into tutorial branch

2. Use the PR template under .github folder or in the wiki

> ⚠️ NOTE: use notes like this to emphasize something about the PR. 
> This could include other PRs this PR is built on top of; new or 
> removed environment variables; reasons for why the PR is on hold; 
> or anything else you would like to draw attention to.

## Problem

_What problem are you trying to solve?_

## Solution

_How did you solve the problem?_

## Other changes (e.g. bug fixes, UI tweaks, small refactors)

## Deploy Notes

_Notes regarding deployment of the contained body of work. These should note any
new dependencies, new scripts, etc._

**New environment variables**:

-   `env var` : env var details

**New scripts**:

-   `script` : script details

**New dependencies**:

-   `dependency` : dependency details

3. Assign reviewers to the PR and yourself as assignee on the right sidebar

My Example PR Reference

Finally, the checks will run, someone WILL approve and you're officially a AGL Developer!

Please ping me if you have any questions and check out my tutorial branch tut-kdo if you get stuck!