# Basic CREATE NEAR App Integration

## Imports

import { useState, useEffect, useRef } from "react";

import {
  Nav,
  Navbar,
  Button,
  Container,
  Row,
  Card,
  Alert,
  Form,
} from "react-bootstrap";

## Navbar Template

After Setting up [react bootstrap](https://react-bootstrap.netlify.app/getting-started/introduction)

Use this block of code to set up your navbar

      <Navbar>
        <Container>
          <Navbar.Brand href='#home'>Navbar with text</Navbar.Brand>
          <Navbar.Toggle />
          <Navbar.Collapse className='justify-content-end'>
            <Nav.Link
              onClick={window.walletConnection.isSignedIn() ? logout : login}
            >
              {!window.walletConnection.isSignedIn()
                ? "Login"
                : window.accountId}
            </Nav.Link>
          </Navbar.Collapse>
        </Container>
      </Navbar>

The only real "meat" of this block of code is the actual login button....

            <Nav.Link
              onClick={window.walletConnection.isSignedIn() ? logout : login}
            >
              {!window.walletConnection.isSignedIn()
                ? "Login"
                : window.accountId}
            </Nav.Link>

Utilizing `walletConnection`'s method `isSignedIn` one is able to check whether or not the user is signed in. This logic is able to be applied to a variety of applications with a simple boolean.

## Change and View Methods

We will use this body of code to discuss change and view methods

First we will set up some State Variables

  const [userMessage, changeUserMessage] = useState(
    "User Message To Be Displayed"
  );

  const [buttonDisable, changeButtonDisable] = useState(false);

  const messageRef = useRef();

Next we will setup a useEffect to read the current message from the Blockchain.

  useEffect(() => {
    const getMessage = async () => {
      changeUserMessage(
        await window.contract.get_greeting({ account_id: window.accountId })
      );
    };
    getMessage();
  }, []);

Afterwards we will

  const submit = async (e) => {
    e.preventDefault();
    changeButtonDisable(true);
    await window.contract.set_greeting({ message: messageRef.current.value });
    alert("please refresh page");
  };

Now that we have these two items in place we can build out the body of our application

<Container>
        <Row
          style={{ marginTop: "10vh" }}
          className='d-flex justify-content-center'
        >
          <Card style={{ width: "18rem" }}>
            <Card.Body>
              <Card.Title>Your Message</Card.Title>
              <Card.Subtitle className='mb-2 text-muted'>
                Display Port for your message to the world!   </Card.Subtitle>
              <Alert>{userMessage}</Alert>
            </Card.Body>
          </Card>
        </Row>
        <Row className='d-flex justify-content-center'>
          <Form>
            <Form.Group className='mb-3' controlId='formBasicPassword'>
              <Form.Label>Enter Your Message Here</Form.Label>
              <Form.Control ref={messageRef} placeholder='Enter Message' />
            </Form.Group>

            <Button
              disabled={buttonDisable}
             onClick={submit}
              variant='primary'
              type='submit'
            >
              Submit
            </Button>
          </Form>
        </Row>
      </Container>