How to build an Ethereum URL shortener dApp

$ node -v

$ git --version

pragma solidity ^0.5.2;

contract URLShortner {
  struct URLStruct {
    address owner;
    string url;
    bool exists;
    bool paid;
  }
  mapping (bytes => URLStruct) lookupTable;
  mapping (address => bytes[]) public shortenedURLs;
  address[] accts;
  address payable owner;
  event URLShortened(string url, bytes slug, address owner);

  constructor() public { owner = msg.sender; }

  function shortenURLWithSlug(string memory _url, bytes memory _short, bool paid) public payable {
    bool paidDefault = false;
    if (!lookupTable[_short].exists){
      lookupTable[_short] = URLStruct(msg.sender, _url, true, paid||paidDefault);
      shortenedURLs[msg.sender].push(_short);
      if(shortenedURLs[msg.sender].length < 1) {
        accts.push(msg.sender);
      } 
      emit URLShortened(_url, _short, msg.sender);
    }  
  }

  function shortenURL(string memory url, bool paid) public payable {
    bool paidDefault = false;
    bytes memory shortHash = getShortSlug(url);
    return shortenURLWithSlug(url, shortHash, paid||paidDefault);
  }

  function listAccts() public view returns (address[] memory){
    return accts;
  }

  function getURL(bytes memory _short) public view returns (string memory) {
    URLStruct storage result = lookupTable[_short];
    if(result.exists){
      return result.url;
    } 
    return "FAIL";
  }

  function kill() public {
    if (msg.sender == owner) selfdestruct(owner);
  }

  // privates
  function getShortSlug(string memory str) internal pure returns (bytes memory) {
    bytes32 hash = sha256(abi.encodePacked(str));
    uint main_shift = 15;
    bytes32 mask = 0xffffff0000000000000000000000000000000000000000000000000000000000;
    return abi.encodePacked(bytes3(hash<<(main_shift*6)&mask));
  }
}

$ mkdir 0xsu

$ cd 0xsu

$ git clone https://github.com/dU4E/0xsu-front-end/

$ cd 0xsu-front-end

$ npm i react

$ npm install -g create-react-app

import React from "react";
import Du4e from "@sahilsen/0xsu-js-lib";
import "./App.css";
import Navbar from "react-bootstrap/Navbar";
import { Badge, Container, Form, Modal, Button, Col } from "react-bootstrap";

class App extends React.Component {
  state = {
    shortURL: "",
    copied: null,
    urls: [],
    show: false
  };

  constructor(props) {
    super(props);
    this.shortenUrl = this.shortenUrl.bind(this);
    this.copy = this.copy.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.viewAcct = this.viewAcct.bind(this);
    this.shortener = new Du4e();
    this.shortener.onTxSend = txid => {
      console.log("TXID", txid);
      this.setState({ shortURL: "Waiting for tx to confirm" });
    };
    this.shortener.onURLShortened = (err, result) => {
      console.log("result", result);
      this.setState({ shortURL: result.args.slug });
    };
  }

  copy() {
    let el = document.createElement("textarea");
    el.value = this.state.longURL;
    el.setAttribute("readonly", "");
    el.style.position = "absolute";
    el.style.left = "-9999px";
    document.body.appendChild(el);
    el.select();
    document.execCommand("copy");
    document.body.removeChild(el);
    this.setState({ copied: true });
  }

  handleClose() {
    this.setState({ show: false });
  }

  viewAcct() {
    this.shortener.listOfUrls(list => {
      console.log(list);
      this.setState({ urls: list });
    });
  }

  shortenUrl(evt) {
    evt.preventDefault();
    this.shortener.shortenUrl(this.refs.short.value, { cb: () => {} });
  }

  render() {
    let { shortURL } = this.state;
    return (
      <div>
        <Navbar bg="light">
          <Navbar.Collapse className="justify-content-end">
            <a href="#" onClick={this.viewAcct}>
              Account
            </a>
          </Navbar.Collapse>
        </Navbar>
        <Container className="text-center">
          <br />
          <h1 className="App">0xSU.co</h1>
          <p>
            Your friendly neighborhood decentralized Ethereum Short URL maker
          </p>
          <br />
          <form onSubmit={this.shortenUrl}>
            <Form.Row>
              <Col sm={9}>
                <Form.Control
                  size="lg"
                  type="text"
                  ref="short"
                  placeholder="Paste your long URL here"
                />
              </Col>
              <Col sm={3}>
                <Button variant="primary" size="lg" type="submit">
                  Shorten
                </Button>
              </Col>
            </Form.Row>
          </form>

          <div className={shortURL ? "" : "hidden"}>
            <br />
            <br />
            <span className={shortURL.startsWith("Waiting") ? "loading" : ""}>
              {shortURL.startsWith("Waiting")
                ? shortURL
                : `http://localhost:3001/${shortURL}`}
            </span>
            &nbsp;
            {!shortURL.startsWith("Waiting") && (
              <Badge variant="success" onClick={this.copy} className="copy">
                {this.state.copied ? "Copied!" : "Copy"}
              </Badge>
            )}
          </div>
          <br />
          <br />
          <br />
          <br />

          <a href="https://github.com/du4e">Learn more / source code</a>
        </Container>
        <Modal
          show={this.state.urls.length > 0 || this.state.show}
          onHide={this.handleClose}
        >
          <Modal.Header closeButton>
            <Modal.Title>Your Shortened URLs</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            {this.state.urls.map(x => {
              return (
                <p key={x}>
                  <a href={`http://localhost:3001/${x}`}>{x}</a>
                </p>
              );
            })}
          </Modal.Body>
        </Modal>
      </div>
    );
  }
}

export default App;

$  git clone https://github.com/dU4E/0xsu-smart-contracts

$ git clone https://github.com/dU4E/0xsu-express-server

$ cd 0xsu-express-server

$ npm i express

const fs = require('fs')
const bodyParser = require('body-parser')
const express = require('express')
const Web3 = require('web3')
const path = require('path')
const dotenv = require('dotenv').config({ path: path.resolve('.env')})
const app = express()
const port = 3001
const abi = JSON.parse(fs.readFileSync(process.env.ABI_PATH))
const contractAddr = process.env.CONTRACT_ADDRESS
const web3 = new Web3(Web3.givenProvider || process.env.PROVIDER_URL)

app.set('view engine', 'ejs')

app.get('/:short', async function (req, res) {
  const contract = new web3.eth.Contract(abi, contractAddr)
  let slug = req.params.short
  // grab the url and if it's been paid or not
  let destination = await contract.methods.getURL(slug).call()
  res.redirect(destination !== '"FAIL' ? destination : "/")
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

$ node index

$ npm start