feat: prettify TableSonsumptions

src/components/FormattedDataTime/FormattedDateTimeShort.res

@@ -0,0 +1,38 @@
+@react.component
+let make = (~value) => {
+  let now = Js.Date.make()
+  let todayEOD = Js.Date.makeWithYMD(
+    ~year=Js.Date.getFullYear(now),
+    ~month=Js.Date.getMonth(now),
+    ~date=Js.Date.getDate(now) +. 1.0,
+    (),
+  )
+  let differenceInDays = Js.Math.floor_int(
+    (todayEOD->Js.Date.getTime -. value->Js.Date.getTime) /.
+      DateUtils.dayInMilliseconds->Float.fromInt,
+  )
+  switch differenceInDays {
+  | 0 => <ReactIntl.FormattedTime hour=#numeric minute=#numeric value />
+  | 1 =>
+    <>
+      {React.string("včera\xA0")}
+      <ReactIntl.FormattedTime hour=#numeric minute=#numeric value />
+    </>
+  | 2 =>
+    <>
+      {React.string("předevčírem\xA0")}
+      <ReactIntl.FormattedTime hour=#numeric minute=#numeric value />
+    </>
+  | 3
+  | 4
+  | 5
+  | 6 =>
+    <ReactIntl.FormattedDate
+      year=?None month=?None day=?None hour=#numeric minute=#numeric value weekday=#long
+    />
+  | _ =>
+    <ReactIntl.FormattedDate
+      year=#numeric month=#numeric day=#numeric hour=#numeric minute=#numeric value
+    />
+  }
+}

src/components/FormattedRelativeTime/FormattedRelativeTime.res

@@ -1,5 +1,5 @@
 @react.component
-let make = (~dateTime) => {
+let make = React.memo((~dateTime) => {
   let timeDiff = (dateTime->Js.Date.getTime -. Js.Date.now()) /. 1000.0
   <ReactIntl.FormattedRelativeTime numeric=#auto updateIntervalInSeconds={1.0} value={timeDiff} />
-}
+})

src/components/TableConsumptions/TableConsumptions.module.css

@@ -0,0 +1,69 @@
+.table {
+  --cell-inline-padding: var(--padding-inline, 8px);
+}
+
+.table > * {
+  display: contents;
+}
+
+.table th[scope="row"] {
+  font-weight: var(--font-weight-regular);
+}
+
+.table tr {
+  display: grid;
+  grid-template-areas: "beer volume dateTime action";
+  grid-template-columns: 1fr 7ch 13ch 13ch;
+}
+.table :where(th, td) {
+  padding-inline: var(--cell-inline-padding);
+}
+.table :where(th, td):nth-child(1) {
+  grid-area: beer;
+  text-align: left;
+}
+.table :where(th, td):nth-child(2) {
+  grid-area: volume;
+  text-align: right;
+  place-content: end;
+}
+.table :where(th, td):nth-child(3) {
+  grid-area: dateTime;
+  text-align: right;
+}
+.table :where(th, td):nth-child(4) {
+  grid-area: action;
+  text-align: right;
+  place-content: center;
+}
+
+@supports (grid-template-columns: subgrid) {
+  .table {
+    display: grid;
+    grid-template-columns: repeat(4, auto);
+  }
+  .table tr {
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid !important;
+  }
+}
+
+@media screen and (max-width: 33rem) {
+  .table {
+    grid-template-columns: auto 1fr auto;
+  }
+  .table tr {
+    grid-template-areas:
+      "beer     volume   action"
+      "dateTime dateTime action";
+    grid-template-columns: 7ch 1fr auto;
+  }
+  .table :where(th, td):nth-child(3) {
+    padding-inline-start: var(--dialog-padding-inline);
+    text-align: right;
+  }
+  .deleteButton {
+    white-space: wrap;
+    inline-size: min-content;
+  }
+}

src/components/TableConsumptions/TableConsumptions.res

