🔧 Refactor BoxCondition*

code/frontend/src/components/interactive/BoxConditionDatetime.js

@@ -8,9 +8,11 @@ import Style from "./BoxConditionDatetime.module.css"
 import ButtonIconOnly from "../base/ButtonIconOnly"
 import useRepositoryEditor from "../../hooks/useRepositoryEditor"
 import ButtonToggleBeforeAfter from "./ButtonToggleBeforeAfter"
+import Condition from "../../utils/Condition"
+import convertToLocalISODate from "../../utils/convertToLocalISODate"
 
 
-const INVALID_USER_CHARACTERS = /[^0-9TZ:-]/g
+const INVALID_USER_CHARACTERS = /[^0-9TZ:+-]/g
 
 
 /**
@@ -24,7 +26,7 @@ const INVALID_USER_CHARACTERS = /[^0-9TZ:-]/g
 export default function BoxConditionDatetime({ ...props }) {
     const [datetime, setDatetime] = useState("")
     const [ba, setBa] = useState(false)
-    const {conditions, appendCondition} = useRepositoryEditor()
+    const {addCondition} = useRepositoryEditor()
 
     const onInputChange = event => {
         let text = event.target.value
@@ -34,39 +36,13 @@ export default function BoxConditionDatetime({ ...props }) {
     }
 
     const onButtonClick = () => {
-        const newCond = {
+        const naive = new Date(datetime)
-            "id": null,
+        if(naive.toString() === "Invalid Date") {
-            "type": 2,
+            console.debug("Refusing to add condition: ", naive , " is an Invalid Date.")
-            "content": `${ba ? ">" : "<"} ${datetime}`
-        }
-
-        const date = new Date(datetime)
-        if(date.toString() === "Invalid Date") {
-            console.debug("Refusing to append ", newCond, " to the Conditions list, as it is invalid.")
             return
         }
-
+        const aware = convertToLocalISODate(naive)
-        if(datetime === "") {
+        addCondition(new Condition("TIME", `${ba ? ">" : "<"} ${aware}`))
-            console.debug("Refusing to append ", newCond, " to the Conditions list, as it is empty.")
-            return
-        }
-
-        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)
-        }
-
         setDatetime("")
     }
 
@@ -81,7 +57,7 @@ export default function BoxConditionDatetime({ ...props }) {
                     icon={faClock}
                     value={datetime}
                     onChange={onInputChange}
-                    placeholder={"2021-12-31T23:59"}
+                    placeholder={"2021-12-31T23:59Z"}
                 />
                 <ButtonIconOnly
                     className={Style.Button}

code/frontend/src/components/interactive/BoxConditionHashtag.js

@@ -7,6 +7,7 @@ import FormInline from "../base/FormInline"
 import Style from "./BoxConditionHashtag.module.css"
 import ButtonIconOnly from "../base/ButtonIconOnly"
 import useRepositoryEditor from "../../hooks/useRepositoryEditor"
+import Condition from "../../utils/Condition"
 
 // Official hashtag regex from https://stackoverflow.com/a/22490853/4334568
 // noinspection RegExpAnonymousGroup,LongLine
@@ -23,7 +24,7 @@ const INVALID_HASHTAG_CHARACTERS = /([^a-z0-9_\u00c0-\u00d6\u00d8-\u00f6\u00f8-\
  */
 export default function BoxConditionHashtag({ ...props }) {
     const [hashtag, setHashtag] = useState("")
-    const {conditions, appendCondition} = useRepositoryEditor()
+    const {addCondition} = useRepositoryEditor()
 
     const onInputChange = event => {
         let text = event.target.value
@@ -32,33 +33,7 @@ export default function BoxConditionHashtag({ ...props }) {
     }
 
     const onButtonClick = () => {
-        const newCond = {
+        addCondition(new Condition("HASHTAG", hashtag))
-            "id": null,
-            "type": 0,
-            "content": hashtag
-        }
-
-        if(hashtag === "") {
-            console.debug("Refusing to append ", newCond, " to the Conditions list, as it is empty.")
-            return
-        }
-
-        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)
-        }
-
         setHashtag("")
     }
 

code/frontend/src/components/interactive/BoxConditionMap.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useCallback, useState, useRef, useMemo } from "react"
 import BoxFull from "../base/BoxFull"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import { faMapPin, faPlus } from "@fortawesome/free-solid-svg-icons"
@@ -7,6 +7,7 @@ import Style from "./BoxConditionMap.module.css"
 import ButtonIconOnly from "../base/ButtonIconOnly"
 import { MapContainer, Marker, TileLayer } from "react-leaflet"
 import useRepositoryEditor from "../../hooks/useRepositoryEditor"
+import Condition from "../../utils/Condition"
 
 
 const STARTING_POSITION = [41.89309, 12.48289]
