<commit_before>import PropTypes from "prop-types";
import {forwardRef, useEffect, useState} from "react";

import {getCurrentUser} from "../../api/services/session.service";
import {addPresenceConfirmation} from "../../contexts/presence-context/actions/addPresenceConfirmation";
import {fetchMyPresenceConfirmations} from "../../contexts/presence-context/actions/fetchMyPresenceConfirmations";
import {usePresence} from "../../contexts/presence-context/presenceContext";
import {formattedDate, formattedTime} from "../../helpers/DateHelper";
import {DatePicker} from "../date-picker/DatePicker";
import {TimePicker} from "../time-picker/TimePicker";
import {ConfirmationLabel} from "./ConfirmationLabel";
import styles from './PresenceConfirmationPanel.module.scss'

const getTime = (hours, minutes) => {
    const date = new Date()
    date.setHours(hours, minutes)
    return date
}

export const PresenceConfirmationPanel = ({userId, onConfirmation}) => {
    const [state, presenceDispatcher] = usePresence()
    const {confirmations: myConfirmations} = state.myConfirmations
    const {confirmations: usersConfirmations} = state.usersConfirmations
    const {fetching} = userId ? state.usersConfirmations : state.myConfirmations

    const TODAY = new Date()
    const [chosenDate, setChosenDate] = useState(TODAY)
    const [chosenStartTime, setChosenStartTime] = useState(getTime(8, 0))
    const [chosenEndTime, setChosenEndTime] = useState(getTime(16, 0))

    useEffect(() => {
        fetchMyPresenceConfirmations(presenceDispatcher)
    }, [presenceDispatcher])

    const handlePresenceConfirmation = () => {
        const currentUser = getCurrentUser()
        addPresenceConfirmation(presenceDispatcher, {
            date: formattedDate(chosenDate),
            startTime: formattedTime(chosenStartTime),
            endTime: formattedTime(chosenEndTime),
            userId: userId || currentUser.userId
        })
        onConfirmation(formattedDate(chosenDate));
    }

    const DateTimePickerInput = forwardRef(({ value, onClick }, ref) => {
        return (
            <button className={styles.dateTimePickerInput} onClick={onClick} ref={ref}>
                {value}
            </button>
        )
    });

    const InputWrapper = ({children}) => {
        return <div className={styles.inputWrapper}>{children}</div>
    }

    const LineBreak = () => <div className={styles.lineBreak}/>

    const getConfirmation = (date) => {
        if (userId) {
            return usersConfirmations[userId] && usersConfirmations[userId][formattedDate(date)]
        }
        return myConfirmations[formattedDate(date)]
    }

    return (
        <div className={styles.mainContainer}>
            <div className={styles.flexContainer}>
                <InputWrapper>
                    Data
                    <DatePicker
                        withWeekend={false}
                        customInput={<DateTimePickerInput />}
                        chosenDate={chosenDate}
                        onChange={date => setChosenDate(date)}
                    />
                </InputWrapper>
                <div className={styles.timePickersContainer}>
                    <InputWrapper>
                        Godziny pracy
                        <TimePicker
                            customInput={<DateTimePickerInput />}
                            chosenTime={chosenStartTime}
                            onChange={date => setChosenStartTime(date)}
                        />
                    </InputWrapper>
                    <InputWrapper>
                        <LineBreak/>
                        <div className={styles.dash} />
                    </InputWrapper>
                    <InputWrapper>
                        <LineBreak/>
                        <TimePicker
                            customInput={<DateTimePickerInput />}
                            chosenTime={chosenEndTime}
                            onChange={date => setChosenEndTime(date)}
                        />
                    </InputWrapper>
                </div>
                <button
                    className={styles.presenceConfirmationButton}
                    onClick={() => handlePresenceConfirmation()}
                >
                    {getConfirmation(chosenDate) ? "Zaktualizuj obecność" : "Zgłoś obecność"}
                </button>
            </div>
            <ConfirmationLabel
                fetching={fetching}
                confirmation={getConfirmation(chosenDate)}
                isOwnPresence={userId === undefined}
            />
        </div>
    )
}

PresenceConfirmationPanel.propTypes = {
    userId: PropTypes.number.isRequired,
    onConfirmation: PropTypes.func.isRequired,
}<commit_msg>https://jira.fingo.info/browse/PRAK-163 Fix onConfirmation error in 'PresenceConfirmationPanel.jsx'<commit_after>import PropTypes from "prop-types";
import {forwardRef, useEffect, useState} from "react";

