Merge pull request #123 from shoonia/refactoring-cron-errors

Refactoring cron errors

src/components/Jobs/Cron.tsx

@@ -3,26 +3,23 @@ import { useEffect, useRef } from 'preact/hooks';
 import s from './styles.css';
 import { Label } from './Label';
 import { KEYS } from '../../constants';
+import { useFormScope } from '../../hooks/formScope';
 
-interface Props {
-  value: string;
-  error: boolean;
-}
-
-export const Cron: FC<Props> = ({ value, error }) => {
+export const Cron: FC = () => {
+  const { cronExpression, cronError = '' } = useFormScope();
   const ref = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    ref.current?.setCustomValidity(error ? 'error': '');
-  }, [error]);
+    ref.current?.setCustomValidity(cronError);
+  }, [cronError]);
 
   return (
     <Label top="Cron Expression">
       <input
         ref={ref}
         type="text"
         className={s.mono}
-        value={value}
+        value={cronExpression}
         data-name={KEYS.cronExpression}
         spellcheck={false}
         list="cron-examples"

src/components/Jobs/CronTrue.css

@@ -0,0 +1,16 @@
+@import url("../../styles/vars.css");
+
+.message {
+  white-space: pre-wrap;
+  line-height: 1.5em;
+  margin-bottom: 1em;
+  padding: 1em;
+  border: 1px solid $color-focus;
+  border-radius: 6px;
+}
+
+.error {
+  color: $color-danger-dark;
+  border-color: $color-danger-dark;
+  background-color: $color-danger-light;
+}

src/components/Jobs/CronTrue.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'preact/hooks';
+
+import s from './CronTrue.css';
+import { parseCron } from '../../util/parseCron';
+import { classNames } from '../../util/component';
+import { useFormScope } from '../../hooks/formScope';
+import { useDispatch } from '../../store';
+
+export const CronTrue: FC = () => {
+  const dispatch = useDispatch();
+  const { id, cronExpression } = useFormScope();
+  const [isError, message] = parseCron(cronExpression);
+
+  useEffect(() => {
+    dispatch('items/update', {
+      id,
+      name: 'cronError',
+      value: isError ? message : '',
+    });
+  }, [isError]);
+
+  return (
+    <div className={classNames([s.message, isError && s.error ])}>
+      {message}
+    </div>
+  );
+};

src/components/Jobs/ExecutionConfig.tsx

@@ -1,34 +1,28 @@
-import { useState } from 'preact/hooks';
-
 import s from './styles.css';
-import { CronTrue } from '../CronTrue';
+import { CronTrue } from './CronTrue';
 import { Cron } from './Cron';
 import { Time } from './Time';
 import { CronExamples } from './CronExamples';
 import { DayOfWeek } from './DayOfWeek';
 import { DateInMonth } from './DateInMonth';
 import { PERIOD } from '../../constants';
-import { classNames } from '../../util/component';
 import { useFormScope } from '../../hooks/formScope';
 
 export const ExecutionConfig: FC = () => {
-  const [isError, setValidity] = useState<boolean>(false);
-  const { period, cronExpression } = useFormScope();
+  const { period } = useFormScope();
 
   const isCron = (period === PERIOD.CRON);
 
   const cronOrTime = isCron
-    ? <Cron value={cronExpression} error={isError} />
+    ? <Cron />
     : <Time />;
 
   const cronExamples = isCron && (
     <CronExamples />
   );
 
   const cronMessage = isCron && (
-    <div className={classNames([s.message, isError && s.error ])}>
-      <CronTrue value={cronExpression} setValidity={setValidity} />
-    </div>
+    <CronTrue />
   );
 
   const dayInput = period === PERIOD.WEEKLY && (

src/components/Jobs/styles.css

@@ -169,21 +169,6 @@
   text-align: center;
 }
 
-.message {
-  white-space: pre-wrap;
-  line-height: 1.5em;
-  margin-bottom: 1em;
-  padding: 1em;
-  border: 1px solid $color-focus;
-  border-radius: 6px;
-}
-
-.error {
-  color: $color-danger-dark;
-  border-color: $color-danger-dark;
-  background-color: $color-danger-light;
-}
-
 @media (max-width: $mobile-width) {
   .item {
     min-width: auto;

src/components/Parser/isValidConfig.tsx

@@ -6,7 +6,7 @@ import { reservedWords } from '../../util/reservedWords';
 import { isValidFunctionLocation, isUTCTime, isValidFunctionName } from '../../util/validator';
 import { isString } from '../../util/component';
 import { KEYS, MAX_ITEMS } from '../../constants';
-import { parseCron } from '../CronTrue/parseCron';
+import { parseCron } from '../../util/parseCron';
 
 type TValidResult = [
   hasError: boolean,

src/util/items.ts

@@ -12,6 +12,7 @@ export interface IItem {
   readonly dayOfWeek: TWeekList;
   readonly dateInMonth: number;
   readonly cronExpression: string;
+  readonly cronError?: string;
   readonly period: PERIOD;
   readonly isNew?: boolean;
 }
@@ -100,6 +101,7 @@ export const newItem = (isNew?: boolean): IItem => ({
   dayOfWeek: dDay,
   dateInMonth: 1,
   cronExpression: dCron,
+  cronError: '',
   period: PERIOD.DAILY,
   isNew,
 });

src/components/CronTrue/parseCron.spec.ts → src/util/parseCron.spec.ts

@@ -2,7 +2,7 @@ import { describe, it } from 'node:test';
 import { strictEqual } from 'node:assert/strict';
 
 import { parseCron } from './parseCron';
-import list from '../Tooltip/CronExamplesTooltip/cronExamples.json' with { type: 'json' };
+import list from '../components/Tooltip/CronExamplesTooltip/cronExamples.json' with { type: 'json' };
 
 const invalidList = [
   '* * * * * * *',

webpack.config.js

@@ -154,7 +154,6 @@ const buildConfig = ({ NODE_ENV }) => {
               options: {
                 cacheDirectory: isDev,
                 cacheCompression: false,
-                comments: isDev,
                 compact: isProd,
                 minified: isProd,
                 plugins: [
@@ -175,7 +174,6 @@ const buildConfig = ({ NODE_ENV }) => {
               options: {
                 cacheDirectory: isDev,
                 cacheCompression: false,
-                comments: isDev,
                 compact: isProd,
                 minified: isProd,
                 presets: [