@@ -1,11 +1,18 @@
+type classesType = {
+  deleteButton: string,
+  table: string,
+}
+
+@module("./TableConsumptions.module.css") external classes: classesType = "default"
+
 @react.component
 let make = (
   ~ariaLabelledby=?,
   ~captionSlot=?,
   ~onDeleteConsumption,
   ~unfinishedConsumptions: array<Db.userConsumption>,
 ) => {
-  <table ?ariaLabelledby className={Styles.table.inDialog}>
+  <table ?ariaLabelledby className={`${classes.table} ${Styles.table.inDialog}`}>
     {switch captionSlot {
     | Some(slot) => <caption> {slot} </caption>
     | None => React.null
@@ -25,16 +32,16 @@ let make = (
       ->Array.map(consumption => {
         let createdAt = consumption.createdAt->Js.Date.toISOString
         <tr key={createdAt}>
-          <td> {React.string(consumption.beer)} </td>
+          <th scope="row"> {React.string(consumption.beer)} </th>
           <td>
             <FormattedVolume milliliters=consumption.milliliters />
           </td>
           <td>
-            <FormattedDateTime value=consumption.createdAt />
+            <FormattedDateTimeShort value=consumption.createdAt />
           </td>
           <td>
             <button
-              className={Styles.button.sizeExtraSmall}
+              className={`${classes.deleteButton} ${Styles.button.sizeExtraSmall}`}
               onClick={_ => onDeleteConsumption(consumption)}
               type_="button">
               {React.string("🗑️ Smáznout")}

src/pages/Place/DrinkDialog.gen.tsx

@@ -0,0 +1,32 @@
+/* TypeScript file generated from DrinkDialog.res by genType. */
+
+/* eslint-disable */
+/* tslint:disable */
+
+import * as DrinkDialogJS from './DrinkDialog.bs.js';
+
+import type {kegConverted as Db_kegConverted} from '../../../src/backend/Db.gen';
+
+import type {userConsumption as Db_userConsumption} from '../../../src/backend/Db.gen';
+
+export type FormFields_state = { readonly tap: string; readonly consumption: number };
+
+export type props<personName,preferredTap,onDeleteConsumption,onDismiss,onSubmit,tapsWithKegs,unfinishedConsumptions> = {
+  readonly personName: personName; 
+  readonly preferredTap: preferredTap; 
+  readonly onDeleteConsumption: onDeleteConsumption; 
+  readonly onDismiss: onDismiss; 
+  readonly onSubmit: onSubmit; 
+  readonly tapsWithKegs: tapsWithKegs; 
+  readonly unfinishedConsumptions: unfinishedConsumptions
+};
+
+export const make: React.ComponentType<{
+  readonly personName: string; 
+  readonly preferredTap: string; 
+  readonly onDeleteConsumption: (_1:Db_userConsumption) => void; 
+  readonly onDismiss: () => void; 
+  readonly onSubmit: (_1:FormFields_state) => T1; 
+  readonly tapsWithKegs: {[id: string]: Db_kegConverted}; 
+  readonly unfinishedConsumptions: Db_userConsumption[]
+}> = DrinkDialogJS.make as any;

src/pages/Place/DrinkDialog.res

@@ -33,7 +33,7 @@ module Validators = Validators.CustomValidators(FormFields)
 
 type selectOption = {text: React.element, value: string}
 
-@react.component
+@genType @react.component
 let make = (
   ~personName,
   ~preferredTap,

src/pages/Place/DrinkDialog.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, waitFor, within } from "@storybook/testing-library";
+
+import { make as DrinkDialog } from "./DrinkDialog.gen";
+import { getKegMock, getUserConsumptionMock } from "../../test/mockGenerators";
+import { dayInMilliseconds } from "../../utils/DateUtils.gen";
+
+const meta: Meta<typeof DrinkDialog> = {
+  component: DrinkDialog,
+  title: "components/DrinkDialog",
+  parameters: {
+    layout: `centered`,
+  },
+  args: {
+    personName: `Vašík`,
+    preferredTap: `Hlavní`,
+    tapsWithKegs: {
+      Hlavní: getKegMock(),
+    },
+    unfinishedConsumptions: [
+      {
+        ...getUserConsumptionMock(),
+        createdAt: new Date(Date.now() - 4 * dayInMilliseconds),
+      },
+      {
+        ...getUserConsumptionMock(),
+        createdAt: new Date(Date.now() - dayInMilliseconds),
+      },
+      getUserConsumptionMock(),
+    ],
+  },
+  argTypes: {
+    onDeleteConsumption: { action: "onDeleteConsumption" },
+    onDismiss: { action: "onDismiss" },
+    onSubmit: { action: "onSubmit" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DrinkDialog>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const unfinishedBeersSumarry = await canvas.findByText(`Nezaúčtovaná piva`);
+    await userEvent.click(unfinishedBeersSumarry);
+  },
+};

src/test/mockGenerators.tsx

@@ -0,0 +1,46 @@
+import { Timestamp } from "firebase/firestore";
+import { kegConverted, userConsumption } from "../backend/Db.gen";
+import {
+  hourInMilliseconds,
+  monthInMilliseconds,
+} from "../utils/DateUtils.gen";
+
+export const getRandomDateInstanceInHistory = (
+  lowerBound: Date | number | string = Date.now() - monthInMilliseconds
+): Date => {
+  const now = new Date();
+  const diff = (now as any) - (new Date(lowerBound) as any);
+  return new Date(Date.now() - Math.round(Math.random() * diff));
+};
+
+export const getRandomDateInHistory = (
+  lowerBound: Date | number | string = Date.now() - monthInMilliseconds
+): string => {
+  return getRandomDateInstanceInHistory(lowerBound).toISOString();
+};
+
+export const getKegMock = (): kegConverted => {
+  return {
+    beer: `Pilsner Urquell`,
+    consumptions: {},
+    consumptionsSum: 0,
+    createdAt: Timestamp.fromDate(getRandomDateInstanceInHistory()),
+    donors: {},
+    depletedAt: null,
+    milliliters: 50000,
+    price: 1000,
+    recentConsumptionAt: null,
+    serial: 1,
+    serialFormatted: `1`,
+  };
+};
+
+export const getUserConsumptionMock = (): userConsumption => {
+  return {
+    consumptionId: `1`,
+    kegId: `1`,
+    beer: `Pilsner Urquell`,
+    milliliters: 500,
+    createdAt: getRandomDateInstanceInHistory(Date.now() - hourInMilliseconds),
+  };
+};

src/utils/DateUtils.gen.tsx

@@ -0,0 +1,12 @@
+/* TypeScript file generated from DateUtils.res by genType. */
+
+/* eslint-disable */
+/* tslint:disable */
+
+import * as DateUtilsJS from './DateUtils.bs.js';
+
+export const hourInMilliseconds: number = DateUtilsJS.hourInMilliseconds as any;
+
+export const dayInMilliseconds: number = DateUtilsJS.dayInMilliseconds as any;
+
+export const monthInMilliseconds: number = DateUtilsJS.monthInMilliseconds as any;

src/utils/DateUtils.res

@@ -1,3 +1,19 @@
+let hourInSeconds = 3600
+let dayInSeconds = 24 * hourInSeconds
+let weekInSeconds = 7 * dayInSeconds
+let monthInSeconds = 31 * dayInSeconds
+
+@genType
+let hourInMilliseconds =
+  hourInSeconds * 1000
+@genType
+let dayInMilliseconds =
+  dayInSeconds * 1000
+let weekInMilliseconds = weekInSeconds * 1000
+@genType
+let monthInMilliseconds =
+  monthInSeconds * 1000
+
 let toIsoDateString = date => date->Js.Date.toISOString->String.substring(~start=0, ~end=10)
 
 let dateIsoRe = %re("/^\d{4,4}-\d{2,2}-\d{2,2}$/")