feat(web): demo page

singuerinc · Feb 25, 2019 · 2e5edb5 · 2e5edb5
1 parent 6ac4be7
commit 2e5edb5
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 54 deletions.
diff --git a/web/src/index.html b/web/src/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Spanish Car Plate</title>
+    <title>Spanish Car Plate / validator</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
 
@@ -20,16 +20,18 @@
         </li>
       </ul>
     </nav>
-    <section class="flex flex-wrap relative justify-center items-center">
-      <h1 class="f1 f-headline-l lh-solid mt5 mb0">
-        scp
+    <section
+      class="flex flex-wrap flex-column relative justify-center items-center"
+    >
+      <h1 class="f-headline ma0">
+        Car Plate
       </h1>
-      <h2 class="w-100 ph2 tc fw3 f4 f3-l lh-title cyan">
-        Spanish Car Plate validation
+      <h2 class="f1 ma0">
+        Spanish validator
       </h2>
     </section>
     <section class="flex flex-wrap justify-center included mt3">
-      <h3 class="w-100 tc">Try it</h3>
+      <h3 class="w-100 tc">Try it!</h3>
       <div class="w-100 flex flex-wrap justify-center">
         <div id="app"></div>
       </div>

diff --git a/web/src/js/App.tsx b/web/src/js/App.tsx
@@ -1,44 +1,68 @@
-import { isValid } from "spanish-car-plate";
 import * as React from "react";
+import { useState } from "react";
+import {
+  isValid,
+  isOld,
+  isSpecial,
+  parse,
+  getCounter,
+  getNumber,
+  getProvinceName,
+  getProvinceCode,
+  getSpecialName,
+  getSpecialCode
+} from "spanish-car-plate";
 import { Check } from "./Check";
 
-class App extends React.Component {
-  state = {
-    value: ""
-  };
+export function App() {
+  const [value, setValue] = useState("");
+  const parseResult = parse(value);
 
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
+  function handleChange({ target: { value } }: { target: HTMLInputElement }) {
+    setValue(value);
   }
 
-  handleChange(event) {
-    const value: string = event.target.value;
-    this.setState({ value });
-  }
-
-  render() {
-    const { value } = this.state;
-    const isValidVal = isValid(value);
-
-    return (
-      <form className="black-80 w-100 w-50-l center">
-        <div>
-          <input
-            className="input-reset f2 f1-ns ba bw2 br3 b--silver-80 bg-white pa2 mb2 db w-100 black fw6 tc"
-            maxLength="8"
-            type="text"
-            placeholder="1234 BCD"
-            value={value}
-            onChange={this.handleChange}
-          />
-        </div>
-        <div className="flex flex-wrap justify-between mt4 mb2 pb4">
-          <Check label="isValid" check={isValidVal} />
-        </div>
-      </form>
-    );
-  }
+  return (
+    <form className="black-80 w-100 w-50-l center">
+      <div>
+        <input
+          className="input-reset f2 f1-ns ba bw2 br3 b--silver-80 bg-white pa2 mb2 db w-100 black fw6 tc"
+          maxLength={10}
+          type="text"
+          placeholder="1234 BCD"
+          value={value}
+          onChange={handleChange}
+        />
+      </div>
+      <div className="flex flex-wrap flex-column justify-between mt4 mb2 pb4">
+        <Check label="isValid" check={isValid(value)} />
+        <Check label="isOld" check={isOld(value)} />
+        <Check label="isSpecial" check={isSpecial(value)} />
+      </div>
+      <dl className="f6 lh-title mv2">
+        <dt className="dib b">Counter</dt>
+        <dd className="dib ml2 white">{getCounter(value) || "-"}</dd>
+      </dl>
+      <dl className="f6 lh-title mv2">
+        <dt className="dib b">Number</dt>
+        <dd className="dib ml2 white">{getNumber(value) || "-"}</dd>
+      </dl>
+      <dl className="f6 lh-title mv2">
+        <dt className="dib b">Province name</dt>
+        <dd className="dib ml2 white">{getProvinceName(value) || "-"}</dd>
+      </dl>
+      <dl className="f6 lh-title mv2">
+        <dt className="dib b">Province code</dt>
+        <dd className="dib ml2 white">{getProvinceCode(value) || "-"}</dd>
+      </dl>
+      <dl className="f6 lh-title mv2">
+        <dt className="dib b">Special name</dt>
+        <dd className="dib ml2 white">{getSpecialName(value) || "-"}</dd>
+      </dl>
+      <dl className="f6 lh-title mv2">
+        <dt className="dib b">Special code</dt>
+        <dd className="dib ml2 white">{getSpecialCode(value) || "-"}</dd>
+      </dl>
+    </form>
+  );
 }
-
-export { App };
diff --git a/web/src/js/Check.tsx b/web/src/js/Check.tsx
@@ -1,18 +1,22 @@
 import * as React from "react";
 import * as feather from "feather-icons";
 
-export const Check = ({ check, label }) => (
+interface IProps {
+  check: boolean;
+  label: string;
+}
+
+export const Check = ({ check, label }: IProps) => (
   <div className="flex">
     <div className="mv1">
       <div className="w-100 cf">
-        {!check && (
-          <span dangerouslySetInnerHTML={{ __html: feather.icons.x.toSvg() }} />
-        )}
-        {check && (
-          <span
-            dangerouslySetInnerHTML={{ __html: feather.icons.check.toSvg() }}
-          />
-        )}
+        <span
+          dangerouslySetInnerHTML={{
+            __html: check
+              ? feather.icons.check.toSvg()
+              : feather.icons.x.toSvg()
+          }}
+        />
       </div>
     </div>
     <div className="fw5 ml2 v-mid pv2">{label}</div>

diff --git a/web/src/main.css b/web/src/main.css
@@ -3,7 +3,7 @@
 
 html,
 body {
-  background: #11ffff;
+  background: orangered;
   height: 100%;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ @@
     html,
     body {
-      background: #11ffff;
+      background: orangered;
       height: 100%;
     }
@@ Expand Down @@