Redirect and say what happened

Task: after a form is sent, take the browser to a page and tell it what happened, once.

# Recipe: after a POST, send the browser to a page and tell it what happened.
paths:
  components: ./components
  migrations: ./migrations

datasources:
  db:
    driver: sqlite
    database: ./data/notes.db

CREATE TABLE notes (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    text TEXT NOT NULL,
    done INTEGER NOT NULL DEFAULT 0
);

q:redirect ends the action. Its flash takes expressions and becomes flash on the next page rendered, with flashType set to success. For another kind of message, q:flash type="warning" sets both before the redirect. The URL can be any page of the app.

<q:component name="Notes">
  <q:action name="add" method="POST">
    <q:param name="text" required="true" maxlength="200" />
    <q:query name="added" datasource="db">
      INSERT INTO notes (text) VALUES (:text)
      <q:param name="text" value="{text}" type="string" />
    </q:query>
    <!-- The flash accepts expressions; its type is "success". -->
    <q:redirect url="/" flash="Added: {text}" />
  </q:action>

  <q:action name="clear" method="POST">
    <q:query name="finished" datasource="db">
      UPDATE notes SET done = 1 WHERE done = 0
    </q:query>
    <q:if condition="finished_result.recordCount == 0">
      <!-- A flash of another kind: q:flash sets both, the redirect keeps them. -->
      <q:flash type="warning">There was nothing to clear.</q:flash>
      <q:redirect url="/" />
    </q:if>
    <q:redirect url="/done" flash="Cleared {finished_result.recordCount} notes." />
  </q:action>

  <q:query name="notes" datasource="db">
    SELECT id, text FROM notes WHERE done = 0 ORDER BY id
  </q:query>

  <ui:window title="Notes">
    <!-- flash and flashType exist on every page, '' when there is none;
         a flash shows on the next page rendered, once. -->
    <q:if condition="flash">
      <ui:alert variant="{flashType}">{flash}</ui:alert>
    </q:if>
    <ui:form on-submit="add">
      <ui:hbox gap="sm">
        <ui:input bind="text" placeholder="A note" grow="true" />
        <ui:button variant="primary">Add</ui:button>
      </ui:hbox>
    </ui:form>
    <q:loop query="notes">
      <ui:text>{notes.text}</ui:text>
    </q:loop>
    <ui:button on-click="clear">Clear all</ui:button>
  </ui:window>
</q:component>

<q:component name="Done">
  <ui:window title="All clear">
    <q:if condition="flash">
      <ui:alert variant="{flashType}">{flash}</ui:alert>
    </q:if>
    <ui:link to="/">Back to the notes</ui:link>
  </ui:window>
</q:component>

The second test opens the page again after the redirect: the flash is gone, and flash is ''.

<q:test name="adding a note redirects back with a success flash" page="/">
  <test:submit action="add" text="Buy bread" />
  <test:expect status="302" redirect="/" flash="Added: Buy bread" />
  <test:expect var="flashType" value="success" />
  <test:expect text="Buy bread" />
</q:test>

<q:test name="the flash shows once" page="/">
  <test:submit action="add" text="Buy bread" />
  <test:expect text="Added: Buy bread" />
  <test:visit />
  <test:expect no-text="Added: Buy bread" />
  <test:expect var="flash" value="" />
</q:test>

<q:test name="clearing sends the browser to another page" page="/">
  <test:given table="notes" text="Buy bread" />
  <test:given table="notes" text="Call Ana" />
  <test:submit action="clear" />
  <test:expect redirect="/done" flash="Cleared 2 notes." />
  <test:expect text="All clear" />
  <test:expect table="notes" count="0" where="done = 0" />
</q:test>

<q:test name="nothing to clear is a warning, on the same page" page="/">
  <test:submit action="clear" />
  <test:expect redirect="/" flash="There was nothing to clear." />
  <test:expect var="flashType" value="warning" />
</q:test>

tests/notes.test.q
  PASS  adding a note redirects back with a success flash
  PASS  the flash shows once
  PASS  clearing sends the browser to another page
  PASS  nothing to clear is a warning, on the same page
4 passed, 0 failed

See ACT-3.