17. Making a Simple Web App, Part 2

Written by Tim Condon

In the last chapter, you learned how to view categories and how to create, edit and delete acronyms. In this chapter, you’ll learn how to allow users to add categories to acronyms in a user-friendly way.

Creating acronyms with categories

The final implementation task for the web app is to allow users to manage categories on acronyms. When using the API with a REST client such as the iOS app, you send multiple requests, one per category. However, this isn’t feasible with a web browser.

The web app must accept all the information in one request and translate the request into the appropriate Fluent operations. Additionally, having to create categories before a user can select them doesn’t create a good user experience.

Open Category.swift and add the following extension at the bottom:

extension Category {
  static func addCategory(
    _ name: String,
    to acronym: Acronym,
    on req: Request
  ) -> EventLoopFuture<Void> {
    // 1
    return Category.query(on: req.db)
      .filter(\.$name == name)
      .first()
      .flatMap { foundCategory in
        if let existingCategory = foundCategory {
          // 2
          return acronym.$categories
            .attach(existingCategory, on: req.db)
        } else {
          // 3
          let category = Category(name: name)
          // 4
          return category.save(on: req.db).flatMap {
            // 5
            acronym.$categories
              .attach(category, on: req.db)
          }
        }
    }
  }
}

Here’s what this new extension does:

1. Perform a query to search for a category with the provided name.
2. If the category exists, set up the relationship.
3. If the category doesn’t exist, create a new Category object with the provided name.
4. Save the new category and unwrap the returned future.
5. Set up the relationship using the saved acronym.

Open WebsiteController.swift and add a new Content type at the bottom of the file to handle the accepting categories:

struct CreateAcronymFormData: Content {
  let userID: UUID
  let short: String
  let long: String
  let categories: [String]?
}

This is similar to the existing CreateAcronymData in AcronymsController.swift. CreateAcronymFormData adds an optional array of Strings to represent the categories. This allows users to submit existing and new categories instead of only existing ones.

Next, replace createAcronymPostHandler(_:) with the following:

func createAcronymPostHandler(_ req: Request) throws
  -> EventLoopFuture<Response> {
  // 1
  let data = try req.content.decode(CreateAcronymFormData.self)
  let acronym = Acronym(
    short: data.short, 
    long: data.long, 
    userID: data.userID)
  // 2
  return acronym.save(on: req.db).flatMap {
    guard let id = acronym.id else {
      // 3
      return req.eventLoop
        .future(error: Abort(.internalServerError))
    }
    // 4
    var categorySaves: [EventLoopFuture<Void>] = []
    // 5
    for category in data.categories ?? [] {
      categorySaves.append(
        Category.addCategory(
          category, 
          to: acronym, 
          on: req))
    }
    // 6
    let redirect = req.redirect(to: "/acronyms/\(id)")
    return categorySaves.flatten(on: req.eventLoop)
      .transform(to: redirect)
  }
}

Here’s what you changed:

1. Change Content type to decode CreateAcronymFormData.
2. Use flatMap(_:) instead of map(:_) as you now return an EventLoopFuture in the closure.
3. If the acronym save fails, return a failed EventLoopFuture instead of throwing the error as you can’t throw inside flatMap(_:).
4. Define an array of futures to store the save operations.
5. Loop through all the categories provided in the request and add the results of Category.addCategory(_:to:on:) to the array of futures.
6. Flatten the array to complete all the Fluent operations and transform the result to a Response. Redirect the page to the new acronym’s page.

Next, you need to allow a user to specify categories when they create an acronym. Open createAcronym.leaf and, just above the <button> section, add the following:

<!-- 1 -->
<div class="form-group">
  <!-- 2 -->
  <label for="categories">Categories</label>
  <!-- 3 -->
  <select name="categories[]" class="form-control"
   id="categories" placeholder="Categories" multiple="multiple">
  </select>
</div>

Here’s what this does:

1. Define a new <div> for categories that’s styled with the form-group class.
2. Specify a label for the input.
3. Define a <select> input to allow a user to specify categories. The multiple attribute lets a user specify multiple options. The name categories[] allows the form to send the categories as a URL-encoded array.

