Allow testing uuid for validity and parse uuid7 timestamp

thaapasa · Sep 29, 2024 · 18bd0ce · 18bd0ce
1 parent de54179
commit 18bd0ce
Show file tree

Hide file tree

Showing 2 changed files with 156 additions and 78 deletions.
diff --git a/src/app/ui/IdentifiersPage.tsx b/src/app/ui/IdentifiersPage.tsx
@@ -9,10 +9,9 @@ import { getRandomString } from '../calc/random';
 import * as util from '../util/util';
 import { CheckValue } from './component/CheckValue';
 import { HalfSection } from './component/Section';
+import { UuidCheck } from './component/UuidCheck';
 import { publishSelectedValue } from './LastValue';
 
-interface IdentifiersProps {}
-
 const generateUUIDv1 = () => uuid.v1().toString();
 const generateUUIDv4 = () => uuid.v4().toString();
 const generateUUIDv7 = () => uuid.v7().toString();
@@ -21,80 +20,88 @@ function generateRandomString() {
   return getRandomString(64);
 }
 
-export class IdentifiersPage extends React.Component<IdentifiersProps, never> {
-  public render() {
-    return (
-      <HalfSection title="Tunnisteet" image="/img/header-identifiers.jpg">
-        <CheckValue
-          name="Henkilötunnus"
-          id="hetu"
-          check={hetu.check}
-          generate={hetu.generate}
-          combine={util.combine}
-          onValue={publishSelectedValue}
-          max-length="10"
-          width="6.5em"
-        />
-        <CheckValue
-          name="Viitenumero"
-          id="bank-reference"
-          check={bankReference.check}
-          generate={bankReference.generate}
-          combine={util.combine}
-          onValue={publishSelectedValue}
-          max-length="24"
-          width="9em"
-        />
-        <CheckValue
-          name="Y-tunnus"
-          id="company-id"
-          check={companyId.check}
-          generate={companyId.generate}
-          combine={util.combineWith('-')}
-          onValue={publishSelectedValue}
-          max-length="7"
-          width="6em"
-        />
-        <CheckValue
-          name="Luhn modulo 10"
-          id="luhn"
-          check={checkLuhn}
-          onValue={publishSelectedValue}
-          width="13em"
-        />
-        <CheckValue
-          name="UUID v1"
-          id="uuid-v1"
-          generate={generateUUIDv1}
-          onValue={publishSelectedValue}
-          max-length="36"
-          width="13em"
-        />
-        <CheckValue
-          name="UUID v4"
-          id="uuid-v4"
-          generate={generateUUIDv4}
-          onValue={publishSelectedValue}
-          max-length="36"
-          width="13em"
-        />
-        <CheckValue
-          name="UUID v7"
-          id="uuid-v7"
-          generate={generateUUIDv7}
-          onValue={publishSelectedValue}
-          max-length="36"
-          width="13em"
-        />
-        <CheckValue
-          name="Satunnaisjono"
-          id="random-string"
-          generate={generateRandomString}
-          onValue={publishSelectedValue}
-          max-length="64"
-          width="13em"
-        />
-      </HalfSection>
-    );
-  }
+export function IdentifiersPage() {
+  const [uuidInput, setUuidInput] = React.useState('');
+  const publishUuid = React.useCallback(
+    (v: string) => {
+      publishSelectedValue(v);
+      setUuidInput(v);
+    },
+    [setUuidInput],
+  );
+  return (
+    <HalfSection title="Tunnisteet" image="/img/header-identifiers.jpg">
+      <CheckValue
+        name="Henkilötunnus"
+        id="hetu"
+        check={hetu.check}
+        generate={hetu.generate}
+        combine={util.combine}
+        onValue={publishSelectedValue}
+        max-length="10"
+        width="6.5em"
+      />
+      <CheckValue
+        name="Viitenumero"
+        id="bank-reference"
+        check={bankReference.check}
+        generate={bankReference.generate}
+        combine={util.combine}
+        onValue={publishSelectedValue}
+        max-length="24"
+        width="9em"
+      />
+      <CheckValue
+        name="Y-tunnus"
+        id="company-id"
+        check={companyId.check}
+        generate={companyId.generate}
+        combine={util.combineWith('-')}
+        onValue={publishSelectedValue}
+        max-length="7"
+        width="6em"
+      />
+      <CheckValue
+        name="Luhn modulo 10"
+        id="luhn"
+        check={checkLuhn}
+        onValue={publishSelectedValue}
+        width="13em"
+      />
+      <CheckValue
+        name="Satunnaisjono"
+        id="random-string"
+        generate={generateRandomString}
+        onValue={publishSelectedValue}
+        max-length="64"
+        width="13em"
+      />
+      <hr />
+      <CheckValue
+        name="UUID v1"
+        id="uuid-v1"
+        generate={generateUUIDv1}
+        onValue={publishUuid}
+        max-length="36"
+        width="13em"
+      />
+      <CheckValue
+        name="UUID v4"
+        id="uuid-v4"
+        generate={generateUUIDv4}
+        onValue={publishUuid}
+        max-length="36"
+        width="13em"
+      />
+      <CheckValue
+        name="UUID v7"
+        id="uuid-v7"
+        generate={generateUUIDv7}
+        onValue={publishUuid}
+        max-length="36"
+        width="13em"
+      />
+      <UuidCheck input={uuidInput} />
+    </HalfSection>
+  );
 }
diff --git a/src/app/ui/component/UuidCheck.tsx b/src/app/ui/component/UuidCheck.tsx
@@ -0,0 +1,71 @@
+import { InputAdornment, TextField } from '@mui/material';
+import { isDefined } from 'app/util/util';
+import moment from 'moment';
+import React from 'react';
+import * as uuid from 'uuid';
+
+export function UuidCheck({ input: inputFromProps }: { input?: string }) {
+  const [input, setInput] = React.useState('');
+  React.useEffect(() => {
+    if (inputFromProps) {
+      setInput(inputFromProps);
+    }
+  }, [inputFromProps]);
+
+  const valid = input ? uuid.validate(input) : undefined;
+  const version = valid ? uuid.version(input) : undefined;
+
+  return (
+    <>
+      <TextField
+        fullWidth
+        label="Tarkista UUID"
+        variant="filled"
+        value={input}
+        onChange={e => setInput(e.target.value)}
+        slotProps={{
+          input: {
+            endAdornment: isDefined(valid) ? (
+              <InputAdornment position="end">
+                {valid ? '✅' : '❌'}
+                {valid && version ? ` v${version}` : null}
+              </InputAdornment>
+            ) : null,
+          },
+        }}
+      />
+      {valid && version === 7 ? <Uuid7Info input={input} /> : null}
+    </>
+  );
+}
+function Uuid7Info({ input }: { input: string }) {
+  const stampStr = input.slice(0, 8) + input.slice(9, 13);
+  const epochMillis = parseInt(stampStr, 16);
+  const time = moment(epochMillis);
+  return (
+    <>
+      <TextField
+        fullWidth
+        variant="filled"
+        label="Aikaleima (ms)"
+        value={epochMillis}
+        slotProps={{
+          input: {
+            readOnly: true,
+          },
+        }}
+      />
+      <TextField
+        fullWidth
+        variant="filled"
+        label="Aika"
+        value={time.format('YYYY-MM-DD HH:mm:ss.SSSSSS Z')}
+        slotProps={{
+          input: {
+            readOnly: true,
+          },
+        }}
+      />
+    </>
+  );
+}