Add Interval component

frontend/src/lib/react-utils.ts

@@ -1,15 +1,14 @@
 import { ActionCreatorWithOptionalPayload, AsyncThunk } from '@reduxjs/toolkit';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   KilovoltMessage,
   SubscriptionHandler,
 } from '@strimertul/kilovolt-client';
 import { RootState } from '../store';
-import apiReducer, {
-  getUserPoints,
-} from '../store/api/reducer';
-import {APIState, LoyaltyStorage} from "../store/api/types";
+import apiReducer, { getUserPoints } from '../store/api/reducer';
+import { APIState, LoyaltyStorage } from '../store/api/types';
+import { getInterval } from './time-utils';
 
 export function useModule<T>({
   key,
@@ -63,7 +62,30 @@ export function useUserPoints(): LoyaltyStorage {
   return data;
 }
 
+export function useInterval(
+  initialValue: number,
+): [
+  number,
+  number,
+  number,
+  (newNum: number) => void,
+  (newMult: number) => void,
+] {
+  const [value, setValue] = useState(initialValue);
+
+  const [numInitialValue, multInitialValue] = getInterval(value);
+  const [num, setNum] = useState(numInitialValue);
+  const [mult, setMult] = useState(multInitialValue);
+
+  useEffect(() => {
+    setValue(num * mult);
+  }, [num, mult]);
+
+  return [value, num, mult, setNum, setMult];
+}
+
 export default {
   useModule,
   useUserPoints,
+  useInterval,
 };

frontend/src/ui/components/Interval.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useInterval } from '../../lib/react-utils';
+
+export interface IntervalProps {
+  active: boolean;
+  value: number;
+  onChange?: (value: number) => void;
+}
+
+function Field({ active, value, onChange }: IntervalProps) {
+  const { t } = useTranslation();
+  const [valueNum, num, mult, setNum, setMult] = useInterval(value);
+  useEffect(() => {
+    onChange(valueNum);
+  }, [valueNum]);
+
+  return (
+    <>
+      <p className="control">
+        <input
+          disabled={!active}
+          className="input"
+          type="number"
+          placeholder="#"
+          value={num ?? ''}
+          onChange={(ev) => {
+            const intNum = parseInt(ev.target.value, 10);
+            if (Number.isNaN(intNum)) {
+              return;
+            }
+            setNum(intNum);
+          }}
+        />
+      </p>
+      <p className="control">
+        <span className="select">
+          <select
+            value={mult.toString() ?? ''}
+            disabled={!active}
+            onChange={(ev) => {
+              const intMult = parseInt(ev.target.value, 10);
+              if (Number.isNaN(intMult)) {
+                return;
+              }
+              setMult(intMult);
+            }}
+          >
+            <option value="1">{t('form-common.time.seconds')}</option>
+            <option value="60">{t('form-common.time.minutes')}</option>
+            <option value="3600">{t('form-common.time.hours')}</option>
+          </select>
+        </span>
+      </p>
+    </>
+  );
+}
+
+export default React.memo(Field);