Merge pull request #616 from contradb/react-merge

react choreographer filter, part of #563

.browserslistrc

@@ -1 +1 @@
-> 1%
+defaults

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+vendor

.eslintrc.js

@@ -0,0 +1,57 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ["@typescript-eslint", "react-hooks"],
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  rules: {
+    "@typescript-eslint/member-delimiter-style": [
+      "error",
+      {
+        multiline: {
+          delimiter: "none",
+          requireLast: true,
+        },
+        singleline: {
+          delimiter: "semi",
+          requireLast: false,
+        },
+      },
+    ],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+  },
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx"],
+      rules: {
+        "@typescript-eslint/explicit-function-return-type": [
+          "error",
+          {
+            allowExpressions: true,
+            allowTypedFunctionExpressions: true,
+          },
+        ],
+      },
+    },
+  ],
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+}

Gemfile

@@ -84,4 +84,4 @@ gem 'ajax-datatables-rails'
 
 gem 'actionview-encoded_mail_to'
 
-gem 'webpacker', '>= 4.0.x'
+gem 'webpacker', '~> 4.x'

Gemfile.lock

@@ -253,7 +253,7 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
-    webpacker (4.0.0.rc.7)
+    webpacker (4.0.7)
       activesupport (>= 4.2)
       rack-proxy (>= 0.6.1)
       railties (>= 4.2)
@@ -300,7 +300,7 @@ DEPENDENCIES
   uglifier (>= 1.3.0)
   unicorn
   web-console
-  webpacker (>= 4.0.x)
+  webpacker (~> 4.x)
 
 BUNDLED WITH
    2.0.2

README.md

@@ -54,8 +54,22 @@ Then:
 ```
 bin/rspec
 ```
-will run ruby tests.
+will run lots of ruby tests.
+
+
 ```
 yarn test
 ```
-will run js tests
+will run a few js tests.
+
+
+```
+yarn eslint app/javascript/dance-table.tsx
+```
+will run the js linter on `app/javascript/dance-table.tsx`. This is currently the only file that is even remotely lintable.
+
+
+```
+bin/webpack-dev-server
+```
+This will indirectly run the typescript compiler in watch mode - for some reason ts compile errors don't stop the ruby, so I keep an eye on this terminal.

app/assets/stylesheets/application.scss

@@ -54,7 +54,7 @@ body {
   background-color: $contra-bg;
 }
 
-#dances-table, #dances-table-vue {
+#dances-table, #dances-table-vue, .dances-table-react {
   background-color: white;
 }
 

app/assets/stylesheets/welcome.scss

@@ -136,15 +136,51 @@ select.chooser-argument {
 
 .toggle-vis-active {
   @extend .btn-default;
+  background-color: white !important;
 }
 
 .toggle-vis-inactive {
-  background-color: $contra-grey;
   @extend .btn-default;
+  background-color: $contra-grey;
 }
 
 // Position radios and checkboxes better
 .chooser-argument input[type="radio"],
 .chooser-argument input[type="checkbox"] {
   margin-top: 0px;              /* override 4px in bootstrap */
 }
+
+.pagination {
+  @extend .btn-group;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.flipped-glyphicon {
+  transform: scaleX(-1);
+}
+
+.dance-table-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  flex-wrap: wrap;
+}
+
+.floating-loading-indicator {
+  background-color: rgba(255, 255, 255, 0.5);
+  font-size: 300%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 0.5em;
+  border-radius: 0.5em;
+  border: 3px dashed black;
+}
+
+.dance-table-th div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

app/controllers/api/v1/dances_controller.rb

@@ -0,0 +1,44 @@
+require 'filter_dances'
+require 'sort_parser'
+
+class Api::V1::DancesController < ApplicationController
+  # small security risk: dialetcs are snoopable with this
+  skip_before_action :verify_authenticity_token
+
+  def index
+    render json:FilterDances.filter_dances(filter,
+                                           count: count,
+                                           offset: offset,
+                                           dialect: dialect,
+                                           sort_by: sort_by)
+  end
+
+  private
+  def filter
+    params[:filter] || ['figure', '*']
+  end
+
+  def sort_by
+    params[:sort_by] || ""
+  end
+
+  def count
+    default_integer_param(:count, 10)
+  end
+
+  def offset
+    default_integer_param(:offset, 0)
+  end
+
+  def default_integer_param(s, default)
+    p = params[s]
+    case p
+    when Integer                # path in production
+      p
+    when String                 # path for request specs, because: frustration!
+      Integer(p)
+    else
+      default
+    end
+  end
+end

app/javascript/advanced-search.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import { useState } from "react"
+import DanceTable from "./dance-table"
+
+export const AdvancedSearch = () => {
+  const [choreographer, setChoreographer] = useState("")
+  const filter = ["if", ["choreographer", choreographer], ["figure", "*"]]
+
+  return (
+    <div>
+      <label>
+        Choreographer:
+        <input
+          type="text"
+          className="ez-choreographer-filter form-control"
+          value={choreographer}
+          onChange={e => setChoreographer(e.target.value)}
+        />
+      </label>
+      <br />
+      <br />
+      <br />
+      <DanceTable filter={filter} />
+    </div>
+  )
+}
+export default AdvancedSearch