✨ Add component BoxConditionUser

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 (
+        <BoxFull header={<span>Search by <FontAwesomeIcon icon={faAt}/> user</span>} {...props}>
+            <FormInline>
+                <InputWithIcon
+                    className={Style.Input}
+                    id={"condition-hashtag"}
+                    icon={faAt}
+                    value={user}
+                    onChange={onInputChange}
+                    placeholder={"jack"}
+                />
+                <ButtonIconOnly
+                    className={Style.Button}
+                    icon={faPlus}
+                    color={"Green"}
+                    onClick={onButtonClick}
+                />
+            </FormInline>
+        </BoxFull>
+    )
+}

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
 }