From 8c0fc2bd8a785da60d0a912d00aa066c069746b3 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Thu, 29 Apr 2021 16:23:11 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20component=20BoxConditionUser?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/BoxConditionUser.js        | 70 +++++++++++++++++++
 .../frontend/src/components/ConditionBadge.js |  4 +-
 2 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 code/frontend/src/components/BoxConditionUser.js

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 (
+        <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>
+    )
+}
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
 }