@@ -21,38 +22,30 @@ const STARTING_ZOOM = 3
  * @constructor
  */
 export default function BoxConditionMap({ ...props }) {
-    const [user, setUser] = useState("")
+    const [position, setPosition] = useState({lat: STARTING_POSITION[0], lng: STARTING_POSITION[1]})
-    const {conditions, appendCondition} = useRepositoryEditor()
+    const {addCondition} = useRepositoryEditor()
+
+    const markerRef = useRef(null)
+    const eventHandlers = useMemo(
+        () => ({
+            dragend() {
+                const marker = markerRef.current
+                if (marker != null) {
+                    const pos = marker.getLatLng()
+                    console.debug("Changing marker position to: ", pos)
+                    setPosition(pos)
+                }
+            },
+        }),
+        [],
+    )
 
     const onButtonClick = () => {
-        const newCond = {
+        addCondition(new Condition(
-            "id": null,
+            "COORDINATES",
-            "type": 1,
+            `WIP WIP ${position.lat.toFixed(6)} ${position.lng.toFixed(6)}`
-            "content": null
+        ))
-        }
+        setPosition({lat: STARTING_POSITION[0], lng: STARTING_POSITION[1]})
-
-        if(user === "") {
-            console.debug("Refusing to append ", newCond, " to the Conditions list, as it is empty.")
-            return
-        }
-
-        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 (
@@ -70,8 +63,14 @@ export default function BoxConditionMap({ ...props }) {
                     attribution='(c) <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
                     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                 />
-                <Marker draggable={true} position={STARTING_POSITION}/>
+                <Marker ref={markerRef} draggable={true} position={position} eventHandlers={eventHandlers}/>
             </MapContainer>
+            <ButtonIconOnly
+                className={Style.Button}
+                icon={faPlus}
+                color={"Green"}
+                onClick={onButtonClick}
+            />
         </BoxFull>
     )
 }

code/frontend/src/components/interactive/BoxConditionUser.js

@@ -7,6 +7,7 @@ import FormInline from "../base/FormInline"
 import Style from "./BoxConditionUser.module.css"
 import ButtonIconOnly from "../base/ButtonIconOnly"
 import useRepositoryEditor from "../../hooks/useRepositoryEditor"
+import Condition from "../../utils/Condition"
 
 
 const INVALID_USER_CHARACTERS = /[^a-zA-Z0-9]/g
@@ -22,7 +23,7 @@ const INVALID_USER_CHARACTERS = /[^a-zA-Z0-9]/g
  */
 export default function BoxConditionUser({ ...props }) {
     const [user, setUser] = useState("")
-    const {conditions, appendCondition} = useRepositoryEditor()
+    const {addCondition} = useRepositoryEditor()
 
     const onInputChange = event => {
         let text = event.target.value
@@ -31,33 +32,7 @@ export default function BoxConditionUser({ ...props }) {
     }
 
     const onButtonClick = () => {
-        const newCond = {
+        addCondition(new Condition("USER", user))
-            "id": null,
-            "type": 3,
-            "content": user
-        }
-
-        if(user === "") {
-            console.debug("Refusing to append ", newCond, " to the Conditions list, as it is empty.")
-            return
-        }
-
-        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("")
     }
 

code/frontend/src/components/interactive/ConditionBadge.js

@@ -3,23 +3,25 @@ import Style from "./ConditionBadge.module.css"
 import classNames from "classnames"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import ButtonSmallX from "../base/ButtonSmallX"
-import { faAt, faClock, faHashtag, faMapPin } from "@fortawesome/free-solid-svg-icons"
+import { faAt, faClock, faGlobe, faHashtag, faMapPin } from "@fortawesome/free-solid-svg-icons"
 import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
 
 
 const CONDITION_COLORS = {
     0: "Grey",  // Hashtag
-    1: "Red",  // Location
     2: "Yellow",  // Time
-    3: "Green",  // User
+    3: "Red",  // Coordinates
+    4: "Red",  // Place
+    5: "Green",  // User
 }
 
 
 const CONDITION_ICONS = {
     0: faHashtag,  // Hashtag
-    1: faMapPin,  // Location
     2: faClock,  // Time
-    3: faAt,  // User
+    3: faGlobe,  // Coordinates
+    4: faMapPin,  // Place
+    5: faAt,  // User
 }
 
 
@@ -34,23 +36,23 @@ export default function ConditionBadge({ ...condition }) {
     const { id, type, content } = condition
     const color = CONDITION_COLORS[type]
     const icon = CONDITION_ICONS[type]
-    const {removeCondition} = useContext(ContextRepositoryEditor)
+    const {removeRawCondition} = useContext(ContextRepositoryEditor)
 
     return (
         <div
-            title={`Condition ID: ${id}`}
+            title={id ? `💠 Condition ID: ${id}` : "✨ New Condition"}
             className={classNames(Style.ConditionBadge, Style[`ConditionBadge${color}`])}
         >
             <div className={Style.Icon}>
                 <FontAwesomeIcon icon={icon}/>
             </div>
-            <div>
+            <div className={Style.Text}>
                 {content}
             </div>
             <div>
                 <ButtonSmallX onClick={() => {
                     console.debug(`Removing Condition: `, condition)
-                    removeCondition(condition)
+                    removeRawCondition(condition)
                 }}/>
             </div>
         </div>

code/frontend/src/components/interactive/ConditionBadge.module.css

@@ -5,9 +5,6 @@
     padding: 0 5px;
     border-radius: 25px;
     margin: 0 2px;
-
-    max-width: 200px;
-    overflow-x: hidden;
 }
 
 .ConditionBadgeRed {
@@ -30,6 +27,11 @@
     color: var(--fg-green)
 }
 
+.Text {
+    max-width: 350px;
+    overflow-x: hidden;
+}
+
 .Icon {
     width: 15px;
     text-align: center;