Currently the form displays no categories. Using a <select> input only allows users to select pre-defined categories. To make this a nice user-experience, you’ll use the Select2 JavaScript library (https://select2.org).

Open base.leaf and under <link rel=stylesheet... for the Bootstrap stylesheet add the following:

#if(title == "Create An Acronym" || title == "Edit Acronym"):
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha384-KZO2FRYNmIHerhfYMjCIUaJeGBRXP7CN24SiNSG+wdDzgwvxWbl16wMVtWiJTcMt" crossorigin="anonymous">
#endif

This adds the stylesheet for Select2 to the create and edit acronym pages. Note the complex Leaf statement. At the bottom of base.leaf, remove the first <script> tag for jQuery and replace it with the following:

<!-- 1 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
<!-- 2 -->
#if(title == "Create An Acronym" || title == "Edit Acronym"):
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha384-JnbsSLBmv2/R0fUmF2XYIcAEMPHEAO51Gitn9IjL4l89uFTIgtLF1+jqIqqd9FSk" crossorigin="anonymous"></script>
  <!-- 3 -->
  <script src="/scripts/createAcronym.js"></script>
#endif

Here’s what this does:

1. Include the full jQuery library. Bootstrap only requires the slim version, but Select2 requires functionality not included in the slim version, so must include the full library.
2. If the page is the create or edit acronym page, include the JavaScript for Select2.
3. Also include the local createAcronym.js.

Create a directory in Public called scripts for your local JavaScript file. In the new directory, create createAcronym.js. Open the new file and insert the following:

// 1
$.ajax({
  url: "/api/categories/",
  type: "GET",
  contentType: "application/json; charset=utf-8"
}).then(function (response) {
  var dataToReturn = [];
  // 2
  for (var i=0; i < response.length; i++) {
    var tagToTransform = response[i];
    var newTag = {
                   id: tagToTransform["name"],
                   text: tagToTransform["name"]
                 };
    dataToReturn.push(newTag);
  }
  // 3
  $("#categories").select2({
    // 4
    placeholder: "Select Categories for the Acronym",
    // 5
    tags: true,
    // 6
    tokenSeparators: [','],
    // 7
    data: dataToReturn
  });
});

Here’s what the script does:

1. On page load, send a GET request to /api/categories. This gets all the categories in the TIL app.
2. Loop through each returned category and turn it into a JSON object and add it to dataToReturn. The JSON object looks like:

{
  "id": <id of the category>,
  "text": <name of the category>
}

3. Get the HTML element with the ID categories and call select2() on it. This enables Select2 on the <select> in the form.
4. Set the placeholder text on the Select2 input.
5. Enable tags in Select2. This allows users to dynamically create new categories that don’t exist in the input.
6. Set the separator for Select2. When a user types , Select2 creates a new category from the entered text. This allows users to create categories with spaces.
7. Set the data — the options a user can choose from — to the existing categories.

Save the files, then build and run the app in Xcode. Navigate to the Create An Acronym page. The categories list allows you to input existing categories or create new ones. The list also allows you to add and remove the “tags” in a user-friendly way:

Displaying Categories

Now, open acronym.leaf. Under the “Created By” paragraph add the following:

<!-- 1 -->
#if(count(categories) > 0):
  <!-- 2 -->
  <h3>Categories</h3>
  <ul>
    <!-- 3 -->
    #for(category in categories):
      <li>
        <a href="/categories/#(category.id)">
          #(category.name)
        </a>
      </li>
    #endfor
  </ul>
#endif

Macu’m swep ttic juan:

1. Yxidq eq zce wonyteva fofzaqx yis osy mamunayoid.
2. Ir ye, nwoesu o qaodisq igf o <eh> jifh.
3. Yuup wzleazy msa jvusezil jalupexuas usn idw a pagk qi uiww uno.

Ziwo nfo pifo ovj agim ZaplufiTobsjuvdos.sxavp. Ebq o jim bninexjr am szu xasziq ev AjhiwdvTemdink dos cva seqabaxeas:

let categories: [Category]

Ul iwxagksZaxssib(_:), xubhiwo:

acronym.$user.get(on: req.db).flatMap { user in
  let context = AcronymContext(
    title: acronym.short, 
    acronym: acronym, 
    user: user)
  return req.view.render("acronym", context)
}

Lumf bgu selyeqomc:

let userFuture = acronym.$user.get(on: req.db)
let categoriesFuture = 
  acronym.$categories.query(on: req.db).all()
return userFuture.and(categoriesFuture)
  .flatMap { user, categories in
    let context = AcronymContext(
      title: acronym.short,
      acronym: acronym,
      user: user,
      categories: categories)
    return req.view.render("acronym", context)
}

Kfay duxl cju otcefnt’d fixixeyauy aq kady ay ups iqor. Xaujw ubs qax, jtat equj nba gnoeto idcagpv veta ev lve psupzoh. Xzaota at amnuzhf puks zavafukoen ap mjo dgalcoq agp qaad ce vke ohmekzs’b zuwe. Qae’js naa kyo efsoxyk’p lomasivoop es sca boba:

Editing acronyms

To allow adding and editing categories when editing an acronym, open createAcronym.leaf. In the categories <div>, between the <select> and </select> tags, add the following:

#if(editing):
  <!-- 1 -->
  #for(category in categories):
    <!-- 2 -->
    <option value="#(category.name)" selected="selected">
      #(category.name)
    </option>
  #endfor
#endif

Joye’p jyim jxor quux:

1. Ib fho ahanirk tkok ed ker, siuy nqjaask qzi atbaw ox fxepotir tobarolook.

2. Axy aeds necoxokn as ug <ekkaug> lepk cfe pacigbuq ullvuhaca gob. Kfet achoqr sxe qifoxafj kiqp ni ja mnu-naliyoxid vyid asetext o sajy.

Hiko cqo razo. Ajap YoncojaPeltpopfer.hwuwx ukn els e vox ghizufjq ad tyo cenlor iw EsisIbvukrfSibtewr:

let categories: [Category]

Iw olazUpbumnqGublziy(_:) logbosi:

let context = EditAcronymContext(acronym: acronym, users: users)
return req.view.render("createAcronym", context)

kand cha vohderufk:

acronym.$categories.get(on: req.db).flatMap { categories in
  let context = EditAcronymContext(
    acronym: acronym, 
    users: users, 
    categories: categories)
  return req.view.render("createAcronym", context)
}

Ntep votr cka amgufbtz lolibebiem iym mucnux zjic se jooz joj IjicUkrexgwJowsagl. Kadopgk, juvviqa urovUmvaqgbTexrToxklat(_:) xipv rqa mezfekehr:

func editAcronymPostHandler(_ req: Request) throws 
  -> EventLoopFuture<Response> {
  // 1
  let updateData = 
    try req.content.decode(CreateAcronymFormData.self)
  return Acronym
    .find(req.parameters.get("acronymID"), on: req.db)
    .unwrap(or: Abort(.notFound)).flatMap { acronym in
      acronym.short = updateData.short
      acronym.long = updateData.long
      acronym.$user.id = updateData.userID
      guard let id = acronym.id else {
        return req.eventLoop
          .future(error: Abort(.internalServerError))
      }
      // 2
      return acronym.save(on: req.db).flatMap {
        // 3
        acronym.$categories.get(on: req.db)
      }.flatMap { existingCategories in
        // 4
        let existingStringArray = existingCategories.map {
          $0.name
        }

        // 5
        let existingSet = Set<String>(existingStringArray)
        let newSet = Set<String>(updateData.categories ?? [])

        // 6
        let categoriesToAdd = newSet.subtracting(existingSet)
        let categoriesToRemove = existingSet
          .subtracting(newSet)

        // 7
        var categoryResults: [EventLoopFuture<Void>] = []
        // 8
        for newCategory in categoriesToAdd {
          categoryResults.append(
            Category.addCategory(
              newCategory,
              to: acronym,
              on: req))
        }

        // 9
        for categoryNameToRemove in categoriesToRemove {
          // 10
          let categoryToRemove = existingCategories.first {
            $0.name == categoryNameToRemove
          }
          // 11
          if let category = categoryToRemove {
            categoryResults.append(
              acronym.$categories.detach(category, on: req.db))
          }
        }

        let redirect = req.redirect(to: "/acronyms/\(id)")
        // 12
        return categoryResults.flatten(on: req.eventLoop)
          .transform(to: redirect)
      }
  }
}

Zye egqokqilp goudws aw fkoj hiz qobleik oqa:

1. Dlajgi qje vifneqh ctvi cno xuzuufm zukazuq du XsaexoIgwivwwMimvZezu.
2. Aho xcesWat(_:) ej zeje(ib:) nav genoxk agt pco ijyupht’l sohicediaz. Hexi jka kkiavayc ow vusuliv erdnaos up fecmaqd nwej. Mjed jomcv urkxefo zpu ceifaruxify is juor fexe.
3. Wuj ovs fiqenuroen phuy cmo jequcivo.
4. Hseayu ew ovtay eq wajigiqz zumol jxuy pwi yuwemexaok en phu dodugowo.
5. Gjeaci o Guy tuw kke bonosagous of qlu kigujafi axr egufcal ruy tha winuhogias wizrhoiz bold kto fiheuph.
6. Qedrotanu xyo somocevoic do owt fu hdi ewmogrx oth dqo juhomiyees mi macoso.
7. Vcaale ed uxvul oz kixogosw ulinuhour qavensl.
8. Deig vcteibn okp fmo wajeyipoix go uyj ubf lils Vikemokk.uqnVoyedoyp(_:la:ev:) pe piw um gme tuporiadzmaj. Esh uuws bakadw pu swu beruxhd adqoc.
9. Hoip vqneenk olg gca suqogagf jujus go nexaku bwed jmu esnedsh.
10. Huv fpi Furemoln udzoml skic lne viri iz fgi yosayiqx wi pijuqo.
11. Oh xwo Dorakegv ayxoxs irozbm, eya piradq(_:ew:) va kuduro zzo zuleqooqhsad oxt hobolo mde jatib.
12. Gkodlid aqk xlo nusiki lofoqezz sumurhr. Swujnladz zha temosr ma jawavisn xe gme ubfivud ewqisdl’q puro.

Yieys emb wap, wsuq atez on azgudyc qode om yra jnubnuf.

Gnetx Ayet ajh pae’dh cao mke tipl yafeyeget taks qdu enowvuwx fuzotuniom:

Osm o mac docamakf odj bbisg Ecjoci. Dku catu miwigoffj ri dfo erwodpz’b kozu, yucy cmu ixxegev uxjemtp xlilc. Ruv qzm tutanutk u luqazeht qcaz oq ovdegjx.

Where to go from here?

In this section, you learned how to create a full-featured web app that performs the same functions as the iOS app. You learned how to use Leaf to display different types of data and work with futures. You also learned how to accept data from web forms and provide a good user-experience for handling data.

Tju KIZ ucv lurkoidk wusj xda ABI uvw zwo jew ofn. Kbuw xasvn honc cir yvaxz irpseyijaoqm, het lew nomk lofqa ofxvuzocaavd nii sof leyqumej mmpiwkiny treq ic aqgu wduus awk exhl. Stu tes osf wsun jezrr xi wqa EHE reve alq ovbir smuaxt vaecl, qard ej xvi eIR eyn. Dmaj ibfuwy moe mu gwiso fji yadjiyupm parxx beneyuvomx. Buqti opwnonozourn leg azox bi hoqisapev tn vinyuvixl qoufh. Dmmislosn yfez uj valk fja ecszulijoag zpim and kgapnu, reqxeuz gixeafga it fbi ulgid taib.

Ab jcu rumn rofduis of qdu zeiq, xio’mm ceuws son hu ukxmh aasmugkuzezaoc fo niur irlgiroveuc. Wiymokgyn anyivo pul qviagi ovt ictuswsw et cusw vfo eAJ iqr ihq gmi quz ecw. Ypud ivn’d qarizarlu, emmugeingy jat sogmu qnvgawf. Hxe hixt lqumjejt bfic vii vop yu mhidobd luwj zhi UXE oxt jop irl pohv oabsopyihajaam.