tissue/resources/assets/js/components/CheckinForm.tsx

import React, { useState, useEffect } from 'react';
import classNames from 'classnames';
import { format } from 'date-fns';
import { CheckBox } from './CheckBox';
import { FieldError, StandaloneFieldError } from './FieldError';
import { TagInput } from './TagInput';
import { MetadataPreview } from './MetadataPreview';

type CheckinFormProps = {
    initialState: any;
};

export const CheckinForm: React.FC<CheckinFormProps> = ({ initialState }) => {
    const mode = initialState.mode;
    const [date, setDate] = useState<string>(initialState.fields.date || '');
    const [time, setTime] = useState<string>(initialState.fields.time || '');
    const [tags, setTags] = useState<string[]>(initialState.fields.tags || []);
    const [link, setLink] = useState<string>(initialState.fields.link || '');
    const [linkForPreview, setLinkForPreview] = useState(link);
    const [note, setNote] = useState<string>(initialState.fields.note || '');
    const [isRealtime, setRealtime] = useState<boolean>(mode === 'create' && initialState.fields.is_realtime);
    const [isPrivate, setPrivate] = useState<boolean>(!!initialState.fields.is_private);
    const [isTooSensitive, setTooSensitive] = useState<boolean>(!!initialState.fields.is_too_sensitive);
    const [discardElapsedTime, setDiscardElapsedTime] = useState<boolean>(!!initialState.fields.discard_elapsed_time);
    useEffect(() => {
        if (mode === 'create' && isRealtime) {
            const id = setInterval(() => {
                const now = new Date();
                setDate(format(now, 'yyyy/MM/dd'));
                setTime(format(now, 'HH:mm'));
            }, 500);
            return () => clearInterval(id);
        }
    }, [mode, isRealtime]);

    return (
        <>
            <div className="form-row">
                {mode === 'create' && (
                    <div className="col-sm-12 mb-2">
                        <CheckBox
                            id="isRealtime"
                            name="is_realtime"
                            checked={isRealtime}
                            onChange={(v) => setRealtime(v)}
                        >
                            現在時刻でチェックイン
                        </CheckBox>
                    </div>
                )}
                <div className="form-group col-sm-6">
                    <label htmlFor="date">
                        <span className="oi oi-calendar" /> 日付
                    </label>
                    <input
                        type="text"
                        id="date"
                        name="date"
                        className={classNames({
                            'form-control': true,
                            'is-invalid': initialState.errors?.date || initialState.errors?.datetime,
                        })}
                        pattern="^20[0-9]{2}/(0[1-9]|1[0-2])/(0[1-9]|[12][0-9]|3[01])$"
                        required
                        value={date}
                        onChange={(e) => setDate(e.target.value)}
                        disabled={isRealtime}
                    />
                    <FieldError errors={initialState.errors?.date} />
                </div>
                <div className="form-group col-sm-6">
                    <label htmlFor="time">
                        <span className="oi oi-clock" /> 時刻
                    </label>
                    <input
                        type="text"
                        id="time"
                        name="time"
                        className={classNames({
                            'form-control': true,
                            'is-invalid': initialState.errors?.time || initialState.errors?.datetime,
                        })}
                        pattern="^([01][0-9]|2[0-3]):[0-5][0-9]$"
                        required
                        value={time}
                        onChange={(e) => setTime(e.target.value)}
                        disabled={isRealtime}
                    />
                    <FieldError errors={initialState.errors?.time} />
                </div>
                <StandaloneFieldError errors={initialState.errors?.datetime} />
            </div>
            <div className="form-row">
                <div className="form-group col-sm-12">
                    <label htmlFor="tagInput">
                        <span className="oi oi-tags" /> タグ
                    </label>
                    <TagInput
                        id="tagInput"
                        name="tags"
                        values={tags}
                        isInvalid={!!initialState.errors?.tags}
                        onChange={(v) => setTags(v)}
                    />
                    <small className="form-text text-muted">Tab, Enter, 半角スペースのいずれかで入力確定します。</small>
                    <FieldError errors={initialState.errors?.tags} />
                </div>
            </div>
            <div className="form-row">
                <div className="form-group col-sm-12">
                    <label htmlFor="link">
                        <span className="oi oi-link-intact" /> オカズリンク
                    </label>
                    <input
                        type="text"
                        id="link"
                        name="link"
                        autoComplete="off"
                        className={classNames({ 'form-control': true, 'is-invalid': initialState.errors?.link })}
                        placeholder="http://..."
                        value={link}
                        onChange={(e) => setLink(e.target.value)}
                        onBlur={() => setLinkForPreview(link)}
                    />
                    <small className="form-text text-muted">オカズのURLを貼り付けて登録することができます。</small>
                    <FieldError errors={initialState.errors?.link} />
                </div>
            </div>
            <MetadataPreview link={linkForPreview} tags={tags} onClickTag={(v) => setTags(tags.concat(v))} />
            <div className="form-row">
                <div className="form-group col-sm-12">
                    <label htmlFor="note">
                        <span className="oi oi-comment-square" /> ノート
                    </label>
                    <textarea
                        id="note"
                        name="note"
                        className={classNames({ 'form-control': true, 'is-invalid': initialState.errors?.note })}
                        rows={4}
                        value={note}
                        onChange={(e) => setNote(e.target.value)}
                    />
                    <small className="form-text text-muted">最大 500 文字</small>
                    <FieldError errors={initialState.errors?.note} />
                </div>
            </div>
            <div className="form-row mt-4">
                <p>オプション</p>
                <div className="form-group col-sm-12">
                    <CheckBox
                        id="isPrivate"
                        name="is_private"
                        className="mb-3"
                        checked={isPrivate}
                        onChange={(v) => setPrivate(v)}
                    >
                        <span className="oi oi-lock-locked" /> このチェックインを非公開にする
                    </CheckBox>
                    <CheckBox
                        id="isTooSensitive"
                        name="is_too_sensitive"
                        className="mb-3"
                        checked={isTooSensitive}
                        onChange={(v) => setTooSensitive(v)}
                    >
                        <span className="oi oi-warning" /> チェックイン対象のオカズをより過激なオカズとして設定する
                    </CheckBox>
                    <CheckBox
                        id="discardElapsedTime"
                        name="discard_elapsed_time"
                        className="mb-3"
                        checked={discardElapsedTime}
                        onChange={(v) => setDiscardElapsedTime(v)}
                    >
                        <span className="oi oi-timer" /> 前回チェックインからの経過時間を記録しない
                        <br />
                        <small className="form-text text-muted">
                            長期間お使いにならなかった場合など、経過時間に意味が無い時のリセット用オプションです。
                            <ul className="pl-3">
                                <li>最長・最短記録の計算から除外されます。</li>
                                <li>平均記録の起点がこのチェックインになります。</li>
                            </ul>
                        </small>
                    </CheckBox>
                </div>
            </div>
            <div className="text-center">
                <button className="btn btn-primary" type="submit">
                    チェックイン
                </button>
            </div>
        </>
    );
};