From 418a06f9397fdbcd38f1cb3fc2ab6489732566e0 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Thu, 29 Apr 2021 05:03:58 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20BoxConditions=20and=20improve?=
 =?UTF-8?q?=20ConditionBadge=20and=20RepositoryEditor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/frontend/src/components/BoxConditions.js | 17 ++++++++
 .../frontend/src/components/ConditionBadge.js | 43 ++++++++++++++++---
 .../src/components/RepositoryEditor.js        |  8 +++-
 3 files changed, 62 insertions(+), 6 deletions(-)
 create mode 100644 code/frontend/src/components/BoxConditions.js

diff --git a/code/frontend/src/components/BoxConditions.js b/code/frontend/src/components/BoxConditions.js
new file mode 100644
index 0000000..22f17b3
--- /dev/null
+++ b/code/frontend/src/components/BoxConditions.js
@@ -0,0 +1,17 @@
+import React, { useContext } from "react"
+import BoxFull from "./BoxFull"
+import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
+import ConditionBadge from "./ConditionBadge"
+
+
+export default function BoxConditions({ ...props }) {
+    const {conditions} = useContext(ContextRepositoryEditor)
+
+    const badges = conditions.map((cond) => <ConditionBadge key={cond.id} {...cond}/>)
+
+    return (
+        <BoxFull header={"Conditions"} {...props}>
+            {badges}
+        </BoxFull>
+    )
+}
diff --git a/code/frontend/src/components/ConditionBadge.js b/code/frontend/src/components/ConditionBadge.js
index bd1c468..113ecfb 100644
--- a/code/frontend/src/components/ConditionBadge.js
+++ b/code/frontend/src/components/ConditionBadge.js
@@ -1,21 +1,54 @@
-import React from "react"
+import React, { useContext } from "react"
 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 ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
 
 
-export default function ConditionBadge({ color, icon, onDelete, children, className, ...props }) {
+const CONDITION_COLORS = {
+    0: "Grey",  // Hashtag
+    1: "Red",  // Location
+    2: "Yellow",  // Time
+    3: "Green",  // User
+}
+
+
+const CONDITION_ICONS = {
+    0: faHashtag,  // Hashtag
+    1: faMapPin,  // Location
+    2: faClock,  // Time
+    3: faUser,  // User
+}
+
+
+/**
+ * A small colored badge representing a Condition for a filter.
+ *
+ * @param condition - The Condition that this badge represents.
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function ConditionBadge(condition) {
+    const { id, type, content } = condition
+    const color = CONDITION_COLORS[type]
+    const icon = CONDITION_ICONS[type]
+    const {removeCondition} = useContext(ContextRepositoryEditor)
+
     return (
-        <div className={classNames(Style.ConditionBadge, Style[`ConditionBadge${color}`], className)} {...props}>
+        <div
+            title={`Condition ID: ${id}`}
+            className={classNames(Style.ConditionBadge, Style[`ConditionBadge${color}`])}
+        >
             <div className={Style.Icon}>
                 <FontAwesomeIcon icon={icon}/>
             </div>
             <div>
-                {children}
+                {content}
             </div>
             <div>
-                <ButtonSmallX onClick={onDelete}/>
+                <ButtonSmallX onClick={() => removeCondition(condition)}/>
             </div>
         </div>
     )
diff --git a/code/frontend/src/components/RepositoryEditor.js b/code/frontend/src/components/RepositoryEditor.js
index ac7b5c2..2c92a3a 100644
--- a/code/frontend/src/components/RepositoryEditor.js
+++ b/code/frontend/src/components/RepositoryEditor.js
@@ -7,7 +7,12 @@ export default function RepositoryEditor({ children, id, name, start, end, condi
     const [_name, setName] = useState(name)
     const [_start, setStart] = useState(start)
     const [_end, setEnd] = useState(end)
-    const {_conditions, appendCondition, removeCondition} = useArrayState(conditions)
+    const {
+        value: _conditions,
+        appendValue: appendCondition,
+        removeValue: removeCondition,
+        spliceValue: spliceCondition,
+    } = useArrayState(conditions)
 
     return (
         <ContextRepositoryEditor.Provider value={{
@@ -21,6 +26,7 @@ export default function RepositoryEditor({ children, id, name, start, end, condi
             conditions: _conditions,
             appendCondition,
             removeCondition,
+            spliceCondition,
         }}>
             {children}
         </ContextRepositoryEditor.Provider>