diff --git a/code/frontend/src/components/BoxConditionUser.js b/code/frontend/src/components/BoxConditionUser.js new file mode 100644 index 0000000..748f8d1 --- /dev/null +++ b/code/frontend/src/components/BoxConditionUser.js @@ -0,0 +1,70 @@ +import React, { useContext, useState } from "react" +import BoxFull from "./BoxFull" +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" +import { faAt, faHashtag, faPlus } from "@fortawesome/free-solid-svg-icons" +import InputWithIcon from "./InputWithIcon" +import FormInline from "./FormInline" +import Style from "./BoxConditionHashtag.module.css" +import ButtonIconOnly from "./ButtonIconOnly" +import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor" + + +const INVALID_USER_CHARACTERS = /[^a-zA-Z0-9]/g + + +export default function BoxConditionUser({ ...props }) { + const [user, setUser] = useState("") + const {conditions, appendCondition} = useContext(ContextRepositoryEditor) + + const onInputChange = event => { + let text = event.target.value + text = text.replace(INVALID_USER_CHARACTERS, "") + return setUser(text) + } + + const onButtonClick = () => { + const newCond = { + "id": null, + "type": 3, + "content": user + } + let duplicate = null; + for(const oldCond of conditions) { + if(newCond.type === oldCond.type && newCond.content === oldCond.content) { + duplicate = oldCond; + break; + } + } + + if(duplicate) { + console.debug("Refusing to append ", newCond, " to the Conditions list, as ", duplicate, " already exists.") + } + else { + console.debug("Appending ", newCond, " to the Conditions list") + appendCondition(newCond) + } + + setUser("") + } + + return ( + Search by user} {...props}> + + + + + + ) +} diff --git a/code/frontend/src/components/ConditionBadge.js b/code/frontend/src/components/ConditionBadge.js index a6d125e..668eeb2 100644 --- a/code/frontend/src/components/ConditionBadge.js +++ b/code/frontend/src/components/ConditionBadge.js @@ -3,7 +3,7 @@ import Style from "./ConditionBadge.module.css" import classNames from "classnames" import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" import ButtonSmallX from "./ButtonSmallX" -import { faClock, faHashtag, faMapPin, faUser } from "@fortawesome/free-solid-svg-icons" +import { faAt, faClock, faHashtag, faMapPin } from "@fortawesome/free-solid-svg-icons" import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor" @@ -19,7 +19,7 @@ const CONDITION_ICONS = { 0: faHashtag, // Hashtag 1: faMapPin, // Location 2: faClock, // Time - 3: faUser, // User + 3: faAt, // User }