import {getCurrentUser} from "../../api/services/session.service";
import {addPresenceConfirmation} from "../../contexts/presence-context/actions/addPresenceConfirmation";
import {fetchMyPresenceConfirmations} from "../../contexts/presence-context/actions/fetchMyPresenceConfirmations";
import {usePresence} from "../../contexts/presence-context/presenceContext";
import {formattedDate, formattedTime} from "../../helpers/DateHelper";
import {DatePicker} from "../date-picker/DatePicker";
import {TimePicker} from "../time-picker/TimePicker";
import {ConfirmationLabel} from "./ConfirmationLabel";
import styles from './PresenceConfirmationPanel.module.scss'

const getTime = (hours, minutes) => {
    const date = new Date()
    date.setHours(hours, minutes)
    return date
}

export const PresenceConfirmationPanel = ({userId, onConfirmation}) => {
    const [state, presenceDispatcher] = usePresence()
    const {confirmations: myConfirmations} = state.myConfirmations
    const {confirmations: usersConfirmations} = state.usersConfirmations
    const {fetching} = userId ? state.usersConfirmations : state.myConfirmations

    const TODAY = new Date();
    const [chosenDate, setChosenDate] = useState(TODAY)
    const [chosenStartTime, setChosenStartTime] = useState(getTime(8, 0))
    const [chosenEndTime, setChosenEndTime] = useState(getTime(16, 0))

    useEffect(() => {
        fetchMyPresenceConfirmations(presenceDispatcher)
    }, [presenceDispatcher])

    const handlePresenceConfirmation = () => {
        const currentUser = getCurrentUser()
        addPresenceConfirmation(presenceDispatcher, {
            date: formattedDate(chosenDate),
            startTime: formattedTime(chosenStartTime),
            endTime: formattedTime(chosenEndTime),
            userId: userId || currentUser.userId
        })
        onConfirmation(formattedDate(chosenDate));
    }

    const DateTimePickerInput = forwardRef(({ value, onClick }, ref) => {
        return (
            <button className={styles.dateTimePickerInput} onClick={onClick} ref={ref}>
                {value}
            </button>
        )
    });

    const InputWrapper = ({children}) => {
        return <div className={styles.inputWrapper}>{children}</div>
    }

    const LineBreak = () => <div className={styles.lineBreak}/>

    const getConfirmation = (date) => {
        if (userId) {
            return usersConfirmations[userId] && usersConfirmations[userId][formattedDate(date)]
        }
        return myConfirmations[formattedDate(date)]
    }

    return (
        <div className={styles.mainContainer}>
            <div className={styles.flexContainer}>
                <InputWrapper>
                    Data
                    <DatePicker
                        withWeekend={false}
                        customInput={<DateTimePickerInput />}
                        chosenDate={chosenDate}
                        onChange={date => setChosenDate(date)}
                    />
                </InputWrapper>
                <div className={styles.timePickersContainer}>
                    <InputWrapper>
                        Godziny pracy
                        <TimePicker
                            customInput={<DateTimePickerInput />}
                            chosenTime={chosenStartTime}
                            onChange={date => setChosenStartTime(date)}
                        />
                    </InputWrapper>
                    <InputWrapper>
                        <LineBreak/>
                        <div className={styles.dash} />
                    </InputWrapper>
                    <InputWrapper>
                        <LineBreak/>
                        <TimePicker
                            customInput={<DateTimePickerInput />}
                            chosenTime={chosenEndTime}
                            onChange={date => setChosenEndTime(date)}
                        />
                    </InputWrapper>
                </div>
                <button
                    className={styles.presenceConfirmationButton}
                    onClick={() => handlePresenceConfirmation()}
                >
                    {getConfirmation(chosenDate) ? "Zaktualizuj obecność" : "Zgłoś obecność"}
                </button>
            </div>
            <ConfirmationLabel
                fetching={fetching}
                confirmation={getConfirmation(chosenDate)}
                isOwnPresence={userId === undefined}
            />
        </div>
    )
}

PresenceConfirmationPanel.propTypes = {
    userId: PropTypes.number.isRequired,
    onConfirmation: PropTypes.func,
}

PresenceConfirmationPanel.defaultProps = {
    onConfirmation: () => {},
}
{'fraction_non_alphanumeric': 0.10790995456422965, 'fraction_numerical': 0.0013424204874019, 'mean_word_length': 1.982753310748383, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 90, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3406867', 'n_tokens_mistral': 2442, 'n_tokens_neox': 2385, 'n_words': 431}