✨ Add BoxConditions and improve ConditionBadge and RepositoryEditor

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

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>
     )

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>