react-icons/bs#BsExclamationCircleFill JavaScript Examples

The following examples show how to use react-icons/bs#BsExclamationCircleFill. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: TaskCard.js    From fokus with GNU General Public License v3.0 4 votes vote down vote up
export default function TaskCard({ task, taskIndex, focussedTaskGlobalKey, forwardRBDProvided, isFocussed, focussedTaskIndex }) {
    const dispatch = useDispatch();

    const [taskUnderEdit, setTaskUnderEdit] = useState(false);
    const [updatedTaskContent, setUpdatedTaskContent] = useState(task.content);
    const [timeUnderEdit, setTimeUnderEdit] = useState(false);
    const [updatedTime, setUpdatedTime] = useState(Math.floor(task.time / 1000 / 60));
    const [labelUnderEdit, setLabelUnderEdit] = useState(false);
    const [showDragIcon, setShowDragIcon] = useState(false);

    const labels = useSelector((s) => s.tasks.labels);

    let isOldTask = false && !task.isCompleted && new Date() - new Date(task.createdAt) > ONE_DAY;

    function submitUpdatedTaskContent(e) {
        if (e.key === "Enter" && updatedTaskContent.trim().length >= 3) {
            dispatch(updateTaskContent({ id: task.id, updatedTaskContent }));
            setTaskUnderEdit(false);
        }
    }

    function submitUpdatedTime(e) {
        if (e.key === "Enter") {
            dispatch(updateTaskTime({ id: task.id, updatedTime }));
            setTimeUnderEdit(false);
        }
    }

    function markTaskAsDoneHandler() {
        if (taskIndex < focussedTaskIndex) dispatch(focusOnTask(focussedTaskIndex - 1));
        if (task.isRunning) dispatch(toggleIsRunning({ idx: taskIndex }));
        if (isFocussed) {
            updatePageTitle("Fokus");
            dispatch(resetFocussedTask());
        }
        dispatch(toggleIsCompleted(task.id));
        dispatch(rearrange({ id: task.id, markedAsComplete: true }));
        if (taskIndex === focussedTaskIndex) dispatch(toggleSoundscapeState(false));
    }

    function markTaskAsUndoneHandler() {
        if (focussedTaskIndex !== -1 && focussedTaskGlobalKey < task.globalKey) {
            dispatch(focusOnTask(focussedTaskIndex + 1));
        }
        dispatch(toggleIsCompleted(task.id));
        dispatch(rearrange({ id: task.id, markedAsComplete: false }));
    }

    function recreateOldTask(task) {
        let newTask = { ...task };
        newTask.createdAt = new Date().toISOString();
        newTask.isRunning = false;
        newTask.isCompleted = false;
        dispatch(updateTaskObject(newTask));
    }

    function labelSelectOnBlurHandler(taskId, taskLabel, updatedLabel) {
        setLabelUnderEdit(false);
        updatedLabel = updatedLabel === "none" ? null : updatedLabel;
        dispatch(updateTaskLabel({ id: taskId, label: updatedLabel }));
        if (taskLabel !== updatedLabel) dispatch(updateLabelCount({ oldLabel: taskLabel, newLabel: updatedLabel }));
    }

    return (
        <Flipped flipId={`${task.id}`}>
            <TaskCardContainer
                ref={forwardRBDProvided.innerRef}
                {...forwardRBDProvided.draggableProps}
                {...forwardRBDProvided.dragHandleProps}
                onMouseEnter={() => setShowDragIcon(!task.isCompleted && true)}
                onMouseLeave={() => setShowDragIcon(!task.isCompleted && false)}
            >
                <TaskCardDragIcon>{showDragIcon && <DragIcon />}</TaskCardDragIcon>

                <TaskCardDiv isFocussed={isFocussed} labelColor={task.label !== null ? labels[task.label].color : null}>
                    {isOldTask && (
                        <OldTaskStatus data-tip="" data-for="oldtask">
                            <BsExclamationCircleFill />
                            <ReactTooltip id="oldtask" getContent={() => "Task more than 24 hrs old"} />
                        </OldTaskStatus>
                    )}

                    <TaskStatusDiv isFocussed={isFocussed} isCompleted={task.isCompleted}>
                        {task.isCompleted ? (
                            <img src={tickmark} alt="Done" />
                        ) : isFocussed ? (
                            <img src={glowBulb} alt="Focussed" />
                        ) : (
                            <img src={bulb} alt="Unfocussed" />
                        )}
                        {!task.isCompleted &&
                            (timeUnderEdit ? (
                                <TimeEditInput
                                    type="number"
                                    autoFocus
                                    value={updatedTime}
                                    onBlur={() => {
                                        dispatch(updateTaskTime({ id: task.id, updatedTime }));
                                        setTimeUnderEdit(false);
                                    }}
                                    onKeyDown={submitUpdatedTime}
                                    onChange={(e) => setUpdatedTime(e.target.value)}
                                />
                            ) : (
                                <p onDoubleClick={() => setTimeUnderEdit(true)}>{formattedTimeString(task.remainingTime)}</p>
                            ))}
                    </TaskStatusDiv>

                    <TaskDetailsDiv>
                        <TaskContentDiv>
                            {taskUnderEdit ? (
                                <TaskEditInput
                                    type="text"
                                    autoFocus
                                    value={updatedTaskContent}
                                    onBlur={() => {
                                        dispatch(updateTaskContent({ id: task.id, updatedTaskContent }));
                                        setTaskUnderEdit(false);
                                    }}
                                    onKeyDown={submitUpdatedTaskContent}
                                    onChange={(e) => setUpdatedTaskContent(e.target.value)}
                                />
                            ) : (
                                <p onDoubleClick={() => setTaskUnderEdit(true)}>{previewTask(task.content)}</p>
                            )}
                        </TaskContentDiv>

                        {isOldTask ? (
                            <OldTaskControllerDiv>
                                <TaskActionButton
                                    onClick={(e) => {
                                        recreateOldTask(task);
                                        e.stopPropagation();
                                    }}
                                >
                                    <p>Create</p>
                                </TaskActionButton>
                                <TaskActionButton
                                    onClick={(e) => {
                                        if (taskIndex < focussedTaskIndex) dispatch(focusOnTask(focussedTaskIndex - 1));
                                        dispatch(remove(task.id));
                                        if (task.label !== null) dispatch(updateLabelCount({ oldLabel: task.label, newLabel: null }));
                                        e.stopPropagation();
                                    }}
                                >
                                    <p>Delete</p>
                                </TaskActionButton>
                            </OldTaskControllerDiv>
                        ) : (
                            <TaskControllerDiv>
                                {!task.isCompleted && (
                                    <TaskActionButton
                                        onClick={
                                            isFocussed
                                                ? () => {
                                                      if (task.isRunning) dispatch(toggleIsRunning({ idx: focussedTaskIndex }));
                                                      updatePageTitle("Fokus");
                                                      dispatch(resetFocussedTask());
                                                      dispatch(toggleSoundscapeState(false));
                                                  }
                                                : () => {
                                                      if (focussedTaskIndex !== -1) dispatch(toggleIsRunning({ idx: focussedTaskIndex, val: false }));
                                                      dispatch(toggleSoundscapeState(false));
                                                      dispatch(focusOnTask(taskIndex));
                                                  }
                                        }
                                    >
                                        <p>{isFocussed ? "Unfocus" : "Focus"}</p>
                                    </TaskActionButton>
                                )}

                                <TaskActionButton
                                    onClick={(e) => {
                                        if (task.isCompleted) markTaskAsUndoneHandler();
                                        else markTaskAsDoneHandler();
                                        e.stopPropagation();
                                    }}
                                >
                                    <p>{task.isCompleted ? "Undone" : "Done"}</p>
                                </TaskActionButton>

                                <TaskLabelContainer onClick={() => setLabelUnderEdit(true)} labelColor={task.label !== null ? labels[task.label].color : null}>
                                    {labelUnderEdit ? (
                                        <TaskLabelSelect onBlur={labelSelectOnBlurHandler} taskId={task.id} taskLabel={task.label} />
                                    ) : task.label !== null ? (
                                        <p>#{task.label}</p>
                                    ) : (
                                        <p>Add label</p>
                                    )}
                                </TaskLabelContainer>

                                {!isFocussed && (
                                    <TaskDeleteButton
                                        onClick={(e) => {
                                            if (taskIndex < focussedTaskIndex) dispatch(focusOnTask(focussedTaskIndex - 1));
                                            dispatch(remove(task.id));
                                            if (task.label !== null) dispatch(updateLabelCount({ oldLabel: task.label, newLabel: null }));
                                            e.stopPropagation();
                                        }}
                                    >
                                        <BsTrash />
                                    </TaskDeleteButton>
                                )}
                            </TaskControllerDiv>
                        )}
                    </TaskDetailsDiv>
                </TaskCardDiv>
            </TaskCardContainer>
        </Flipped>
    );
}